tocss: Simplify the hugo:vars type handling

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
This commit is contained in:
Bjørn Erik Pedersen 2023-02-21 18:32:09 +01:00
parent a1a9c08b5f
commit ecf3cd514f
9 changed files with 206 additions and 57 deletions

View file

@ -0,0 +1,20 @@
// Copyright 2023 The Hugo Authors. All rights reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
package css
// QuotedString is a string that needs to be quoted in CSS.
type QuotedString string
// UnquotedString is a string that does not need to be quoted in CSS.
type UnquotedString string

View file

@ -135,7 +135,7 @@ type Options struct {
// Vars will be available in 'hugo:vars', e.g:
// @use "hugo:vars";
// $color: vars.$color;
Vars map[string]string
Vars map[string]any
}
func decodeOptions(m map[string]any) (opts Options, err error) {

View file

@ -387,6 +387,10 @@ color_hsl = "hsl(0, 0%, 100%)"
dimension = "24px"
percentage = "10%"
flex = "5fr"
name = "Hugo"
url = "https://gohugo.io"
integer = 32
float = 3.14
-- assets/scss/main.scss --
@use "hugo:vars";
@use "sass:meta";
@ -397,8 +401,15 @@ flex = "5fr"
@debug meta.type-of(vars.$dimension);
@debug meta.type-of(vars.$percentage);
@debug meta.type-of(vars.$flex);
@debug meta.type-of(vars.$name);
@debug meta.type-of(vars.$url);
@debug meta.type-of(vars.$not_a_number);
@debug meta.type-of(vars.$integer);
@debug meta.type-of(vars.$float);
@debug meta.type-of(vars.$a_number);
-- layouts/index.html --
{{ $vars := site.Params.sassvars}}
{{ $vars = merge $vars (dict "not_a_number" ("32xxx" | css.Quoted) "a_number" ("234" | css.Unquoted) )}}
{{ $cssOpts := (dict "transpiler" "dartsass" "vars" $vars ) }}
{{ $r := resources.Get "scss/main.scss" | toCSS $cssOpts }}
T1: {{ $r.Content }}
@ -418,5 +429,11 @@ T1: {{ $r.Content }}
b.AssertLogMatches(`INFO.*Dart Sass: .*assets.*main.scss:6:0: number`)
b.AssertLogMatches(`INFO.*Dart Sass: .*assets.*main.scss:7:0: number`)
b.AssertLogMatches(`INFO.*Dart Sass: .*assets.*main.scss:8:0: number`)
b.AssertLogMatches(`INFO.*Dart Sass: .*assets.*main.scss:9:0: string`)
b.AssertLogMatches(`INFO.*Dart Sass: .*assets.*main.scss:10:0: string`)
b.AssertLogMatches(`INFO.*Dart Sass: .*assets.*main.scss:11:0: string`)
b.AssertLogMatches(`INFO.*Dart Sass: .*assets.*main.scss:12:0: number`)
b.AssertLogMatches(`INFO.*Dart Sass: .*assets.*main.scss:13:0: number`)
b.AssertLogMatches(`INFO.*Dart Sass: .*assets.*main.scss:14:0: number`)
}

View file

