Skip to content

This plugin with removeDuplicatedProperties: true makes postcss pipeline in astro hang when importing open-props.min.css #1064

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

Open
T3sT3ro opened this issue Jan 25, 2024 · 2 comments

Comments

@T3sT3ro
Copy link

T3sT3ro commented Jan 25, 2024

I have an astro project with a global.css style. Inside, I import an open-props css file like so:

@import url("../../node_modules/open-props/open-props.min.css");

My postcss.config.cjs as this configuration:

require('postcss-combine-duplicated-selectors')({
   removeDuplicatedProperties: true,
   removeDuplicatedValues: false
}), ...

When I try to boot astro with pnpm astro dev, the "transform" process of the global.css hangs for 60 or so seconds due to the inclusion of the open-props.min.css and transformation with this plugin. Without removeDuplicatedProperties: true the boot process of astro is blazing fast.

@ChristianMurphy
Copy link
Owner

Welcome @T3sT3ro! 👋
Would you be willing to try out, and potentially add a test case or benchmark for #852 ?
It has a potential fix but has been stalled for a while.

@T3sT3ro
Copy link
Author

T3sT3ro commented Jan 25, 2024

I'm attaching a stackblitz approximating what my site setup looks like. The slow astro boot process is clearly visible and can be tested when you comment-out the @import url(...open-props.min.css) inside src/styles/theme-light.css. The relevant delay is seen after the message "watching for file changes..." displays in the console. Without this line commented, the time before you see a page is around a minute, while the commented one takes only few seconds. Unfortunately I don't have the time to contribute beside this sample project demonstrating the issue (the issue might be more complex, because there is also a postcss import plugin, irrc for inlining content):

https://stackblitz.com/edit/github-l2p7hw?file=src%2Fstyles%2Ftheme-light.css

to run it and test how slow the boot is:
pnpm astro dev
to get insights into astro boot, the timing of the style transformations etc:
pnpm astro dev --verbose

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