feat(pie-css): DSW-2172 node_modules include to loadPaths of compileCss func

dandel10n · dandel10n · commit 4546d1c464ef · 2024-09-19T14:35:30.000+02:00
diff --git a/.changeset/chatty-hotels-reflect.md b/.changeset/chatty-hotels-reflect.md
@@ -0,0 +1,6 @@
+---
+"@justeattakeaway/pie-cookie-banner": minor
+"@justeattakeaway/pie-modal": minor
+---
+
+[Removed] - pie-design-tokens dependency.
diff --git a/.changeset/nasty-garlics-thank.md b/.changeset/nasty-garlics-thank.md
@@ -0,0 +1,5 @@
+---
+"@justeattakeaway/pie-css": minor
+---
+
+[Changed] - replaces hardcoded breakpoint values with PIE tokens.
diff --git a/.changeset/sweet-planes-clap.md b/.changeset/sweet-planes-clap.md
@@ -0,0 +1,6 @@
+---
+"@justeattakeaway/pie-notification": minor
+"@justeattakeaway/pie-modal": minor
+---
+
+[Changed] - replaces media with include-media with pie breakpoints tokens.
diff --git a/.changeset/wise-ants-reflect.md b/.changeset/wise-ants-reflect.md
@@ -0,0 +1,8 @@
+---
+"wc-vanilla": minor
+"pie-storybook": minor
+"pie-docs": minor
+"pie-monorepo": minor
+---
+
+[Changed] - pie-design-tokens version bump to 6.5.0.
diff --git a/packages/components/pie-notification/src/notification.scss b/packages/components/pie-notification/src/notification.scss
@@ -1,4 +1,5 @@
 @use '@justeattakeaway/pie-css/scss' as p;
