From 9e008e2a7c5722fb8af5b0a9ebbf53b64589805e Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Sun, 25 Aug 2024 16:53:20 +0200
Subject: [PATCH 1/6] feat: css modules

---
 apps/storefront/layouts/PageLayout/PageLayout.tsx        | 5 ++++-
 packages/css/baseline/ds-reset.css                       | 3 +++
 .../typography/{paragraph.css => paragraph.module.css}   | 1 +
 packages/css/{box.css => box.module.css}                 | 0
 packages/css/{breadcrumbs.css => breadcrumbs.module.css} | 0
 packages/css/index.css                                   | 6 +++---
 packages/react/package.json                              | 1 +
 packages/react/src/components/Box/Box.tsx                | 9 +++++----
 .../react/src/components/Breadcrumbs/BreadcrumbsItem.tsx | 7 ++++++-
 .../react/src/components/Breadcrumbs/BreadcrumbsLink.tsx | 8 ++++++--
 .../react/src/components/Breadcrumbs/BreadcrumbsList.tsx | 3 ++-
 .../react/src/components/Breadcrumbs/BreadcrumbsNav.tsx  | 3 ++-
 .../react/src/components/Breadcrumbs/BreadcrumbsRoot.tsx | 7 ++++++-
 .../src/components/Typography/Paragraph/Paragraph.tsx    | 9 +++++----
 yarn.lock                                                | 3 ++-
 15 files changed, 46 insertions(+), 19 deletions(-)
 rename packages/css/baseline/typography/{paragraph.css => paragraph.module.css} (86%)
 rename packages/css/{box.css => box.module.css} (100%)
 rename packages/css/{breadcrumbs.css => breadcrumbs.module.css} (100%)

diff --git a/apps/storefront/layouts/PageLayout/PageLayout.tsx b/apps/storefront/layouts/PageLayout/PageLayout.tsx
index f94b39b2ab..3c74214475 100644
--- a/apps/storefront/layouts/PageLayout/PageLayout.tsx
+++ b/apps/storefront/layouts/PageLayout/PageLayout.tsx
@@ -1,3 +1,4 @@
+import paragraph from '@digdir/designsystemet-css/baseline/typography/paragraph.module.css';
 import { Heading, Link } from '@digdir/designsystemet-react';
 import { ArrowLeftIcon } from '@navikt/aksel-icons';
 import { Container } from '@repo/components';
