diff --git a/config/webpack.config.base.js b/config/webpack.config.base.js index bebfd6e6e..0e64e7e5f 100644 --- a/config/webpack.config.base.js +++ b/config/webpack.config.base.js @@ -14,20 +14,19 @@ module.exports = { umdNamedDefine: true }, resolve: { - extensions: ['.js', '.json', '.yaml'], + extensions: ['.js', '.json', '.yaml', '.jsx'], modules: [SRC_DIR, 'node_modules'], alias: { react: path.resolve(__dirname, 'aliases/globalReact'), - 'react-dom': path.resolve(__dirname, 'aliases/globalReactDOM'), - 'cozy-ui/react': 'cozy-ui/transpiled/react' + 'react-dom': path.resolve(__dirname, 'aliases/globalReactDOM') } }, devtool: '#source-map', module: { rules: [ { - test: /\.js$/, - exclude: /node_modules/, + test: /\.jsx?$/, + exclude: /node_modules\/(?!(cozy-ui\/react))/, loader: 'babel-loader' }, { diff --git a/config/webpack.config.extract.js b/config/webpack.config.extract.js index c5a7b7e37..ba9bb57b0 100644 --- a/config/webpack.config.extract.js +++ b/config/webpack.config.extract.js @@ -16,7 +16,7 @@ module.exports = ({ filename, production }) => ({ MiniCssExtractPlugin.loader, { loader: 'css-loader', - options: { importLoaders: 1, sourceMap: true } + options: { importLoaders: 2, sourceMap: true } }, { loader: 'postcss-loader', @@ -42,10 +42,10 @@ module.exports = ({ filename, production }) => ({ { loader: 'css-loader', options: { - importLoaders: 1, + importLoaders: 2, sourceMap: true, modules: true, - localIdentName: '[local]--[hash: base64:5]' + localIdentName: 'cozy-ui-bar-[local]--[hash:base64:5]' } }, { diff --git a/config/webpack.config.inline-styles.js b/config/webpack.config.inline-styles.js index 1fc7e7e20..1bedf4a58 100644 --- a/config/webpack.config.inline-styles.js +++ b/config/webpack.config.inline-styles.js @@ -10,13 +10,47 @@ module.exports = ({ production }) => ({ rules: [ { test: /\.styl$/, + exclude: /cozy-ui\/react/, use: [ { loader: 'style-loader' }, { loader: 'css-loader', - options: { importLoaders: 1 } + options: { importLoaders: 2 } + }, + { + loader: 'postcss-loader', + options: { + config: { + ctx: { + env: production ? 'production' : 'development' + } + }, + sourceMap: true + } + }, + { + loader: 'stylus-loader' + } + ] + }, + { + test: /\.styl$/, + include: /cozy-ui\/react/, + use: [ + { + loader: 'style-loader', + options: { sourceMap: true } + }, + { + loader: 'css-loader', + options: { + importLoaders: 2, + sourceMap: true, + modules: true, + localIdentName: 'cozy-ui-bar-[local]--[hash:base64:5]' + } }, { loader: 'postcss-loader', diff --git a/config/webpack.config.jsx.js b/config/webpack.config.jsx.js index 54c84f629..1febd1ff6 100644 --- a/config/webpack.config.jsx.js +++ b/config/webpack.config.jsx.js @@ -3,18 +3,6 @@ const webpack = require('webpack') module.exports = { - resolve: { - extensions: ['.jsx'] - }, - module: { - rules: [ - { - test: /\.jsx$/, - exclude: /node_modules\/(?!(cozy-ui))/, - loader: 'babel-loader' - } - ] - }, // Necessary for cozy-ui during Preact -> React apps transition plugins: [ new webpack.DefinePlugin({ diff --git a/src/components/Bar.jsx b/src/components/Bar.jsx index de63d2313..8c86dc1f4 100644 --- a/src/components/Bar.jsx +++ b/src/components/Bar.jsx @@ -157,7 +157,7 @@ export class Bar extends Component { onClick={this.toggleDrawer} data-tutorial="apps-mobile" > - + {t('drawer')} ) : null diff --git a/src/styles/index.styl b/src/styles/index.styl index 65c150c70..9add49f44 100644 --- a/src/styles/index.styl +++ b/src/styles/index.styl @@ -1,4 +1,3 @@ -@import '~cozy-ui/react/stylesheet.css' @import '~styles/base.css' @import '~styles/indicators.css' @import '~styles/bar.css' diff --git a/test/components/__snapshots__/Bar.spec.jsx.snap b/test/components/__snapshots__/Bar.spec.jsx.snap index e3821a069..1ad397a14 100644 --- a/test/components/__snapshots__/Bar.spec.jsx.snap +++ b/test/components/__snapshots__/Bar.spec.jsx.snap @@ -22,6 +22,7 @@ exports[`Bar should change allow theme overrides 1`] = ` type="button" >