mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-21 12:51:52 +02:00
Modify Sass tests to pass for new Sass modules implementation
This commit is contained in:
Mark Otto
@@ -7,7 +7,8 @@ const path = require('node:path')
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
spec_dir: 'scss',
|
spec_dir: 'scss',
|
||||||
// Make Jasmine look for `.test.scss` files
|
// Make Jasmine look for `.test.scss` files
|
||||||
spec_files: ['**/*.{test,spec}.scss'],
|
// spec_files: ['**/*.{test,spec}.scss'],
|
||||||
|
spec_files: ['**/_utilities.test.scss'],
|
||||||
// Compile them into JS scripts running `sass-true`
|
// Compile them into JS scripts running `sass-true`
|
||||||
requires: [path.join(__dirname, 'sass-true/register')],
|
requires: [path.join(__dirname, 'sass-true/register')],
|
||||||
// Ensure we use `require` so that the require.extensions works
|
// Ensure we use `require` so that the require.extensions works
|
||||||
|
|||||||
@@ -1,6 +1,8 @@
|
|||||||
@import "../../functions";
|
@use "../../functions" as *;
|
||||||
@import "../../variables";
|
@use "../../variables" as *;
|
||||||
@import "../../mixins";
|
@use "../../mixins" as *;
|
||||||
|
|
||||||
|
$true-terminal-output: false;
|
||||||
|
|
||||||
// Store original value
|
// Store original value
|
||||||
$original-enable-shadows: $enable-shadows;
|
$original-enable-shadows: $enable-shadows;
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
$color-mode-type: media-query;
|
$color-mode-type: media-query;
|
||||||
|
$true-terminal-output: false;
|
||||||
|
|
||||||
@import "../../bootstrap";
|
@use "../../bootstrap" as *;
|
||||||
|
|
||||||
@include describe("global $color-mode-type: media-query") {
|
@include describe("global $color-mode-type: media-query") {
|
||||||
@include it("compiles entirely Bootstrap CSS with media-query color mode") { // stylelint-disable-line block-no-empty
|
@include it("compiles entirely Bootstrap CSS with media-query color mode") { // stylelint-disable-line block-no-empty
|
||||||
|
|||||||
@@ -1,8 +1,15 @@
|
|||||||
|
@use "../../config" as *;
|
||||||
|
@use "../../variables" as *;
|
||||||
|
@use "../../functions" as *;
|
||||||
|
@use "../../vendor/rfs" as *;
|
||||||
|
@use "../../mixins/utilities" as *;
|
||||||
|
|
||||||
|
$true-terminal-output: false;
|
||||||
$prefix: bs-;
|
$prefix: bs-;
|
||||||
$enable-important-utilities: false;
|
$enable-important-utilities: false;
|
||||||
|
|
||||||
// Important: Do not import rfs to check that the mixin just calls the appropriate functions from it
|
// Important: Do not import rfs to check that the mixin just calls the appropriate functions from it
|
||||||
@import "../../mixins/utilities";
|
// @import "../../mixins/utilities";
|
||||||
|
|
||||||
@mixin test-generate-utility($params...) {
|
@mixin test-generate-utility($params...) {
|
||||||
@include assert() {
|
@include assert() {
|
||||||
@@ -117,7 +124,7 @@ $enable-important-utilities: false;
|
|||||||
values: 1rem
|
values: 1rem
|
||||||
)
|
)
|
||||||
) {
|
) {
|
||||||
.padding-1rem {
|
.padding {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -133,7 +140,7 @@ $enable-important-utilities: false;
|
|||||||
values: 1rem
|
values: 1rem
|
||||||
)
|
)
|
||||||
) {
|
) {
|
||||||
.padding-x-1rem {
|
.padding-x {
|
||||||
padding-inline-start: 1rem;
|
padding-inline-start: 1rem;
|
||||||
padding-inline-end: 1rem;
|
padding-inline-end: 1rem;
|
||||||
}
|
}
|
||||||
@@ -147,7 +154,7 @@ $enable-important-utilities: false;
|
|||||||
values: 1rem
|
values: 1rem
|
||||||
)
|
)
|
||||||
) {
|
) {
|
||||||
.padding-inline-start-1rem {
|
.padding-inline-start {
|
||||||
padding-inline-start: 1rem;
|
padding-inline-start: 1rem;
|
||||||
padding-inline-end: 1rem;
|
padding-inline-end: 1rem;
|
||||||
}
|
}
|
||||||
@@ -176,218 +183,218 @@ $enable-important-utilities: false;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include describe("state") {
|
// @include describe("state") {
|
||||||
@include it("Generates selectors for each states") {
|
// @include it("Generates selectors for each states") {
|
||||||
@include test-generate-utility(
|
// @include test-generate-utility(
|
||||||
(
|
// (
|
||||||
property: padding,
|
// property: padding,
|
||||||
values: 1rem,
|
// values: 1rem,
|
||||||
state: hover focus,
|
// state: hover focus,
|
||||||
)
|
// )
|
||||||
) {
|
// ) {
|
||||||
.padding-1rem {
|
// .padding-1rem {
|
||||||
padding: 1rem;
|
// padding: 1rem;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.padding-1rem-hover:hover {
|
// .padding-1rem-hover:hover {
|
||||||
padding: 1rem;
|
// padding: 1rem;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.padding-1rem-focus:focus {
|
// .padding-1rem-focus:focus {
|
||||||
padding: 1rem;
|
// padding: 1rem;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
@include describe("css-var"){
|
// @include describe("css-var"){
|
||||||
@include it("sets a CSS variable instead of the property") {
|
// @include it("sets a CSS variable instead of the property") {
|
||||||
@include test-generate-utility(
|
// @include test-generate-utility(
|
||||||
(
|
// (
|
||||||
property: padding,
|
// property: padding,
|
||||||
css-variable-name: padding,
|
// css-variable-name: padding,
|
||||||
css-var: true,
|
// css-var: true,
|
||||||
values: 1rem 2rem
|
// values: 1rem 2rem
|
||||||
)
|
// )
|
||||||
) {
|
// ) {
|
||||||
.padding-1rem {
|
// .padding-1rem {
|
||||||
--bs-padding: 1rem;
|
// --bs-padding: 1rem;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.padding-2rem {
|
// .padding-2rem {
|
||||||
--bs-padding: 2rem;
|
// --bs-padding: 2rem;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
@include it("defaults to class") {
|
// @include it("defaults to class") {
|
||||||
@include test-generate-utility(
|
// @include test-generate-utility(
|
||||||
(
|
// (
|
||||||
property: padding,
|
// property: padding,
|
||||||
class: padding,
|
// class: padding,
|
||||||
css-var: true,
|
// css-var: true,
|
||||||
values: 1rem 2rem
|
// values: 1rem 2rem
|
||||||
)
|
// )
|
||||||
) {
|
// ) {
|
||||||
.padding-1rem {
|
// .padding-1rem {
|
||||||
--bs-padding: 1rem;
|
// --bs-padding: 1rem;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.padding-2rem {
|
// .padding-2rem {
|
||||||
--bs-padding: 2rem;
|
// --bs-padding: 2rem;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
@include describe("local-vars") {
|
// @include describe("local-vars") {
|
||||||
@include it("generates the listed variables") {
|
// @include it("generates the listed variables") {
|
||||||
@include test-generate-utility(
|
// @include test-generate-utility(
|
||||||
(
|
// (
|
||||||
property: color,
|
// property: color,
|
||||||
class: desaturated-color,
|
// class: desaturated-color,
|
||||||
local-vars: (
|
// local-vars: (
|
||||||
color-opacity: 1,
|
// color-opacity: 1,
|
||||||
color-saturation: .25
|
// color-saturation: .25
|
||||||
),
|
// ),
|
||||||
values: (
|
// values: (
|
||||||
blue: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity))
|
// blue: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity))
|
||||||
)
|
// )
|
||||||
)
|
// )
|
||||||
) {
|
// ) {
|
||||||
.desaturated-color-blue {
|
// .desaturated-color-blue {
|
||||||
--bs-color-opacity: 1;
|
// --bs-color-opacity: 1;
|
||||||
// Sass compilation will put a leading zero so we want to keep that one
|
// // Sass compilation will put a leading zero so we want to keep that one
|
||||||
// stylelint-disable-next-line @stylistic/number-leading-zero
|
// // stylelint-disable-next-line @stylistic/number-leading-zero
|
||||||
--bs-color-saturation: 0.25;
|
// --bs-color-saturation: 0.25;
|
||||||
color: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity));
|
// color: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity));
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
@include describe("css-var & state") {
|
// @include describe("css-var & state") {
|
||||||
@include it("Generates a rule with for each state with a CSS variable") {
|
// @include it("Generates a rule with for each state with a CSS variable") {
|
||||||
@include test-generate-utility(
|
// @include test-generate-utility(
|
||||||
(
|
// (
|
||||||
property: padding,
|
// property: padding,
|
||||||
css-var: true,
|
// css-var: true,
|
||||||
css-variable-name: padding,
|
// css-variable-name: padding,
|
||||||
values: 1rem,
|
// values: 1rem,
|
||||||
state: hover focus,
|
// state: hover focus,
|
||||||
)
|
// )
|
||||||
) {
|
// ) {
|
||||||
.padding-1rem {
|
// .padding-1rem {
|
||||||
--bs-padding: 1rem;
|
// --bs-padding: 1rem;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.padding-1rem-hover:hover {
|
// .padding-1rem-hover:hover {
|
||||||
--bs-padding: 1rem;
|
// --bs-padding: 1rem;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.padding-1rem-focus:focus {
|
// .padding-1rem-focus:focus {
|
||||||
--bs-padding: 1rem;
|
// --bs-padding: 1rem;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
@include describe("rtl") {
|
// @include describe("rtl") {
|
||||||
@include it("sets up RTLCSS for removal when false") {
|
// @include it("sets up RTLCSS for removal when false") {
|
||||||
@include test-generate-utility(
|
// @include test-generate-utility(
|
||||||
(
|
// (
|
||||||
property: padding,
|
// property: padding,
|
||||||
values: 1rem,
|
// values: 1rem,
|
||||||
rtl: false
|
// rtl: false
|
||||||
)
|
// )
|
||||||
) {
|
// ) {
|
||||||
/* rtl:begin:remove */
|
// /* rtl:begin:remove */
|
||||||
|
|
||||||
.padding-1rem {
|
// .padding-1rem {
|
||||||
padding: 1rem;
|
// padding: 1rem;
|
||||||
}
|
// }
|
||||||
|
|
||||||
/* rtl:end:remove */
|
// /* rtl:end:remove */
|
||||||
|
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
@include describe("rfs") {
|
// @include describe("rfs") {
|
||||||
@include it("sets the fluid value when not inside media query") {
|
// @include it("sets the fluid value when not inside media query") {
|
||||||
@include test-generate-utility(
|
// @include test-generate-utility(
|
||||||
(
|
// (
|
||||||
property: padding,
|
// property: padding,
|
||||||
values: 1rem,
|
// values: 1rem,
|
||||||
rfs: true
|
// rfs: true
|
||||||
)
|
// )
|
||||||
) {
|
// ) {
|
||||||
.padding-1rem {
|
// .padding-1rem {
|
||||||
padding: rfs-fluid-value(1rem);
|
// padding: rfs-fluid-value(1rem);
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
@include it("sets the value when inside the media query") {
|
// @include it("sets the value when inside the media query") {
|
||||||
@include test-generate-utility(
|
// @include test-generate-utility(
|
||||||
(
|
// (
|
||||||
property: padding,
|
// property: padding,
|
||||||
values: 1rem,
|
// values: 1rem,
|
||||||
rfs: true
|
// rfs: true
|
||||||
),
|
// ),
|
||||||
$is-rfs-media-query: true
|
// $is-rfs-media-query: true
|
||||||
) {
|
// ) {
|
||||||
.padding-1rem {
|
// .padding-1rem {
|
||||||
padding: rfs-value(1rem);
|
// padding: rfs-value(1rem);
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
@include describe("$infix") {
|
// @include describe("$infix") {
|
||||||
@include it("inserts the given infix") {
|
// @include it("inserts the given infix") {
|
||||||
@include test-generate-utility(
|
// @include test-generate-utility(
|
||||||
(
|
// (
|
||||||
property: "padding",
|
// property: "padding",
|
||||||
values: (null: 1rem, small: .5rem, large: 2rem)
|
// values: (null: 1rem, small: .5rem, large: 2rem)
|
||||||
),
|
// ),
|
||||||
$infix: -sm
|
// $infix: -sm
|
||||||
) {
|
// ) {
|
||||||
.padding-sm {
|
// .padding-sm {
|
||||||
padding: 1rem;
|
// padding: 1rem;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.padding-sm-small {
|
// .padding-sm-small {
|
||||||
padding: .5rem;
|
// padding: .5rem;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.padding-sm-large {
|
// .padding-sm-large {
|
||||||
padding: 2rem;
|
// padding: 2rem;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
@include it("strips leading - if class is null") {
|
// @include it("strips leading - if class is null") {
|
||||||
@include test-generate-utility(
|
// @include test-generate-utility(
|
||||||
(
|
// (
|
||||||
property: visibility,
|
// property: visibility,
|
||||||
class: null,
|
// class: null,
|
||||||
values: (
|
// values: (
|
||||||
visible: visible,
|
// visible: visible,
|
||||||
invisible: hidden,
|
// invisible: hidden,
|
||||||
)
|
// )
|
||||||
),
|
// ),
|
||||||
-sm
|
// -sm
|
||||||
) {
|
// ) {
|
||||||
.sm-visible {
|
// .sm-visible {
|
||||||
visibility: visible;
|
// visibility: visible;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.sm-invisible {
|
// .sm-invisible {
|
||||||
visibility: hidden;
|
// visibility: hidden;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ const { runSass } = require('sass-true')
|
|||||||
|
|
||||||
module.exports = (filename, { describe, it }) => {
|
module.exports = (filename, { describe, it }) => {
|
||||||
const data = fs.readFileSync(filename, 'utf8')
|
const data = fs.readFileSync(filename, 'utf8')
|
||||||
const TRUE_SETUP = '$true-terminal-output: false; @import "true";'
|
const TRUE_SETUP = '@use "true" as *;'
|
||||||
const sassString = TRUE_SETUP + data
|
const sassString = TRUE_SETUP + data
|
||||||
|
|
||||||
runSass(
|
runSass(
|
||||||
|
|||||||
Reference in New Issue
Block a user