+@use '@justeattakeaway/pie-css/scss/settings' as *;
 
 .c-notification {
     --notification-border-radius: var(--dt-radius-rounded-c);
diff --git a/packages/tools/pie-css/package.json b/packages/tools/pie-css/package.json
@@ -27,7 +27,6 @@
   "repository": "https://github.com/justeattakeaway/pie.git",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@justeat/pie-design-tokens": "6.5.0",
     "@types/postcss-import": "14.0.3",
     "include-media": "2.0.0",
     "postcss": "8.4.32",
diff --git a/packages/tools/pie-css/utilities/compileCss.ts b/packages/tools/pie-css/utilities/compileCss.ts
@@ -15,7 +15,8 @@ import sass from 'sass';
  */
 export function compileCss (scss: string): string {
     const result = sass.compileString(scss, {
-        loadPaths: ['scss'],
+        // root level node_modules are here for external dependencies imports like pie-design-tokens
+        loadPaths: ['scss', '../../../node_modules'],
     });
 
     return result.css;
diff --git a/yarn.lock b/yarn.lock
@@ -5508,7 +5508,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@justeattakeaway/pie-checkbox@0.12.3, @justeattakeaway/pie-checkbox@workspace:packages/components/pie-checkbox":
+"@justeattakeaway/pie-checkbox@0.13.0, @justeattakeaway/pie-checkbox@workspace:packages/components/pie-checkbox":
   version: 0.0.0-use.local
   resolution: "@justeattakeaway/pie-checkbox@workspace:packages/components/pie-checkbox"
   dependencies:
@@ -5570,7 +5570,6 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@justeattakeaway/pie-css@workspace:packages/tools/pie-css"
   dependencies:
-    "@justeat/pie-design-tokens": 6.5.0
     "@types/postcss-import": 14.0.3
     include-media: 2.0.0
     postcss: 8.4.32
@@ -5905,14 +5904,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@justeattakeaway/pie-webc@0.5.33, @justeattakeaway/pie-webc@workspace:packages/components/pie-webc":
+"@justeattakeaway/pie-webc@0.5.34, @justeattakeaway/pie-webc@workspace:packages/components/pie-webc":
   version: 0.0.0-use.local
   resolution: "@justeattakeaway/pie-webc@workspace:packages/components/pie-webc"
   dependencies:
     "@justeattakeaway/pie-assistive-text": 0.7.1
     "@justeattakeaway/pie-button": 0.49.1
     "@justeattakeaway/pie-card": 0.20.1
-    "@justeattakeaway/pie-checkbox": 0.12.3
+    "@justeattakeaway/pie-checkbox": 0.13.0
     "@justeattakeaway/pie-checkbox-group": 0.7.0
     "@justeattakeaway/pie-chip": 0.8.3
     "@justeattakeaway/pie-components-config": 0.18.0
@@ -26225,7 +26224,7 @@ __metadata:
     "@justeattakeaway/pie-assistive-text": 0.7.1
     "@justeattakeaway/pie-button": 0.49.1
     "@justeattakeaway/pie-card": 0.20.1
-    "@justeattakeaway/pie-checkbox": 0.12.3
+    "@justeattakeaway/pie-checkbox": 0.13.0
     "@justeattakeaway/pie-checkbox-group": 0.7.0
     "@justeattakeaway/pie-chip": 0.8.3
     "@justeattakeaway/pie-cookie-banner": 0.26.4
@@ -34176,7 +34175,7 @@ __metadata:
     "@angular/platform-browser-dynamic": 15.2.0
     "@angular/router": 15.2.0
     "@justeattakeaway/pie-css": 0.12.1
-    "@justeattakeaway/pie-webc": 0.5.33
+    "@justeattakeaway/pie-webc": 0.5.34
     rxjs: 7.8.0
     tslib: 2.3.0
     typescript: 4.9.4
@@ -34193,7 +34192,7 @@ __metadata:
     "@babel/preset-env": 7.24.5
     "@babel/preset-react": 7.24.1
     "@justeattakeaway/pie-css": 0.12.1
-    "@justeattakeaway/pie-webc": 0.5.33
+    "@justeattakeaway/pie-webc": 0.5.34
     "@lit/react": 1.0.2
     babel-loader: 8
     eslint: 8.37.0
@@ -34210,7 +34209,7 @@ __metadata:
   resolution: "wc-next13@workspace:apps/examples/wc-next13"
   dependencies:
     "@justeattakeaway/pie-css": 0.12.1
-    "@justeattakeaway/pie-webc": 0.5.33
+    "@justeattakeaway/pie-webc": 0.5.34
     "@lit-labs/nextjs": 0.2.0
     "@lit/react": 1.0.5
     "@types/react": 18.3.3
@@ -34233,7 +34232,7 @@ __metadata:
   dependencies:
     "@babel/preset-env": 7.24.5
     "@justeattakeaway/pie-css": 0.12.1
-    "@justeattakeaway/pie-webc": 0.5.33
+    "@justeattakeaway/pie-webc": 0.5.34
     babel-loader: 8
     core-js: 3.30.0
     nuxt: 2.17.0
@@ -34248,7 +34247,7 @@ __metadata:
   resolution: "wc-nuxt3@workspace:apps/examples/wc-nuxt3"
   dependencies:
     "@justeattakeaway/pie-css": 0.12.1
-    "@justeattakeaway/pie-webc": 0.5.33
+    "@justeattakeaway/pie-webc": 0.5.34
     "@types/node": 18
     nuxt: 3.4.3
     nuxt-ssr-lit: 1.6.5
@@ -34260,7 +34259,7 @@ __metadata:
   resolution: "wc-react17@workspace:apps/examples/wc-react17"
   dependencies:
     "@justeattakeaway/pie-css": 0.12.1
-    "@justeattakeaway/pie-webc": 0.5.33
+    "@justeattakeaway/pie-webc": 0.5.34
     "@lit/react": 1.0.5
     "@types/react": ^17.0.2
     "@types/react-dom": ^17.0.2
@@ -34280,7 +34279,7 @@ __metadata:
   resolution: "wc-react18@workspace:apps/examples/wc-react18"
   dependencies:
     "@justeattakeaway/pie-css": 0.12.1
-    "@justeattakeaway/pie-webc": 0.5.33
+    "@justeattakeaway/pie-webc": 0.5.34
     "@lit/react": 1.0.5
     "@types/react": 18.3.3
     "@types/react-dom": 18.3.0
@@ -34302,7 +34301,7 @@ __metadata:
     "@justeat/pie-design-tokens": 6.5.0
     "@justeattakeaway/pie-css": 0.12.1
     "@justeattakeaway/pie-icons-webc": 0.25.1
-    "@justeattakeaway/pie-webc": 0.5.33
+    "@justeattakeaway/pie-webc": 0.5.34
     vite: 4.5.3
   languageName: unknown
   linkType: soft
@@ -34312,7 +34311,7 @@ __metadata:
   resolution: "wc-vue3@workspace:apps/examples/wc-vue3"
   dependencies:
     "@justeattakeaway/pie-css": 0.12.1
-    "@justeattakeaway/pie-webc": 0.5.33
+    "@justeattakeaway/pie-webc": 0.5.34
     "@types/node": 18.15.11
     "@vitejs/plugin-vue": 4.0.0
     "@vue/tsconfig": 0.1.3

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`@use '@justeattakeaway/pie-css/scss' as p;`
	`2`	`+@use '@justeattakeaway/pie-css/scss/settings' as *;`
`2`	`3`
`3`	`4`	`.c-notification {`
`4`	`5`	`--notification-border-radius: var(--dt-radius-rounded-c);`