Using the same class names with CSS Modules (Webpack 2)

[azat-io]

Hi there!

I'm using:

• webpack v.2.1.0-beta.25
• css-loader v.0.25.0

Here is a part of my webpack.babel.config.js:

{
    test: /\.css$/,
    exclude: [
        '/node_modules/',
        '/public/',
    ],
    loaders: [
        'style-loader',
        'css-loader?modules&localIdentName=[local]--[hash:base64:5]' +
            '!postcss-loader',
     ],
}

In my project there is a folder components. I this folder there are a lot of React components.

Form

Here is a components/Form/index.jsx

import React, { Component } from 'react'
import styles from './index.css'

class Form extends Component {
    render () {
        return (
            <form>
                <h1 className={ styles.title }>
                    { 'Contact me' }
                </h1>
            </form>
        )
    }
}

export default Form

And components/Form/index.css:

.title {
    font-size: 1.35em;
    color: rgba(0, 0, 0, 0.85);
}

Content

components/Content/index.jsx

import React, { Component } from 'react'
import styles from './index.css'

class Content extends Component {
    render () {
        return (
            <div>
                <h1 className={ styles.title }>
                    { 'Content' }
                </h1>
            </div>
        )
    }
}

export default Content

components/Content/index.css

.title {
    flex: 1 1 100%;
    font-size: 1.35em;
    color: #fff;
    text-align: center;
}

After building app both .title selectors has the same hash. Looks pretty strange

What's wrong? 🤔

[drwpow]

If you try declaring :local(.title) { instead, what does that look like?

I think by default it might be assuming .title was intended to be used in a global scope (or at least global across your JavaScript, but not the DOM).

[azat-io]

@DangoDev

/~/css-loader?modules&localIdentName=[local]--[hash:base64:5]!./~/postcss-loader!./components/Follow/index.css
Module build failed: Unexpected input (11:8)

   9 | }
  10 | 
> 11 | :local(.title) {
     |        ^
  12 |     flex: 1 1 100%;
  13 |     font-size: 1.35em;

Syntax Error: Unexpected input (11:8)

   9 | }
  10 | 
> 11 | :local(.title) {
     |        ^
  12 |     flex: 1 1 100%;
  13 |     font-size: 1.35em;

    at /root/Dev/azat-io/node_modules/postcss-loader/index.js:123:22
 @ ./components/Follow/index.css 4:14-172 13:2-17:4 13:2-17:4 14:20-178
 @ ./components/Follow/index.jsx
 @ ./components/Main/index.jsx
 @ ./components/App/index.jsx
 @ multi mainerrors @ main.js:18
main.js:18 ./components/Follow/index.css
Module build failed: ModuleBuildError: Module build failed: Unexpected input (11:8)

   9 | }
  10 | 
> 11 | :local(.title) {
     |        ^
  12 |     flex: 1 1 100%;
  13 |     font-size: 1.35em;

    at /root/Dev/azat-io/node_modules/webpack/lib/NormalModule.js:143:35
    at /root/Dev/azat-io/node_modules/loader-runner/lib/LoaderRunner.js:359:11
    at /root/Dev/azat-io/node_modules/loader-runner/lib/LoaderRunner.js:225:18
    at context.callback (/root/Dev/azat-io/node_modules/loader-runner/lib/LoaderRunner.js:106:13)
    at /root/Dev/azat-io/node_modules/postcss-loader/index.js:123:13errors @ main.js:18

[drwpow]

@azat-io Hm. That shouldn’t be throwing up like that. You’re getting closer and using the syntax that https://github.com/webpack/css-loader#css-modules suggests. I’ve gotten that working before.

This is what my webpack.config.js looks like:

rules: [
    {
      test: /\.css$/,
      use: [
        "style-loader",
        {
          loader: "css-loader",
          options: { importLoaders: 1, modules: true },
        },
        "postcss-loader",
      ],
    },

Does setting importLoaders: 1 do anything for you?

[azat-io]

@DangoDev This also not works

[azat-io]

I created a repository with my code and Webpack 2 config:
https://github.com/azat-io/webpack2-css-modules-demo

[drwpow]

@azat-io thanks for posting your setup. I think it has something to do with PostCSS; in your file if I remove postcss-loader and your settings for new webpack.LoaderOptionsPlugin, I see all 3 colors display properly (and all 3 classes using a different hash). This also would explain why postcss-loader was throwing the error you listed earlier, and not css-loader.

[azat-io]

@DangoDev So, is it means that it's postcss-loader problem, not css-loader?

[azat-io]

Moved here