From f45938a55a588ed376012622e3ced3efd8f32569 Mon Sep 17 00:00:00 2001
From: Samuli Suortti <smulis@aiven.io>
Date: Fri, 21 Oct 2022 18:46:04 +0300
Subject: [PATCH 1/2] feat[coral]: Add support for css modules in unittests

Implemented as described in:
https://jestjs.io/docs/webpack#mocking-css-modules

Refers: #113
---
 coral/jest.config.ts |  4 ++--
 coral/package.json   |  1 +
 coral/pnpm-lock.yaml | 13 +++++++++++++
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/coral/jest.config.ts b/coral/jest.config.ts
index 669e04a0fb..26bbba659d 100644
--- a/coral/jest.config.ts
+++ b/coral/jest.config.ts
@@ -9,8 +9,8 @@ export default {
   testEnvironment: "jsdom",
   setupFilesAfterEnv: ['<rootDir>/test-setup/setup-files-after-env.ts'],
   moduleNameMapper: {
-    ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2|svg)$":
-        "jest-transform-stub",
+    ".+\\.(png|jpg|ttf|woff|woff2|svg)$": "jest-transform-stub",
+    "\\.css$": "identity-obj-proxy",
     "^@/(.*)$": "<rootDir>/src/$1",
   },
 };
diff --git a/coral/package.json b/coral/package.json
index 8beee4924a..73339a00ce 100644
--- a/coral/package.json
+++ b/coral/package.json
@@ -37,6 +37,7 @@
     "eslint": "^8.25.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.31.10",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^29.2.1",
     "jest-environment-jsdom": "^29.2.1",
     "lodash": "4.x",
diff --git a/coral/pnpm-lock.yaml b/coral/pnpm-lock.yaml
index b60bc32634..2d402a2479 100644
--- a/coral/pnpm-lock.yaml
+++ b/coral/pnpm-lock.yaml
@@ -15,6 +15,7 @@ specifiers:
   eslint: ^8.25.0
   eslint-config-prettier: ^8.5.0
   eslint-plugin-react: ^7.31.10
+  identity-obj-proxy: ^3.0.0
   jest: ^29.2.1
   jest-environment-jsdom: ^29.2.1
   lodash: 4.x
@@ -45,6 +46,7 @@ devDependencies:
   eslint: 8.25.0
   eslint-config-prettier: 8.5.0_eslint@8.25.0
   eslint-plugin-react: 7.31.10_eslint@8.25.0
+  identity-obj-proxy: 3.0.0
   jest: 29.2.1_5uyhgycj63wuqgvl4exdnr442q
   jest-environment-jsdom: 29.2.1
   lodash: 4.17.21
@@ -2444,6 +2446,10 @@ packages:
     resolution: {integrity: sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==}
     dev: true
 
+  /harmony-reflect/1.6.2:
+    resolution: {integrity: sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==}
+    dev: true
+
   /has-bigints/1.0.2:
     resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
     dev: true
@@ -2527,6 +2533,13 @@ packages:
       safer-buffer: 2.1.2
     dev: true
 
+  /identity-obj-proxy/3.0.0:
+    resolution: {integrity: sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==}
+    engines: {node: '>=4'}
+    dependencies:
+      harmony-reflect: 1.6.2
+    dev: true
+
   /ignore/5.2.0:
     resolution: {integrity: sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==}
     engines: {node: '>= 4'}

From b3a39a1a7ab5b6e7cccf2e8ac28d26f0e7d13b7f Mon Sep 17 00:00:00 2001
From: Samuli Suortti <smulis@aiven.io>
Date: Fri, 21 Oct 2022 18:31:33 +0300
Subject: [PATCH 2/2] feat[coral]: Showcase css modules with example

CSS Modules work by default.

Refers: #113
---
 coral/src/App.module.css | 3 +++
 coral/src/App.tsx        | 3 ++-
 2 files changed, 5 insertions(+), 1 deletion(-)
 create mode 100644 coral/src/App.module.css

diff --git a/coral/src/App.module.css b/coral/src/App.module.css
new file mode 100644
index 0000000000..6f48f06f52
--- /dev/null
+++ b/coral/src/App.module.css
@@ -0,0 +1,3 @@
+.aClassName {
+  color: pink;
+}
diff --git a/coral/src/App.tsx b/coral/src/App.tsx
index 7ce161ae55..d538cb1a27 100644
--- a/coral/src/App.tsx
+++ b/coral/src/App.tsx
@@ -1,4 +1,5 @@
 import { Flexbox, TagLabel, Typography } from "@aivenio/design-system";
+import classes from "./App.module.css";
 
 function App() {
   return (
@@ -6,7 +7,7 @@ function App() {
       <Typography htmlTag={"h1"} variant={"heading-2xl"}>
         Hello Klaw 👋
       </Typography>
-      <Flexbox alignItems={"center"}>
+      <Flexbox alignItems={"center"} className={classes.aClassName}>
         <p>This uses the aiven design system! &nbsp; </p>
         <TagLabel title="yey" />
       </Flexbox>