Variable X is undefined and used without a fallback

[madsfors]

When using the gulp script "npm run gulp watch-ie" I get following postcss-css-variables error:

The variables are from the TOC component and haven't been altered in any way.

[ghost]

Same here. Happens even on a completely fresh download of the codyhouse-framework-master.zip when running the sass-ie task.

[sebastiano-guerriero]

Hi 👋 It's an issue with the postcss-css-variables plugin: if the variables are not defined in the :root, it throws a warning. The variables are defined and work fine (e.g., the --gap-x variable is defined in the .grid class).

[madsfors]

Hi Sebastiano. Thanks for the reply! The variables work as expected (and thus works 👌 in any modern browser), but whenever using the generated style-fallback.css, the styling seems to break. I'm in the (unfortunate) situation that I have to support IE11 so I'm experiencing code that turns out with "undefined" declarations. This is i.e. happening with the lists component. See below:

How would you suggest fixing this issue?

[sebastiano-guerriero]

Hi! Moving the custom properties to the :root element should fix the issue:

:root {
  --list-space-y: var(--space-xxs); // vertical gaps
  --list-offset: var(--space-xs);  // sublist horizontal offset
  --list-line-height: var(--body-line-height);  // items line-height
}

I'll give it a test 👍

[madsfors]

It's not really fixing it, unfortunately. The error is gone but the output is not satisfactory:

[sebastiano-guerriero]

We just published a new version of the List component that fixes the IE issues: https://codyhouse.co/ds/components/app/list

[madsfors]

Perfect. Thanks a lot!