Preact-cli: Document SASS & CSS Modules

[LukasBombach]

The Readme claims that react cli has support for SASS and CSS Modules.

I read in another issue how to enable support for SASS (yarn add -D node-sass sass-loader) but I don't know how to enable CSS Modules. But this is now what this this issue is for, I made a Stackoverflow post for this. With this issue I want to feature-request documentation on this. I'd PR this, but I don't know how to CSS Module :(.

Do you want to request a feature or report a bug?

Feature

What is the current behaviour?

No documentation on this

What is the expected behaviour?

I'd like to know how it works

If this is a feature request, what is motivation or use case for changing the behaviour?

Developers starting with preact cli know what to do

[ForsakenHarmony]

Installing that is all you need to do

[fokusferit]

CSS Module support is already there you can see the configuration for user styles here https://github.com/developit/preact-cli/blob/master/src/lib/webpack/webpack-base-config.js#L164 so the question is, are you seeing any issue when you run it locally ?

[LukasBombach]

Yes, locally. Check out my project: https://github.com/LukasBombach/poc-preact-cli-css-modules

Check out how I use it: I import the styles: https://github.com/LukasBombach/poc-preact-cli-css-modules/blob/master/src/layout/index.js#L5

import { h, Component } from 'preact';
import styles from './index.module.css';

export default class Layout extends Component {
  render() {
    return (
      <div className={styles.container}>
        {this.props.children}
      </div>
    );
  }
}

from this file

.container {
  margin: 50px auto;
  max-width: 960px;
  width: 100%;
}

It all happens in this folder: https://github.com/LukasBombach/poc-preact-cli-css-modules/tree/master/src/layout

(index.js and index.module.css)

[LukasBombach]

The result is am empty class attribute and if I log styles it's an empty object.

[LukasBombach]

I think I found the issue. preact cli forces you to put your components in the src/components folder or css modules won't work. Now it does.

[reznord]

You can watch on other folders for CSS by extending the webpack config using preact.config.js:

config.module.loaders[4].include = [
  path.resolve(__dirname, 'src', 'routes'),
  path.resolve(__dirname, 'src', 'components'),
  path.resolve(__dirname, 'src', 'sections')
];

config.module.loaders[5].exclude = [
  path.resolve(__dirname, 'src', 'routes'),
  path.resolve(__dirname, 'src', 'components'),
  path.resolve(__dirname, 'src', 'sections')
];

[LukasBombach]

Thank you @reznord

[theochampion]

Thanks for the tips @reznord !
I have a question thought, what exactly represent config.module.loaders[4] and config.module.loaders[5] ? Why do we new to include them in one and exclude them from the other ?

[webdevotion]

@theochampion this is the output of config.module.loaders:

[ { enforce: 'pre',
    test: /\.jsx?$/,
    loader: 'babel-loader',
    options: { babelrc: false, presets: [Array], plugins: [Array] } },
  { enforce: 'pre', test: /\.less$/, use: [ [Object] ] },
  { enforce: 'pre', test: /\.s[ac]ss$/, use: [ [Object] ] },
  { enforce: 'pre', test: /\.styl$/, use: [ [Object] ] },
  { test: /\.(css|less|s[ac]ss|styl)$/,
    include:
     [ '<...__dir__...>/src/components',
       '<...__dir__...>/src/routes' ],
    loader: [ [Object], [Object], [Object], [Object] ] },
  { test: /\.(css|less|s[ac]ss|styl)$/,
    exclude:
     [ '<...__dir__...>/src/components',
       '<...__dir__...>/src/routes' ],
    loader: [ [Object], [Object], [Object], [Object] ] },
  { test: /\.json$/, loader: 'json-loader' },
  { test: /\.(xml|html|txt|md)$/, loader: 'raw-loader' },
  { test: /\.(svg|woff2?|ttf|eot|jpe?g|png|gif|mp4|mov|ogg|webm)(\?.*)?$/i,
    loader: 'url-loader' },
  { test: /\.jsx?$/,
    include: [ [Function], [Function] ],
    loader: '<...__dir__...>/node_modules/preact-cli/lib/lib/webpack/async-component-loader',
    options: { name: [Function: name], formatName: [Function: formatName] } } ]

As you can see index 4 and 5 take care of stylesheet file extensions. At index 4 folders are included and at index 5 folders are excluded. What @reznord's snippet basically does is providing a way to manually override them in your personal project's preact.config.js file.

_Custom configuration of your project is described in the README._

[schwiet]

For anyone running into this issue now, as you might expect this workaround is relatively fragile. loaders is replaced by rules (ref: https://webpack.js.org/configuration/module/#modulerules):

config.module.rules[4].include = [
  path.resolve(__dirname, 'src', 'routes'),
  path.resolve(__dirname, 'src', 'components'),
  path.resolve(__dirname, 'src', 'sections')
];

config.module.rules[5].exclude = [
  path.resolve(__dirname, 'src', 'routes'),
  path.resolve(__dirname, 'src', 'components'),
  path.resolve(__dirname, 'src', 'sections')
];