From 06209accd67013ed1a2c00c5c078e626aa53a1ac Mon Sep 17 00:00:00 2001
From: Dima Vyshniakov <morewings@gmail.com>
Date: Thu, 30 Nov 2023 01:27:51 +0100
Subject: [PATCH] Add styled components example

---
 .lintstagedrc                                 |   2 +-
 .stylelintrc                                  |   1 +
 package.json                                  |   7 +-
 pnpm-lock.yaml                                | 175 +++++++++++++++---
 rollup.config.cjs                             |   2 +-
 .../App/__snapshots__/App.spec.tsx.snap       |  42 ++++-
 .../{Counter.module.css => Counter.style.ts}  |  24 +--
 src/lib/Counter/Counter.tsx                   |  12 +-
 .../__snapshots__/Counter.spec.tsx.snap       |  42 ++++-
 src/setupTests.ts                             |   1 +
 10 files changed, 251 insertions(+), 57 deletions(-)
 rename src/lib/Counter/{Counter.module.css => Counter.style.ts} (65%)

diff --git a/.lintstagedrc b/.lintstagedrc
index b22e8cd0..4b657fb6 100644
--- a/.lintstagedrc
+++ b/.lintstagedrc
@@ -2,7 +2,7 @@
   "*.{js,ts,tsx}": [
     "eslint --fix"
   ],
-  "*.css": [
+  "*.style.ts": [
     "stylelint --fix --quiet"
   ]
 }
diff --git a/.stylelintrc b/.stylelintrc
index 1ce6b292..0a8606d6 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -1,5 +1,6 @@
 {
   "extends": ["stylelint-config-standard"],
+  "customSyntax": "postcss-styled-syntax",
   "rules": {
     "function-calc-no-unspaced-operator": true,
     "order/order": [
diff --git a/package.json b/package.json
index a81d7143..1fe96d71 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9963dd1d..56342520 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ dependencies:
   lodash:
     specifier: ^4.17.21
     version: 4.17.21
+  styled-components:
+    specifier: ^6.1.1
+    version: 6.1.1(react-dom@18.2.0)(react@18.2.0)
 
 devDependencies:
   '@rollup/plugin-typescript':
@@ -106,6 +109,9 @@ devDependencies:
   is-ci:
     specifier: 3.0.1
     version: 3.0.1
+  jest-styled-components:
+    specifier: ^7.2.0
+    version: 7.2.0(styled-components@6.1.1)
   lint-staged:
     specifier: 15.1.0
     version: 15.1.0
@@ -115,6 +121,9 @@ devDependencies:
   postcss-preset-env:
     specifier: 9.3.0
     version: 9.3.0(postcss@8.4.31)
+  postcss-styled-syntax:
+    specifier: ^0.5.0
+    version: 0.5.0(postcss@8.4.31)
   prettier:
     specifier: 2.8.7
     version: 2.8.7
@@ -2411,6 +2420,17 @@ packages:
     engines: {node: '>=10.0.0'}
     dev: true
 
+  /@emotion/is-prop-valid@1.2.1:
+    resolution: {integrity: sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==}
+    dependencies:
+      '@emotion/memoize': 0.8.1
+
+  /@emotion/memoize@0.8.1:
+    resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==}
+
+  /@emotion/unitless@0.8.1:
+    resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==}
+
   /@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@18.2.0):
     resolution: {integrity: sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==}
     peerDependencies:
@@ -5595,6 +5615,9 @@ packages:
     resolution: {integrity: sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw==}
     dev: true
 
+  /@types/stylis@4.2.4:
+    resolution: {integrity: sha512-36ZrGJ8fgtBr6nwNnuJ9jXIj+bn/pF6UoqmrQT7+Y99+tFFeHHsoR54+194dHdyhPjgbeoNz3Qru0oRt0l6ASQ==}
+
   /@types/testing-library__jest-dom@5.9.5:
     resolution: {integrity: sha512-ggn3ws+yRbOHog9GxnXiEZ/35Mow6YtPZpd7Z5mKDeZS/o7zx3yAle0ov/wjhVB5QT4N2Dt+GNoGCdqkBGCajQ==}
     dependencies:
@@ -5878,6 +5901,27 @@ packages:
       - supports-color
     dev: true
 
+  /@typescript-eslint/typescript-estree@5.62.0(typescript@5.1.6):
+    resolution: {integrity: sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/types': 5.62.0
+      '@typescript-eslint/visitor-keys': 5.62.0
+      debug: 4.3.4
+      globby: 11.1.0
+      is-glob: 4.0.3
+      semver: 7.5.4
+      tsutils: 3.21.0(typescript@5.1.6)
+      typescript: 5.1.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@typescript-eslint/typescript-estree@6.12.0(typescript@4.8.4):
     resolution: {integrity: sha512-vw9E2P9+3UUWzhgjyyVczLWxZ3GuQNT7QpnIY3o5OMeLO/c8oHljGc8ZpryBMIyympiAAaKgw9e5Hl9dCWFOYw==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -6134,7 +6178,7 @@ packages:
       esbuild: '>=0.10.0'
     dependencies:
       esbuild: 0.18.20
-      tslib: 2.4.0
+      tslib: 2.6.2
     dev: true
 
   /@yarnpkg/fslib@2.10.3:
@@ -6399,7 +6443,7 @@ packages:
     resolution: {integrity: sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==}
     engines: {node: '>=10'}
     dependencies:
-      tslib: 2.4.0
+      tslib: 2.6.2
     dev: true
 
   /aria-query@5.1.3:
@@ -6558,21 +6602,21 @@ packages:
     resolution: {integrity: sha512-O0yuUDnZeQDL+ncNGlJ78BiO4jnYI3bvMsD5prT0/nsgijG/LpNBIr63gTjVTNsiGkgQhiyCShTgxt8oXOrklA==}
     engines: {node: '>=4'}
     dependencies:
-      tslib: 2.4.0
+      tslib: 2.6.2
     dev: true
 
   /ast-types@0.15.2:
     resolution: {integrity: sha512-c27loCv9QkZinsa5ProX751khO9DJl/AcB5c2KNtA6NRvHKS0PgLfcftz72KVq504vB0Gku5s2kUZzDBvQWvHg==}
     engines: {node: '>=4'}
     dependencies:
-      tslib: 2.4.0
+      tslib: 2.6.2
     dev: true
 
   /ast-types@0.16.1:
     resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==}
     engines: {node: '>=4'}
     dependencies:
-      tslib: 2.4.0
+      tslib: 2.6.2
     dev: true
 
   /astral-regex@2.0.0:
@@ -7117,7 +7161,7 @@ packages:
     resolution: {integrity: sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==}
     dependencies:
       pascal-case: 3.1.2
-      tslib: 2.4.0
+      tslib: 2.6.2
     dev: true
 
   /camelcase-css@2.0.1:
@@ -7145,6 +7189,9 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /camelize@1.0.1:
+    resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==}
+
   /caniuse-api@3.0.0:
     resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
     dependencies:
@@ -7599,6 +7646,10 @@ packages:
       postcss-selector-parser: 6.0.13
     dev: true
 
+  /css-color-keywords@1.0.0:
+    resolution: {integrity: sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==}
+    engines: {node: '>=4'}
+
   /css-declaration-sorter@6.3.1(postcss@8.4.25):
     resolution: {integrity: sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w==}
     engines: {node: ^10 || ^12 || >=14}
@@ -7733,6 +7784,13 @@ packages:
       nth-check: 2.1.1
     dev: true
 
+  /css-to-react-native@3.2.0:
+    resolution: {integrity: sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==}
+    dependencies:
+      camelize: 1.0.1
+      css-color-keywords: 1.0.0
+      postcss-value-parser: 4.2.0
+
   /css-tree@1.0.0-alpha.37:
     resolution: {integrity: sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==}
     engines: {node: '>=8.0.0'}
@@ -7929,6 +7987,9 @@ packages:
     resolution: {integrity: sha512-xc8DUsCLmjvCfoD7LTGE0ou2MIWLx0K9RCZwSHMOdynqRsP4MtUcLeqh1HcQ2dInwDTqn+3CE0/FZh1et+p4jA==}
     dev: true
 
