Composing a class from a different file does not pass that class through getLocalIdent

[pillowfication]

What is the current behavior?
Composing a class from a different file does not pass that class through getLocalIdent.

use: [{
  loader: 'css-loader',
  options: {
    modules: true,
    importLoaders: 2,
    localIdentName: '[local]',
    getLocalIdent: (context, localIdentName, localName, options) => 'prefix-' + localName,
}, {
  loader: 'sass-loader'
}]

// foo.scss
.foo { color: red; }

// bar.scss
.bar { composes: foo from "./foo.scss"; }

import styles from './bar.scss'
console.log(styles.bar)
// -> "prefix-bar foo"

What is the expected behavior?
I expected the same behavior as I would get when I compose from the same file.

// bar.scss
.foo { color: red; }
.bar { composes: foo; }

import styles from './bar.scss'
console.log(styles.bar)
// -> "prefix-bar prefix-foo"

[alexander-akait]

@pillowfication can you describe use case?

[franjohn21]

+1 Also seeing this issue.

This breaks getLocalIdent as it cannot reliably be used on all selectors.

The use case we have is that we are using a custom getLocalIdent function to produce a hash within the classname that is deterministic in our ecosystem, both on the server side and in the browser (using the file path, as css-loader currently does, breaks us in certain circumstances).

Edit: Same issue has been reported before: #524

[pillowfication]

I've been using a custom getLocalIdent function to generate my own minified selectors, but because of this issue, it doesn't work if cross-file composition is used.

I've been using the following workaround:

/* styles.css */
.my-class {
  // Note the compositions here, even though they are applied in another file
  // composes: foo bar from "./other-file.css";
  color: red;
}

/* compose-styles.js */
import { foo, bar } from './other-file.css'
import styles from './styles.css'

// Apply the workaround
styles.myClass = `${styles.myClass} ${foo} ${bar}`

export default styles

/* Component.jsx */
import styles from './compose-styles.js' // TODO: switch to `styles.css` when possible
const myClass = styles.myClass

[franjohn21]

Thanks @pillowfication that makes sense for a work around.

@evilebottnawi - what other information would be helpful here? getLocalIdent is broken with this issue.

On the server side we use css-modules-require-hook and it's generateScopedName option which is in essence the same function as getLocalIdent. However css-modules-require-hook's implementation works correctly and the generateScopedName function is called for cross-file composed selectors.

Is it possible css-loader is missing a plugin from its implementation?

[alexander-akait]

@franjohn21 PR welcome 👍

[timswalling]

@pillowfication @franjohn21 I've just come across what appears to be the same problem, but it only occurs when I'm using the extract-text-webpack-plugin.

Is this case for you too?

[franjohn21]

@timswalling What version of webpack are you using? We didn't debug exactly what fixed it but this appears to be working for us in webpack @ 3.11.0 whereas it did not in webpack @ 3.10.0.

[timswalling]

@franjohn21 thanks for your help. Unfortunately I've tried with webpack @ 3.11.0 and 3.12.0 (and css-loader @ 0.28.11) and it's still happening.

It's sounds like it's a slightly different problem to the one you've got, so I'll open a separate issue.