Add support for typescript css modules (EightfoldAI#8)

gclark-eightfold · Apr 27, 2022 · 9421da1 · 9421da1
1 parent 01289de
commit 9421da1
Show file tree

Hide file tree

Showing 5 changed files with 260 additions and 48 deletions.
diff --git a/packages/octuple/.eslintrc.js b/packages/octuple/.eslintrc.js
@@ -1,14 +1,14 @@
 module.exports = {
-  root: true,
-  parser: "@typescript-eslint/parser",
-  plugins: ["@typescript-eslint"],
-  extends: [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:storybook/recommended",
-    "plugin:prettier/recommended",
-  ],
-  env: {
-    node: true,
-  },
+    root: true,
+    parser: '@typescript-eslint/parser',
+    plugins: ['@typescript-eslint'],
+    extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:storybook/recommended',
+        'plugin:prettier/recommended',
+    ],
+    env: {
+        node: true,
+    },
 };
diff --git a/packages/octuple/package.json b/packages/octuple/package.json
@@ -134,6 +134,7 @@
     "tsconfig-paths-webpack-plugin": "3.5.1",
     "tslib": "2.1.0",
     "typescript": "4.6.2",
+    "typescript-plugin-css-modules": "^3.4.0",
     "url-loader": "4.1.1",
     "webpack": "5.64.4",
     "webpack-bundle-analyzer": "4.5.0",

diff --git a/packages/octuple/tsconfig.json b/packages/octuple/tsconfig.json
@@ -18,7 +18,13 @@
           "es5",
           "es2015.promise",
           "dom"
-      ]
+      ],
+      "plugins": [{
+          "name": "typescript-plugin-css-modules",
+          "options": {
+              "classnameTransform": "camelCase"
+          }
+      }]
   },
   "include": [ "src/**/*" ]
-}
+}
diff --git a/packages/octuple/webpack.common.js b/packages/octuple/webpack.common.js
@@ -13,26 +13,7 @@ module.exports = {
             test: /\.s[ca]ss|css$/,
             exclude: /node_modules/,
             include: path.resolve(__dirname, './src'),
-            oneOf: [
-            {
-                test: /\.module\.(s[ca]ss|css)$/,
-                use: [
-                    'style-loader',
-                    {
-                        loader: 'css-loader',
-                        options: {
-                          modules: true,
-                          localIdentName: '[local]-[hash:base64:5]'
-                        },
-                    },
-                    'resolve-url-loader',
-                    'sass-loader',
-                ],
-            },
-            {
-                 use: ['style-loader', 'css-loader', 'resolve-url-loader', 'sass-loader'],
-            },
-          ],
+            use: ['style-loader', 'css-loader', 'resolve-url-loader', 'sass-loader'],
         } ]
     },
     resolve: {