+  /csstype@3.1.2:
+    resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
+
   /damerau-levenshtein@1.0.8:
     resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
     dev: true
@@ -8291,7 +8352,7 @@ packages:
     resolution: {integrity: sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==}
     dependencies:
       no-case: 3.0.4
-      tslib: 2.4.0
+      tslib: 2.6.2
     dev: true
 
   /dotenv-expand@10.0.0:
@@ -11183,6 +11244,16 @@ packages:
       - supports-color
     dev: true
 
+  /jest-styled-components@7.2.0(styled-components@6.1.1):
+    resolution: {integrity: sha512-gwyyveNjvuRA0pyhbQoydXZllLZESs2VuL5fXCabzh0buHPAOUfANtW7n5YMPmdC0sH3VB7h2eUGZ23+tjvaBA==}
+    engines: {node: '>= 12'}
+    peerDependencies:
+      styled-components: '>= 5'
+    dependencies:
+      '@adobe/css-tools': 4.3.1
+      styled-components: 6.1.1(react-dom@18.2.0)(react@18.2.0)
+    dev: true
+
   /jest-util@27.5.1:
     resolution: {integrity: sha512-Kv2o/8jNvX1MQ0KGtw480E/w4fBCDOnH6+6DmeKi6LZUIlKA5kwY0YNdlzaWTiVgxqAqik11QyxDOKk543aKXw==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
@@ -11334,7 +11405,6 @@ packages:
 
   /js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
-    dev: true
 
   /js-yaml@3.14.0:
     resolution: {integrity: sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==}
@@ -11711,12 +11781,11 @@ packages:
     hasBin: true
     dependencies:
       js-tokens: 4.0.0
-    dev: true
 
   /lower-case@2.0.2:
     resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
     dependencies:
-      tslib: 2.4.0
+      tslib: 2.6.2
     dev: true
 
   /lru-cache@10.1.0:
@@ -12084,7 +12153,6 @@ packages:
     resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
-    dev: true
 
   /natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
@@ -12107,7 +12175,7 @@ packages:
     resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
     dependencies:
       lower-case: 2.0.2
-      tslib: 2.4.0
+      tslib: 2.6.2
     dev: true
 
   /node-abort-controller@3.1.1:
@@ -12510,7 +12578,7 @@ packages:
     resolution: {integrity: sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==}
     dependencies:
       dot-case: 3.0.4
-      tslib: 2.4.0
+      tslib: 2.6.2
     dev: true
 
   /parent-module@1.0.1:
@@ -12551,7 +12619,7 @@ packages:
     resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==}
     dependencies:
       no-case: 3.0.4
-      tslib: 2.4.0
+      tslib: 2.6.2
     dev: true
 
   /path-browserify@1.0.1:
@@ -12643,7 +12711,6 @@ packages:
 
   /picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
-    dev: true
 
   /picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
@@ -14155,6 +14222,20 @@ packages:
       postcss: 8.4.25
     dev: true
 
+  /postcss-styled-syntax@0.5.0(postcss@8.4.31):
+    resolution: {integrity: sha512-kgYPNbcppION92+tMNVtAPQK9PU24sZc6jAqdF64YlfXVNFx4zRuKEzqLJuC4rFhTTrxoR9dHXSAl/OIBshKRw==}
+    engines: {node: '>=14.17'}
+    peerDependencies:
+      postcss: ^8.4.21
+    dependencies:
+      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.1.6)
+      estree-walker: 2.0.2
+      postcss: 8.4.31
+      typescript: 5.1.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /postcss-svgo@5.1.0(postcss@8.4.25):
     resolution: {integrity: sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==}
     engines: {node: ^10 || ^12 || >=14.0}
@@ -14199,7 +14280,6 @@ packages:
 
   /postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-    dev: true
 
   /postcss@7.0.36:
     resolution: {integrity: sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==}
@@ -14226,7 +14306,6 @@ packages:
       nanoid: 3.3.6
       picocolors: 1.0.0
       source-map-js: 1.0.2
-    dev: true
 
   /prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
@@ -14559,7 +14638,6 @@ packages:
       loose-envify: 1.4.0
       react: 18.2.0
       scheduler: 0.23.0
