Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix compile errors with Dart Sass #2867

Merged
merged 10 commits into from Nov 9, 2018
Merged

Fix compile errors with Dart Sass #2867

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
4a7d3c7
Ignore `.sass-cache` folder
thisisdano Nov 2, 2018
8034be1
Isolate errors
thisisdano Nov 2, 2018
b3b4e0b
Disallow non-tokens in functions and throw a more helpful error
thisisdano Nov 2, 2018
7ebc8ac
Remove debug and copyedit
thisisdano Nov 2, 2018
d2bf889
Use proper token in banner
thisisdano Nov 2, 2018
bc02180
Use quoted keys in the number-to-value lookup
thisisdano Nov 2, 2018
2eda94c
Inspect numbers to send a quoted value to the lookup
thisisdano Nov 2, 2018
296f46b
Remove debug comments
thisisdano Nov 2, 2018
d7874e8
Rename number-to-value() --> number-to-token()
thisisdano Nov 2, 2018
d1c919b
Rewrite to fix `interpolation near operators` Sass deprecation warnings
thisisdano Nov 2, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 3 additions & 0 deletions .gitignore
View file
Open in desktop
Expand Up @@ -21,3 +21,6 @@ src/stylesheets/lib
# ignore saved screenshots
spec/screenshots/*.png
spec/screenshots/metadata.js

# ignore sass cache
.sass-cache/
2 changes: 1 addition & 1 deletion src/stylesheets/components/_banner.scss
View file
Open in desktop
Expand Up @@ -12,7 +12,7 @@
.usa-banner-content {
@include grid-container($theme-site-max-width);
@include add-responsive-site-margins;
background-color: color(transparent);
background-color: color('transparent');
font-size: font-size($theme-banner-font-family, 4);
overflow: hidden;
padding-bottom: units(2);
Expand Down
19 changes: 13 additions & 6 deletions src/stylesheets/core/_functions.scss
View file
Open in desktop
Expand Up @@ -117,8 +117,7 @@ Leaves bools as is
*/

@function smart-quote($value) {
@if type-of($value) == 'string'
or type-of($value) == 'color' {
@if type-of($value) == 'string' {
@return quote($value);
}

Expand All @@ -127,6 +126,12 @@ Leaves bools as is
@return inspect($value);
}

@if type-of($value) == 'color' {
@error 'Only use quoted color tokens in USWDS functions and mixins. '
+ 'See v2.designsystem.digital.gov/style-tokens/color '
+ 'for more information.';
}

@return $value;
}

Expand Down Expand Up @@ -688,7 +693,7 @@ for a property

/*
----------------------------------------
number-to-value()
number-to-token()
----------------------------------------
Converts an integer or numeric value
into a system value
Expand All @@ -698,7 +703,9 @@ Ex: 0.5 --> '05'
----------------------------------------
*/

