Question: it posible build webpack with style-loader

[Bogdaan]

Hi, i use webpack style-loader just for optimize long names like "mycomponent-element-element--state-longname", and it imposible use it with this example?

My config

  {
    test: /(\.scss|\.css)$/,
    loader: ExtractTextPlugin.extract('style',
      'css?sourceMap&modules&importLoaders=1&localIdentName=[local]___[hash:base64:5]|postcss!autoprefixer-loader!sass?sourceMap')
  }

In jsx i use requre for classnames map:

import React, { Component, PropTypes } from 'react';

import style from './style'

class Stest extends Component {
  render() {
    return <div className={style['stest']}>stest text</div>
  }
}}

I must choose: or server-side rendering with "global css" and plaintext styles or power of webpack with short class names but without server-side rendering.

But I wanted to use both approaches. Anyone else encountered this problem?

[iam4x]

Hello @Bogdaan I haven't looked into css-modules yet, I can't help you with that sorry.

If someone else watching the repo has some answers would be great!

[Bogdaan]

A possible solution: require hook ( https://github.com/sullenor/universal-demo )

[Bogdaan]

I think css-modules is better for application architecture (and for boilerplate). In "real application" we work with hundreds of components. And folder/styles structure must contain full component data (jsx / css / fonts / images / icons ), because the atomic components is easier to maintain.

[dmitry]

@Bogdaan have you seen https://github.com/gajus/react-css-modules?

[Bogdaan]

@dmitry no, it posible merge to css bundles in one with react-css-modules? I mean:

1. shared icons (large bundle)
2. component scss (requre icons from bundle 1)

import React, { Component, PropTypes } from 'react';

import style from './style'
import icons from './icons'

.......
<div className={style['stest']}>
     just icon <i className={icons['my-icon']}></i>
</div>

[iam4x]

@Bogdaan look at https://github.com/iam4x/isomorphic-flux-boilerplate/pull/167 (thanks to @MaxSvargal) he's using radiumcss. Does it helps?

[Bogdaan]

@iam4x i not familiar with radiumcss (this PR large :)) But, i alredy switch my project to simplest decorator like https://github.com/kriasoft/react-starter-kit/blob/master/src/decorators/withStyles.js with some changes - it solve all problems (shared styles + always critical css + short class names + unique classnames + SSR and more)

Too bad: https://github.com/MaxSvargal/kk-flux/commit/6ebe287f51292a8cbb0ea7a64630af9b94580bb2 inline styles to JS, withot postcss and precss, no scss/less?

[MaxSvargal]

@Bogdaan absolutely. Only pure javascript. In production I have no problems with inline styles, but with exception of some agreements. I will publish complete example with inline css of this boilerplate later.