Merge pull request #608 from cozy/bundle-cozy-ui

Bundle cozy-ui
cozy · Jul 26, 2019 · 365b948 · 365b948
2 parents e85cf04 + 0df57f2
commit 365b948
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -157,7 +157,7 @@ export class Bar extends Component {
         onClick={this.toggleDrawer}
         data-tutorial="apps-mobile"
       >
-        <Icon icon={appsIcon} width={16} height={16} />
+        <Icon icon={appsIcon} width={16} height={16} color="currentColor" />
         <span className="coz-bar-hidden">{t('drawer')}</span>
       </button>
     ) : null

diff --git 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
@@ -22,6 +22,7 @@ exports[`Bar should change allow theme overrides 1`] = `
       type="button"
     >
       <Icon
+        color="currentColor"
         height={16}
         icon="test-file-stub"
         spin={false}
@@ -70,6 +71,7 @@ exports[`Bar should change theme 1`] = `
       type="button"
     >
       <Icon
+        color="currentColor"
         height={16}
         icon="test-file-stub"
         spin={false}
@@ -118,6 +120,7 @@ exports[`Bar should display the Searchbar 1`] = `
       type="button"
     >
       <Icon
+        color="currentColor"
         height={16}
         icon="test-file-stub"
         spin={false}
@@ -212,6 +215,7 @@ exports[`Bar should not display searchbar if we are not on Cozy Drive 1`] = `
       type="button"
     >
       <Icon
+        color="currentColor"
         height={16}
         icon="test-file-stub"
         spin={false}
@@ -262,6 +266,7 @@ exports[`Bar should not display searchbar if we are on mobile 1`] = `
       type="button"
     >
       <Icon
+        color="currentColor"
         height={16}
         icon="test-file-stub"
         spin={false}