Skip to content

Commit

Permalink
CSS Modules by filename suffix.
Browse files Browse the repository at this point in the history
  • Loading branch information
tai2 committed Feb 5, 2018
1 parent 9c019e1 commit e82cb5e
Show file tree
Hide file tree
Showing 9 changed files with 95 additions and 53 deletions.
10 changes: 6 additions & 4 deletions docs/css.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,12 @@ Webpacker supports importing CSS, Sass and SCSS files directly into your JavaScr

## Import styles into your JS app

Stylesheets end with '.modules.*' is treated as [CSS Modules](https://github.com/css-modules/css-modules).

```sass
// app/javascript/hello_react/styles/hello-react.sass
// app/javascript/hello_react/styles/hello-react.module.sass
.hello-react
.helloReact
padding: 20px
font-size: 12px
```
Expand All @@ -20,10 +22,10 @@ Webpacker supports importing CSS, Sass and SCSS files directly into your JavaScr

import React from 'react'
import helloIcon from '../hello_react/images/icon.png'
import '../hello_react/styles/hello-react'
import styles from '../hello_react/styles/hello-react'

const Hello = props => (
<div className="hello-react">
<div className={styles.helloReact}>
<img src={helloIcon} alt="hello-icon" />
<p>Hello {props.name}!</p>
</div>
Expand Down
3 changes: 3 additions & 0 deletions lib/install/config/webpacker.yml
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@ default: &default
- .sass
- .scss
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
Expand Down
44 changes: 6 additions & 38 deletions package/rules/css.js
Original file line number Diff line number Diff line change
@@ -1,39 +1,7 @@
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const path = require('path')
const { dev_server: devServer } = require('../config')
const styleRuleFactory = require('./style_rule_factory')

const postcssConfigPath = path.resolve(process.cwd(), '.postcssrc.yml')
const isProduction = process.env.NODE_ENV === 'production'
const inDevServer = process.argv.find(v => v.includes('webpack-dev-server'))
const isHMR = inDevServer && (devServer && devServer.hmr)
const extractCSS = !(isHMR) || isProduction

const styleLoader = {
loader: 'style-loader',
options: {
hmr: isHMR,
sourceMap: true
}
}

const extractOptions = {
fallback: styleLoader,
use: [
{ loader: 'css-loader', options: { minimize: isProduction, sourceMap: true, importLoaders: 2 } },
{ loader: 'postcss-loader', options: { sourceMap: true, config: { path: postcssConfigPath } } }
]
}

// For production extract styles to a separate bundle
const extractCSSLoader = {
test: /\.(css)$/i,
use: ExtractTextPlugin.extract(extractOptions)
}

// For hot-reloading use regular loaders
const inlineCSSLoader = {
test: /\.(css)$/i,
use: [styleLoader].concat(extractOptions.use)
}

module.exports = extractCSS ? extractCSSLoader : inlineCSSLoader
module.exports = styleRuleFactory(
/\.(css)$/i,
false,
[]
)
4 changes: 4 additions & 0 deletions package/rules/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,14 @@ const babel = require('./babel')
const file = require('./file')
const css = require('./css')
const sass = require('./sass')
const moduleCss = require('./module.css')
const moduleSass = require('./module.sass')

module.exports = {
babel,
css,
sass,
moduleCss,
moduleSass,
file
}
7 changes: 7 additions & 0 deletions package/rules/module.css.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
const styleRuleFactory = require('./style_rule_factory')

module.exports = styleRuleFactory(
/\.(css)$/i,
true,
[]
)
10 changes: 10 additions & 0 deletions package/rules/module.sass.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
const styleRuleFactory = require('./style_rule_factory')

module.exports = styleRuleFactory(
/\.(scss|sass)$/i,
true,
[{
loader: 'sass-loader',
options: { sourceMap: true }
}]
)
17 changes: 6 additions & 11 deletions package/rules/sass.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,10 @@
const cssLoader = require('./css')
const deepMerge = require('../utils/deep_merge')
const styleRuleFactory = require('./style_rule_factory')

// Duplicate and remove css loader object reference
let sassLoader = JSON.parse(JSON.stringify(cssLoader))

sassLoader = deepMerge(sassLoader, {
test: /\.(scss|sass)$/i,
use: [{
module.exports = styleRuleFactory(
/\.(scss|sass)$/i,
false,
[{
loader: 'sass-loader',
options: { sourceMap: true }
}]
})

module.exports = sassLoader
)
50 changes: 50 additions & 0 deletions package/rules/style_rule_factory.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const path = require('path')
const { dev_server: devServer } = require('../config')

const postcssConfigPath = path.resolve(process.cwd(), '.postcssrc.yml')
const isProduction = process.env.NODE_ENV === 'production'
const inDevServer = process.argv.find(v => v.includes('webpack-dev-server'))
const isHMR = inDevServer && (devServer && devServer.hmr)
const extractCSS = !(isHMR) || isProduction

const styleRuleFactory = (test, modules, preprocessors) => {
const styleLoader = {
loader: 'style-loader',
options: {
hmr: isHMR,
sourceMap: true
}
}

const extractOptions = {
fallback: styleLoader,
use: [
{ loader: 'css-loader', options: { minimize: isProduction, sourceMap: true, importLoaders: 2, modules } },
{ loader: 'postcss-loader', options: { sourceMap: true, config: { path: postcssConfigPath } } },
...preprocessors
]
}

const modulesCondition = modules
? { include: /\.module\.[a-z]+$/ }
: { exclude: /\.module\.[a-z]+$/ }

// For production extract styles to a separate bundle
const extractCSSLoader = {
test,
use: ExtractTextPlugin.extract(extractOptions),
...modulesCondition
}

// For hot-reloading use regular loaders
const inlineCSSLoader = {
test,
use: [styleLoader].concat(extractOptions.use),
...modulesCondition
}

return extractCSS ? extractCSSLoader : inlineCSSLoader
}

module.exports = styleRuleFactory
3 changes: 3 additions & 0 deletions test/test_app/config/webpacker.yml
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ default: &default
- .sass
- .scss
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
Expand Down

0 comments on commit e82cb5e

Please sign in to comment.