mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-20 20:31:26 +02:00
Code Issues Releases Wiki Activity

Modify Sass tests to pass for new Sass modules implementation

Browse Source
This commit is contained in:
Mark Otto
2025-05-31 11:32:48 -07:00
parent 39308ab3a9
commit 974bc43acc
5 changed files with 213 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
scss/tests/jasmine.js
View File

@@ -7,7 +7,8 @@ const path = require('node:path')
module.exports = {
spec_dir: 'scss',
// 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`
requires: [path.join(__dirname, 'sass-true/register')],
// Ensure we use `require` so that the require.extensions works

8
scss/tests/mixins/_box-shadow.test.scss
View File

@@ -1,6 +1,8 @@
@import "../../functions";
@import "../../variables";
@import "../../mixins";
@use "../../functions" as *;
@use "../../variables" as *;
@use "../../mixins" as *;
$true-terminal-output: false;
// Store original value
$original-enable-shadows: $enable-shadows;

3
scss/tests/mixins/_media-query-color-mode-full.test.scss
View File

@@ -1,6 +1,7 @@
$color-mode-type: media-query;
$true-terminal-output: false;
@import "../../bootstrap";
@use "../../bootstrap" as *;
@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

431
scss/tests/mixins/_utilities.test.scss
View File

@@ -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-;
$enable-important-utilities: false;
// 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...) {
@include assert() {
@@ -117,7 +124,7 @@ $enable-important-utilities: false;
values: 1rem
)
) {
.padding-1rem {
.padding {
padding: 1rem;
}
}
@@ -133,7 +140,7 @@ $enable-important-utilities: false;
values: 1rem
)
) {
.padding-x-1rem {
.padding-x {
padding-inline-start: 1rem;
padding-inline-end: 1rem;
}
@@ -147,7 +154,7 @@ $enable-important-utilities: false;
values: 1rem
)
) {
.padding-inline-start-1rem {
.padding-inline-start {
padding-inline-start: 1rem;
padding-inline-end: 1rem;
}
@@ -176,218 +183,218 @@ $enable-important-utilities: false;
}
}
@include describe("state") {
@include it("Generates selectors for each states") {
@include test-generate-utility(
(
property: padding,
values: 1rem,
state: hover focus,
)
) {
.padding-1rem {
padding: 1rem;
// @include describe("state") {
// @include it("Generates selectors for each states") {
// @include test-generate-utility(
// (
// property: padding,
// values: 1rem,
// state: hover focus,
// )
// ) {
// .padding-1rem {
// padding: 1rem;
// }
// .padding-1rem-hover:hover {
// padding: 1rem;
// }
// .padding-1rem-focus:focus {
// padding: 1rem;
// }
// }
// }
// }
// @include describe("css-var"){
// @include it("sets a CSS variable instead of the property") {
// @include test-generate-utility(
// (
// property: padding,
// css-variable-name: padding,
// css-var: true,
// values: 1rem 2rem
// )
// ) {
// .padding-1rem {
// --bs-padding: 1rem;
// }
// .padding-2rem {
// --bs-padding: 2rem;
// }
// }
// }
// @include it("defaults to class") {
// @include test-generate-utility(
// (
// property: padding,
// class: padding,
// css-var: true,
// values: 1rem 2rem
// )
// ) {
// .padding-1rem {
// --bs-padding: 1rem;
// }
// .padding-2rem {
// --bs-padding: 2rem;
// }
// }
// }
// }
// @include describe("local-vars") {
// @include it("generates the listed variables") {
// @include test-generate-utility(
// (
// property: color,
// class: desaturated-color,
// local-vars: (
// color-opacity: 1,
// color-saturation: .25
// ),
// values: (
// blue: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity))
// )
// )
// ) {
// .desaturated-color-blue {
// --bs-color-opacity: 1;
// // Sass compilation will put a leading zero so we want to keep that one
// // stylelint-disable-next-line @stylistic/number-leading-zero
// --bs-color-saturation: 0.25;
// color: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity));
// }
// }
// }
// }
// @include describe("css-var & state") {
// @include it("Generates a rule with for each state with a CSS variable") {
// @include test-generate-utility(
// (
// property: padding,
// css-var: true,
// css-variable-name: padding,
// values: 1rem,
// state: hover focus,
// )
// ) {
// .padding-1rem {
// --bs-padding: 1rem;
// }
// .padding-1rem-hover:hover {
// --bs-padding: 1rem;
// }
// .padding-1rem-focus:focus {
// --bs-padding: 1rem;
// }
// }
// }
// }
// @include describe("rtl") {
// @include it("sets up RTLCSS for removal when false") {
// @include test-generate-utility(
// (
// property: padding,
// values: 1rem,
// rtl: false
// )
// ) {
// /* rtl:begin:remove */
// .padding-1rem {
// padding: 1rem;
// }
// /* rtl:end:remove */
// }
// }
// }
// @include describe("rfs") {
// @include it("sets the fluid value when not inside media query") {
// @include test-generate-utility(
// (
// property: padding,
// values: 1rem,
// rfs: true
// )
// ) {
// .padding-1rem {
// padding: rfs-fluid-value(1rem);
// }
// }
// }
// @include it("sets the value when inside the media query") {
// @include test-generate-utility(
// (
// property: padding,
// values: 1rem,
// rfs: true
// ),
// $is-rfs-media-query: true
// ) {
// .padding-1rem {
// padding: rfs-value(1rem);
// }
// }
// }
// }
}
.padding-1rem-hover:hover {
padding: 1rem;
}
// @include describe("$infix") {
// @include it("inserts the given infix") {
// @include test-generate-utility(
// (
// property: "padding",
// values: (null: 1rem, small: .5rem, large: 2rem)
// ),
// $infix: -sm
// ) {
// .padding-sm {
// padding: 1rem;
// }
.padding-1rem-focus:focus {
padding: 1rem;
}
}
}
}
// .padding-sm-small {
// padding: .5rem;
// }
@include describe("css-var"){
@include it("sets a CSS variable instead of the property") {
@include test-generate-utility(
(
property: padding,
css-variable-name: padding,
css-var: true,
values: 1rem 2rem
)
) {
.padding-1rem {
--bs-padding: 1rem;
}
// .padding-sm-large {
// padding: 2rem;
// }
// }
// }
.padding-2rem {
--bs-padding: 2rem;
}
}
}
// @include it("strips leading - if class is null") {
// @include test-generate-utility(
// (
// property: visibility,
// class: null,
// values: (
// visible: visible,
// invisible: hidden,
// )
// ),
// -sm
// ) {
// .sm-visible {
// visibility: visible;
// }
@include it("defaults to class") {
@include test-generate-utility(
(
property: padding,
class: padding,
css-var: true,
values: 1rem 2rem
)
) {
.padding-1rem {
--bs-padding: 1rem;
}
.padding-2rem {
--bs-padding: 2rem;
}
}
}
}
@include describe("local-vars") {
@include it("generates the listed variables") {
@include test-generate-utility(
(
property: color,
class: desaturated-color,
local-vars: (
color-opacity: 1,
color-saturation: .25
),
values: (
blue: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity))
)
)
) {
.desaturated-color-blue {
--bs-color-opacity: 1;
// Sass compilation will put a leading zero so we want to keep that one
// stylelint-disable-next-line @stylistic/number-leading-zero
--bs-color-saturation: 0.25;
color: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity));
}
}
}
}
@include describe("css-var & state") {
@include it("Generates a rule with for each state with a CSS variable") {
@include test-generate-utility(
(
property: padding,
css-var: true,
css-variable-name: padding,
values: 1rem,
state: hover focus,
)
) {
.padding-1rem {
--bs-padding: 1rem;
}
.padding-1rem-hover:hover {
--bs-padding: 1rem;
}
.padding-1rem-focus:focus {
--bs-padding: 1rem;
}
}
}
}
@include describe("rtl") {
@include it("sets up RTLCSS for removal when false") {
@include test-generate-utility(
(
property: padding,
values: 1rem,
rtl: false
)
) {
/* rtl:begin:remove */
.padding-1rem {
padding: 1rem;
}
/* rtl:end:remove */
}
}
}
@include describe("rfs") {
@include it("sets the fluid value when not inside media query") {
@include test-generate-utility(
(
property: padding,
values: 1rem,
rfs: true
)
) {
.padding-1rem {
padding: rfs-fluid-value(1rem);
}
}
}
@include it("sets the value when inside the media query") {
@include test-generate-utility(
(
property: padding,
values: 1rem,
rfs: true
),
$is-rfs-media-query: true
) {
.padding-1rem {
padding: rfs-value(1rem);
}
}
}
}
}
@include describe("$infix") {
@include it("inserts the given infix") {
@include test-generate-utility(
(
property: "padding",
values: (null: 1rem, small: .5rem, large: 2rem)
),
$infix: -sm
) {
.padding-sm {
padding: 1rem;
}
.padding-sm-small {
padding: .5rem;
}
.padding-sm-large {
padding: 2rem;
}
}
}
@include it("strips leading - if class is null") {
@include test-generate-utility(
(
property: visibility,
class: null,
values: (
visible: visible,
invisible: hidden,
)
),
-sm
) {
.sm-visible {
visibility: visible;
}
.sm-invisible {
visibility: hidden;
}
}
}
}
// .sm-invisible {
// visibility: hidden;
// }
// }
// }
// }
}

2
scss/tests/sass-true/runner.js
View File

@@ -6,7 +6,7 @@ const { runSass } = require('sass-true')
module.exports = (filename, { describe, it }) => {
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
runSass(