Sass breaks when using CSS vars in _settings.css

Lefthandmedia commented 2 weeks ago

What should happen?

the css should build normally as it has been untill 6.9.0

What happens instead?

I have a css var in my _settings.scss file, $switch-background: var(--uvaGreyDarker); the build process now breaks with this error.

node_modules/foundation-sites/scss/components/_switch.scss
Error: $color: var(--uvaGreyDarker) is not a color.
   ╷
15 │ $switch-background-focus: scale-color($switch-background, $lightness: -10%) !default;
   │                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/foundation-sites/scss/components/_switch.scss 15:27  @import
  node_modules/foundation-sites/scss/foundation.scss 41:9           @import

And the css does not get build

Possible Solution

...

Test Case and/or Steps to Reproduce (for bugs)

Test Case:

How to reproduce:

change $switch-background in _settings.scss to a css variable ( var(--MyColor))
start gulp build (npm run build)
see the error in the console.

Context

We are using the build script from https://github.com/foundation/foundation-zurb-template/tree/master although the Gulpfile has been refactored over the years to use dartSASS

import gulpSass from 'gulp-sass';
import dartSass from 'sass';
const _sass = gulpSass(dartSass);

It build everything fine untill today. Since we updates foundation-sites to version 6.9.0 the build for CSS breaks.

Interesting because it trips over a variable that is used in the foundation-switch component that we don't use. It has been commented out in our app.scss. ...

Your Environment

Foundation version(s) used: 6.9.0
Browser(s) name and version(s): all
Device, Operating System and version: OSX
Link to your project:

Checklist

[x ] I have read and follow the CONTRIBUTING.md document.
[ x] There are no other issues similar to this one.
[ x] The issue title and template are correctly filled.

mrleblanc101 commented 2 weeks ago

Of course this cannot work 🤔 How do you expect SASS to lighthen a runtime variable, when SASS is ran at build-time

joeworkman commented 2 weeks ago

There is really nothing that I can do with this one at this time. I do have a build of Foundation in a dev branch that supports CSS variables. However, this is clearly a major breaking change. This is something that I would like to do with F7. I think that using CSS variables is very powerful. With the current Sass setup, it's not practical though.

My best recommendation is to do that opposite of what you are doing. Instead of setting a CSS variable to be your color in Sass, you will use the Sass variable to populate the CSS variable. Hopefully that makes sense.

Another options would be to simply hard code that Sass variable with a color instead of having the scale-color function.

Lefthandmedia commented 2 weeks ago

Joe I understand. What puzzled me was the fact that this obvious mistake on our part (using a VAR in a sass calculation) popped up only now after years in a component we don't use. Seems like although have commented out the offending component (foundation-switch) years ago in our app.scss it now somehow reaches the build process. I dearly hope that not all other components we have commented out in our app.scss ended up in the compiled app.css.

foundation / foundation-sites