gitwtfhub

wtf is postcss-modules?

yyx990803/postcss-modules — explained in plain English

Analysis updated 2026-07-17 · repo last pushed 2020-11-25

★ 7Audience · developerComplexity · 2/5DormantSetup · moderate

TL;DR

A PostCSS plugin that automatically renames CSS class names to be unique, preventing style conflicts and generating a JSON map to look up the renamed classes in your templates.

Mindmap

mindmap
  root((postcss-modules))
    Inputs
      Plain CSS files
      Class names
    Outputs
      Renamed unique classes
      JSON class map
    Use Cases
      Prevent class conflicts
      Isolate component styles
      Use with Pug or PostHTML
    Tech Stack
      PostCSS
      JavaScript
      JSON

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

Automatically rename CSS classes to unique names so components stop clashing over shared class names.

REASON 2

Generate a JSON map from original class names to renamed ones for use in HTML templates.

REASON 3

Mark specific CSS rules as global so they skip the automatic renaming.

REASON 4

Build server-side rendered sites with isolated, conflict-free component styles.

What's in the stack?

PostCSSJavaScriptJSON

How it stacks up

yyx990803/postcss-modules0xsv1/ghosttype-bofadguardteam/ruleseditor
Stars777
Language—CTypeScript
Last pushed2020-11-25—2026-07-01
MaintenanceDormant—Active
Setup difficultymoderatehardeasy
Complexity2/54/52/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · moderate Time to first run · 30min

Requires wiring the generated JSON class map into your template or component code.

License is not stated in the available content.

Yoink these prompts

Prompt 1
Set up postcss-modules in my PostCSS pipeline to automatically rename CSS class names and generate a JSON map.
Prompt 2
Show me how to customize the generated class name format in postcss-modules using the filename and a hash.
Prompt 3
Help me mark a block of CSS as global in postcss-modules so it isn't renamed.
Prompt 4
Integrate postcss-modules output with Pug templates so renamed class names appear automatically in my markup.

Frequently asked questions

wtf is postcss-modules?

A PostCSS plugin that automatically renames CSS class names to be unique, preventing style conflicts and generating a JSON map to look up the renamed classes in your templates.

Is postcss-modules actively maintained?

Dormant — no commits in 2+ years (last push 2020-11-25).

What license does postcss-modules use?

License is not stated in the available content.

How hard is postcss-modules to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is postcss-modules for?

Mainly developer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.

Other repos in this lane