setup config override rules for emotion styles

Author: ShMcK

.eslintrc.js

@@ -16,7 +16,7 @@ module.exports = {
     '@typescript-eslint/ban-ts-ignore': 'off',
     '@typescript-eslint/no-unused-vars': 'off',
     '@typescript-eslint/camelcase': 'off',
-    'react/forbid-component-props': [1, { forbid: ['style'] }],
-    'react/forbid-dom-props': [1, { forbid: ['style'] }],
+    // 'react/forbid-component-props': [1, { forbid: ['style'] }],
+    // 'react/forbid-dom-props': [1, { forbid: ['style'] }],
   },
 }

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.organizeImports": true,
+    "source.organizeImports": false,
     "source.fixAll": true
   },
   "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],

web-app/.storybook/webpack.config.js

@@ -22,7 +22,12 @@ module.exports = ({ config }) => {
           },
         ],
       ],
-      presets: [['react-app', { flow: false, typescript: true }], ['@emotion/babel-preset-css-prop']],
+      presets: [
+        // react-app
+        ['react-app', { flow: false, typescript: true }],
+        // allow emotion css prop on html
+        ['@emotion/babel-preset-css-prop'],
+      ],
     },
   })
 

web-app/config-overrides.js

@@ -1,7 +1,45 @@
-const { addLessLoader, addBabelPreset } = require('customize-cra')
+const path = require('path') // eslint-disable-line
 
 module.exports = function override(config) {
-  addBabelPreset('@emotion/babel-preset-css-prop')(config)
+  config.module.rules.push({
+    test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+    use: [
+      {
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]',
+          outputPath: 'fonts/',
+        },
+      },
+    ],
+  })
+
+  config.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    loader: require.resolve('babel-loader'),
+    options: {
+      plugins: [
+        // load css for @alifd/next components
+        [
+          'babel-plugin-import',
+          {
+            libraryName: '@alifd/next',
+            style: true,
+          },
+        ],
+      ],
+      presets: [
+        // react-app
+        ['react-app', { flow: false, typescript: true }],
+        // allow emotion css prop on html
+        ['@emotion/babel-preset-css-prop'],
+      ],
+    },
+  })
+
+  config.resolve.extensions.push('.ts', '.tsx')
+
+  config.resolve.modules = ['node_modules', path.resolve(__dirname, './src')]
 
   return config
 }

web-app/src/components/Button/index.tsx

@@ -1,6 +1,5 @@
 import { Button as AlifdButton } from '@alifd/next'
 import * as React from 'react'
-import { css, jsx } from '@emotion/core'
 
 interface Props {
   style?: React.CSSProperties
@@ -11,7 +10,7 @@ interface Props {
 }
 
 const Button = (props: Props) => (
-  <AlifdButton onClick={props.onClick} type={props.type} disabled={props.disabled} css={props.style}>
+  <AlifdButton onClick={props.onClick} type={props.type} disabled={props.disabled} style={props.style}>
     {props.children}
   </AlifdButton>
 )

web-app/src/components/Icon/index.tsx

@@ -1,6 +1,5 @@
 import { Icon as AlifdIcon } from '@alifd/next'
 import * as React from 'react'
-import { css, jsx } from '@emotion/core'
 
 interface Props {
   type: string
@@ -10,7 +9,7 @@ interface Props {
 }
 
 const Icon = (props: Props) => {
-  return <AlifdIcon type={props.type} role={props.role} size={props.size} css={props.style} />
+  return <AlifdIcon type={props.type} role={props.role} size={props.size} style={props.style} />
 }
 
 export default Icon

web-app/src/styles/index.css

@@ -1,4 +1,3 @@
-@import '~@alifd/next/dist/next.css';
 @import '~@alifd/theme-4/dist/next.css';
 
 html {