Skip to content
This repository has been archived by the owner on Jan 15, 2019. It is now read-only.

localIdentName #3

Closed
Ehres opened this issue Dec 6, 2017 · 5 comments
Closed

localIdentName #3

Ehres opened this issue Dec 6, 2017 · 5 comments

Comments

@Ehres
Copy link

Ehres commented Dec 6, 2017

Why not use [name] in localIdentName ? ([local]___[hash:base64:5])

If all components has same root className, like .rootor .container, all component className has same name with different hash.

In general, I use [local]__[name]__[hash:base64:5] who allow to recognize className by file name.

@lnhrdt
Copy link
Member

lnhrdt commented Jan 28, 2018

@Ehres thanks for taking the time to submit this issue.

I think you're right. I myself reuse some common class names like .title or .header across modules (as is natural when using CSS Modules). The localIdentName I chose in this tool results in ambiguous computed classes across modules in these cases. Let's change it!

I like your suggestion of adding [name] to the localIdentName but I want to make sure we're choosing the best default. The css-loader docs use this format in their examples:

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

Questions:

  1. I feel that [path] can help in some scenarios but is awfully verbose for most. Any opinions on choosing a default localIdentName for this tool, comparing the above to what @Ehres suggested?
  2. Should we optimize it in production builds to just the hash?

CC: @sokra (the Webpack author and main contributor to css-loader)

@lnhrdt
Copy link
Member

lnhrdt commented Feb 3, 2018

Regarding my 2nd question, I like @andriijas's reasoning for just hashes in production.
facebook/create-react-app#2285 (comment)

@andriijas
Copy link

@lnhrdt i just override it in config-overrides.js because i think its way to verbose in CRA2.

  if (env === "production") {
    // Remove default polyfills
    config.entry = { main: paths.appIndexJs };

    const cssLoader = getLoader(
      config.module.rules,
      rule => String(rule.test) === String(/\.module\.css$/),
    ).loader.find(loader => loaderNameMatches(loader, "css-loader"));
    cssLoader.options.localIdentName = "myapp-[hash:base64:8]";
}

@bdefore
Copy link

bdefore commented Sep 20, 2018

Along a similar vein, using getLocalIdent to produce names like ComponentName:myClass:

  const path = require('path')
  const { getLoader} = require('react-app-rewired')

  const pathSeparator = path.sep
  const removeExtension = filename => filename.split('.')[0]
  const filenameFromPath = filePath => filePath.substr(filePath.lastIndexOf(pathSeparator) + 1)
  const delimiter = ':'
  const abbreviatedIdent = (resourcePath, localSelector) => {
    const componentName = removeExtension(filenameFromPath(resourcePath))
    return `${componentName}${delimiter}${localSelector}`
  }

  const rule = getLoader(
    config.module.rules,
    // rule => String(rule.test) === String(/\.module\.css$/), // did not work because test is an empty object for an unknown reason
    rule => rule.use && rule.use[1] && rule.use[1].options.modules === true
  )

  const { localIdentName, ...previousOptions } = rule.use[1].options
  rule.use[1].options = {
    ...previousOptions,
    getLocalIdent: (context, localIdentName, localName) => abbreviatedIdent(context.resourcePath, localName)
  }

@lnhrdt
Copy link
Member

lnhrdt commented Jan 14, 2019

Closing this issue and archiving this project in favor of Create React App's native support for CSS Modules introduced in v2.

@lnhrdt lnhrdt closed this as completed Jan 14, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants