question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Plugins run twice on css modules

See original GitHub issue

Hi,

I’m still investigating the issue but wanted some feedback:

postcss({
  modules: true,
  extract: true,
  plugins: [
    require('postcss-custom-properties')({ preserve: true })
  ],
})

Result:

.Button_primary__1gH9y {
  color: green;
  color: green;
  color: var(--color-primary);
}

I did some logging and the postcss-custom-properties is run twice on the same css module, hence the duplicate fallback.

1st

.primary {
  color: var(--color-primary);
}

2nd

.Button_primary__1gH9y {
  color: green;
  color: var(--color-primary);
}

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:14 (8 by maintainers)

github_iconTop GitHub Comments

3reactions
Anidetrixcommented, Mar 9, 2020

@n370 @Himself65 this change breaks such plugins as postcss-import, cause imported classes won’t be modularized

1reaction
pascalduezcommented, Aug 5, 2020

The issue is still alive: rollup-plugin-postcss@3.1.4

Read more comments on GitHub >

github_iconTop Results From Across the Web

Sass files compiling twice - webpack - Stack Overflow
1 Answer 1 ... It's MiniCssExtractPlugin running sass-loader twice. Not sure why. Share. Share a link to this answer.
Read more >
Plugins - webpack
A webpack plugin is a JavaScript object that has an apply method. This apply method is called by the webpack compiler, giving access...
Read more >
Using webpack with TypeScript - LogRocket Blog
js file, import the MiniCssExtractPlugin module using the code below: const MiniCssExtractPlugin = require("mini-css-extract-plugin");. Then, we ...
Read more >
Custom Webpack Config - Next.js
The webpack function is executed twice, once for the server and once for the client. This allows you to distinguish between client and...
Read more >
Parcel
parcel index.html Server running at http://localhost:1234 Build failed. ... If you use CSS modules, unused classes will be removed automatically.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found