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

@@ -41,7 +41,8 @@
     "url": "https://github.com/morewings/cra-template-npm-library/issues"
   },
   "dependencies": {
-    "lodash": "^4.17.21"
+    "lodash": "^4.17.21",
+    "styled-components": "^6.1.1"
   },
   "devDependencies": {
     "@rollup/plugin-typescript": "11.1.5",
@@ -76,9 +77,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",
@@ -111,7 +114,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",