feat: add stylelint for css and scss linting

Author: frontendfixer

.changeset/moody-donuts-push.md

@@ -0,0 +1,11 @@
+---
+'@frontendfixer/eslint-config-react': major
+---
+
+## Add stylelint for css and scss files
+
+### Features
+
+- Extends stylelint config with [stylelint-config-standard](https://github.com/stylelint/stylelint-config-standard)
+- SCSS support with [stylelint-scss](https://github.com/stylelint-scss/stylelint-scss) and [postcss-scss](https://github.com/postcss/postcss-scss)
+- Convert all px value to rem using [stylelint-rem-over-px](https://github.com/a-tokyo/stylelint-rem-over-px)

.stylelintrc.json

@@ -0,0 +1,30 @@
+{
+  "plugins": ["stylelint-scss", "stylelint-rem-over-px"],
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-standard-scss",
+    "stylelint-config-css-modules",
+    "stylelint-config-recess-order"
+  ],
+  "rules": {
+    "selector-class-pattern": null,
+    "rem-over-px/rem-over-px": [
+      true,
+      {
+        "ignore": ["1px", "2px", "3px", "border", "box-shadow", "filter"]
+      }
+    ],
+    "scss/at-rule-no-unknown": [
+      true,
+      {
+        "ignoreAtRules": ["tailwind", "layer"]
+      }
+    ]
+  },
+  "overrides": [
+    {
+      "files": ["*.scss", "**/*.scss"],
+      "customSyntax": "postcss-scss"
+    }
+  ]
+}

index.js

@@ -29,6 +29,7 @@ module.exports = {
     'plugin:jsx-a11y/recommended',
     'plugin:import/recommended',
     'airbnb',
+    'stylelint',
     'prettier',
     'plugin:prettier/recommended',
   ],

package.json

@@ -28,6 +28,7 @@
     "./rules/base.rules.js",
     "./rules/typescript.rules.js",
     "./.prettierrc",
+    "./.stylelintrc.json",
     "./.prettierignore",
     "./tsconfig.json"
   ],
@@ -54,6 +55,7 @@
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-config-prettier": "^8.8.0",
+    "eslint-config-stylelint": "^19.0.0",
     "eslint-import-resolver-typescript": "^3.5.5",
     "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-import": "^2.27.5",
@@ -62,14 +64,23 @@
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.1",
-    "eslint-plugin-simple-import-sort": "^10.0.0"
+    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "postcss": "^8.4.26",
+    "postcss-scss": "^4.0.6",
+    "stylelint-config-css-modules": "^4.3.0",
+    "stylelint-config-recess-order": "^4.3.0",
+    "stylelint-config-standard": "^34.0.0",
+    "stylelint-config-standard-scss": "^10.0.0",
+    "stylelint-rem-over-px": "^1.0.0",
+    "stylelint-scss": "^5.0.1"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.4.8",
     "@changesets/cli": "^2.26.2",
     "eslint": "^8.44.0",
     "prettier": "^2.8.8",
     "react": "^18.2.0",
+    "stylelint": "^15.10.2",
     "typescript": "^5.1.6"
   },
   "config": {