Easy way to disable css module support

[lawlmart]

First off - thanks for this! I just finished porting a project from create-react-app and I'd say overall it wasn't a terrible experience. One thought: my react components weren't designed with css modules in mind and it took me far too long to figure out what was happening and how to disable it (I'm new to the magical world of Babel+Webpack). Take it or leave it, but a config option to directly alter the root CSS loader would be nice - or at least more documentation on the trade-offs of using modules.

[ccpricenytimes]

Thanks for your feedback! I wanted to clarify a one thing about your setup to see how we could best adjust the documentation. Do your current react components import css files or are you using inline styles? Would you mind sharing how you disabled CSS modules?

[lawlmart]

I import sass files which doesn't play very well with CSS modules. Here's snippets from the webpack config I use to override module support:

var cssLoaders = createCssLoaders(options)
    let scssLoaders = clone(cssLoaders).concat('sass').concat('sass-resources');

    baseConfig.module.loaders = baseConfig.module.loaders.map((loader) => {
      //all this code does is emulate the default kyt code, but with css modules disabled

      if (loader.test && '.css'.match(loader.test)) {
        if (options.environment === 'development') {
          loader.loaders = cssLoaders;
        } else {
          loader.loader = ExtractTextPlugin.extract({
            notExtractLoader: 'style',
            loader: cssLoaders
          })
        }
      }

      if (loader.test && '.scss'.match(loader.test)) {
        if (options.environment === 'development') {
          loader.loaders = scssLoaders;
        } else {
          loader.loader = ExtractTextPlugin.extract({
            notExtractLoader: 'style',
            loader: scssLoaders
          })
        }
      }

      if (loader.loader && 'babel-loader'.match(loader.loader)) {
        loader.query = options.environment === 'development' ? require('./config/babel.dev') : require('./config/babel.prod')
      }
      return loader;
    });

function createCssLoaders(options, modules = false) {
  var cssLoaders = [];
  if (options.environment === 'development' && options.type !== 'server') {
    cssLoaders.push('style');
  }
  if (options.type === 'server') {
    cssLoaders.push({
      loader: 'css-loader/locals',
      query: { modules: modules, localIdentName: '[name]-[local]--[hash:base64:5]' },
    })
  } else {
    cssLoaders.push({
      loader: 'css',
      query: { modules: modules, sourceMap: true, localIdentName: '[name]-[local]--[hash:base64:5]' },
    });
  }

  cssLoaders.push('postcss');
  return cssLoaders
}

[ccpricenytimes]

Hey @lawlmart, thanks for the info! We're gonna take a good look at this and get back to you.

[lawlmart]

@ccpricenytimes Ok, I'm realizing my hacky solution is going to break every time there's a major upgrade. If I create a PR with a "enableCSSModules" option in the kyt.config would you be amenable to merging it in? Seems like a win since it's one less convention people will need to follow.

[ccpricenytimes]

Hey @lawlmart
CSS Modules is one of the base opinions of kyt so we won't be able to support an option to disable it. I'm going to close this for now but we will continue to look for more workarounds in the future.

[strogonoff]

@lawlmart’s solution is great, I’m using a similar hack. It appears that there’s still no proper way to supply custom arguments to webpack loaders in kyt (for example, includePaths commonly needed for sass)? Perhaps I’m missing something.