Applicable to Dart Sass only:
- Sass imports with the .css extension indicate a plain CSS @import.
- Sass imports without the .css extension are imported at compile time.
Fixes#10592
Instead of maintaing a list of all CSS units and functions this commit:
* Uses 3 regexps to detect typed CSS values (e.g. `24px`) + properly handle numeric Go types.
* These regexps may have some false positives -- e.g. strings that needs to be quoted.
* For that rare case, you can mark the string with e.g. `"32xxx" | css.Quoted`
* For the opposite case: `"32" | css.Unquoted`
Updates #10632
Variables passed via the hugo:vars function where passed as type string.
This caused problems when using the variables in sass functions because
these expect a specific type. Now we check if the passed variables have
to be quoted and therefore are of type string or if they should not be
quoted and let the type interpretation up to the sass compiler.
Fixes#10632
This commit adds a new `vars` option to both the Sass transpilers (Dart Sass and Libsass).
This means that you can pass a map with key/value pairs to the transpiler:
```handlebars
{{ $vars := dict "$color1" "blue" "$color2" "green" "$font_size" "24px" }}
{{ $cssOpts := (dict "transpiler" "dartsass" "outputStyle" "compressed" "vars" $vars ) }}
{{ $r := resources.Get "scss/main.scss" | toCSS $cssOpts }}
```
And the the variables will be available in the `hugo:vars` namespace. Example usage for Dart Sass:
```scss
@use "hugo:vars" as v;
p {
color: v.$color1;
font-size: v.$font_size;
}
```
Note that Libsass does not support the `use` keyword, so you need to `import` them as global variables:
```scss
@import "hugo:vars";
p {
color: $color1;
font-size: $font_size;
}
```
Hugo will:
* Add a missing leading `$` for the variable names if needed.
* Wrap the values in `unquote('VALUE')` (Sass built-in) to get proper handling of identifiers vs other strings.
This means that you can pull variables directly from e.g. the site config:
```toml
[params]
[params.sassvars]
color1 = "blue"
color2 = "green"
font_size = "24px"
image = "images/hero.jpg"
```
```handlebars
{{ $vars := site.Params.sassvars}}
{{ $cssOpts := (dict "transpiler" "dartsass" "outputStyle" "compressed" "vars" $vars ) }}
{{ $r := resources.Get "scss/main.scss" | toCSS $cssOpts }}
```
Fixes#10555
* @warn and Sass deprecations are printed as WARN
* @debug is currently logged as INFO (needs the `--verbose` flag). We may adjust this if it gets too chatty.
Fixes#9683
