Configuration question

[princed]

Configuration question

[princed]

@kumarharsh Let's move here.

Could you please show how do use @value in your css?

[kumarharsh]

I'm using @value like this:

/* src/css/shared/colors.css */
@value mainBg: #456371;

/* src/modules/page/page.css */
@value mainBg from "css/shared/colors";  /* using webpack's resolve.moduleDirectory */

.page {
  background-color: mainBg;
  color: color(mainBg lightness(+30%));
}

[princed]

1. Do you check it in webpack-dev-server?

@value mainBg from "css/shared/colors"; /* using webpack's resolve.moduleDirectory */

It knows nothing about resolve.moduleDirectory at the moment.

[kumarharsh]

It miraculously started working just now. I cannot explain it myself, but it's somehow reading the resolve.moduleDirectory correctly!

Also, I'm working with webpack's dev server (watch mode).

[princed]

Well, it probably could work this way if you provide webpack's filesystem to plugin.

[princed]

Should you have any questions, feel free to reopen issue.

[kumarharsh]

@princed I got it working: https://github.com/kumarharsh/postcss-value-replace-test

I was mistaken beforehand when I had claimed that it was reading webpack's resolve.moduleDirectory properly, atleast in my reduced use-case. It doesn't - you were right. Also, passing require('postcss-modules-values-replace')({fs: webpack._compiler.inputFileSystem}) doesn't do much.

My theory as to why this was happening is:

1. postcss-modules-values-replace was not running, because the config was somehow wrong. Apparently if I write this config:

module.exports = {
  plugins: (webpack) => {
    return [
      require('postcss-modules-values-replace')({fs: webpack._compiler.inputFileSystem}),
      require('postcss-color-function'),
    ];
  },
}

in the postcss.config.js file, it doesn't run. It can't find webpack. but when I shifted it to webpack.config.js it did run:

{
  ...
  postcss: (webpack) => {
    return [
      require('postcss-modules-values-replace')({fs: webpack._compiler.inputFileSystem}),
      require('postcss-color-function'),
    ];
  },
}

2. So, instead of postcss-modules-values-replace, the postcss-modules-values was running which was included by default in css-loader. This plugin was the one replacing the @value values in my code. And the color() function was definitely not working - I was wrong in judging that it was miraculously working 😄.

I'd like to see #1 land, so that working with this in webpack's system becomes more productive. Thank you for your time.

[kumarharsh]

Also, this plugin is in ES6, and doing a require('...') throws an error. It'd be nice if there was a pre-compiled version too.

[princed]

Great!

1. In postcss.config.js you have to use yet another form:

module.exports = (ctx) => ({
   plugins: [
     require('postcss-modules-values-replace')({fs: ctx.webpack._compiler.inputFileSystem}),
     require('postcss-color-function'),
  ]
});

BTW, to make color() work inside @value we need it support media queries, as I mention in README. So it would be nice to have it there in case you're interested.

[kumarharsh]

@princed Oh, thanks for that. As for the second part of your comment,
do you mean this?

@value mainBg: color(red lightness(+10%));

As of this moment, I don't need to use color() inside @value like this. But if it comes, it'll be great.

[princed]

@value mainBg: color(red lightness(+10%));

Yes, exactly this.