Open
Description
Hoping I didn't do anything wrong, but I tried to use this plugin with some other PostCSS plugins and it failed when importing values.
For example, with postcss-calc, the expression is not evaluated...
/* size is 20px */
@value size from "./variables.css";
@value localSize: 20px;
.group {
margin-top: calc(20px * 0.5);
margin-bottom: calc(size * 0.5);
margin-left: calc(localSize * 0.5);
margin-right: calc(20px - localSize);
padding-top: size;
padding-bottom: localSize;
}
/* Render */
.group {
margin-top: 10px;
margin-bottom: calc(i__const_size_1 * 0.5);
margin-left: 10px;
margin-right: 0;
padding-top: 20px;
padding-bottom: 20px;
}
So, when used alone in padding-top
, size
is fine, but with the calc plugin, it fails with it's unique name or stuff. Same problem with colors:
.button:hover {
background-color: color(#2c3e50 lightness(+10%));
}
/* render */
.button:hover {
background-color: rgb(62, 87, 112);
}
/* and */
@value primary: #2c3e50;
.button:hover {
background-color: color(primary lightness(+10%));
}
/* render */
.button:hover {
background-color: rgb(62, 87, 112);
}
/* but */
@value primary from "./variables.css";
.button:hover {
background-color: color(primary lightness(+10%));
}
Crashes the build with
ERROR in ./components/Button/style.css
Module build failed: ModuleBuildError: Module build failed: Error: .../css-modules/components/Button/style.css:15:3: Unable to parse color from string "i__const_primary_8"
at .../css-modules/components/Button/style.css:15:3
at Object.Color (.../css-modules/node_modules/postcss-color-function/node_modules/css-color-function/node_modules/color/color.js:31:15)
at toRGB (.../css-modules/node_modules/postcss-color-function/node_modules/css-color-function/lib/convert.js:39:15)
at Object.convert (.../css-modules/node_modules/postcss-color-function/node_modules/css-color-function/lib/convert.js:28:10)
at transformColor (.../css-modules/node_modules/postcss-color-function/index.js:49:43)
at transformColorValue (.../css-modules/node_modules/postcss-color-function/index.js:20:16)
at Object.tryCatch [as try] (.../css-modules/node_modules/postcss-color-function/node_modules/postcss-message-helpers/index.js:53:12)
at transformDecl (.../css-modules/node_modules/postcss-color-function/index.js:19:31)
at .../css-modules/node_modules/postcss-loader/node_modules/postcss/lib/container.js:88:34
at .../css-modules/node_modules/postcss-loader/node_modules/postcss/lib/container.js:73:26
at Rule.each (.../css-modules/node_modules/postcss-loader/node_modules/postcss/lib/container.js:59:22)
at DependenciesBlock.onModuleBuildFailed (.../css-modules/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:315:19)
at nextLoader (.../css-modules/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:270:31)
at .../css-modules/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
at context.callback (.../css-modules/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:148:14)
at .../css-modules/node_modules/postcss-loader/index.js:54:17
at runMicrotasksCallback (node.js:314:7)
at doNTCallback0 (node.js:407:9)
at process._tickCallback (node.js:336:13)
@ ./components/Button/index.js 25:16-38
Not sure what went wrong with the plugin chain, but it would be awesome to seamlessly integrate with any another PostCSS plugin.