fix: configure stylelint to lint styled-components files

Install postcss-styled-syntax and set it as the custom syntax in stylelint config.
Update lint:css script to target *.styles.ts files instead of all JS/TS files.

Author: dpuscher

package.json

@@ -20,7 +20,7 @@
     "test:watch": "yarn test --watch",
     "test:coverage": "yarn test --coverage",
     "lint": "eslint './**/*.{js,jsx,ts,tsx}'",
-    "lint:css": "stylelint './**/*.{js,jsx,ts,tsx}'",
+    "lint:css": "stylelint './**/*.styles.ts'",
     "analyze": "BUNDLE_ANALYZE=true yarn build"
   },
   "dependencies": {
@@ -73,6 +73,7 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.1",
+    "postcss-styled-syntax": "^0.7.1",
     "react-test-renderer": "^18.0.0",
     "redis-mock": "^0.47.0",
     "redux-mock-store": "^1.5.4",

stylelint.config.js

@@ -2,4 +2,5 @@ module.exports = {
   extends: [
     'stylelint-config-recommended',
   ],
+  customSyntax: 'postcss-styled-syntax',
 };

yarn.lock

@@ -3160,6 +3160,7 @@ __metadata:
     next: "npm:^14.2.0"
     next-redux-wrapper: "npm:^8.1.0"
     nprogress: "npm:^0.2.0"
+    postcss-styled-syntax: "npm:^0.7.1"
     quagga: "npm:^0.12.1"
     react: "npm:^18.0.0"
     react-dom: "npm:^18.0.0"
@@ -7516,6 +7517,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-styled-syntax@npm:^0.7.1":
+  version: 0.7.1
+  resolution: "postcss-styled-syntax@npm:0.7.1"
+  dependencies:
+    typescript: "npm:^5.7.3"
+  peerDependencies:
+    postcss: ^8.5.1
+  checksum: 10c0/85339ca0c511c88cb46bd3e2cdc1bc7ff695960946b653f411939f06cb47bd3e4f2d47e580cf949e56978153c49b462702c9e71d598f1e38619569783e431073
+  languageName: node
+  linkType: hard
+
 "postcss-value-parser@npm:^4.0.2":
   version: 4.0.2
   resolution: "postcss-value-parser@npm:4.0.2"