cirrus-ui
Version:
A lightweight UI framework written in SCSS
1,124 lines (929 loc) • 37.1 kB
Plain Text
// _generator.scss unit tests
@use 'sass:map';
@use '../test_base' as *;
@use '../../src/internal/generator_v2';
@use '../../src/internal/mixins';
@include describe('utility()') {
@include it('simple variant support') {
@include assert {
@include output($selector: false) {
@include generator_v2.utility(
$base-class-name: 'text',
$class-value-pairs: (
'blue': (
'color': blue,
),
),
$variants: (
'dark',
),
$override: '!important'
);
}
@include expect($selector: false) {
.u-text-blue {
color: blue ;
}
@media (prefers-color-scheme: dark) {
.dark\:u-text-blue {
color: blue ;
}
}
}
}
}
@include it('test for rules, viewports, and other variants') {
@include assert {
@include output($selector: false) {
@include generator_v2.utility(
$base-class-name: 'text',
$class-value-pairs: (
'blue': (
'color': blue,
),
),
$variants: (
'responsive',
'dark',
'hover',
'reduce-motion',
'group-hover',
'group-focus',
),
$override: '!important'
);
}
@include expect($selector: false) {
.u-text-blue {
color: blue ;
}
.hover\:u-text-blue:hover {
color: blue ;
}
.group:hover .group-hover\:u-text-blue {
color: blue ;
}
.group:focus .group-focus\:u-text-blue {
color: blue ;
}
@media screen and (min-width: 640px) {
.sm\:u-text-blue {
color: blue ;
}
.sm\:hover\:u-text-blue:hover {
color: blue ;
}
.group:hover .sm\:group-hover\:u-text-blue {
color: blue ;
}
.group:focus .sm\:group-focus\:u-text-blue {
color: blue ;
}
}
@media screen and (min-width: 768px) {
.md\:u-text-blue {
color: blue ;
}
.md\:hover\:u-text-blue:hover {
color: blue ;
}
.group:hover .md\:group-hover\:u-text-blue {
color: blue ;
}
.group:focus .md\:group-focus\:u-text-blue {
color: blue ;
}
}
@media screen and (min-width: 1024px) {
.lg\:u-text-blue {
color: blue ;
}
.lg\:hover\:u-text-blue:hover {
color: blue ;
}
.group:hover .lg\:group-hover\:u-text-blue {
color: blue ;
}
.group:focus .lg\:group-focus\:u-text-blue {
color: blue ;
}
}
@media screen and (min-width: 1280px) {
.xl\:u-text-blue {
color: blue ;
}
.xl\:hover\:u-text-blue:hover {
color: blue ;
}
.group:hover .xl\:group-hover\:u-text-blue {
color: blue ;
}
.group:focus .xl\:group-focus\:u-text-blue {
color: blue ;
}
}
@media (prefers-color-scheme: dark) {
.dark\:u-text-blue {
color: blue ;
}
.dark\:hover\:u-text-blue:hover {
color: blue ;
}
.group:hover .dark\:group-hover\:u-text-blue {
color: blue ;
}
.group:focus .dark\:group-focus\:u-text-blue {
color: blue ;
}
}
@media (prefers-reduced-motion: reduce) {
.reduce-motion\:u-text-blue {
color: blue ;
}
.reduce-motion\:hover\:u-text-blue:hover {
color: blue ;
}
.group:hover .reduce-motion\:group-hover\:u-text-blue {
color: blue ;
}
.group:focus .reduce-motion\:group-focus\:u-text-blue {
color: blue ;
}
}
}
}
}
@include it('works with single nested parent') {
@include assert {
@include output($selector: false) {
.fizz {
@include generator_v2.utility(
$base-class-name: 'text',
$class-value-pairs: (
'blue': (
'color': blue,
),
),
$variants: (
'dark',
),
$override: '!important'
);
}
}
@include expect($selector: false) {
.fizz .u-text-blue {
color: blue ;
}
@media (prefers-color-scheme: dark) {
.fizz .dark\:u-text-blue {
color: blue ;
}
}
}
}
}
@include it('works with multiple nested parents and attached classes') {
@include assert {
@include output($selector: false) {
.fizz.zzif {
.buzz {
@include generator_v2.utility(
$base-class-name: 'text',
$class-value-pairs: (
'blue': (
'color': blue,
),
),
$variants: (
'dark',
),
$override: '!important'
);
}
}
}
@include expect($selector: false) {
.fizz.zzif .buzz .u-text-blue {
color: blue ;
}
@media (prefers-color-scheme: dark) {
.fizz.zzif .buzz .dark\:u-text-blue {
color: blue ;
}
}
}
}
}
@include it('should generate expected utility classes with variant support for viewports') {
@include assert {
@include output($selector: false) {
@include generator_v2.utility(
$base-class-name: 'col',
$class-value-pairs: (
'0': (
'width': 0%,
),
'1': (
'width': 25%,
),
'2': (
'width': 50%,
),
'3': (
'width': 75%,
),
'4': (
'width': 100%,
),
),
$variants: ('responsive'),
$class-prefix: '',
$override: '!important'
);
}
@include expect($selector: false) {
.col-0 {
width: 0% ;
}
.col-1 {
width: 25% ;
}
.col-2 {
width: 50% ;
}
.col-3 {
width: 75% ;
}
.col-4 {
width: 100% ;
}
@media screen and (min-width: 640px) {
.sm\:col-0 {
width: 0% ;
}
.sm\:col-1 {
width: 25% ;
}
.sm\:col-2 {
width: 50% ;
}
.sm\:col-3 {
width: 75% ;
}
.sm\:col-4 {
width: 100% ;
}
}
@media screen and (min-width: 768px) {
.md\:col-0 {
width: 0% ;
}
.md\:col-1 {
width: 25% ;
}
.md\:col-2 {
width: 50% ;
}
.md\:col-3 {
width: 75% ;
}
.md\:col-4 {
width: 100% ;
}
}
@media screen and (min-width: 1024px) {
.lg\:col-0 {
width: 0% ;
}
.lg\:col-1 {
width: 25% ;
}
.lg\:col-2 {
width: 50% ;
}
.lg\:col-3 {
width: 75% ;
}
.lg\:col-4 {
width: 100% ;
}
}
@media screen and (min-width: 1280px) {
.xl\:col-0 {
width: 0% ;
}
.xl\:col-1 {
width: 25% ;
}
.xl\:col-2 {
width: 50% ;
}
.xl\:col-3 {
width: 75% ;
}
.xl\:col-4 {
width: 100% ;
}
}
}
}
}
@include it('works with empty base class name') {
@include assert {
@include output($selector: false) {
@include generator_v2.utility(
$base-class-name: '',
$class-value-pairs: (
'blue': (
'color': blue,
),
),
$override: '!important'
);
}
@include expect($selector: false) {
.u-blue {
color: blue ;
}
}
}
}
@include it('works for all non-group pseudos') {
@include assert {
@include output($selector: false) {
@include generator_v2.utility(
$base-class-name: 'text',
$class-value-pairs: (
'blue': (
'color': blue,
),
),
$variants: (
'dark',
'light',
'reduce-motion',
'expand',
'first-of-type',
'last-of-type',
'portrait',
'landscape',
'hover',
'focus',
'focus-visible',
'focus-within',
'active',
'checked',
'disabled',
),
$override: '!important'
);
}
@include expect($selector: false) {
.u-text-blue {
color: blue ;
}
.expand\:u-text-blue:expand {
color: blue ;
}
.first-of-type\:u-text-blue:first-of-type {
color: blue ;
}
.last-of-type\:u-text-blue:last-of-type {
color: blue ;
}
.hover\:u-text-blue:hover {
color: blue ;
}
.focus\:u-text-blue:focus {
color: blue ;
}
.focus-visible\:u-text-blue:focus-visible {
color: blue ;
}
.focus-within\:u-text-blue:focus-within {
color: blue ;
}
.active\:u-text-blue:active {
color: blue ;
}
.checked\:u-text-blue:checked {
color: blue ;
}
.disabled\:u-text-blue:disabled {
color: blue ;
}
@media (prefers-color-scheme: dark) {
.dark\:u-text-blue {
color: blue ;
}
.dark\:expand\:u-text-blue:expand {
color: blue ;
}
.dark\:first-of-type\:u-text-blue:first-of-type {
color: blue ;
}
.dark\:last-of-type\:u-text-blue:last-of-type {
color: blue ;
}
.dark\:hover\:u-text-blue:hover {
color: blue ;
}
.dark\:focus\:u-text-blue:focus {
color: blue ;
}
.dark\:focus-visible\:u-text-blue:focus-visible {
color: blue ;
}
.dark\:focus-within\:u-text-blue:focus-within {
color: blue ;
}
.dark\:active\:u-text-blue:active {
color: blue ;
}
.dark\:checked\:u-text-blue:checked {
color: blue ;
}
.dark\:disabled\:u-text-blue:disabled {
color: blue ;
}
}
@media (prefers-color-scheme: light) {
.light\:u-text-blue {
color: blue ;
}
.light\:expand\:u-text-blue:expand {
color: blue ;
}
.light\:first-of-type\:u-text-blue:first-of-type {
color: blue ;
}
.light\:last-of-type\:u-text-blue:last-of-type {
color: blue ;
}
.light\:hover\:u-text-blue:hover {
color: blue ;
}
.light\:focus\:u-text-blue:focus {
color: blue ;
}
.light\:focus-visible\:u-text-blue:focus-visible {
color: blue ;
}
.light\:focus-within\:u-text-blue:focus-within {
color: blue ;
}
.light\:active\:u-text-blue:active {
color: blue ;
}
.light\:checked\:u-text-blue:checked {
color: blue ;
}
.light\:disabled\:u-text-blue:disabled {
color: blue ;
}
}
@media (prefers-reduced-motion: reduce) {
.reduce-motion\:u-text-blue {
color: blue ;
}
.reduce-motion\:expand\:u-text-blue:expand {
color: blue ;
}
.reduce-motion\:first-of-type\:u-text-blue:first-of-type {
color: blue ;
}
.reduce-motion\:last-of-type\:u-text-blue:last-of-type {
color: blue ;
}
.reduce-motion\:hover\:u-text-blue:hover {
color: blue ;
}
.reduce-motion\:focus\:u-text-blue:focus {
color: blue ;
}
.reduce-motion\:focus-visible\:u-text-blue:focus-visible {
color: blue ;
}
.reduce-motion\:focus-within\:u-text-blue:focus-within {
color: blue ;
}
.reduce-motion\:active\:u-text-blue:active {
color: blue ;
}
.reduce-motion\:checked\:u-text-blue:checked {
color: blue ;
}
.reduce-motion\:disabled\:u-text-blue:disabled {
color: blue ;
}
}
@media (orientation: portrait) {
.portrait\:u-text-blue {
color: blue ;
}
.portrait\:expand\:u-text-blue:expand {
color: blue ;
}
.portrait\:first-of-type\:u-text-blue:first-of-type {
color: blue ;
}
.portrait\:last-of-type\:u-text-blue:last-of-type {
color: blue ;
}
.portrait\:hover\:u-text-blue:hover {
color: blue ;
}
.portrait\:focus\:u-text-blue:focus {
color: blue ;
}
.portrait\:focus-visible\:u-text-blue:focus-visible {
color: blue ;
}
.portrait\:focus-within\:u-text-blue:focus-within {
color: blue ;
}
.portrait\:active\:u-text-blue:active {
color: blue ;
}
.portrait\:checked\:u-text-blue:checked {
color: blue ;
}
.portrait\:disabled\:u-text-blue:disabled {
color: blue ;
}
}
@media (orientation: landscape) {
.landscape\:u-text-blue {
color: blue ;
}
.landscape\:expand\:u-text-blue:expand {
color: blue ;
}
.landscape\:first-of-type\:u-text-blue:first-of-type {
color: blue ;
}
.landscape\:last-of-type\:u-text-blue:last-of-type {
color: blue ;
}
.landscape\:hover\:u-text-blue:hover {
color: blue ;
}
.landscape\:focus\:u-text-blue:focus {
color: blue ;
}
.landscape\:focus-visible\:u-text-blue:focus-visible {
color: blue ;
}
.landscape\:focus-within\:u-text-blue:focus-within {
color: blue ;
}
.landscape\:active\:u-text-blue:active {
color: blue ;
}
.landscape\:checked\:u-text-blue:checked {
color: blue ;
}
.landscape\:disabled\:u-text-blue:disabled {
color: blue ;
}
}
}
}
}
}
@include describe('get-base-class()') {
@include it('basic test') {
@include assert {
@include output($selector: false) {
@include generator_v2.get-base-class(
$config: (
'delimiter': '-',
'variant-delimiter': '\\:',
),
$context: (
// Note that prefix is inserted in the parent mixin
base-class-name: 'text-blue',
variant: 'hover',
pseudo: 'hover',
)
)
using ($props...) {
color: blue;
}
}
@include expect($selector: false) {
.hover\:text-blue:hover {
color: blue;
}
}
}
}
}
@include describe('utility-with-body()') {
@include it('basic test') {
@include assert {
@include output($selector: false) {
@include generator_v2.utility-with-body(
$variants: (
'responsive',
'dark',
'hover',
'reduce-motion',
'group-hover',
'group-focus',
),
$override: '!important'
)
using ($props...) {
@include generator_v2.inline-class-generator('foo', $props...) using ($config) {
color: #fff #{map.get($config, override)};
}
}
}
@include expect($selector: false) {
.foo {
color: #fff ;
}
.hover\:foo:hover {
color: #fff ;
}
.group:hover .group-hover\:foo {
color: #fff ;
}
.group:focus .group-focus\:foo {
color: #fff ;
}
@media screen and (min-width: 640px) {
.sm\:foo {
color: #fff ;
}
.sm\:hover\:foo:hover {
color: #fff ;
}
.group:hover .sm\:group-hover\:foo {
color: #fff ;
}
.group:focus .sm\:group-focus\:foo {
color: #fff ;
}
}
@media screen and (min-width: 768px) {
.md\:foo {
color: #fff ;
}
.md\:hover\:foo:hover {
color: #fff ;
}
.group:hover .md\:group-hover\:foo {
color: #fff ;
}
.group:focus .md\:group-focus\:foo {
color: #fff ;
}
}
@media screen and (min-width: 1024px) {
.lg\:foo {
color: #fff ;
}
.lg\:hover\:foo:hover {
color: #fff ;
}
.group:hover .lg\:group-hover\:foo {
color: #fff ;
}
.group:focus .lg\:group-focus\:foo {
color: #fff ;
}
}
@media screen and (min-width: 1280px) {
.xl\:foo {
color: #fff ;
}
.xl\:hover\:foo:hover {
color: #fff ;
}
.group:hover .xl\:group-hover\:foo {
color: #fff ;
}
.group:focus .xl\:group-focus\:foo {
color: #fff ;
}
}
@media (prefers-color-scheme: dark) {
.dark\:foo {
color: #fff ;
}
.dark\:hover\:foo:hover {
color: #fff ;
}
.group:hover .dark\:group-hover\:foo {
color: #fff ;
}
.group:focus .dark\:group-focus\:foo {
color: #fff ;
}
}
@media (prefers-reduced-motion: reduce) {
.reduce-motion\:foo {
color: #fff ;
}
.reduce-motion\:hover\:foo:hover {
color: #fff ;
}
.group:hover .reduce-motion\:group-hover\:foo {
color: #fff ;
}
.group:focus .reduce-motion\:group-focus\:foo {
color: #fff ;
}
}
}
}
}
}
// @include describe('utility-with-body()') {
// @include it('should generate expected utility classes with variant support') {
// @include assert {
// @include output {
// @include generator_v2.utility-with-body(
// $variants: (
// 'hover',
// 'dark',
// 'reduce-motion',
// ),
// $generate-viewports: 'true',
// $override: '!important'
// )
// using
// (
// $viewport-str,
// $variant-prefix,
// $prefix,
// $common-class,
// $delimiter,
// $key,
// $variant-suffix,
// $override
// ) {
// $colors: red, white;
// @each $color in $colors {
// .#{$viewport-str}#{$variant-prefix}#{$prefix}#{$color}#{$variant-suffix} {
// color: #{$color} #{$override};
// }
// }
// }
// }
// @include expect {
// .u-red {
// color: red !important;
// }
// .u-white {
// color: white !important;
// }
// .hover\:u-red:hover {
// color: red !important;
// }
// .hover\:u-white:hover {
// color: white !important;
// }
// @media (prefers-color-scheme: dark) {
// .dark\:u-red {
// color: red !important;
// }
// .dark\:u-white {
// color: white !important;
// }
// }
// @media (prefers-reduced-motion: reduce) {
// .reduce-motion\:u-red {
// color: red !important;
// }
// .reduce-motion\:u-white {
// color: white !important;
// }
// }
// @media screen and (min-width: 640px) {
// .sm\:u-red {
// color: red !important;
// }
// .sm\:u-white {
// color: white !important;
// }
// .sm\:hover\:u-red:hover {
// color: red !important;
// }
// .sm\:hover\:u-white:hover {
// color: white !important;
// }
// }
// @media screen and (min-width: 640px) and (prefers-color-scheme: dark) {
// .sm\:dark\:u-red {
// color: red !important;
// }
// .sm\:dark\:u-white {
// color: white !important;
// }
// }
// @media screen and (min-width: 640px) and (prefers-reduced-motion: reduce) {
// .sm\:reduce-motion\:u-red {
// color: red !important;
// }
// .sm\:reduce-motion\:u-white {
// color: white !important;
// }
// }
// @media screen and (min-width: 768px) {
// .md\:u-red {
// color: red !important;
// }
// .md\:u-white {
// color: white !important;
// }
// .md\:hover\:u-red:hover {
// color: red !important;
// }
// .md\:hover\:u-white:hover {
// color: white !important;
// }
// }
// @media screen and (min-width: 768px) and (prefers-color-scheme: dark) {
// .md\:dark\:u-red {
// color: red !important;
// }
// .md\:dark\:u-white {
// color: white !important;
// }
// }
// @media screen and (min-width: 768px) and (prefers-reduced-motion: reduce) {
// .md\:reduce-motion\:u-red {
// color: red !important;
// }
// .md\:reduce-motion\:u-white {
// color: white !important;
// }
// }
// @media screen and (min-width: 1024px) {
// .lg\:u-red {
// color: red !important;
// }
// .lg\:u-white {
// color: white !important;
// }
// .lg\:hover\:u-red:hover {
// color: red !important;
// }
// .lg\:hover\:u-white:hover {
// color: white !important;
// }
// }
// @media screen and (min-width: 1024px) and (prefers-color-scheme: dark) {
// .lg\:dark\:u-red {
// color: red !important;
// }
// .lg\:dark\:u-white {
// color: white !important;
// }
// }
// @media screen and (min-width: 1024px) and (prefers-reduced-motion: reduce) {
// .lg\:reduce-motion\:u-red {
// color: red !important;
// }
// .lg\:reduce-motion\:u-white {
// color: white !important;
// }
// }
// @media screen and (min-width: 1280px) {
// .xl\:u-red {
// color: red !important;
// }
// .xl\:u-white {
// color: white !important;
// }
// .xl\:hover\:u-red:hover {
// color: red !important;
// }
// .xl\:hover\:u-white:hover {
// color: white !important;
// }
// }
// @media screen and (min-width: 1280px) and (prefers-color-scheme: dark) {
// .xl\:dark\:u-red {
// color: red !important;
// }
// .xl\:dark\:u-white {
// color: white !important;
// }
// }
// @media screen and (min-width: 1280px) and (prefers-reduced-motion: reduce) {
// .xl\:reduce-motion\:u-red {
// color: red !important;
// }
// .xl\:reduce-motion\:u-white {
// color: white !important;
// }
// }
// }
// }
// }
// }