Inline local classNames into javascript

[ConradIrwin]

Hey @sokra,

Right now I'm writing code like this:

var styles = require 'foo/bar.css'

module.exports = class Foo extends React.Component

  render: =>
    <div className={styles.foo}></div>

The problem is that when compiled and minified I still see the original names, and there's a module that exports: {"foo": "Xwvutsr123456"}. Is there a way we could pre-process the file so that styles.foo is inlined (as though we were using webpack.DefinePlugin)?

[michael-ciniawsky]

@ConradIrwin Please elaborate futher what you mean by inline please? 🙃

[ConradIrwin]

@michael-ciniawsky

My example currently compiles to:

# foo/bar.css.js

styles = {
  foo: 'Xwvutsr123456'
}

# main.js
var styles = __webpack_require__('foo/bar.css')

...

function render() {
    React.createElement("div", {className: styles.foo})
}

...

I would like it to look like this:

# main.js
__webpack_require__('foo/bar.css')

function render() {
  React.createElement("div", {className: 'Xwvutsr123456'})
}

This avoids creating an extra variable, and an extra property acccess (which is hard to minify).

Not sure how this would work, as it seems like a more generally useful compiler phase than just limited to CSS, but thought I'd put it here and see if anyone else was inspired to fix it :)

[michael-ciniawsky]

function render () {
   React.createElement("div", { className: __webpack_require__('foo/bar.css').className })
}

@ConradIrwin ? But I don't think this is really feasible atm, the locals could be exported as constants when ES2015 Module support lands in css-loader (v1.0.0) 😛

export const className = 'Xwvutsr123456'

instead of a JSON-ish {Object} like it's currently the case

exports.locals = {...modules}

import { className1, className2, className3 } from './style.css'

function render () {
  React.createElement("div", { className: className1 })
}

[gpoitch]

I've also been thinking about how to achieve this. Maybe the responsibility should be on something more general like prepack to pre-evaluate and inline the object references instead of css-loader itself?

[alexander-akait]

Other solution use https://github.com/kentcdodds/babel-plugin-macros, but we need implement api, it is feature, feel free to PR

[alexander-akait]

Sorry, impossible solve on css-loader side, use https://github.com/gajus/babel-plugin-react-css-modules#readme