--color-shadow variables undefined

[hehehai]

Local variables under element mouse events are not available

scss file code

.ex-link {
  --color-shadow-1: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2); // fix iOS 12 bug
  box-shadow: 0 0 0 3px var(--color-shadow-1);

  &:hover {
    --color-shadow-2: hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), 0.2); // fix iOS 12 bug
    box-shadow: 0 0 0 3px var(--color-shadow-2);
  }
}

Compile

.ex-link {
  --color-shadow-1: hsla(220, 90%, 56%, 0.2);
  --color-shadow-1: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);
  box-shadow: 0 0 0 3px hsla(220, 90%, 56%, 0.2);
  box-shadow: 0 0 0 3px var(--color-shadow-1);
}

no events, that's work!

.ex-link:hover {
  --color-shadow-2: hsla(355, 90%, 61%, 0.2);
  --color-shadow-2: hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), 0.2);
  box-shadow: undefined;
  box-shadow: 0 0 0 3px var(--color-shadow-2);
}

.ex-link:hover:hover {
  box-shadow: 0 0 0 3px hsla(355, 90%, 61%, 0.2);
  box-shadow: 0 0 0 3px var(--color-shadow-2);
}

.form-control:focus {
  outline: none;
  border-color: hsl(220, 90%, 56%);
  border-color: var(--color-primary);
  --color-shadow: hsla(220, 90%, 56%, 0.2);
  --color-shadow: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);
  box-shadow: undefined;
  box-shadow: 0 0 0 3px var(--color-shadow);
}

.form-control:focus:focus {
  box-shadow: 0 0 0 3px hsla(220, 90%, 56%, 0.2);
  box-shadow: 0 0 0 3px var(--color-shadow);
}

Just the problem after the code is compiled, the browser display is normal (including IE9)

fix

.ex-link {
  --color-shadow-1: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2); // fix iOS 12 bug
  box-shadow: 0 0 0 3px var(--color-shadow-1);
  --color-shadow-2: hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), 0.2); // fix iOS 12 bug

  &:hover {
    box-shadow: 0 0 0 3px var(--color-shadow-2);
  }
}

.ex-link {
  --color-shadow-1: hsla(220, 90%, 56%, 0.2);
  --color-shadow-1: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);
  box-shadow: 0 0 0 3px hsla(220, 90%, 56%, 0.2);
  box-shadow: 0 0 0 3px var(--color-shadow-1);
  --color-shadow-2: hsla(355, 90%, 61%, 0.2);
  --color-shadow-2: hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), 0.2);
}

.ex-link:hover {
  box-shadow: 0 0 0 3px hsla(355, 90%, 61%, 0.2);
  box-shadow: 0 0 0 3px var(--color-shadow-2);
}

[sebastiano-guerriero]

👋hi there! And thanks for the heads up. We're looking further into this, to find out if we can fix the plugin that generates the fallback.

[w3work]

I'm getting a similiar error when i implement the scss of the switch component.

This error shows up in terminal:

events.js:174
      throw er; // Unhandled 'error' event
      ^
TypeError: Cannot read property 'charCodeAt' of undefined
    at C:\Users\sv20006\PhpstormProjects\mittelsaechsisches-theater.de\fileadmin\prototyp\assets\scss\styles.css:794:3
    at module.exports (C:\Users\sv20006\PhpstormProjects\mittelsaechsisches-theater.de\node_modules\postcss-value-parser\lib\parse.js:17:20)
    at new ValueParser (C:\Users\sv20006\PhpstormProjects\mittelsaechsisches-theater.de\node_modules\postcss-value-parser\lib\index.js:7:18)
    at ValueParser (C:\Users\sv20006\PhpstormProjects\mittelsaechsisches-theater.de\node_modules\postcss-value-parser\lib\index.js:10:10)
    at transformValue (C:\Users\sv20006\PhpstormProjects\mittelsaechsisches-theater.de\node_modules\postcss-calc\dist\lib\transform.js:24:42)
    at _default (C:\Users\sv20006\PhpstormProjects\mittelsaechsisches-theater.de\node_modules\postcss-calc\dist\lib\transform.js:59:100)
    at C:\Users\sv20006\PhpstormProjects\mittelsaechsisches-theater.de\node_modules\postcss-calc\dist\index.js:25:51
    at C:\Users\sv20006\PhpstormProjects\mittelsaechsisches-theater.de\node_modules\postcss\lib\container.js:135:18
    at Rule.each (C:\Users\sv20006\PhpstormProjects\mittelsaechsisches-theater.de\node_modules\postcss\lib\container.js:101:16)
    at Rule.walk (C:\Users\sv20006\PhpstormProjects\mittelsaechsisches-theater.de\node_modules\postcss\lib\container.js:131:17)
    at C:\Users\sv20006\PhpstormProjects\mittelsaechsisches-theater.de\node_modules\postcss\lib\container.js:148:24
Emitted 'error' event at:
    at Transform.onerror (C:\Users\sv20006\PhpstormProjects\mittelsaechsisches-theater.de\node_modules\readable-stream\lib\_stream_readable.js:640:52)
    at Transform.emit (events.js:189:13)
    at onwriteError (_stream_writable.js:431:12)
    at onwrite (_stream_writable.js:456:5)
    at Transform.afterTransform (_stream_transform.js:94:3)
    at Immediate.<anonymous> (C:\Users\sv20006\PhpstormProjects\mittelsaechsisches-theater.de\node_modules\gulp-postcss\index.js:93:9)
    at runCallback (timers.js:705:18)
    at tryOnImmediate (timers.js:676:5)
    at processImmediate (timers.js:658:5)

If i comment out these lines, no error anymore:

&:focus + .switch__label,
  &:active + .switch__label {
    --color-shadow: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2); // fix iOS 12 bug
    box-shadow: 0 0 0 3px var(--color-shadow);
  }

[hehehai]

@w3work that's working codepen example

It seems to be the error message of postcss parsing css file, you can check the code location of css error location scss

[w3work]

Yes, i allready see that. But what could be the problem?

I also have this strange problem that in my compiled css file, the @supports (--css:variables) code is always set twice.

For example i have this in my css file:

@supports (--css: variables) {
  @media (min-width: 64rem) {
    .main-footer__nav-wrapper {
  margin-bottom: 1.5625em;
  margin-bottom: var(--space-md);
    }
  }
}

@supports (--css: variables) {
  @media (min-width: 64rem) {
    .main-footer__nav-wrapper {
  margin-bottom: 1.5625em;
  margin-bottom: var(--space-md);
    }
  }
}

It is always doubled.

[claudia-romano]

Please leave comments related to this issue only. Please open a new issue if you have a different problem. All unrelated comments will be deleted.

[w3work]

When will the update with @hehehai fix come? I'm getting the same errors

[claudia-romano]

It seems like the postcss-css-variable plugin incorrectly throws a warning when a css variable is defined inside a class and then used in the :focus selector.

The solution proposed by @hehehai is a great temporary fix (thank you @hehehai!) but does not solve the issue. This is something that has to be fixed inside the postcss-css-variable plugin.

For this reason, and considering the message is only a warning, we are not going to include @hehehai fix (at least for now).

We are still working on the postcss-css-variable plugin to try and fix the issue. This is not a priority though, cosidering the message is only a warning.

PR are welcome!

[sebastiano-guerriero]

this issue has been fixed with the latest version of the framework 🙌