archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Working on moving things to generic generators

Browse Source
This commit is contained in:
Adam Wathan 2017-08-03 12:57:18 -04:00
parent 4c93b3f1ce
commit 669ec1b558
6 changed files with 87 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/generators.less
View File

@ -21,6 +21,7 @@
}
}
@import "generators/class-variants";
@import "generators/backgrounds";
@import "generators/border-colors";

50
src/generators/class-variants.less Normal file
View File

@ -0,0 +1,50 @@
.generate-utility-variant(@utility; @variant; @ruleset) {
@variant-name: extract(@variant, 1);
@__variant-value: @variant;
.define-selector(~"@{utility}-@{variant-name}"; @ruleset);
}
.generate-utility-variants(@utility; @variants; @ruleset; @i: 1) when (@i <= length(@variants)) and (length(extract(@variants, @i)) = 1) {
& {
.generate-utility-variant(@utility; @variants; @ruleset);
}
}
.generate-utility-variants(@utility; @variants; @ruleset; @i: 1) when (@i <= length(@variants)) and (length(extract(@variants, @i)) = 2) {
& {
@variant: extract(@variants, @i);
.generate-utility-variant(@utility; @variant; @ruleset);
}
.generate-utility-variants(@utility; @variants; @ruleset; @i + 1);
}
.generate-screen-utility-variant(@utility; @variant; @screen-name; @screen-width; @ruleset) {
@media (min-width: @screen-width) {
@variant-name: extract(@variant, 1);
@__variant-value: @variant;
.define-selector(~"@{screen-name}\:@{utility}-@{variant-name}"; @ruleset);
}
}
.generate-screen-utility-variants(@utility; @variants; @screen-name; @screen-width; @ruleset; @i: 1) when (@i <= length(@variants)) and (length(extract(@variants, @i)) = 1) {
& {
.generate-screen-utility-variant(@utility; @variants; @screen-name; @screen-width; @ruleset);
}
}
.generate-screen-utility-variants(@utility; @variants; @screen-name; @screen-width; @ruleset; @i: 1) when (@i <= length(@variants)) and (length(extract(@variants, @i)) = 2) {
& {
@variant: extract(@variants, @i);
.generate-screen-utility-variant(@utility; @variant; @screen-name; @screen-width; @ruleset);
}
.generate-screen-utility-variants(@utility; @variants; @screen-name; @screen-width; @ruleset; @i + 1);
}
.generate-responsive-utility-variants(@utility; @variants; @screens; @ruleset; @i: 1) when (@i <= length(@screens)) {
@screen: extract(@screens, @i);
@screen-name: extract(@screen, 1);
@screen-width: extract(@screen, 2);
.generate-screen-utility-variants(@utility; @variants; @screen-name; @screen-width; @ruleset);
.generate-responsive-utility-variants(@utility; @variants; @screens; @ruleset; @i + 1);
}

75
src/generators/constrain.less
View File