@@ -34,7 +35,9 @@ const PageLayout = ({ content, data }: PageLayoutProps) => {
                 {data.backText}
               </NextLink>
             </Link>
-            <div className={cl(classes.meta, 'ds-paragraph-short--lg')}>
+            <div
+              className={cl(classes.meta, paragraph['ds-paragraph-short--lg'])}
+            >
               <span>{data.author && <div>{data.author}</div>}</span>
               <span className={classes.separator}> - </span>
               <span>{data.date && <div>{data.date}</div>}</span>
diff --git a/packages/css/baseline/ds-reset.css b/packages/css/baseline/ds-reset.css
index d37db7fc3e..e2fe55a462 100644
--- a/packages/css/baseline/ds-reset.css
+++ b/packages/css/baseline/ds-reset.css
@@ -2,6 +2,7 @@
 
 /* https://wiki.csswg.org/ideas/mistakes */
 
+/* TODO: Can this be moved to the related components? */
 [class^='ds-'],
 [class^='ds-']::before,
 [class^='ds-']::after {
@@ -9,6 +10,8 @@
 }
 
 /* Inherit fonts for inputs and buttons */
+
+/* TODO: Can this be moved to the related form element CSS files? */
 input[class^='ds-'],
 button[class^='ds-'],
 textarea[class^='ds-'],
diff --git a/packages/css/baseline/typography/paragraph.css b/packages/css/baseline/typography/paragraph.module.css
similarity index 86%
rename from packages/css/baseline/typography/paragraph.css
rename to packages/css/baseline/typography/paragraph.module.css
index 3620a57fd8..cb5d738aa3 100644
--- a/packages/css/baseline/typography/paragraph.css
+++ b/packages/css/baseline/typography/paragraph.module.css
@@ -1,3 +1,4 @@
+/* TODO: Could these styles be placed in css root like the other files? */
 .ds-paragraph {
   --dsc-bottom-spacing: var(--ds-spacing-5);
 
diff --git a/packages/css/box.css b/packages/css/box.module.css
similarity index 100%
rename from packages/css/box.css
rename to packages/css/box.module.css
diff --git a/packages/css/breadcrumbs.css b/packages/css/breadcrumbs.module.css
similarity index 100%
rename from packages/css/breadcrumbs.css
rename to packages/css/breadcrumbs.module.css
diff --git a/packages/css/index.css b/packages/css/index.css
index df0f39837d..d2b944986d 100644
--- a/packages/css/index.css
+++ b/packages/css/index.css
@@ -6,11 +6,11 @@
 @import url('./baseline/ds-reset.css') layer(ds.reset);
 @import url('./baseline/typography/label.css') layer(ds.base.typography);
 @import url('./baseline/typography/heading.css') layer(ds.base.typography);
-@import url('./baseline/typography/paragraph.css') layer(ds.base.typography);
+@import url('./baseline/typography/paragraph.module.css') layer(ds.base.typography);
 @import url('./baseline/typography/ingress.css') layer(ds.base.typography);
 @import url('./baseline/typography/error-message.css') layer(ds.base.typography);
 @import url('./utilities.css') layer(ds.utilities);
-@import url('./box.css') layer(ds.components);
+@import url('./box.module.css') layer(ds.components);
 @import url('./button.css') layer(ds.components);
 @import url('./alert.css') layer(ds.components);
 @import url('./skiplink.css') layer(ds.components);
@@ -42,5 +42,5 @@
 @import url('./spinner.css') layer(ds.components);
 @import url('./table.css') layer(ds.components);
 @import url('./combobox.css') layer(ds.components);
-@import url('./breadcrumbs.css') layer(ds.components);
+@import url('./breadcrumbs.module.css') layer(ds.components);
 @import url('./badge.css') layer(ds.components);
diff --git a/packages/react/package.json b/packages/react/package.json
index c3366ff55c..32c9811075 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -32,6 +32,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@digdir/designsystemet-css": "0.11.0-next.12",
     "@floating-ui/react": "0.26.21",
     "@navikt/aksel-icons": "^6.14.0",
     "@radix-ui/react-slot": "^1.1.0",
diff --git a/packages/react/src/components/Box/Box.tsx b/packages/react/src/components/Box/Box.tsx
index 429fbe24e7..c0292b4173 100644
--- a/packages/react/src/components/Box/Box.tsx
+++ b/packages/react/src/components/Box/Box.tsx
@@ -1,3 +1,4 @@
+import styles from '@digdir/designsystemet-css/box.module.css';
 import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import type { HTMLAttributes } from 'react';
@@ -51,10 +52,10 @@ export const Box = forwardRef<HTMLDivElement, BoxProps>(
       <Component
         ref={ref}
         className={cl(
-          shadow && `ds-box--${shadow}-shadow`,
-          borderColor && `ds-box--${borderColor}-border-color`,
-          borderRadius && `ds-box--${borderRadius}-border-radius`,
-          `ds-box--${background}-background`,
+          shadow && styles[`ds-box--${shadow}-shadow`],
+          borderColor && styles[`ds-box--${borderColor}-border-color`],
+          borderRadius && styles[`ds-box--${borderRadius}-border-radius`],
+          styles[`ds-box--${background}-background`],
           className,
         )}
         {...rest}
diff --git a/packages/react/src/components/Breadcrumbs/BreadcrumbsItem.tsx b/packages/react/src/components/Breadcrumbs/BreadcrumbsItem.tsx
index 336928df5f..e0f2eb74f6 100644
--- a/packages/react/src/components/Breadcrumbs/BreadcrumbsItem.tsx
+++ b/packages/react/src/components/Breadcrumbs/BreadcrumbsItem.tsx
@@ -1,3 +1,4 @@
+import styles from '@digdir/designsystemet-css/breadcrumbs.module.css';
 import cl from 'clsx/lite';
 import { type HTMLAttributes, forwardRef } from 'react';
 
@@ -5,7 +6,11 @@ export type BreadcrumbsItemProps = HTMLAttributes<HTMLLIElement>;
 
 export const BreadcrumbsItem = forwardRef<HTMLLIElement, BreadcrumbsItemProps>(
   ({ className, ...rest }, ref) => (
-    <li ref={ref} className={cl('ds-breadcrumbs__item', className)} {...rest} />
+    <li
+      ref={ref}
+      className={cl(styles['ds-breadcrumbs__item'], className)}
+      {...rest}
+    />
   ),
 );
 
diff --git a/packages/react/src/components/Breadcrumbs/BreadcrumbsLink.tsx b/packages/react/src/components/Breadcrumbs/BreadcrumbsLink.tsx
index cebc8ab45f..423401d4b8 100644
--- a/packages/react/src/components/Breadcrumbs/BreadcrumbsLink.tsx
+++ b/packages/react/src/components/Breadcrumbs/BreadcrumbsLink.tsx
@@ -1,4 +1,4 @@
-import { useMergeRefs } from '@floating-ui/react';
+import styles from '@digdir/designsystemet-css/breadcrumbs.module.css';
 import cl from 'clsx/lite';
 import { forwardRef, useRef } from 'react';
 
@@ -11,7 +11,11 @@ export const BreadcrumbsLink = forwardRef<
   HTMLAnchorElement,
   BreadcrumbsLinkProps
 >(({ className, ...rest }, ref) => (
-  <Link className={cl(`ds-breadcrumbs__link`, className)} ref={ref} {...rest} />
+  <Link
+    className={cl(styles[`ds-breadcrumbs__link`], className)}
+    ref={ref}
+    {...rest}
+  />
 ));
 
 BreadcrumbsLink.displayName = 'BreadcrumbsLink';
diff --git a/packages/react/src/components/Breadcrumbs/BreadcrumbsList.tsx b/packages/react/src/components/Breadcrumbs/BreadcrumbsList.tsx
index 951090b328..81724360a4 100644
--- a/packages/react/src/components/Breadcrumbs/BreadcrumbsList.tsx
+++ b/packages/react/src/components/Breadcrumbs/BreadcrumbsList.tsx
@@ -1,3 +1,4 @@
+import styles from '@digdir/designsystemet-css/breadcrumbs.module.css';
 import { useMergeRefs } from '@floating-ui/react';
 import cl from 'clsx/lite';
 import { type HTMLAttributes, forwardRef, useEffect, useRef } from 'react';
@@ -22,7 +23,7 @@ export const BreadcrumbsList = forwardRef<
 
   return (
     <ol
-      className={cl('ds-breadcrumbs__list', className)}
+      className={cl(styles['ds-breadcrumbs__list'], className)}
       ref={mergedRefs}
       {...rest}
     />
diff --git a/packages/react/src/components/Breadcrumbs/BreadcrumbsNav.tsx b/packages/react/src/components/Breadcrumbs/BreadcrumbsNav.tsx
index 694ae342f3..ec08ae9d94 100644
--- a/packages/react/src/components/Breadcrumbs/BreadcrumbsNav.tsx
+++ b/packages/react/src/components/Breadcrumbs/BreadcrumbsNav.tsx
@@ -1,3 +1,4 @@
+import styles from '@digdir/designsystemet-css/breadcrumbs.module.css';
 import cl from 'clsx/lite';
 import { type HTMLAttributes, forwardRef } from 'react';
 
@@ -13,7 +14,7 @@ export const BreadcrumbsNav = forwardRef<HTMLElement, BreadcrumbsNavProps>(
     <nav
       aria-label={ariaLabel}
       ref={ref}
-      className={cl('ds-breadcrumbs__nav', className)}
+      className={cl(styles['ds-breadcrumbs__nav'], className)}
       {...rest}
     />
   ),
diff --git a/packages/react/src/components/Breadcrumbs/BreadcrumbsRoot.tsx b/packages/react/src/components/Breadcrumbs/BreadcrumbsRoot.tsx
index a78527d5d1..018242f8dd 100644
--- a/packages/react/src/components/Breadcrumbs/BreadcrumbsRoot.tsx
+++ b/packages/react/src/components/Breadcrumbs/BreadcrumbsRoot.tsx
@@ -1,3 +1,4 @@
+import styles from '@digdir/designsystemet-css/breadcrumbs.module.css';
 import cl from 'clsx/lite';
 import { type HTMLAttributes, forwardRef } from 'react';
 
@@ -13,7 +14,11 @@ export const BreadcrumbsRoot = forwardRef<HTMLDivElement, BreadcrumbsRootProps>(
   ({ className, size = 'md', ...rest }, ref) => (
     <div
       ref={ref}
-      className={cl('ds-breadcrumbs', `ds-breadcrumbs--${size}`, className)}
+      className={cl(
+        styles['ds-breadcrumbs'],
+        styles[`ds-breadcrumbs--${size}`],
+        className,
+      )}
       {...rest}
     />
   ),
diff --git a/packages/react/src/components/Typography/Paragraph/Paragraph.tsx b/packages/react/src/components/Typography/Paragraph/Paragraph.tsx
index 9d349d0446..b7134ed785 100644
--- a/packages/react/src/components/Typography/Paragraph/Paragraph.tsx
+++ b/packages/react/src/components/Typography/Paragraph/Paragraph.tsx
@@ -1,3 +1,4 @@
+import styles from '@digdir/designsystemet-css/baseline/typography/paragraph.module.css';
 import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import type { HTMLAttributes } from 'react';
@@ -45,10 +46,10 @@ export const Paragraph = forwardRef<HTMLParagraphElement, ParagraphProps>(
       <Component
         ref={ref}
         className={cl(
-          'ds-paragraph',
-          spacing && 'ds-paragraph--spacing',
-          `ds-paragraph--${size}`,
-          lineHeightMap[variant ?? 'default'],
+          styles['ds-paragraph'],
+          spacing && styles['ds-paragraph--spacing'],
+          styles[`ds-paragraph--${size}`],
+          styles[lineHeightMap[variant ?? 'default'] as keyof typeof styles],
           className,
         )}
         {...rest}
diff --git a/yarn.lock b/yarn.lock
index 687a675c80..b6e59095f9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2938,7 +2938,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@digdir/designsystemet-css@workspace:^, @digdir/designsystemet-css@workspace:packages/css":
+"@digdir/designsystemet-css@npm:0.11.0-next.12, @digdir/designsystemet-css@workspace:^, @digdir/designsystemet-css@workspace:packages/css":
   version: 0.0.0-use.local
   resolution: "@digdir/designsystemet-css@workspace:packages/css"
   dependencies:
@@ -2956,6 +2956,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@digdir/designsystemet-react@workspace:packages/react"
   dependencies:
+    "@digdir/designsystemet-css": "npm:0.11.0-next.12"
     "@floating-ui/react": "npm:0.26.21"
     "@navikt/aksel-icons": "npm:^6.14.0"
     "@radix-ui/react-slot": "npm:^1.1.0"

From e2871bf1480a4b1c80d02c10d5f741ef39061fd3 Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Mon, 26 Aug 2024 14:40:03 +0200
Subject: [PATCH 2/6] Create gentle-geckos-swim.md

---
 .changeset/gentle-geckos-swim.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/gentle-geckos-swim.md

diff --git a/.changeset/gentle-geckos-swim.md b/.changeset/gentle-geckos-swim.md
new file mode 100644
index 0000000000..af273b4342
--- /dev/null
+++ b/.changeset/gentle-geckos-swim.md
@@ -0,0 +1,7 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+"storefront": patch
+---
+
+Add CSS-modules for users to compose Designsystemet CSS

From df6eababe976ea21f9feb6e9fcf572a78f5628e8 Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Mon, 26 Aug 2024 14:40:42 +0200
Subject: [PATCH 3/6] Update gentle-geckos-swim.md

typo
---
 .changeset/gentle-geckos-swim.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.changeset/gentle-geckos-swim.md b/.changeset/gentle-geckos-swim.md
index af273b4342..0bd20c8612 100644
--- a/.changeset/gentle-geckos-swim.md
+++ b/.changeset/gentle-geckos-swim.md
@@ -1,7 +1,6 @@
 ---
 "@digdir/designsystemet-css": patch
 "@digdir/designsystemet-react": patch
-"storefront": patch
 ---
 
 Add CSS-modules for users to compose Designsystemet CSS

From 4aa5bb7ecf62c6d67f0ee7b189b34d7049129908 Mon Sep 17 00:00:00 2001
From: Tobias Barsnes <tobias.barsnes@digdir.no>
Date: Thu, 5 Sep 2024 10:34:18 +0200
Subject: [PATCH 4/6] Update packages/react/package.json

---
 packages/react/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/package.json b/packages/react/package.json
index 32c9811075..d3e32427f0 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -32,7 +32,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@digdir/designsystemet-css": "0.11.0-next.12",
+    "@digdir/designsystemet-css": "workspace:^",
     "@floating-ui/react": "0.26.21",
     "@navikt/aksel-icons": "^6.14.0",
     "@radix-ui/react-slot": "^1.1.0",

From cbb1a8fe36633babc7f24f5042c57178b9732100 Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Thu, 5 Sep 2024 10:35:03 +0200
Subject: [PATCH 5/6] don't select start of class

---
 packages/css/baseline/ds-reset.css | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/css/baseline/ds-reset.css b/packages/css/baseline/ds-reset.css
index e2fe55a462..65b8c4c5e0 100644
--- a/packages/css/baseline/ds-reset.css
+++ b/packages/css/baseline/ds-reset.css
@@ -3,19 +3,19 @@
 /* https://wiki.csswg.org/ideas/mistakes */
 
 /* TODO: Can this be moved to the related components? */
-[class^='ds-'],
-[class^='ds-']::before,
-[class^='ds-']::after {
+[class~='ds-'],
+[class~='ds-']::before,
+[class~='ds-']::after {
   box-sizing: border-box;
 }
 
 /* Inherit fonts for inputs and buttons */
 
 /* TODO: Can this be moved to the related form element CSS files? */
-input[class^='ds-'],
-button[class^='ds-'],
-textarea[class^='ds-'],
-select[class^='ds-'] {
+input[class~='ds-'],
+button[class~='ds-'],
+textarea[class~='ds-'],
+select[class~='ds-'] {
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;

From 014641adab68bddafdad793acd3856e35da76d40 Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Thu, 5 Sep 2024 10:36:25 +0200
Subject: [PATCH 6/6] lockfile

---
 yarn.lock | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 6ef5fad9ce..11812c5c4a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2945,7 +2945,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@digdir/designsystemet-css@npm:0.11.0-next.12, @digdir/designsystemet-css@workspace:^, @digdir/designsystemet-css@workspace:packages/css":
+"@digdir/designsystemet-css@workspace:^, @digdir/designsystemet-css@workspace:packages/css":
   version: 0.0.0-use.local
   resolution: "@digdir/designsystemet-css@workspace:packages/css"
   dependencies:
@@ -2963,7 +2963,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@digdir/designsystemet-react@workspace:packages/react"
   dependencies:
-    "@digdir/designsystemet-css": "npm:0.11.0-next.12"
+    "@digdir/designsystemet-css": "workspace:^"
     "@floating-ui/react": "npm:0.26.21"
     "@navikt/aksel-icons": "npm:^6.14.0"
     "@radix-ui/react-slot": "npm:^1.1.0"