feat: add CSS module support and use react-jsx transform (#164)

* feat: add CSS module support and use react-jsx transform

* Add typescript-plugin-css-modules

* Add postcss-preset-mantine

Author: puehringer

config/eslintrc.template.js

@@ -136,6 +136,8 @@ module.exports = ({ tsconfigRootDir, optimizeImports = true }) => ({
     'prefer-promise-reject-errors': 'warn',
     'prefer-spread': 'warn',
     '@typescript-eslint/ban-ts-comment': 'warn',
+    // Not required with the new JSX transform
+    'react/react-in-jsx-scope': 'off',
     'react/destructuring-assignment': 'off',
     'react/jsx-curly-brace-presence': 'warn',
     'react/jsx-props-no-spreading': 'off',

config/rspack.config.js

@@ -131,6 +131,7 @@ module.exports = (webpackEnv, argv) => {
         // Explicitly set the host to ipv4 local address to ensure that the dev server is reachable from the host machine: https://github.com/cypress-io/cypress/issues/25397
         host: '127.0.0.1',
         open: true,
+        allowedHosts: 'all',
         // Needs to be enabled to make SPAs work: https://stackoverflow.com/questions/31945763/how-to-tell-webpack-dev-server-to-serve-index-html-for-any-route
         historyApiFallback: historyApiFallback == null ? true : historyApiFallback,
         proxy: [
@@ -305,6 +306,7 @@ module.exports = (webpackEnv, argv) => {
                     postcssOptions: {
                       plugins: !useTailwind
                         ? [
+                          'postcss-preset-mantine',
                           'postcss-flexbugs-fixes',
                           [
                             'postcss-preset-env',
@@ -323,6 +325,7 @@ module.exports = (webpackEnv, argv) => {
                         : [
                           'tailwindcss/nesting',
                           'tailwindcss',
+                          'postcss-preset-mantine',
                           'postcss-flexbugs-fixes',
                           [
                             'postcss-preset-env',
@@ -373,7 +376,7 @@ module.exports = (webpackEnv, argv) => {
               // its runtime that would otherwise be processed through "file" loader.
               // Also exclude `html`, `ejs` and `json` extensions so they get processed
               // by webpacks internal loaders.
-              exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.ejs$/, /\.json$/],
+              exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx)$/, /\.module\.css$/, /\.html$/, /\.ejs$/, /\.json$/],
               type: 'asset/resource',
             },
             // ** STOP ** Are you adding a new loader?

config/tsconfig.lenient.template.json

@@ -7,15 +7,20 @@
     "declaration": true,
     "declarationMap": true,
     "moduleResolution": "bundler",
-    "jsx": "react",
+    "jsx": "react-jsx",
     "allowJs": true,
     "experimentalDecorators": true,
     "noImplicitAny": false,
     "skipLibCheck": true,
     "esModuleInterop": false,
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true,
-    "preserveWatchOutput": true
+    "preserveWatchOutput": true,
+    "plugins": [
+      {
+        "name": "typescript-plugin-css-modules"
+      }
+    ]
   },
   // Old "moduleResolution": "Node" option required for Cypress
   // https://github.com/cypress-io/cypress/issues/26308#issuecomment-1663592648

config/tsconfig.template.json

@@ -7,7 +7,7 @@
     "declaration": true,
     "declarationMap": true,
     "moduleResolution": "bundler",
-    "jsx": "react",
+    "jsx": "react-jsx",
     "allowJs": true,
     "experimentalDecorators": true,
     "noImplicitAny": true,
@@ -19,7 +19,12 @@
     "strict": true,
     "noUncheckedIndexedAccess": true,
     "noImplicitReturns": true,
-    "verbatimModuleSyntax": true
+    "verbatimModuleSyntax": true,
+    "plugins": [
+      {
+        "name": "typescript-plugin-css-modules"
+      }
+    ]
   },
   // Old "moduleResolution": "Node" option required for Cypress
   // https://github.com/cypress-io/cypress/issues/26308#issuecomment-1663592648

package.json

@@ -85,6 +85,7 @@
     "postcss-loader": "^8.1.1",
     "postcss-normalize": "^13.0.1",
     "postcss-preset-env": "^10.1.3",
+    "postcss-preset-mantine": "^1.18.0",
     "prettier": "^3.4.2",
     "react-dev-utils": "^12.0.1",
     "react-refresh": "^0.18.0",
@@ -97,6 +98,7 @@
     "ts-node": "^10.9.2",
     "tslib": "~2.8.1",
     "typescript": "~5.9.3",
+    "typescript-plugin-css-modules": "^5.2.0",
     "util": "^0.12.5",
     "webpack": "^5.97.1",
     "yargs": "^17.7.2"