@ -1,69 +1,18 @@
.generate-constrain-utility(@variant; @size) {
.define-selector(~"constrain-@{variant}"; {
max-width: @size;
flex-basis: @size;
.define-constrains(@variants) {
.generate-utility-variants('constrain'; @variants; {
max-width: extract(@__variant-value, 2);
flex-basis: extract(@__variant-value, 2);
});
}
.generate-constrain-utilities(@size-variants; @i: 1) when (@i <= length(@size-variants)) and (length(extract(@size-variants, @i)) = 1) {
@name: extract(@size-variants, 1);
@size: extract(@size-variants, 2);
.generate-constrain-utility(@name; @size);
.define-constrains(@variants; none) {
.define-constrains(@variants);
}
.generate-constrain-utilities(@size-variants; @i: 1) when (@i <= length(@size-variants)) and (length(extract(@size-variants, @i)) = 2) {
@variant: extract(@size-variants, @i);
@name: extract(@variant, 1);
@size: extract(@variant, 2);
.generate-constrain-utility(@name; @size);
.generate-constrain-utilities(@size-variants; @i + 1);
}
.generate-screen-constrain-utility(@variant; @size; @screen-name; @screen-width) {
@media (min-width: @screen-width) {
.define-selector(~"@{screen-name}\:constrain-@{variant}"; {
max-width: @size;
flex-basis: @size;
});
}
}
.generate-screen-constrain-utilities(@size-variants; @screen-name; @screen-width; @i: 1) when (@i <= length(@size-variants)) and (length(extract(@size-variants, @i)) = 1) {
@name: extract(@size-variants, 1);
@size: extract(@size-variants, 2);
.generate-screen-constrain-utility(@name; @size; @screen-name; @screen-width);
}
.generate-screen-constrain-utilities(@size-variants; @screen-name; @screen-width; @i: 1) when (@i <= length(@size-variants)) and (length(extract(@size-variants, @i)) = 2) {
@variant: extract(@size-variants, @i);
@name: extract(@variant, 1);
@size: extract(@variant, 2);
.generate-screen-constrain-utility(@name; @size; @screen-name; @screen-width);
.generate-screen-constrain-utilities(@size-variants; @screen-name; @screen-width; @i + 1);
}
.generate-responsive-constrain-utilities(@size-variants; @screens; @i: 1) when (@i <= length(@screens)) {
@screen: extract(@screens, @i);
@screen-name: extract(@screen, 1);
@screen-width: extract(@screen, 2);
.generate-screen-constrain-utilities(@size-variants; @screen-name; @screen-width);
.generate-responsive-constrain-utilities(@size-variants; @screens; @i + 1);
}
.define-constrains(@size-variants) {
.generate-constrain-utilities(@size-variants);
}
.define-constrains(@size-variants) when (@screens = none) {
.generate-constrain-utilities(@size-variants);
}
.define-constrains(@size-variants; @screens) {
.generate-constrain-utilities(@size-variants);
.generate-responsive-constrain-utilities(@size-variants; @screens);
.define-constrains(@variants; @screens) when not (@screens = none) {
.define-constrains(@variants);
.generate-responsive-utility-variants('constrain'; @variants; @screens; {
max-width: extract(@__variant-value, 2);
flex-basis: extract(@__variant-value, 2);
});
}

29
src/generators/text-sizes.less
View File

@ -1,23 +1,16 @@
.generate-text-size-utility(@variant; @size) {
.define-selector(~"text-@{variant}"; { font-size: @size; });
.define-text-sizes(@variants) {
.generate-utility-variants('text'; @variants; {
font-size: extract(@__variant-value, 2);
});
}
.generate-text-size-utilities(@size-variants; @i: 1) when (@i <= length(@size-variants)) and (length(extract(@size-variants, @i)) = 1) {
@name: extract(@size-variants, 1);
@size: extract(@size-variants, 2);
.generate-text-size-utility(@name; @size);
.define-text-sizes(@variants; none) {
.define-text-sizes(@variants);
}
.generate-text-size-utilities(@size-variants; @i: 1) when (@i <= length(@size-variants)) and (length(extract(@size-variants, @i)) = 2) {
@variant: extract(@size-variants, @i);
@name: extract(@variant, 1);
@size: extract(@variant, 2);
.generate-text-size-utility(@name; @size);
.generate-text-size-utilities(@size-variants; @i + 1);
}
.define-text-sizes(@size-variants) {
.generate-text-size-utilities(@size-variants);
.define-text-sizes(@variants; @screens) when not (@screens = none) {
.define-text-sizes(@variants);
.generate-responsive-utility-variants('text'; @variants; @screens; {
font-size: extract(@__variant-value, 2);
});
}

29
src/generators/text-weights.less
View File

@ -1,23 +1,16 @@
.generate-weight-utility(@variant; @weight) {
.define-selector(~"text-@{variant}"; { font-weight: @weight; });
.define-text-weights(@variants) {
.generate-utility-variants('text'; @variants; {
font-weight: extract(@__variant-value, 2);
});
}
.generate-weight-utilities(@weight-variants; @i: 1) when (@i <= length(@weight-variants)) and (length(extract(@weight-variants, @i)) = 1) {
@name: extract(@weight-variants, 1);
@weight: extract(@weight-variants, 2);
.generate-weight-utility(@name; @weight);
.define-text-weights(@variants; none) {
.define-text-weights(@variants);
}
.generate-weight-utilities(@weight-variants; @i: 1) when (@i <= length(@weight-variants)) and (length(extract(@weight-variants, @i)) = 2) {
@variant: extract(@weight-variants, @i);
@name: extract(@variant, 1);
@weight: extract(@variant, 2);
.generate-weight-utility(@name; @weight);
.generate-weight-utilities(@weight-variants; @i + 1);
}
.define-text-weights(@weight-variants) {
.generate-weight-utilities(@weight-variants);
.define-text-weights(@variants; @screens) when not (@screens = none) {
.define-text-weights(@variants);
.generate-responsive-utility-variants('text'; @variants; @screens; {
font-weight: extract(@__variant-value, 2);
});
}

10
src/utilities/text.less
View File

@ -42,7 +42,6 @@
@text-dark-softer: hsl(0, 0%, 65%);
@text-dark-softest: hsl(0, 0%, 75%);
// Sizes
.define-text-sizes(
'xs' @font-size-xs,
@ -52,7 +51,7 @@
'xl' @font-size-xl,
'2xl' @font-size-2xl,
'3xl' @font-size-3xl
;);
; @screens);
// Weights
.define-text-weights(
@ -61,7 +60,7 @@
'regular' @font-weight-regular,
'medium' @font-weight-medium,
'bold' @font-weight-bold
;);
; @screens);
// Colors
.define-text-color(light;
@ -123,11 +122,6 @@
&text-xl { .text-xl; }
&text-2xl { .text-2xl; }
&text-3xl { .text-3xl; }
&text-hairline { .text-hairline; }
&text-thin { .text-thin; }
&text-regular { .text-regular; }
&text-medium { .text-medium; }
&text-bold { .text-bold; }
&text-light { .text-light; }
&text-light-soft { .text-light-soft; }
&text-light-softer { .text-light-softer; }