[Feature] - stylelint 설정 (#51)

* chore: stylelint 관련 의존성 추가

* chore: stylelint 규칙 stylelintrc.json에 추가

* chore: vscode 관련 설정 추가

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["stylelint.vscode-stylelint"]
+}

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.stylelint": "explicit"
+  },
+  "stylelint.validate": ["typescriptreact", "typescript"],
+  "stylelint.configFile": "./frontend/.stylelintrc.json",
+  "stylelint.packageManager": "yarn"
+}

frontend/.stylelintrc.json

@@ -0,0 +1,82 @@
+{
+  "extends": ["stylelint-config-standard"],
+  "plugins": ["stylelint-order"],
+  "customSyntax": "postcss-styled-syntax",
+  "rules": {
+    "declaration-empty-line-before": [
+      "always",
+      {
+        "ignore": ["first-nested", "after-comment", "after-declaration", "inside-single-line-block"]
+      }
+    ],
+    "order/properties-order": [
+      {
+        "groupName": "Layout",
+        "noEmptyLineBetween": true,
+        "properties": [
+          "display",
+          "visibility",
+          "overflow",
+          "float",
+          "clear",
+          "position",
+          "top",
+          "right",
+          "bottom",
+          "left",
+          "z-index"
+        ]
+      },
+      {
+        "groupName": "Box",
+        "emptyLineBefore": "always",
+        "noEmptyLineBetween": true,
+        "properties": [
+          "width",
+          "height",
+          "margin",
+          "margin-top",
+          "margin-right",
+          "margin-bottom",
+          "margin-left",
+          "padding",
+          "padding-top",
+          "padding-right",
+          "padding-bottom",
+          "padding-left",
+          "border"
+        ]
+      },
+      {
+        "groupName": "Background",
+        "emptyLineBefore": "always",
+        "noEmptyLineBetween": true,
+        "properties": ["background-color"]
+      },
+      {
+        "groupName": "Font",
+        "emptyLineBefore": "always",
+        "noEmptyLineBetween": true,
+        "properties": [
+          "color",
+          "font-style",
+          "font-weight",
+          "font-size",
+          "line-height",
+          "letter-spacing",
+          "text-align",
+          "text-indent",
+          "vertical-align",
+          "white-space"
+        ]
+      },
+      {
+        "groupName": "Animation",
+        "emptyLineBefore": "always",
+        "noEmptyLineBetween": true,
+        "properties": ["animation"]
+      }
+    ]
+  },
+  "order/order": ["custom-properties", "declarations"]
+}

frontend/package.json

@@ -5,7 +5,8 @@
   "repository": "https://github.com/woowacourse-teams/2024-touroot",
   "scripts": {
     "dev": "webpack serve --config webpack.common.js",
-    "build": "NODE_ENV=production webpack --config webpack.common.js"
+    "build": "NODE_ENV=production webpack --config webpack.common.js",
+    "lint:styled": "stylelint './src/**/*.styled.ts' --fix"
   },
   "dependencies": {
     "@emotion/react": "^11.11.4",
@@ -27,7 +28,11 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.8",
     "html-webpack-plugin": "^5.6.0",
+    "postcss-styled-syntax": "^0.6.4",
     "prettier": "^3.3.2",
+    "stylelint": "16.6.1",
+    "stylelint-config-standard": "^36.0.1",
+    "stylelint-order": "^6.0.4",
     "ts-loader": "^9.5.1",
     "typescript": "^5.5.3",
     "webpack": "^5.92.1",