madyankin / madyankin/postcss-modules

Using postcss-modules to prefix module CSS, but keep global CSS unprefixed

Open
#159 0 comments 0 reactions 0 assignees View on GitHub

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 the generateScopedName rule.
  • Global CSS files (e.g., animation.css, reset.css) should remain unprefixed and not be processed by postcss-modules.
  • I would like to ensure that my global styles don't need to be marked with :global for 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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.