Skip to content

Commit

Permalink
✨ feat(_generator.scss): Reorder style generation to minimize minifie…
Browse files Browse the repository at this point in the history 
…d size with gulp-clean-css
  • Loading branch information
@Spiderpig86
Spiderpig86 committed Jul 3, 2023
1 parent e9254a7 commit b5dd955
Show file tree
Hide file tree
Showing 8 changed files with 4,432 additions and 4,434 deletions.
4,074 changes: 2,037 additions & 2,037 deletions dist/cirrus-all.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/cirrus-all.min.css
View file

Large diffs are not rendered by default.

2,348 changes: 1,174 additions & 1,174 deletions dist/cirrus-core.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/cirrus-core.min.css
View file

Large diffs are not rendered by default.

2,348 changes: 1,174 additions & 1,174 deletions dist/cirrus.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/cirrus.min.css
View file

Large diffs are not rendered by default.

15 changes: 10 additions & 5 deletions src/internal/_generator.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,11 +106,16 @@ $default-variant-delimiter: '\\:';
@each $variant in $variants {
// No viewport
@content ($variant, $variant-delimiter, $prefix, '', $common-class-name, $key, $value, $override);
}
}

// Generate classes with viewport
@if $generate-viewports == 'true' {
@each $suffix, $limit in config.$breakpoint-pairs {
@include size.screen-above($limit) {
// Generate classes with viewport
// Generation is separate and in this specific nesting order of for loops to allow gulp-clean-css to efficiently minify
@if $generate-viewports == 'true' {
@each $suffix, $limit in config.$breakpoint-pairs {
@each $key, $value in $class-value-pairs {
@include size.screen-above($limit) {
@each $variant in $variants {
@content ($variant, $variant-delimiter, $prefix, $suffix, $common-class-name, $key, $value, $override);
}
}
Expand All @@ -133,4 +138,4 @@ $default-variant-delimiter: '\\:';
}

@return $result;
}
}
75 changes: 34 additions & 41 deletions tests/internal/_generator.spec.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,71 +29,72 @@
color: blue !important;
}

@media screen and (min-width: 640px) {
.u-text-blue-sm {
.hover\:u-text-blue:hover {
color: blue !important;
}

@media (prefers-color-scheme: dark) {
.dark\:u-text-blue {
color: blue !important;
}
}

@media screen and (min-width: 768px) {
.u-text-blue-md {
@media (prefers-reduced-motion: reduce) {
.reduce-motion\:u-text-blue {
color: blue !important;
}
}

@media screen and (min-width: 1024px) {
.u-text-blue-lg {
@media screen and (min-width: 640px) {
.u-text-blue-sm {
color: blue !important;
}
}

@media screen and (min-width: 1280px) {
.u-text-blue-xl {
.hover\:u-text-blue-sm:hover {
color: blue !important;
}
}

.hover\:u-text-blue:hover {
color: blue !important;
@media screen and (min-width: 640px) and (prefers-color-scheme: dark) {
.dark\:u-text-blue-sm {
color: blue !important;
}
}

@media screen and (min-width: 640px) {
.hover\:u-text-blue-sm:hover {
@media screen and (min-width: 640px) and (prefers-reduced-motion: reduce) {
.reduce-motion\:u-text-blue-sm {
color: blue !important;
}
}

@media screen and (min-width: 768px) {
.hover\:u-text-blue-md:hover {
.u-text-blue-md {
color: blue !important;
}
}

@media screen and (min-width: 1024px) {
.hover\:u-text-blue-lg:hover {
.hover\:u-text-blue-md:hover {
color: blue !important;
}
}

@media screen and (min-width: 1280px) {
.hover\:u-text-blue-xl:hover {
@media screen and (min-width: 768px) and (prefers-color-scheme: dark) {
.dark\:u-text-blue-md {
color: blue !important;
}
}
@media (prefers-color-scheme: dark) {
.dark\:u-text-blue {

@media screen and (min-width: 768px) and (prefers-reduced-motion: reduce) {
.reduce-motion\:u-text-blue-md {
color: blue !important;
}
}

@media screen and (min-width: 640px) and (prefers-color-scheme: dark) {
.dark\:u-text-blue-sm {
@media screen and (min-width: 1024px) {
.u-text-blue-lg {
color: blue !important;
}
}

@media screen and (min-width: 768px) and (prefers-color-scheme: dark) {
.dark\:u-text-blue-md {
.hover\:u-text-blue-lg:hover {
color: blue !important;
}
}
Expand All @@ -104,32 +105,24 @@
}
}

@media screen and (min-width: 1280px) and (prefers-color-scheme: dark) {
.dark\:u-text-blue-xl {
color: blue !important;
}
}

@media (prefers-reduced-motion: reduce) {
.reduce-motion\:u-text-blue {
@media screen and (min-width: 1024px) and (prefers-reduced-motion: reduce) {
.reduce-motion\:u-text-blue-lg {
color: blue !important;
}
}

@media screen and (min-width: 640px) and (prefers-reduced-motion: reduce) {
.reduce-motion\:u-text-blue-sm {
@media screen and (min-width: 1280px) {
.u-text-blue-xl {
color: blue !important;
}
}

@media screen and (min-width: 768px) and (prefers-reduced-motion: reduce) {
.reduce-motion\:u-text-blue-md {
.hover\:u-text-blue-xl:hover {
color: blue !important;
}
}

@media screen and (min-width: 1024px) and (prefers-reduced-motion: reduce) {
.reduce-motion\:u-text-blue-lg {
@media screen and (min-width: 1280px) and (prefers-color-scheme: dark) {
.dark\:u-text-blue-xl {
color: blue !important;
}
}
Expand Down

0 comments on commit b5dd955

Please sign in to comment.