gajus/babel-plugin-react-css-modules

Not compatible with css-loader@3.0.0

Open

#258 opened on Jun 24, 2019

View on GitHub
 (4 comments) (0 reactions) (0 assignees)JavaScript (2,044 stars) (176 forks)batch import
help wantedquestion

Description

I have localIdentName set to '[path]___[name]__[local]___[hash:base64:5]' in the css-loader, but as of 3.0.0 this generates a name (in css-loader) where slashes and dots aren't replaced with dashes but rather escaped.

That's a bit uglier to read now (anyway, they aren't really meant for humans) -- but the main problem is that this plugin now generates invalid className values because it's using the old logic.

Example:

className: rb-client-js-modules-landing-___Landing-module__landing-page-card___kz6iY css: .rb\/client\/js\/modules\/landing\/___Landing\.module__landing-page-card___kz6iY

Contributor guide

Tech stack
javascriptnodejsreactcss
Domain
frontendbuild systemdeveloper experience
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
CSS modulesBabel plugin basicscss loader configuration
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
45
Research direction
Investigate the css loader@3.0.0 changelog to understand how it escapes slashes and dots in localIdentName. Then examine the plugin's code (likely in src/index.js or similar) that produces className values, and update it to match the new behavior. The issue provides an example of the mismatch.