KTL-1241 chore: added dts generation for css module and validation via typescript

Author: berezinant

.eslintignore

@@ -1,2 +1,3 @@
 node_modules
-public
+public
+*.css.d.ts

.eslintrc.js

@@ -33,13 +33,15 @@ module.exports = {
   },
   plugins: ['@typescript-eslint', 'react', 'prettier', 'import', 'react-hooks'],
   rules: {
-    indent: ['warn', 2],
+    indent: 'off',
     'linebreak-style': ['error', 'unix'],
     quotes: ['error', 'single'],
     semi: ['error', 'always'],
+    curly: ['error', 'all'],
     'react/react-in-jsx-scope': 'off',
     'import/order': ['error', { alphabetize: { order: 'asc' } }],
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'warn',
   },
+  ignorePatterns: ['*.js', '*.mjs'],
 };

.gitignore

@@ -3,3 +3,4 @@ node_modules/
 public
 .idea
 .DS_Store
+*.css.d.ts

lint-staged.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+    "src/**/**/*.{ts,tsx}": [
+        "eslint --fix",
+        () => "tsc --noEmit"
+    ],
+    "src/**/**/*.{ts,tsx,css,scss}": [
+        "prettier --write"
+    ]
+}

package.json

@@ -7,24 +7,17 @@
     "gatsby"
   ],
   "scripts": {
-    "start": "gatsby develop --port 8082",
+    "start": "gatsby develop --port 8082 & tcm -w -c src",
     "build": "gatsby build --prefix-paths",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
-    "lint": "eslint --ext src/**/**/*.{ts,tsx}",
-    "lint:fix": "eslint --fix --ext src/**/**/*.{ts,tsx}",
+    "lint": "eslint --ext src/**/**/*.{ts,tsx} --quiet",
+    "lint:fix": "eslint --fix --ext src/**/**/*.{ts,tsx} --quiet",
     "prettier": "prettier --write 'src/**/**/*.{ts,tsx,css,scss}'",
+    "generate-css-types": "tcm -c src",
     "lint-staged": "lint-staged",
     "prepare": "husky install"
   },
-  "lint-staged": {
-    "src/**/**/*.{ts,tsx}": [
-      "eslint --fix"
-    ],
-    "src/**/**/*.{ts,tsx,css,scss}": [
-      "prettier --write"
-    ]
-  },
   "dependencies": {
     "@csstools/postcss-global-data": "^1.0.3",
     "@jetbrains/kotlin-web-site-ui": "^4.6.0",
@@ -90,6 +83,7 @@
     "postcss": "^8.4.21",
     "prettier": "^3.1.0",
     "prop-types": "^15.7.2",
+    "typed-css-modules": "^0.8.1",
     "typescript": "^4.9.5",
     "typescript-plugin-css-modules": "^4.2.3"
   }

tsconfig.json

@@ -4,6 +4,7 @@
       { "name": "typescript-plugin-css-modules" }
     ],
     "jsx": "react-jsx",
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "skipLibCheck": true
   }
 }