CODEWITHSUNDEEP
cssreactjswebpackcss-modulescss-loader
Scotty H
Scotty H

Reputation: 6714

css-loader localIdentName: is a hash necessary for uniqueness?

The css-loader README suggests that localIdentName be set to

'[path][name]__[local]--[hash:base64:5]'

Is the hashing suffix necessary? Would it still be unique as this?

'[path][name]__[local]'

Why or why not?

The fact that #3 is an option in this GitHub Issue discussion leads me to believe it may not be necessary.

Upvotes: 26

Views: 20715

Answers (3)

Song
Song

Reputation: 671

localidentname on webpack 4.35.3 

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: 'css-loader',
        options: {
          modules: {
            localIdentName: '[path][name]__[local]--[hash:base64:5]',
          },
        },
      },
    ],
  },
};

Upvotes: 2

hendrathings
hendrathings

Reputation: 3775

Is the hashing suffix necessary?

Yes

Would it still be unique as this?

Would be yes and would be no. depends

Why or why not?

Then let see on documentation

The query parameter modules enables the CSS Modules spec. This enables local scoped CSS by default. (You can switch it off with :global(...) or :global for selectors and/or rules.).

By default CSS exports all classnames into a global selector scope. Styles can be locally scoped to avoid globally scoping styles.

The main purpose is here:

Styles can be locally scoped to avoid globally scoping styles.

You can do with this pattern '[path][name]__[local]', but you break the main purpose for scope.

If you have project frontend framework like angular or reactjs. for example angular with directive/component or reactjs with component, this is the main purpose use scope css. With CSS modules, you can write normal CSS code and make sure, that it only applies to a given component. And we don't need overthinking name or long name for specific class name to avoid overwrite css

Upvotes: 0

jordiburgos
jordiburgos

Reputation: 6302

The localIdentName is used along with the modules options:

{
  loader: 'css-loader',
  options: {
    modules: true,
    localIdentName: '[path][name]__[local]--[hash:base64:5]'
  }
}

It generates longer class names like:

.src-styles-main__world-grid--R7u-K
 ---------------  ----------  -----
      path,name     local      hash

.src-styles-main__world-grid
 ---------------  ----------
      path,name     local

So, the hash would not be needed as long as path, name and class name generate unique IDs. It is very unlikely that the hash would be needed.

Upvotes: 13

Related Questions