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

Transpiled hex-string color from config file cannot be used as color in css functions such as lighten() and darken() #10632

Closed
MJacred opened this issue Jan 20, 2023 · 3 comments · Fixed by #10718
Closed

Transpiled hex-string color from config file cannot be used as color in css functions such as lighten() and darken() #10632

MJacred opened this issue Jan 20, 2023 · 3 comments · Fixed by #10718
Labels
Bug Outdated
Milestone
v0.112.0

Comments

@MJacred
Copy link

MJacred commented Jan 20, 2023 •
edited
Loading

What version of Hugo are you using (hugo version)?

$ hugo version
hugo v0.110.0-e32a493b7826d02763c3b79623952e625402b168+extended

Does this issue reproduce with the latest release?

Yes

Context

Followed documentation from v0.109.0 relase notes as well as https://discourse.gohugo.io/t/initialize-sass-variables-from-hugo-templates/42053/1 for LibSass transpiler

Cannot use css functions such as lighten() and darken(), if the value comes transpiled from config file, because it's not a color

Setup is as follows…

config.yaml

params:
  style:
    color_palette_white: '#fff'

style.sass

@import "bulma/bulma"
@import "mystyle/core"

mystyle/core.scss

@import "hugo:vars";

@import 'partials/something';
// and many more .scss imports

mystyle/partials/_something.scss

.something {
  border-bottom: 1px solid lighten($color-palette-white, 5%);
}

error log

Start building sites … 
hugo v0.110.0-e32a493b7826d02763c3b79623952e625402b168+extended
Error: Error building site: TOCSS: failed to transform "style.sass" (text/x-sass): "/path/themes/my-theme/assets/mystyle/partials/_something.scss:101:34": argument `$color` of `lighten($color, $amount)` must be a color
Built in 266 ms
@MJacred MJacred changed the title Transpiled hex-string color from config file cannot be used in css functions such as lighten() and darken() Transpiled hex-string color from config file cannot be used as color in css functions such as lighten() and darken() Jan 20, 2023
@jmooring
Copy link
Member

It looks like everything is injected as a string. I was unable to pass numbers (e.g., RGB values per channel, opacity, etc.), and there doesn't appear to be any simple way to cast in Sass.

@bep bep removed the NeedsTriage label Jan 20, 2023
@bep bep added this to the v0.109.0 milestone Jan 20, 2023
@bep
Copy link
Member

bep commented Jan 20, 2023

I have labeled this a bug. Not sure what happens here, but we (I) surely need to look closer into how types/values are converted between Go and Dart.

@bep bep modified the milestones: v0.109.0, v0.111.0 Jan 26, 2023
acclassic added a commit to acclassic/hugo that referenced this issue Feb 12, 2023
@acclassic
resource_transformers/tocss: Fixed hugo:vars casting
4556a8a 
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 gohugoio#10632
@acclassic acclassic mentioned this issue Feb 12, 2023
Merged
@bep bep modified the milestones: v0.111.0, v0.112.0 Feb 15, 2023
bep pushed a commit to acclassic/hugo that referenced this issue Feb 21, 2023
@acclassic @bep
resource_transformers/tocss: Fixed hugo:vars casting
5ae57fd 
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 gohugoio#10632
bep added a commit to acclassic/hugo that referenced this issue Feb 22, 2023
@bep
tocss: Simplify the hugo:vars type handling
b872d71 
Instead of maintaing a list of all CSS units and functions this commit:

* Uses 3 regexps to detect typed CSS values (e.g. `24px`)
* 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`

Updates gohugoio#10632
bep added a commit to acclassic/hugo that referenced this issue Feb 22, 2023
@bep
tocss: Simplify the hugo:vars type handling
3db1a6d 
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 gohugoio#10632
bep pushed a commit that referenced this issue Feb 22, 2023
@acclassic @bep
resource_transformers/tocss: Fixed hugo:vars casting
a1a9c08 
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
bep added a commit that referenced this issue Feb 22, 2023
@bep
tocss: Simplify the hugo:vars type handling
ecf3cd5 
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
@github-actions
Copy link

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 16, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Bug Outdated
Projects
None yet
Milestone
v0.112.0
Development

Successfully merging a pull request may close this issue.

Fixed hugo:vars casting acclassic/hugo
3 participants
@jmooring @bep @MJacred