Cannot use simple vars value for setting CSS variable

[John Winston]

I tried to set simple vars as CSS variable, but it doesn't work:

$blue:   #056ef0;

:root{
  --color: $blue;
}

It will gives an error like this:

Syntax Error: SyntaxError                                                      friendly-errors 20:24:33

(1:1) <css input> Unknown word

> 1 | $blue
    | ^

Is this by design?

[Andrey Sitnik]

1. What PostCSS plugins do you use?
2. Show the full track trace of the error.

[bahtou]

may be related:

Copy/Paste the example

$dir:    top;
$blue:   #056ef0;
$column: 200px;

.menu_link {
  background: $blue;
  width: $column;
}
.menu {
  width: calc(4 * $column);
  margin-$(dir): 10px;
}

I get this error:

ERROR in ./components/Footer/styles.css (../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./components/Footer/styles.css)
Module build failed (from ../node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(17:3) postcss-simple-vars: ./components/Footer/styles.css Undefined variable $dir

  15 |   width: $column;
  16 |   width: calc(4 * $column);
> 17 |   margin-$(dir): 10px;
     |   ^
  18 | }
  19 |

Here is my postcssrc.json

module.exports = {
  "plugins": [
    "postcss-import",
    "postcss-map-get",
    "postcss-mixins",
    "postcss-hexrgba",
    "postcss-simple-vars",
    "precss",
    "postcss-preset-env",
    "autoprefixer"
  ]
};

[Andrey Sitnik]

Here is my output (without any error):

.menu_link {
  background: #056ef0;
  width: 200px;
}
.menu {
  width: calc(4 * 200px);
  margin-top: 10px;
}

[bahtou]

went through the plugins adding/removing

when precss is enabled as a plugin along with postcss-simple-vars the error pops up

Seems like precss uses postcss-advanced-variables these plugins might be colliding 🤔

[Andrey Sitnik]

@bahtou yeap. I recommend replacing precss since it is not maintained well with separated plugins