mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-13 01:08:58 +01:00
33ccbc23e3
* Set up CSS testing using sass-true and mocha Use mocha to handle the heavy lifting of finding tests and running them. Mocha is made to look directly for SCSS files which are compiled thanks to Node's require.extensions mechanism. * Add CSS tests to workflow * Add tests for the generate-utility mixin * Add tests for utilities generation * Fix linting issues * Fix test contents Don't know why the whole utilities.test.scss ended up copied in the api.test.scss * Remove unnecessary entry in package.json * Move to Jasmine for running the tests * Move running of CSS tests before CSS build * Update linting set up Add exceptions for test files in stylelint * Remove irrelevant option for sass-true * Fix linting issues after rebase * Add color mode tests * Fix linter Co-authored-by: Mark Otto <markdotto@gmail.com>
394 lines
8.6 KiB
SCSS
394 lines
8.6 KiB
SCSS
$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";
|
|
|
|
@mixin test-generate-utility($params...) {
|
|
@include assert() {
|
|
@include output() {
|
|
@include generate-utility($params...);
|
|
}
|
|
|
|
@include expect() {
|
|
@content;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include describe(generate-utility) {
|
|
@include it("generates a utility class for each value") {
|
|
@include test-generate-utility(
|
|
(
|
|
property: "padding",
|
|
values: (small: .5rem, large: 2rem)
|
|
)
|
|
) {
|
|
.padding-small {
|
|
padding: .5rem;
|
|
}
|
|
|
|
.padding-large {
|
|
padding: 2rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include describe("global $enable-important-utilities: true") {
|
|
@include it("sets !important") {
|
|
$enable-important-utilities: true !global;
|
|
|
|
@include test-generate-utility(
|
|
(
|
|
property: "padding",
|
|
values: (small: .5rem, large: 2rem)
|
|
)
|
|
) {
|
|
.padding-small {
|
|
padding: .5rem !important;
|
|
}
|
|
|
|
.padding-large {
|
|
padding: 2rem !important;
|
|
}
|
|
}
|
|
|
|
$enable-important-utilities: false !global;
|
|
}
|
|
}
|
|
|
|
@include describe("$utility") {
|
|
@include describe("values") {
|
|
@include it("supports null keys") {
|
|
@include test-generate-utility(
|
|
(
|
|
property: "padding",
|
|
values: (null: 1rem, small: .5rem, large: 2rem)
|
|
),
|
|
) {
|
|
.padding {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.padding-small {
|
|
padding: .5rem;
|
|
}
|
|
|
|
.padding-large {
|
|
padding: 2rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include it("ignores null values") {
|
|
@include test-generate-utility(
|
|
(
|
|
property: "padding",
|
|
values: (small: null, large: 2rem)
|
|
)
|
|
) {
|
|
.padding-large {
|
|
padding: 2rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include it("supports lists") {
|
|
@include test-generate-utility(
|
|
(
|
|
property: "padding",
|
|
values: 1rem 2rem
|
|
)
|
|
) {
|
|
.padding-1rem {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.padding-2rem {
|
|
padding: 2rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include it("supports single values") {
|
|
@include test-generate-utility(
|
|
(
|
|
property: padding,
|
|
values: 1rem
|
|
)
|
|
) {
|
|
.padding-1rem {
|
|
padding: 1rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include describe("class & property") {
|
|
@include it("adds each property to the declaration") {
|
|
@include test-generate-utility(
|
|
(
|
|
class: padding-x,
|
|
property: padding-inline-start padding-inline-end,
|
|
values: 1rem
|
|
)
|
|
) {
|
|
.padding-x-1rem {
|
|
padding-inline-start: 1rem;
|
|
padding-inline-end: 1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include it("uses the first property as class name") {
|
|
@include test-generate-utility(
|
|
(
|
|
property: padding-inline-start padding-inline-end,
|
|
values: 1rem
|
|
)
|
|
) {
|
|
.padding-inline-start-1rem {
|
|
padding-inline-start: 1rem;
|
|
padding-inline-end: 1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include it("supports a null class to create classes straight from the values") {
|
|
@include test-generate-utility(
|
|
(
|
|
property: visibility,
|
|
class: null,
|
|
values: (
|
|
visible: visible,
|
|
invisible: hidden,
|
|
)
|
|
)
|
|
) {
|
|
.visible {
|
|
visibility: visible;
|
|
}
|
|
|
|
.invisible {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@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 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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|