-    dev: true
 
   /react-element-to-jsx-string@15.0.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-UDg4lXB6BzlobN60P8fHWVPX3Kyw8ORrTeBtClmIlGdkOOE+GYQSFvmEU5iLLpwp/6v42DINwNcwOhOLfQ//FQ==}
@@ -14612,7 +14690,7 @@ packages:
       '@types/react': 18.0.0
       react: 18.2.0
       react-style-singleton: 2.2.1(@types/react@18.0.0)(react@18.2.0)
-      tslib: 2.4.0
+      tslib: 2.6.2
     dev: true
 
   /react-remove-scroll@2.5.5(@types/react@18.0.0)(react@18.2.0):
@@ -14629,7 +14707,7 @@ packages:
       react: 18.2.0
       react-remove-scroll-bar: 2.3.4(@types/react@18.0.0)(react@18.2.0)
       react-style-singleton: 2.2.1(@types/react@18.0.0)(react@18.2.0)
-      tslib: 2.4.0
+      tslib: 2.6.2
       use-callback-ref: 1.3.0(@types/react@18.0.0)(react@18.2.0)
       use-sidecar: 1.1.2(@types/react@18.0.0)(react@18.2.0)
     dev: true
@@ -14745,7 +14823,7 @@ packages:
       get-nonce: 1.0.1
       invariant: 2.2.4
       react: 18.2.0
-      tslib: 2.4.0
+      tslib: 2.6.2
     dev: true
 
   /react@18.2.0:
@@ -14753,7 +14831,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       loose-envify: 1.4.0
-    dev: true
 
   /read-cache@1.0.0:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
@@ -14844,7 +14921,7 @@ packages:
       ast-types: 0.15.2
       esprima: 4.0.1
       source-map: 0.6.1
-      tslib: 2.4.0
+      tslib: 2.6.2
     dev: true
 
   /recast@0.23.4:
@@ -14855,7 +14932,7 @@ packages:
       ast-types: 0.16.1
       esprima: 4.0.1
       source-map: 0.6.1
-      tslib: 2.4.0
+      tslib: 2.6.2
     dev: true
 
   /recursive-copy@2.0.14:
@@ -15311,7 +15388,6 @@ packages:
     resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
     dependencies:
       loose-envify: 1.4.0
-    dev: true
 
   /schema-utils@2.7.0:
     resolution: {integrity: sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==}
@@ -15479,6 +15555,9 @@ packages:
       kind-of: 6.0.3
     dev: true
 
+  /shallowequal@1.1.0:
+    resolution: {integrity: sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==}
+
   /shebang-command@1.2.0:
     resolution: {integrity: sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==}
     engines: {node: '>=0.10.0'}
@@ -15582,7 +15661,6 @@ packages:
   /source-map-js@1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /source-map-loader@3.0.1(webpack@5.89.0):
     resolution: {integrity: sha512-Vp1UsfyPvgujKQzi4pyDiTOnE3E4H+yHvkVRN3c/9PJmQS4CQJExvcDvaX/D+RV+xQben9HJ56jMJS3CgUeWyA==}
@@ -15940,6 +16018,25 @@ packages:
     resolution: {integrity: sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==}
     dev: true
 
+  /styled-components@6.1.1(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-cpZZP5RrKRIClBW5Eby4JM1wElLVP4NQrJbJ0h10TidTyJf4SIIwa3zLXOoPb4gJi8MsJ8mjq5mu2IrEhZIAcQ==}
+    engines: {node: '>= 16'}
+    peerDependencies:
+      react: '>= 16.8.0'
+      react-dom: '>= 16.8.0'
+    dependencies:
+      '@emotion/is-prop-valid': 1.2.1
+      '@emotion/unitless': 0.8.1
+      '@types/stylis': 4.2.4
+      css-to-react-native: 3.2.0
+      csstype: 3.1.2
+      postcss: 8.4.31
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      shallowequal: 1.1.0
+      stylis: 4.3.0
+      tslib: 2.6.2
+
   /stylehacks@5.1.0(postcss@8.4.25):
     resolution: {integrity: sha512-SzLmvHQTrIWfSgljkQCw2++C9+Ne91d/6Sp92I8c5uHTcy/PgeHamwITIbBW9wnFTY/3ZfSXR9HIL6Ikqmcu6Q==}
     engines: {node: ^10 || ^12 || >=14.0}
