From e3f61d67ad05ce11b229f7d3e0179dc03e2188e8 Mon Sep 17 00:00:00 2001 From: Max Date: Thu, 18 Jan 2018 00:56:53 +0100 Subject: [PATCH] Approach to using css modules (#460) * udpates the home template * enables modules * readds normal css to template * add support for both normal css and css modules * removes added ws * remove exclude in css module loader definition * updates regex --- .../templates/default/src/Home.css | 10 +- .../templates/default/src/Home.js | 9 +- .../templates/default/src/Home.module.css | 33 ++++++ packages/razzle/config/createConfig.js | 104 ++++++++++++------ 4 files changed, 118 insertions(+), 38 deletions(-) create mode 100644 packages/create-razzle-app/templates/default/src/Home.module.css diff --git a/packages/create-razzle-app/templates/default/src/Home.css b/packages/create-razzle-app/templates/default/src/Home.css index 96b52a6c9..1dfb8ed10 100644 --- a/packages/create-razzle-app/templates/default/src/Home.css +++ b/packages/create-razzle-app/templates/default/src/Home.css @@ -28,6 +28,10 @@ } @keyframes Home-logo-spin { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } -} \ No newline at end of file + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/packages/create-razzle-app/templates/default/src/Home.js b/packages/create-razzle-app/templates/default/src/Home.js index 91949ffcb..04f5ae3b2 100644 --- a/packages/create-razzle-app/templates/default/src/Home.js +++ b/packages/create-razzle-app/templates/default/src/Home.js @@ -1,20 +1,21 @@ import React, { Component } from 'react'; import logo from './react.svg'; +import styles from './Home.module.css'; import './Home.css'; class Home extends Component { render() { return ( -
-
+
+
logo

Welcome to Razzle

-

+

To get started, edit src/App.js or{' '} src/Home.js and save to reload.

-
    +
    • Docs
      • diff --git a/packages/create-razzle-app/templates/default/src/Home.module.css b/packages/create-razzle-app/templates/default/src/Home.module.css new file mode 100644 index 000000000..a8098e2da --- /dev/null +++ b/packages/create-razzle-app/templates/default/src/Home.module.css @@ -0,0 +1,33 @@ +.home { + text-align: center; +} + +.logo { + animation: Home-logo-spin infinite 20s linear; + height: 80px; +} + +.header { + background-color: #222; + height: 150px; + padding: 20px; + color: white; +} + +.intro { + font-size: large; +} + +.resources { + list-style: none; +} + +.resources > li { + display: inline-block; + padding: 1rem; +} + +@keyframes Home-logo-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} \ No newline at end of file diff --git a/packages/razzle/config/createConfig.js b/packages/razzle/config/createConfig.js index 1527cb59a..7153b2f77 100644 --- a/packages/razzle/config/createConfig.js +++ b/packages/razzle/config/createConfig.js @@ -16,6 +16,22 @@ const getClientEnv = require('./env').getClientEnv; const nodePath = require('./env').nodePath; const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware'); +const postCssOptions = { + ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options + plugins: () => [ + require('postcss-flexbugs-fixes'), + autoprefixer({ + browsers: [ + '>1%', + 'last 4 versions', + 'Firefox ESR', + 'not ie < 9', // React doesn't support IE8 anyway + ], + flexbox: 'no-2009', + }), + ], +}; + // This is the Webpack configuration factory. It's the juice! module.exports = ( target = 'web', @@ -156,7 +172,7 @@ module.exports = ( // Note: this yields the exact same CSS config as create-react-app. { test: /\.css$/, - exclude: [paths.appBuild], + exclude: [paths.appBuild, /\.module\.css$/], use: IS_NODE ? // Style-loader does not work in Node.js without some crazy // magic. Luckily we just need css-loader. @@ -179,21 +195,7 @@ module.exports = ( }, { loader: require.resolve('postcss-loader'), - options: { - ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options - plugins: () => [ - require('postcss-flexbugs-fixes'), - autoprefixer({ - browsers: [ - '>1%', - 'last 4 versions', - 'Firefox ESR', - 'not ie < 9', // React doesn't support IE8 anyway - ], - flexbox: 'no-2009', - }), - ], - }, + options: postCssOptions, }, ] : ExtractTextPlugin.extract({ @@ -202,28 +204,68 @@ module.exports = ( { loader: require.resolve('css-loader'), options: { - importLoaders: 1, - minimize: true + modules: true, + minimize: true, }, }, { loader: require.resolve('postcss-loader'), + options: postCssOptions, + }, + ], + }), + }, + { + test: /\.module\.css$/, + exclude: [paths.appBuild], + use: IS_NODE + ? // Style-loader does not work in Node.js without some crazy + // magic. Luckily we just need css-loader. + [ + { + loader: require.resolve('css-loader'), + options: { + modules: true, + importLoaders: 1, + }, + }, + ] + : IS_DEV + ? [ + 'style-loader', + { + loader: require.resolve('css-loader'), + options: { + modules: true, + importLoaders: 1, + }, + }, + { + loader: require.resolve('postcss-loader'), + options: postCssOptions, + }, + ] + : ExtractTextPlugin.extract({ + fallback: { + loader: require.resolve('style-loader'), + options: { + hmr: false, + }, + }, + use: [ + { + loader: require.resolve('css-loader'), options: { - ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options - plugins: () => [ - require('postcss-flexbugs-fixes'), - autoprefixer({ - browsers: [ - '>1%', - 'last 4 versions', - 'Firefox ESR', - 'not ie < 9', // React doesn't support IE8 anyway - ], - flexbox: 'no-2009', - }), - ], + modules: true, + importLoaders: 1, + minimize: true, + localIdentName: '[path]__[name]___[local]', }, }, + { + loader: require.resolve('postcss-loader'), + options: postCssOptions, + }, ], }), },