@function number-to-value($number) {
@function number-to-token($number) {
$number: inspect($number);

@if not map-has-key($number-to-value, $number) {
@return false;
}
Expand Down Expand Up @@ -751,7 +758,7 @@ functions and mixins.
}

$value: nth($value, 1);
$converted: number-to-value($value);
$converted: number-to-token($value);
$quoted-value: if(
$converted,
smart-quote($converted),
Expand Down Expand Up @@ -934,7 +941,7 @@ the desired final units (currently rem)
@function units($value) {
$converted: if(type-of($value) == 'string',
quote($value),
number-to-value($value)
number-to-token($value)
);

@if not map-has-key($project-spacing-standard, $converted) {
Expand Down
62 changes: 31 additions & 31 deletions src/stylesheets/core/_variables.scss
View file
Open in desktop
Expand Up @@ -94,37 +94,37 @@ $spacing-to-value: (
);

$number-to-value: (
1px: '1px',
2px: '2px',
0: 0,
1: 1,
2: 2,
3: 3,
4: 4,
5: 5,
6: 6,
7: 7,
8: 8,
9: 9,
10: 10,
15: 15,
0.5: '05',
1.5: '105',
2.5: '205',
-1px: 'neg-1px',
-2px: 'neg-2px',
-0.5: 'neg-05',
-1: 'neg-1',
-1.5: 'neg-105',
-2: 'neg-2',
-2.5: 'neg-205',
-3: 'neg-3',
-4: 'neg-4',
-5: 'neg-5',
-6: 'neg-6',
-7: 'neg-7',
-8: 'neg-8',
-9: 'neg-9',
'1px': '1px',
'2px': '2px',
'0': 0,
'1': 1,
'2': 2,
'3': 3,
'4': 4,
'5': 5,
'6': 6,
'7': 7,
'8': 8,
'9': 9,
'10': 10,
'15': 15,
'0.5': '05',
'1.5': '105',
'2.5': '205',
'-1px': 'neg-1px',
'-2px': 'neg-2px',
'-0.5': 'neg-05',
'-1': 'neg-1',
'-1.5': 'neg-105',
'-2': 'neg-2',
'-2.5': 'neg-205',
'-3': 'neg-3',
'-4': 'neg-4',
'-5': 'neg-5',
'-6': 'neg-6',
'-7': 'neg-7',
'-8': 'neg-8',
'-9': 'neg-9',
);

/*
Expand Down
2 changes: 1 addition & 1 deletion src/stylesheets/core/mixins/_font-face.scss
View file
Open in desktop
Expand Up @@ -33,7 +33,7 @@
'#{$font-name}',
'#{$theme-font-path}/#{$dir}/#{$filename}',
#{$weight},
#{$font-style}
unquote('#{$font-style}')
);
}
}
Expand Down
38 changes: 19 additions & 19 deletions src/stylesheets/core/mixins/utilities/_border.scss
View file
Open in desktop
Expand Up @@ -39,23 +39,23 @@ $border-utilities: (
}
}
@else if type-of($this-value) == 'number' {
$converted-value: number-to-value($this-value);
$converted-value: number-to-token($this-value);
@if map-has-key($widths, $converted-value) {
$match: true;
$final-value: map-get($widths, $converted-value);
@if $side == n {
border-width: $final-value#{$important};
border-width: unquote('#{$final-value}#{$important}');
}
@else if $side == x {
border-left-width: $final-value#{$important};
border-right-width: $final-value#{$important};
border-left-width: unquote('#{$final-value}#{$important}');
border-right-width: unquote('#{$final-value}#{$important}');
}
@else if $side == y {
border-bottom-width: $final-value#{$important};
border-top-width: $final-value#{$important};
border-bottom-width: unquote('#{$final-value}#{$important}');
border-top-width: unquote('#{$final-value}#{$important}');
}
@else {
border-#{$side}-width: $final-value#{$important};
border-#{$side}-width: unquote('#{$final-value}#{$important}');
}
}
@else {
Expand All @@ -67,18 +67,18 @@ $border-utilities: (
$this-value: smart-quote($this-value);
$final-value: map-get($widths, $this-value);
@if $side == n {
border-width: $final-value#{$important};
border-width: unquote('#{$final-value}#{$important}');
}
@else if $side == x {
border-left-width: $final-value#{$important};
border-right-width: $final-value#{$important};
border-left-width: unquote('#{$final-value}#{$important}');
border-right-width: unquote('#{$final-value}#{$important}');
}
@else if $side == y {
border-bottom-width: $final-value#{$important};
border-top-width: $final-value#{$important};
border-bottom-width: unquote('#{$final-value}#{$important}');
border-top-width: unquote('#{$final-value}#{$important}');
}
@else {
border-#{$side}-width: $final-value#{$important};
border-#{$side}-width: unquote('#{$final-value}#{$important}');
}
}
@else {
Expand All @@ -89,18 +89,18 @@ $border-utilities: (
$has-style: true;
$final-value: map-get($styles, $converted-value);
@if $side == n {
border-style: $final-value#{$important};
border-style: unquote('#{$final-value}#{$important}');
}
@else if $side == x {
border-left-style: $final-value#{$important};
border-right-style: $final-value#{$important};
border-left-style: unquote('#{$final-value}#{$important}');
border-right-style: unquote('#{$final-value}#{$important}');
}
@else if $side == y {
border-bottom-style: $final-value#{$important};
border-top-style: $final-value#{$important};
border-bottom-style: unquote('#{$final-value}#{$important}');
border-top-style: unquote('#{$final-value}#{$important}');
}
@else {
border-#{$side}-style: $final-value#{$important};
border-#{$side}-style: unquote('#{$final-value}#{$important}');
}
}
@else {
Expand Down
4 changes: 2 additions & 2 deletions src/stylesheets/core/mixins/utilities/_outline.scss
View file
Open in desktop
Expand Up @@ -12,12 +12,12 @@
outline-color: color(smart-quote($this-value)) #{$important};
}
@else if type-of($this-value) == 'number' {
$converted-value: number-to-value($this-value);
$converted-value: number-to-token($this-value);
$widths: map-deep-get($system-properties, outline, standard);
@if map-has-key($widths, $converted-value) {
$match: true;
$final-value: map-get($widths, $converted-value);
outline-width: $final-value#{$important};
outline-width: unquote('#{$final-value}#{$important}');
outline-style: solid#{$important};
}
@else {
Expand Down