@@ -16040,6 +16137,9 @@ packages:
       - supports-color
     dev: true
 
+  /stylis@4.3.0:
+    resolution: {integrity: sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==}
+
   /supports-color@5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
     engines: {node: '>=4'}
@@ -16494,6 +16594,9 @@ packages:
     resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
     dev: true
 
+  /tslib@2.6.2:
+    resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
+
   /tsutils@3.21.0(typescript@4.8.4):
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
     engines: {node: '>= 6'}
@@ -16504,6 +16607,16 @@ packages:
       typescript: 4.8.4
     dev: true
 
+  /tsutils@3.21.0(typescript@5.1.6):
+    resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
+    engines: {node: '>= 6'}
+    peerDependencies:
+      typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta'
+    dependencies:
+      tslib: 1.14.1
+      typescript: 5.1.6
+    dev: true
+
   /type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -16613,6 +16726,12 @@ packages:
     hasBin: true
     dev: true
 
+  /typescript@5.1.6:
+    resolution: {integrity: sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+    dev: true
+
   /uglify-js@3.17.4:
     resolution: {integrity: sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==}
     engines: {node: '>=0.8.0'}
@@ -16775,7 +16894,7 @@ packages:
     dependencies:
       '@types/react': 18.0.0
       react: 18.2.0
-      tslib: 2.4.0
+      tslib: 2.6.2
     dev: true
 
   /use-resize-observer@9.1.0(react-dom@18.2.0)(react@18.2.0):
@@ -16802,7 +16921,7 @@ packages:
       '@types/react': 18.0.0
       detect-node-es: 1.1.0
       react: 18.2.0
-      tslib: 2.4.0
+      tslib: 2.6.2
     dev: true
 
   /util-deprecate@1.0.2:
diff --git a/rollup.config.cjs b/rollup.config.cjs
index 5e6a8a38..6563c9b9 100644
--- a/rollup.config.cjs
+++ b/rollup.config.cjs
@@ -28,7 +28,7 @@ module.exports = [
       postcss({
         extract: 'style.css',
         inline: false,
-        modules: true,
+        modules: false,
         plugins: [
           postcssPresetEnv({
             browsers: ['>0.2%', 'not dead', 'not op_mini all'],
diff --git a/src/environment/App/__snapshots__/App.spec.tsx.snap b/src/environment/App/__snapshots__/App.spec.tsx.snap
index fac01039..6cf2ee04 100644
--- a/src/environment/App/__snapshots__/App.spec.tsx.snap
+++ b/src/environment/App/__snapshots__/App.spec.tsx.snap
@@ -2,19 +2,53 @@
 
 exports[`environment > App renders without crashing 1`] = `
 <DocumentFragment>
-  <div
+  .c0 {
+  border: 1px solid lightgray;
+  font-family: sans-serif;
+  margin: 36px 24px;
+  padding: 24px;
+  text-align: center;
+  width: 240px;
+}
+
+.c1 {
+  font-size: 24px;
+  font-weight: normal;
+  margin: 0 0 12px;
+}
+
+.c2 {
+  background: lightseagreen;
+  border: none;
+  border-radius: 5px;
+  color: white;
+  cursor: pointer;
+  display: block;
+  font-size: 16px;
+  margin: 0 auto 24px;
+  padding: 12px 24px;
+  text-shadow: 1px 1px 1px rgb(0 0 0 / 50%);
+}
+
+.c2:active {
+  left: 1px;
+  position: relative;
+  top: 1px;
+}
+
+<div
     class="container"
   >
     <div
-      class="counter"
+      class="c0"
     >
       <h2
-        class="header"
+        class="c1"
       >
         Counter
       </h2>
       <button
-        class="button"
+        class="c2"
         type="button"
       >
         Increment by one
diff --git a/src/lib/Counter/Counter.module.css b/src/lib/Counter/Counter.style.ts
similarity index 65%
rename from src/lib/Counter/Counter.module.css
rename to src/lib/Counter/Counter.style.ts
index c69d23e4..ebebf4ad 100644
--- a/src/lib/Counter/Counter.module.css
+++ b/src/lib/Counter/Counter.style.ts
@@ -1,19 +1,21 @@
-.counter {
+import styled from 'styled-components';
+
+export const Container = styled.div`
   border: 1px solid lightgray;
   font-family: sans-serif;
   margin: 36px 24px;
   padding: 24px;
   text-align: center;
   width: 240px;
-}
+`;
 
-.header {
+export const Header = styled.h2`
   font-size: 24px;
   font-weight: normal;
   margin: 0 0 12px;
-}
+`;
 
-.button {
+export const Button = styled.button`
   background: lightseagreen;
   border: none;
   border-radius: 5px;
@@ -24,10 +26,10 @@
   margin: 0 auto 24px;
   padding: 12px 24px;
   text-shadow: 1px 1px 1px rgb(0 0 0 / 50%);
-}
 
-.button:active {
-  left: 1px;
-  position: relative;
-  top: 1px;
-}
+  &:active {
+    left: 1px;
+    position: relative;
+    top: 1px;
+  }
+`;
diff --git a/src/lib/Counter/Counter.tsx b/src/lib/Counter/Counter.tsx
index 63e5eb23..3450e536 100644
--- a/src/lib/Counter/Counter.tsx
+++ b/src/lib/Counter/Counter.tsx
@@ -3,7 +3,7 @@ import React, {useEffect} from 'react';
 import {throttle} from 'lodash';
 
 import useLogic from './useLogic';
-import classes from './Counter.module.css';
+import {Container, Header, Button} from './Counter.style';
 
 export type Props = {
   /** Set initial value */
@@ -21,14 +21,14 @@ export const Counter: FC<Props> = ({initialValue = 0}) => {
   }, []);
 
   return (
-    <div className={classes.counter}>
-      <h2 className={classes.header}>Counter</h2>
-      <button className={classes.button} type="button" onClick={incrementCount}>
+    <Container>
+      <Header>Counter</Header>
+      <Button type="button" onClick={incrementCount}>
         Increment by one
-      </button>
+      </Button>
       <div>
         Total value: <strong>{count}</strong>
       </div>
-    </div>
+    </Container>
   );
 };
diff --git a/src/lib/Counter/__snapshots__/Counter.spec.tsx.snap b/src/lib/Counter/__snapshots__/Counter.spec.tsx.snap
index 2527edae..a7200cd9 100644
--- a/src/lib/Counter/__snapshots__/Counter.spec.tsx.snap
+++ b/src/lib/Counter/__snapshots__/Counter.spec.tsx.snap
@@ -2,16 +2,50 @@
 
 exports[`lib > Counter renders without crashing 1`] = `
 <DocumentFragment>
-  <div
-    class="counter"
+  .c0 {
+  border: 1px solid lightgray;
+  font-family: sans-serif;
+  margin: 36px 24px;
+  padding: 24px;
+  text-align: center;
+  width: 240px;
+}
+
+.c1 {
+  font-size: 24px;
+  font-weight: normal;
+  margin: 0 0 12px;
+}
+
+.c2 {
+  background: lightseagreen;
+  border: none;
+  border-radius: 5px;
+  color: white;
+  cursor: pointer;
+  display: block;
+  font-size: 16px;
+  margin: 0 auto 24px;
+  padding: 12px 24px;
+  text-shadow: 1px 1px 1px rgb(0 0 0 / 50%);
+}
+
+.c2:active {
+  left: 1px;
+  position: relative;
+  top: 1px;
+}
+
+<div
+    class="c0"
   >
     <h2
-      class="header"
+      class="c1"
     >
       Counter
     </h2>
     <button
-      class="button"
+      class="c2"
       type="button"
     >
       Increment by one
diff --git a/src/setupTests.ts b/src/setupTests.ts
index a229c8c9..4f54f1ce 100644
--- a/src/setupTests.ts
+++ b/src/setupTests.ts
@@ -4,3 +4,4 @@
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
 import '@testing-library/jest-dom/extend-expect';
+import 'jest-styled-components';