Merge pull request #133 from aiven/smulis-setup-css-modules

feat[coral]: Showcase css modules with example
Aiven-Open · Oct 24, 2022 · 35f3aa1 · 35f3aa1
2 parents f814b9e + b3a39a1
commit 35f3aa1
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 3 deletions.
diff --git 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
@@ -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
diff --git a/coral/src/App.module.css 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
@@ -1,12 +1,13 @@
 import { Flexbox, TagLabel, Typography } from "@aivenio/design-system";
+import classes from "./App.module.css";
 
 function App() {
   return (
     <div>
       <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>