Classes added from composes are not minified in html

[davemcorwin]

I'll try to put together a reproducible example to add to this, but in the meantime it appears that if I have:

// foo.css
.class1 {
  color: blue;
}

// bar.css
.class2 {
composes: class1 from './foo.css'
}

// index.html

```

which without minification would result in

<div class="class2 class1">
</div>

with minification results in

<div class="a class1">
</div>

where a is the minified version of .class2. The classes in the css itself are minified properly, its just the classes in the markup that are affected. I am also using postcss, so in creating an example to add i'll make sure that is not the cause of the issue!

Thanks!

[odensc]

Hey @davemcorwin, I can't seem to reproduce this. Let me know if you get an example working. :)

[davemcorwin]

@odensc I pushed up an example showing the issue here

Please take a look if you can, perhaps I'm doing something wrong.

Thanks!

the gist is:

// styles1.css
.hello-world {
  color: blue;
}

// styles2.css
.goodbye-world {
  composes: hello-world from './styles1.css'
}

// index.js
import styles from './styles2.css'

function component() {
  const element = document.createElement('div')
  const classList = styles.goodbyeWorld.split(' ').map(c => `<li>${c}</li>`).join('')
  const html = `
    <div>
      classnames
      <ul>
        ${classList}
      </ul>
    </div>
  `
  element.innerHTML = html
  return element
}

document.body.appendChild((component()))

Perhaps there is a clue in the webpack output?

$ webpack
Hash: d0318d4811cfa32dfe33
Version: webpack 3.3.0
Time: 1655ms
     Asset      Size  Chunks             Chunk Names
 bundle.js   3.44 kB       0  [emitted]  main
styles.css  40 bytes       0  [emitted]  main
   [0] ./src/index.js 388 bytes {0} [built]
   [1] ./src/styles2.css 156 bytes {0} [built]
   [2] ./node_modules/css-loader?{"minimize":true,"modules":true,"camelCase":true,"localIdentName":"[name]__[local]--[hash:base64:5]"}!./src/styles2.css 835 bytes [built]
   [4] ./node_modules/css-loader?{"minimize":true,"modules":true,"camelCase":true,"localIdentName":"[name]__[local]--[hash:base64:5]"}!./src/styles1.css 316 bytes [built]
    + 3 hidden modules
Child extract-text-webpack-plugin /Users/dcorwin/Projects/cssm-test/node_modules/extract-text-webpack-plugin/dist /Users/dcorwin/Projects/cssm-test/node_modules/css-loader/index.js??ref--1-2!/Users/dcorwin/Projects/cssm-test/src/styles2.css:
       [0] ./node_modules/css-loader?{"minimize":true,"modules":true,"camelCase":true,"localIdentName":"[name]__[local]--[hash:base64:5]"}!./src/styles1.css 316 bytes {0} [built]
       [2] ./node_modules/css-loader?{"minimize":true,"modules":true,"camelCase":true,"localIdentName":"[name]__[local]--[hash:base64:5]"}!./src/styles2.css 835 bytes {0} [built]
        + 1 hidden module
✨  Done in 2.75s.

[davemcorwin]

and the webpack config

const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const createMinifier = require('css-loader-minify-class')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: require.resolve('style-loader'),
          use: {
            loader: require.resolve('css-loader'),
            options: {
              minimize: true,
              modules: true,
              camelCase: true,
              localIdentName: '[name]__[local]--[hash:base64:5]',
              getLocalIdent: createMinifier(),
            },
          },
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('styles.css'),
  ]
}

[davemcorwin]

it looks like the classes in the output are NOT modified as well. I don't the issue is really in this repo, i don't think the classes are even being seen.

[davemcorwin]

closing, this is a css-loader issue. webpack-contrib/css-loader#524

[odensc]

In the meantime, I made something hacky that works. Try this:

const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const { Minifier } = require('css-loader-minify-class')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: require.resolve('style-loader'),
          use: {
            loader: require.resolve('css-loader'),
            options: {
              minimize: true,
              modules: true,
              camelCase: true,
              localIdentName: '[minify][local]',
            },
          },
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('styles.css'),
  ]
}

const minifier = new Minifier();
Object.defineProperty(module.exports, 'customInterpolateName', {
  enumerable: false,
  value: function(url) {
    if (url.includes('[minify]')) {
      const localName = url.replace('[minify]', '');
      return minifier.getLocalIdent(this, null, localName);
    }
  }
})

[davemcorwin]

Dude, brilliant. On July 23, 2017 at 2:55:34 PM, Oden ([email protected]) wrote: const minifier = new Minifier(); Object.defineProperty(module.exports, 'customInterpolateName', { enumerable: false, value: function(url) { if (url.includes('[minify]')) { const localName = url.replace('[minify]', ''); return minifier.getLocalIdent(this, null, localName); } } })

[odensc]

:D Not the most ideal solution but it works until css-loader is fixed.

I'll see if they'll accept a PR to fix it - if not, I'll add something like this into the module.

[odensc]

Hey @davemcorwin, according to webpack-contrib/css-loader#583 (comment) - adding ident: "css" to the options should fix this. Let me know if it works and I'll close this.

[davemcorwin]

looks good, thanks for looking into this!