Re-add linting for styled-components

- Update styled-components to v6
- Update stylelint to v15
- Add styled-components css plugin

.erb/configs/webpack.config.base.ts

@@ -7,53 +7,58 @@ import { dependencies as externals } from '../../release/app/package.json';
 import webpackPaths from './webpack.paths';
 import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
 
+const createStyledComponentsTransformer = require('typescript-plugin-styled-components').default;
+
+const styledComponentsTransformer = createStyledComponentsTransformer();
+
 const configuration: webpack.Configuration = {
-  externals: [...Object.keys(externals || {})],
+    externals: [...Object.keys(externals || {})],
 
-  module: {
-    rules: [
-      {
-        exclude: /node_modules/,
-        test: /\.[jt]sx?$/,
-        use: {
-          loader: 'ts-loader',
-          options: {
-            // Remove this line to enable type checking in webpack builds
-            transpileOnly: true,
-          },
+    module: {
+        rules: [
+            {
+                exclude: /node_modules/,
+                test: /\.[jt]sx?$/,
+                use: {
+                    loader: 'ts-loader',
+                    options: {
+                        // Remove this line to enable type checking in webpack builds
+                        transpileOnly: true,
+                        getCustomTransformers: () => ({ before: [styledComponentsTransformer] }),
+                    },
+                },
+            },
+        ],
+    },
+
+    output: {
+        // https://github.com/webpack/webpack/issues/1114
+        library: {
+            type: 'commonjs2',
         },
-      },
+
+        path: webpackPaths.srcPath,
+    },
+
+    plugins: [
+        new webpack.EnvironmentPlugin({
+            NODE_ENV: 'production',
+        }),
     ],
-  },
 
-  output: {
-    // https://github.com/webpack/webpack/issues/1114
-    library: {
-      type: 'commonjs2',
+    /**
+     * Determine the array of extensions that should be used to resolve modules.
+     */
+    resolve: {
+        extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
+        fallback: {
+            child_process: false,
+        },
+        plugins: [new TsconfigPathsPlugin({ baseUrl: webpackPaths.srcPath })],
+        modules: [webpackPaths.srcPath, 'node_modules'],
     },
 
-    path: webpackPaths.srcPath,
-  },
-
-  plugins: [
-    new webpack.EnvironmentPlugin({
-      NODE_ENV: 'production',
-    }),
-  ],
-
-  /**
-   * Determine the array of extensions that should be used to resolve modules.
-   */
-  resolve: {
-    extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
-    fallback: {
-      child_process: false,
-    },
-    plugins: [new TsconfigPathsPlugin({ baseUrl: webpackPaths.srcPath })],
-    modules: [webpackPaths.srcPath, 'node_modules'],
-  },
-
-  stats: 'errors-only',
+    stats: 'errors-only',
 };
 
 export default configuration;

.stylelintrc.json

@@ -1,27 +1,16 @@
 {
+    "customSyntax": "postcss-styled-syntax",
     "extends": [
-        "stylelint-config-standard-scss",
-        "stylelint-config-css-modules",
-        "stylelint-config-rational-order"
+        "stylelint-config-standard",
+        "stylelint-config-styled-components",
+        "stylelint-config-recess-order"
     ],
     "rules": {
-        "indentation": 4,
-        "color-function-notation": ["legacy"],
         "declaration-empty-line-before": null,
-        "order/properties-order": [],
-        "plugin/rational-order": [
-            true,
-            {
-                "border-in-box-model": false,
-                "empty-line-between-groups": false
-            }
-        ],
-        "string-quotes": "single",
         "declaration-block-no-redundant-longhand-properties": null,
         "selector-class-pattern": null,
         "selector-type-case": ["lower", { "ignoreTypes": ["/^\\$\\w+/"] }],
         "selector-type-no-unknown": [true, { "ignoreTypes": ["/-styled-mixin/", "/^\\$\\w+/"] }],
-        "value-keyword-case": ["lower", { "ignoreKeywords": ["dummyValue"] }],
         "declaration-colon-newline-after": null
     }
 }

.vscode/settings.json

@@ -38,7 +38,7 @@
     "i18n-ally.localesPaths": ["src/i18n", "src/i18n/locales"],
     "typescript.tsdk": "node_modules\\typescript\\lib",
     "typescript.preferences.importModuleSpecifier": "non-relative",
-    "stylelint.validate": ["css", "less", "postcss", "scss"],
+    "stylelint.validate": ["css", "scss", "typescript", "typescriptreact"],
     "typescript.updateImportsOnFileMove.enabled": "always",
     "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
     "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },

package.json

@@ -10,9 +10,9 @@
         "build:renderer": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.renderer.prod.ts",
         "build:web": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.web.prod.ts",
         "rebuild": "electron-rebuild --parallel --types prod,dev,optional --module-dir release/app",
-        "lint": "cross-env NODE_ENV=development eslint . --ext .js,.jsx,.ts,.tsx",
-        "lint:fix": "cross-env NODE_ENV=development eslint . --ext .js,.jsx,.ts,.tsx --fix",
-        "lint:styles": "npx stylelint **/*.tsx",
+        "lint": "concurrently \"npm run lint:code\" \"npm run lint:styles\"",
+        "lint:code": "cross-env NODE_ENV=development eslint . --ext .js,.jsx,.ts,.tsx --fix",
+        "lint:styles": "npx stylelint **/*.tsx --fix",
         "package": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never",
         "package:pr": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never --win --mac --linux",
         "package:dev": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never --dir",
@@ -222,6 +222,7 @@
         "lint-staged": "^12.3.7",
         "mini-css-extract-plugin": "^2.6.0",
         "postcss-scss": "^4.0.4",
+        "postcss-styled-syntax": "^0.5.0",
         "postcss-syntax": "^0.36.2",
         "prettier": "^2.6.2",
         "react-refresh": "^0.12.0",
@@ -231,16 +232,19 @@
         "sass": "^1.49.11",
         "sass-loader": "^12.6.0",
         "style-loader": "^3.3.1",
-        "stylelint": "^14.9.1",
+        "stylelint": "^15.10.3",
         "stylelint-config-css-modules": "^4.3.0",
-        "stylelint-config-rational-order": "^0.1.2",
+        "stylelint-config-recess-order": "^4.3.0",
+        "stylelint-config-standard": "^34.0.0",
         "stylelint-config-standard-scss": "^4.0.0",
+        "stylelint-config-styled-components": "^0.1.1",
         "terser-webpack-plugin": "^5.3.1",
         "ts-jest": "^27.1.4",
         "ts-loader": "^9.2.8",
         "ts-node": "^10.7.0",
         "tsconfig-paths-webpack-plugin": "^4.0.0",
-        "typescript": "^4.8.4",
+        "typescript": "^5.2.2",
+        "typescript-plugin-styled-components": "^3.0.0",
         "url-loader": "^4.1.1",
         "webpack": "^5.71.0",
         "webpack-bundle-analyzer": "^4.5.0",
@@ -304,13 +308,13 @@
         "react-virtualized-auto-sizer": "^1.0.17",
         "react-window": "^1.8.9",
         "react-window-infinite-loader": "^1.0.9",
-        "styled-components": "^5.3.11",
+        "styled-components": "^6.0.8",
         "swiper": "^9.3.1",
         "zod": "^3.21.4",
         "zustand": "^4.3.9"
     },
     "resolutions": {
-        "styled-components": "^5"
+        "styled-components": "^6"
     },
     "devEngines": {
         "node": ">=14.x",

tsconfig.json

@@ -10,7 +10,6 @@
         "declaration": true,
         "declarationMap": true,
         "jsx": "react-jsx",
-        "jsxImportSource": "@emotion/react",
         "strict": true,
         "pretty": true,
         "sourceMap": true,