linaria

disjukr · Jul 6, 2019 · 16cb646 · 16cb646
1 parent c5f192c
commit 16cb646
Show file tree

Hide file tree

Showing 9 changed files with 537 additions and 92 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 /dist
 /tmp
 /node_modules
+/.linaria-cache
 npm-debug.log
diff --git a/dev/getSharedWebpackConfig.ts b/dev/getSharedWebpackConfig.ts
@@ -7,8 +7,20 @@ interface GetConfigOption {
     outputDir?: 'dist' | 'tmp';
 }
 export default function getSharedWebpackConfig(option: GetConfigOption): webpack.Configuration {
+    const mode = (process.env.NODE_ENV || 'development') as webpack.Configuration['mode'];
+    const isDev = mode === 'development';
+    const babelOptions = {
+        plugins: [
+            ['@babel/plugin-transform-react-jsx', { pragma: 'h' }],
+            'babel-plugin-macros',
+        ],
+        presets: [
+            ['@babel/preset-typescript', { jsxPragma: 'h' }],
+            '@babel/preset-env',
+        ],
+    };
     return {
-        mode: (process.env.NODE_ENV || 'development') as webpack.Configuration['mode'],
+        mode,
         entry: option.entry,
         output: {
             filename: option.filename,
@@ -20,36 +32,34 @@ export default function getSharedWebpackConfig(option: GetConfigOption): webpack
         module: {
             rules: [
                 {
-                    test: /\.tsx?$/,
+                    test: /\.ts$/,
                     exclude: /node_modules/,
-                    use: {
-                        loader: 'babel-loader',
-                        options: {
-                            plugins: [
-                                ['@babel/plugin-transform-react-jsx', { pragma: 'h' }],
-                                'babel-plugin-macros',
-                            ],
-                            presets: [
-                                ['@babel/preset-typescript', { jsxPragma: 'h' }],
-                                '@babel/preset-env',
-                            ],
-                        },
-                    },
+                    use: [
+                        { loader: 'babel-loader', options: babelOptions },
+                    ],
+                },
+                {
+                    test: /\/view\/.+\.tsx?$/,
+                    exclude: /node_modules/,
+                    use: [
+                        { loader: 'babel-loader', options: babelOptions },
+                        { loader: 'linaria/loader', options: {
+                            sourceMap: isDev,
+                            displayName: isDev,
+                            babelOptions,
+                        } },
+                    ],
                 },
                 {
                     test: /\.css$/,
                     exclude: /node_modules/,
                     sideEffects: true,
                     use: [
                         { loader: path.resolve('./dev/lazy-style-loader.ts') },
-                        {
-                            loader: 'postcss-loader',
-                            options: {
-                                config: {
-                                    path: './dev',
-                                },
-                            }
-                        },
+                        { loader: 'postcss-loader', options: {
+                            config: { path: './dev' },
+                            sourceMap: isDev ? 'inline' : false,
+                        } },
                     ],
                 },
             ],