Skip to content

Feature request: Transforming CSS after CSS is extracted #133

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
whatisaphone opened this issue May 8, 2018 · 3 comments
Closed

Feature request: Transforming CSS after CSS is extracted #133

whatisaphone opened this issue May 8, 2018 · 3 comments

Comments

@whatisaphone
Copy link

Hi,

I am using this plugin in combination with CSS modules, and postcss with postcss-autoreset, With the recommended loader chain, autoreset is applied to each imported CSS module, rather than once at the end. When combined with composes, this means that the autoreset rules can be applied out of order.

Stripped-down example of my issue:

/* foo.css */
.foo { color: red; }
/* bar.css */
.bar {
  composes: foo from './foo.css';
  background: yellow;
}
// webpack config excerpt:
      { test: /[.]css$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { modules: true, importLoaders: 1 } },
          { loader: 'postcss-loader' },
        ] },
// postcss.config.js
  plugins: [
    require('postcss-autoreset')({
      reset: {
        background: 'inherit',
        color: 'inherit',
      },
    }),
  ],
/* output css */
.foo { background: inherit; color: inherit; }
.foo, .bar { color: red; }
.bar { background: inherit; color: inherit; }
.bar { background: yellow; }

The color: inherit for .bar comes after the color: red, so unfortunately overrides it, and the color will not be red. I was able to solve this by running postcss on the combined, extracted CSS, rather than individually on each input. Unfortunately I had to break out of webpack to do it:

-    "build": "webpack --config webpack.config.js",
+    "build": "webpack --config webpack.config.js && yarn harden-css",
+    "harden-css": "postcss lib/index.css -o lib/index.css",

And the output is now correct (and more efficient as well!)

.foo, .bar { background: inherit; color: inherit; }
.foo, .bar { color: red; }
.bar { background: yellow; }

Is running a post-extraction transform something that is in scope for this plugin? Is there an existing way to do this as part of the loader chain that I missed?

@alexander-akait
Copy link
Member

postcss-autoreset is not compatibility with css modules, it is out of scope this plugin, sorry. Also looks it is related more to css-loader + postcss-loader, we wan't remove css-modules from css-loader in near future in favor postcss-loader and plugin for postcss-modules (will be describe in docs how it can be done). Right now you can try to disable css-modules for css-loader and install and setup postcss-modules though postcss.config.js with right order to avoid this issue. Thanks! Feel free to feedback!

@whatisaphone
Copy link
Author

I can't find any docs for combining webpack with postcss-modules. It looks like I should stick with my current approach for now while I wait for the new docs.

Thanks for the response!

@whatisaphone
Copy link
Author

Some time ago I stumbled on https://github.com/mistakster/postcss-pipeline-webpack-plugin which solves my original issue and has been working nicely, so I'm closing this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants