refactor(core): migrate @import rule to @use and @forward

CheeseGrinder · Dec 3, 2024 · a287099 · a287099
1 parent d4d7366
commit a287099
Show file tree

Hide file tree

Showing 57 changed files with 462 additions and 515 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -62,7 +62,7 @@
     "stencil": "stencil"
   },
   "dependencies": {
-    "@stencil/core": "^4.22.2"
+    "@stencil/core": "^4.22.3"
   },
   "devDependencies": {
     "@cheese-grinder/stencil-component-config": "^0.4.1",
@@ -73,13 +73,13 @@
     "@stencil/sass": "^3.0.12",
     "@stencil/vue-output-target": "^0.9.0",
     "@types/jest": "^29.5.14",
-    "@types/node": "~22.9.1",
+    "@types/node": "~22.10.1",
     "clean-css-cli": "^5.6.3",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "key-definitions": "^2.0.3",
     "rimraf": "^6.0.1",
-    "sass": "^1.81.0",
-    "typescript": "^5.6.3"
+    "sass": "^1.81.1",
+    "typescript": "^5.7.2"
   }
 }
diff --git a/packages/core/src/components/accordion/accordion.scss b/packages/core/src/components/accordion/accordion.scss
@@ -1,5 +1,5 @@
 @use "@poppy/utils/join-item";
-@import "@poppy/poppy.globals";
+@use "@poppy/global" as theme;
 
 /**
  * @prop --border-radius: Change border radius
@@ -16,9 +16,9 @@
 @include join-item.item_root;
 
 :host {
-  --border-radius: #{get-radius(xl)};
-  --border-color: #{get-color("base.300")};
-  --background: #{get-color("base.200")};
+  --border-radius: #{theme.use_radius(xl)};
+  --border-color: #{theme.use_color("base.300")};
+  --background: #{theme.use_color("base.200")};
   --animation: 0.2s;
 
   box-sizing: border-box;

diff --git a/packages/core/src/components/avatar/avatar.scss b/packages/core/src/components/avatar/avatar.scss
@@ -1,4 +1,4 @@
-@import "@poppy/poppy.globals";
+@use "@poppy/global" as theme;
 
 /**
  * @prop --background: Change background color
@@ -9,8 +9,8 @@
 // ----------------------------------------------------------------
 
 :host {
-  --background: #{get-color("neutral.base")};
-  --color: #{get-color("neutral.content")};
+  --background: #{theme.use_color("neutral.base")};
+  --color: #{theme.use_color("neutral.content")};
 
   display: inline-flex;
 

diff --git a/packages/core/src/components/badge/badge.scss b/packages/core/src/components/badge/badge.scss
@@ -1,4 +1,4 @@
-@import "@poppy/poppy.globals";
+@use "@poppy/global" as theme;
 
 /**
  * @prop --border-radius: Border radius
@@ -13,10 +13,10 @@
 // ----------------------------------------------------------------
 
 :host {
-  --border-radius: #{get-radius(full)};
-  --border-color: #{get-color("base.200")};
-  --background: #{get-color("base.100")};
-  --color: #{get-color("base.content")};
+  --border-radius: #{theme.use_radius(full)};
+  --border-color: #{theme.use_color("base.200")};
+  --background: #{theme.use_color("base.100")};
+  --color: #{theme.use_color("base.content")};
 
   display: inline-flex;
   width: max-content;
@@ -106,8 +106,8 @@
 
 @mixin generate-color($colors...) {
   @each $color in $colors {
-    $base: get-color("#{$color}.base");
-    $text: get-color("#{$color}.content");
+    $base: use_color("#{$color}.base");
+    $text: use_color("#{$color}.content");
 
     :host([color="#{$color}"]) {
       --border-color: #{$base};
@@ -122,9 +122,9 @@
 @include generate-color(neutral, primary, secondary, accent, info, success, warning, error);
 
 :host(:not([color], [outlined])) {
-  --border-color: #{get-color("base.200")};
-  --background: #{get-color("base.100")};
-  --color: #{get-color("base.content")};
+  --border-color: #{theme.use_color("base.200")};
+  --background: #{theme.use_color("base.100")};
+  --color: #{theme.use_color("base.content")};
 }
 
 // Badge Outline

diff --git a/packages/core/src/components/button/button.scss b/packages/core/src/components/button/button.scss
@@ -1,5 +1,5 @@
 @use "@poppy/utils/join-item";
-@import "@poppy/poppy.globals";
+@use "@poppy/global" as theme;
 
 /**
  * @prop --border-radius: Change border radius
@@ -19,10 +19,10 @@
 // ----------------------------------------------------------------
 
 :host {
-  --border-radius: #{get-radius(md)};
+  --border-radius: #{theme.use_radius(md)};
   --border-color: transparent;
-  --background: #{get-color("base.200")};
-  --color: #{get-color("base.content")};
+  --background: #{theme.use_color("base.200")};
+  --color: #{theme.use_color("base.content")};
 
   --animation: 0.25s ease-out;
   --focus-scale: 0.97;
@@ -133,8 +133,8 @@
 
 @mixin generate-color($colors...) {
   @each $color in $colors {
-    $base: get-color("#{$color}.base");
-    $text: get-color("#{$color}.content");
+    $base: theme.use_color("#{$color}.base");
+    $text: theme.use_color("#{$color}.content");
 
     :host([color="#{$color}"]) {
       --background: #{$base};
@@ -162,21 +162,21 @@
 
     &:hover,
     &.btn-active {
-      --background: #{get-color("base.content", 0.2)};
+      --background: #{theme.use_color("base.content", 0.2)};
     }
   }
 }
 
 :host(:not([color], [outlined])) {
-  --background: #{get-color("base.200")};
-  --color: #{get-color("base.content")};
+  --background: #{theme.use_color("base.200")};
+  --color: #{theme.use_color("base.content")};
 
   button {
-    outline-color: #{get-color("base.content")};
+    outline-color: #{theme.use_color("base.content")};
 
     &:hover,
     &.btn-active {
-      --background: #{get-color("base.300")};
+      --background: #{theme.use_color("base.300")};
     }
   }
 }
@@ -202,14 +202,14 @@
 }
 
 :host(:not([color])[outlined]) {
-  --background: #{get-color("base.content")};
+  --background: #{theme.use_color("base.content")};
 
   button {
 
     &:hover,
     &.btn-active {
-      --background: #{get-color("base.content")};
-      --color: #{get-color("base.200")};
+      --background: #{theme.use_color("base.content")};
+      --color: #{theme.use_color("base.200")};
     }
   }
 }
@@ -237,7 +237,7 @@
 }
 
 :host([shape="circle"]) {
-  --border-radius: #{get-radius(full)};
+  --border-radius: #{theme.use_radius(full)};
 }
 
 // Button State
@@ -247,9 +247,9 @@
   cursor: not-allowed;
 
   button:disabled {
-    --background: #{get-color("neutral.base", 0.2)};
-    color: #{get-color("base.content", 0.2)};
+    --background: #{theme.use_color("neutral.base", 0.2)};
+    color: #{theme.use_color("base.content", 0.2)};
 
     pointer-events: none;
   }
-}
+}
diff --git a/packages/core/src/components/button/test/basic/index.html b/packages/core/src/components/button/test/basic/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Input Basic | Poppy-ui</title>
-    <link rel="stylesheet" href="/build/poppy.css">
-    <script type="module" src="/build/poppy.esm.js"></script>
-    <script nomodule src="/build/poppy.js"></script>
+    <link rel="stylesheet" href="/dist/poppy/poppy.css">
+    <script type="module" src="/dist/poppy/poppy.esm.js"></script>
+    <script nomodule src="/dist/poppy/poppy.js"></script>
     <style>
         main {
             width: 100vw;
@@ -116,4 +116,4 @@ <h2>Button - outlined disabled</h2>
         </section>
     </main>
 </body>
-</html>
+</html>
diff --git a/packages/core/src/components/card-body/tests/basic/index.html b/packages/core/src/components/card-body/tests/basic/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Input Basic | Poppy-ui</title>
-    <link rel="stylesheet" href="/build/poppy.css">
-    <script type="module" src="/build/poppy.esm.js"></script>
-    <script nomodule src="/build/poppy.js"></script>
+    <link rel="stylesheet" href="/dist/poppy/poppy.css">
+    <script type="module" src="/dist/poppy/poppy.esm.js"></script>
+    <script nomodule src="/dist/poppy/poppy.js"></script>
     <style>
         main {
             width: 100vw;
@@ -49,4 +49,4 @@ <h2>Card - compact</h2>
         </section>
     </main>
 </body>
-</html>
+</html>
diff --git a/packages/core/src/components/card/card.scss b/packages/core/src/components/card/card.scss
@@ -1,4 +1,4 @@
-@import "@poppy/poppy.globals";
+@use "@poppy/global" as theme;
 
 /**
  * @prop --border-radius: Change border radius
@@ -8,7 +8,7 @@
 // ----------------------------------------------------------------
 
 :host {
-  --border-radius: #{get-radius(xl)};
+  --border-radius: #{theme.use_radius(xl)};
 
   display: flex;