csstools/postcss-color-mod-function

Not working with webpack if colors in another file

muuvmuuv opened this issue · 2 comments

I'm using your plugin in webpack like this: https://hastebin.com/osuvulenuh.js

It is all working fine if I use color-mod inside my _colors.scss file, but when I try to use it in another file it fails and says:

[1] multi ./scss/additive.scss 28 bytes {style} [built]
    + 7 hidden modules

ERROR in ./scss/additive.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/lib/index.js):
Syntax Error

(14:24) Expected a valid color adjuster

  12 |
  13 |   background: var(--btn-background);
> 14 |   box-shadow: 0 0 0 2px color-mod(var(--btn-background) alpha(80%));
     |                        ^
  15 |
  16 |   color: var(--btn-color);

    at runLoaders (D:\Websites\Additive\Package\node_modules\webpack\lib\NormalModule.js:286:20)
    at D:\Websites\Additive\Package\node_modules\loader-runner\lib\LoaderRunner.js:364:11

You can reference the colors from unrelated files using the importFrom option.

See: https://github.com/jonathantneal/postcss-color-mod-function#importfrom

Thanks, @jonathantneal! Now I get an error because I use alpha and not just a. This is a little bit confusing. All other colour adjusters are working, only alpha is not.