Add styled components example

Author: morewings

.lintstagedrc

@@ -2,7 +2,7 @@
   "*.{js,ts,tsx}": [
     "eslint --fix"
   ],
-  "*.css": [
+  "*.style.ts": [
     "stylelint --fix --quiet"
   ]
 }

.stylelintrc

@@ -1,5 +1,6 @@
 {
   "extends": ["stylelint-config-standard"],
+  "customSyntax": "postcss-styled-syntax",
   "rules": {
     "function-calc-no-unspaced-operator": true,
     "order/order": [

package.json

@@ -76,9 +76,11 @@
     "husky": "8.0.3",
     "identity-obj-proxy": "^3.0.0",
     "is-ci": "3.0.1",
+    "jest-styled-components": "^7.2.0",
     "lint-staged": "15.1.0",
     "npm-run-all": "4.1.5",
     "postcss-preset-env": "9.3.0",
+    "postcss-styled-syntax": "^0.5.0",
     "prettier": "2.8.7",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -90,6 +92,7 @@
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-postcss": "4.0.2",
     "storybook": "7.5.3",
+    "styled-components": "6.1.1",
     "stylelint": "15.11.0",
     "stylelint-config-standard": "34.0.0",
     "stylelint-order": "6.0.3",
@@ -98,7 +101,8 @@
   },
   "peerDependencies": {
     "react": ">=18.2.0",
-    "react-dom": ">=18.2.0"
+    "react-dom": ">=18.2.0",
+    "styled-components": ">=6.1.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -111,7 +115,7 @@
     "lint:code": "eslint ./src/",
     "fix:code": "run-s 'lint:js --fix'",
     "lint:types": "tsc --pretty --noEmit",
-    "lint:style": "stylelint ./src/**/*.css",
+    "lint:style": "stylelint ./src/**/*.style.ts",
     "fix:style": "run-s 'lint:style --fix'",
     "clean:files": "node ./cleanFiles.js",
     "copy:files": "node ./copyFiles.js",