diff options
Diffstat (limited to 'pyblackbird_cc/static/scss/tests/mixins/_utilities.test.scss')
| -rw-r--r-- | pyblackbird_cc/static/scss/tests/mixins/_utilities.test.scss | 393 |
1 files changed, 0 insertions, 393 deletions
diff --git a/pyblackbird_cc/static/scss/tests/mixins/_utilities.test.scss b/pyblackbird_cc/static/scss/tests/mixins/_utilities.test.scss deleted file mode 100644 index 8140ac4..0000000 --- a/pyblackbird_cc/static/scss/tests/mixins/_utilities.test.scss +++ /dev/null @@ -1,393 +0,0 @@ -$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 @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; - } - } - } - } -} |