madyankin / madyankin/postcss-modules
Using postcss-modules to prefix module CSS, but keep global CSS unprefixed
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 1.6k
- Forks
- 88
- PR merge metrics
- No merged PRs in 30d
Description
Problem Description:
I'm using postcss-modules to prefix all module CSS (local CSS) files, but I also need to include global CSS without applying any prefixing. I don't want to use the :global syntax to dismiss the module processing for global CSS files because it is inconvenient and requires modifying every global CSS rule.
Expected Behavior:
- Module CSS files (e.g.,
.module.css) should have class names prefixed according to thegenerateScopedNamerule. - Global CSS files (e.g.,
animation.css,reset.css) should remain unprefixed and not be processed bypostcss-modules. - I would like to ensure that my global styles don't need to be marked with
:globalfor exclusion.
Current Solution:
I have configured postcss-modules in .postcssrc as follows:
But it doesn't work expected
{
"plugins": {
"postcss-modules": {
"generateScopedName": "replyment_[name]_[local]__[hash:base64:5]",
"globalModulePaths": [
"/src/styles/global/"
]
}
}
}
This configuration is intended to apply scoped class names for CSS modules but exclude global CSS files (located in /src/styles/global/) from being processed by postcss-modules.
What I'm trying to avoid:
I don't want to manually add :global to every rule in my global CSS. This is inconvenient, especially for large stylesheets, and reduces the maintainability of the code.
:global
.repl-skeleton {
-webkit-animation: skeleton 2.5s ease-in-out infinite both;
animation: skeleton 2.5s ease-in-out infinite both;
}
:global
@-webkit-keyframes skeleton {
0% {
opacity: 1;
}
50% {
opacity: 0.2;
}
100% {
opacity: 1;
}
}
:global
@keyframes skeleton {
0% {
opacity: 1;
}
50% {
opacity: 0.2;
}
100% {
opacity: 1;
}
}
Request:
- Can postcss-modules be configured to automatically treat specific folders (like /src/styles/global/) as global, without the need to mark individual rules with
:global? - Please suggest a solution or enhancement to ensure that global CSS files are excluded from module processing while still applying scoped class names to module CSS.
Additional Information:
- I’m using Parcel as the build tool.
- My CSS structure is separated into module CSS files (e.g., .module.css) and global CSS files (e.g., reset.css, animation.css).
- I need the global styles to remain intact and unmodified by postcss-modules.
Thank you for any assistance or suggestions you can provide!
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the reported .postcssrc configuration, especially globalModulePaths, and reproduce the behavior with the stated /src/styles/global/ files under Parcel. Compare module CSS and global CSS processing, then define completion as global styles remaining unchanged while module CSS still receives the configured scoped names.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- frontend, tooling
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100