@ -15,65 +15,67 @@ package sass
type cssValue struct {
prefix []string
sufix []string
suffix []string
}
var (
cssValues = cssValue{
// https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
prefix: []string{
"#",
"rgb(",
"attr(",
"calc(",
"clamp(",
"hsl(",
"hwb(",
"lch(",
"lab(",
"calc(",
"min(",
"lch(",
"max(",
"min(",
"minmax(",
"clamp(",
"attr(",
"rgb(",
},
sufix: []string{
"em",
"ex",
// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units#dimensions
suffix: []string{
"%",
"cap",
"ch",
"ic",
"rem",
"lh",
"rlh",
"vw",
"vh",
"vi",
"vb",
"vmin",
"vmax",
"cqw",
"cm",
"cqb",
"cqh",
"cqi",
"cqb",
"cqmin",
"cqmax",
"cm",
"mm",
"Q",
"cqmin",
"cqw",
"deg",
"dpcm",
"dpi",
"dppx",
"em",
"ex",
"fr",
"grad",
"ic",
"in",
"lh",
"mm",
"ms",
"pc",
"pt",
"px",
"deg",
"grad",
"Q",
"rad",
"turn",
"rem",
"rlh",
"s",
"ms",
"fr",
"dpi",
"dpcm",
"dppx",
"turn",
"vb",
"vh",
"vi",
"vmax",
"vmin",
"vw",
"x",
"%",
},
}
)

View file

@ -1,4 +1,4 @@
// Copyright 2022 The Hugo Authors. All rights reserved.
// Copyright 2023 The Hugo Authors. All rights reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
@ -15,15 +15,18 @@ package sass
import (
"fmt"
"regexp"
"sort"
"strings"
"github.com/gohugoio/hugo/common/types/css"
)
const (
HugoVarsNamespace = "hugo:vars"
)
func CreateVarsStyleSheet(vars map[string]string) string {
func CreateVarsStyleSheet(vars map[string]any) string {
if vars == nil {
return ""
}
@ -35,35 +38,56 @@ func CreateVarsStyleSheet(vars map[string]string) string {
if !strings.HasPrefix(k, "$") {
prefix = "$"
}
// These variables can be a combination of Sass identifiers (e.g. sans-serif), which
// should not be quoted, and URLs et, which should be quoted.
// unquote() is knowing what to do with each.
// Use quoteVar() to check if the variables should be quoted or not.
if quoteVar(v) {
varsSlice = append(varsSlice, fmt.Sprintf("%s%s: unquote(%q);", prefix, k, v))
} else {
varsSlice = append(varsSlice, fmt.Sprintf("%s%s: %s;", prefix, k, v))
switch v.(type) {
case css.QuotedString:
// Marked by the user as a string that needs to be quoted.
varsSlice = append(varsSlice, fmt.Sprintf("%s%s: %q;", prefix, k, v))
default:
if isTypedCSSValue(v) {
// E.g. 24px, 1.5rem, 10%, hsl(0, 0%, 100%), calc(24px + 36px), #fff, #ffffff.
varsSlice = append(varsSlice, fmt.Sprintf("%s%s: %v;", prefix, k, v))
} else {
// unquote will preserve quotes around URLs etc. if needed.
varsSlice = append(varsSlice, fmt.Sprintf("%s%s: unquote(%q);", prefix, k, v))
}
}
}
sort.Strings(varsSlice)
varsStylesheet = strings.Join(varsSlice, "\n")
fmt.Println(varsStylesheet)
fmt.Println(varsStylesheet)
return varsStylesheet
}
func quoteVar(v string) bool {
v = strings.Trim(v, "\"")
for _, p := range cssValues.prefix {
if strings.HasPrefix(v, p) {
return false
var (
isCSSColor = regexp.MustCompile(`^#[0-9a-fA-F]{3,6}$`)
isCSSFunc = regexp.MustCompile(`^([a-zA-Z-]+)\(`)
isCSSUnit = regexp.MustCompile(`^([0-9]+)(\.[0-9]+)?([a-zA-Z-%]+)$`)
)
// isTypedCSSValue returns true if the given string is a CSS value that
// we should preserve the type of, as in: Not wrap it in quotes.
func isTypedCSSValue(v any) bool {
switch s := v.(type) {
case int, int8, int16, int32, int64, uint, uint8, uint16, uint32, uint64, float32, float64, css.UnquotedString:
return true
case string:
if isCSSColor.MatchString(s) {
return true
}
}
for _, s := range cssValues.sufix {
if strings.HasSuffix(v, s) {
return false
if isCSSFunc.MatchString(s) {
return true
}
if isCSSUnit.MatchString(s) {
return true
}
}
return true
return false
}

View file

@ -0,0 +1,44 @@
// Copyright 2023 The Hugo Authors. All rights reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
package sass
import (
"testing"
qt "github.com/frankban/quicktest"
)
func TestIsUnquotedCSSValue(t *testing.T) {
c := qt.New(t)
for _, test := range []struct {
in any
out bool
}{
{"24px", true},
{"1.5rem", true},
{"10%", true},
{"hsl(0, 0%, 100%)", true},
{"calc(24px + 36px)", true},
{"24xxx", true}, // a false positive.
{123, true},
{123.12, true},
{"#fff", true},
{"#ffffff", true},
{"#ffffffff", false},
} {
c.Assert(isTypedCSSValue(test.in), qt.Equals, test.out)
}
}

View file

@ -63,7 +63,7 @@ type Options struct {
// Vars will be available in 'hugo:vars', e.g:
// @import "hugo:vars";
Vars map[string]string
Vars map[string]any
}
func DecodeOptions(m map[string]any) (opts Options, err error) {

41
tpl/css/css.go Normal file
View file

@ -0,0 +1,41 @@
package css
import (
"github.com/gohugoio/hugo/common/types/css"
"github.com/gohugoio/hugo/deps"
"github.com/gohugoio/hugo/tpl/internal"
"github.com/spf13/cast"
)
const name = "css"
// Namespace provides template functions for the "css" namespace.
type Namespace struct {
}
// Quoted returns a string that needs to be quoted in CSS.
func (ns *Namespace) Quoted(v any) css.QuotedString {
s := cast.ToString(v)
return css.QuotedString(s)
}
// Unquoted returns a string that does not need to be quoted in CSS.
func (ns *Namespace) Unquoted(v any) css.UnquotedString {
s := cast.ToString(v)
return css.UnquotedString(s)
}
func init() {
f := func(d *deps.Deps) *internal.TemplateFuncsNamespace {
ctx := &Namespace{}
ns := &internal.TemplateFuncsNamespace{
Name: name,
Context: func(args ...any) (any, error) { return ctx, nil },
}
return ns
}
internal.AddTemplateFuncsNamespace(f)
}

View file

@ -36,6 +36,7 @@ import (
_ "github.com/gohugoio/hugo/tpl/collections"
_ "github.com/gohugoio/hugo/tpl/compare"
_ "github.com/gohugoio/hugo/tpl/crypto"
_ "github.com/gohugoio/hugo/tpl/css"
_ "github.com/gohugoio/hugo/tpl/data"
_ "github.com/gohugoio/hugo/tpl/debug"
_ "github.com/gohugoio/hugo/tpl/diagrams"