Work with other PostCSS plugins

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, sizeis 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.

[epilande]

Hi any updates to this issue?

[MrOrz]

I’m also having this issue.

There is a pull request by @Strate on css-loader that provides an option named afterModules, which allows us to chain postcss modules after css-loader completes CSS-module stuff. I have gave the PR a try and it worked beautifully.

In order to use the PR, edit package.json to load the PR branch:

"css-loader": "git+https://[e-mail]/megaplan/css-loader#postcss_later_plugins",

And update your webpack config accordingly:

module.exports = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'style!css?modules&afterModules=executeAfterCSSModule',
      },
    ]
  },
  cssLoader: {
    executeAfterCSSModule(pipeline) {
      pipeline.use(require('postcss-calc'));
    },
  },
  // ...
}

Then postcss-calc can correctly turns this:

@value gap: 14px;
.wrapper {
  margin-bottom: calc(gap * -1);
}

into this:

@value gap: 14px;
.wrapper {
  margin-bottom: -14px;
}

@sokra Would you share with us any thoughts on Strate’s PR?