Wip.

ember-nexus · Oct 21, 2024 · 95a728b · 95a728b
1 parent 7562503
commit 95a728b
Show file tree

Hide file tree

Showing 13 changed files with 116 additions and 93 deletions.
diff --git a/.github/workflows/ci-test.yml b/.github/workflows/ci-test.yml
@@ -32,7 +32,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node-version: ['20', '21', '22']
+        node-version: ['20', '22', '23']
     steps:
       - uses: actions/setup-node@v4
         with:
@@ -59,7 +59,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node-version: ['20', '21', '22']
+        node-version: ['20', '22', '23']
     steps:
       - uses: actions/setup-node@v4
         with:
@@ -86,7 +86,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node-version: ['20', '21', '22']
+        node-version: ['20', '22', '23']
     if: false
     steps:
       - uses: actions/setup-node@v4

diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,9 @@
+/*
+!docs/
+!src/
+!test/
+
+**/*.html
+**/*.md
+**/*.yml
+**/*.json
diff --git a/package.json b/package.json
@@ -27,12 +27,13 @@
     "build": "rm -rf ./dist && yarn build:esm && yarn build:browser",
     "build:browser": "webpack --config webpack.config.cjs",
     "build:esm": "yarn tsc -b tsconfig.esm.json && cp -r ./src/Style ./dist/esm",
-    "cs": "yarn eslint && yarn stylelint",
-    "cs:fix": "yarn eslint:fix && yarn stylelint:fix",
+    "cs": "yarn eslint && yarn prettier . --check && yarn stylelint && yarn stylelint:strict",
+    "cs:fix": "yarn eslint:fix && yarn prettier . --write && yarn stylelint:fix",
     "eslint": "eslint ./src ./test",
     "eslint:fix": "eslint ./src ./test --fix",
-    "stylelint": "stylelint \"src/**/*.css\"",
-    "stylelint:fix": "stylelint \"src/**/*.css\" --fix",
+    "stylelint": "stylelint \"src/**/*.css\" --config test/.stylelintrc.json",
+    "stylelint:fix": "stylelint \"src/**/*.css\" --fix --config test/.stylelintrc.json",
+    "stylelint:strict": "yarn build:browser && stylelint \"dist/browser/index.css\" --config test/.stylelintrc.strict.json",
     "test:unit": "jest ./test/Unit",
     "test:feature": "jest ./test/Feature",
     "prepare": "ts-patch install",
@@ -83,7 +84,7 @@
     "lightningcss": "^1.27.0",
     "mini-css-extract-plugin": "^2.9.1",
     "msw": "^2.0.2",
-    "prettier": "^3.0.3",
+    "prettier": "^3.3.3",
     "sinon": "^18.0",
     "style-loader": "^4.0.0",
     "stylelint": "^16.10.0",

diff --git a/src/Style/Component/CardStyle.css b/src/Style/Component/CardStyle.css
@@ -1,28 +1,28 @@
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 :host {
-    container-type: size;
-    width: 100%;
-    min-width: 10rem;
+  container-type: size;
+  width: 100%;
+  min-width: 10rem;
 }
 
 .card {
-    position: relative;
+  position: relative;
 
-    padding: 1rem;
+  padding: 1rem;
 
-    background: var(--card-background);
-    border-color: var(--card-border-color);
-    border-style: var(--card-border-style);
-    border-width: var(--card-border-width);
-    border-radius: var(--card-border-radius);
-    box-shadow: var(--card-shadow);
+  background: var(--card-background);
+  border-color: var(--card-border-color);
+  border-style: var(--card-border-style);
+  border-width: var(--card-border-width);
+  border-radius: var(--card-border-radius);
+  box-shadow: var(--card-shadow);
 }
 
 @container (width < 20rem) {
-    .card {
-        padding: 0.5rem;
-    }
+  .card {
+    padding: 0.5rem;
+  }
 }
diff --git a/src/Style/Component/CardVariable.css b/src/Style/Component/CardVariable.css
@@ -1,14 +1,14 @@
-@import url("../General/Color.css");
-@import url("../General/Border.css");
-@import url("../General/Shadow.css");
+@import url('../General/Color.css');
+@import url('../General/Border.css');
+@import url('../General/Shadow.css');
 
 @layer base {
-    :root {
-        --card-background: var(--color-content-background);
-        --card-border-radius: var(--border-radius);
-        --card-border-width: var(--border-width-none);
-        --card-border-color: var(--color-border);
-        --card-border-style: solid;
-        --card-shadow: var(--shadow-2);
-    }
+  :root {
+    --card-background: var(--color-content-background);
+    --card-border-radius: var(--border-radius);
+    --card-border-width: var(--border-width-none);
+    --card-border-color: var(--color-border);
+    --card-border-style: solid;
+    --card-shadow: var(--shadow-2);
+  }
 }
diff --git a/src/Style/Component/index.css b/src/Style/Component/index.css
@@ -1 +1 @@
-@import url("CardVariable.css");
+@import url('CardVariable.css');
diff --git a/src/Style/General/Border.css b/src/Style/General/Border.css
@@ -1,13 +1,11 @@
 @layer base {
-    :root {
-        --border-radius-none: 0;
-        --border-radius-thin: 3px;
-        --border-radius: 10px;
-        --border-radius-thick: 20px;
+  :root {
+    --border-radius-none: 0;
+    --border-radius-thin: 3px;
+    --border-radius: 10px;
+    --border-radius-thick: 20px;
 
-        --border-width-none: 0;
-        --border-width: 1px;
-    }
+    --border-width-none: 0;
+    --border-width: 1px;
+  }
 }
-
-
diff --git a/src/Style/General/Color.css b/src/Style/General/Color.css
@@ -1,9 +1,7 @@
 @layer base {
-    :root {
-        --color-content-background: #fff;
-        --color-border: #000;
-        --color-shadow: 220 3% 15%;
-    }
+  :root {
+    --color-content-background: #fff;
+    --color-border: #000;
+    --color-shadow: 220 3% 15%;
+  }
 }
-
-
diff --git a/src/Style/General/Shadow.css b/src/Style/General/Shadow.css
@@ -1,44 +1,56 @@
-@import url("Color.css");
+@import url('Color.css');
 
 /*
  * @source https://github.com/argyleink/open-props
  * @license MIT
  */
 
 @layer base {
-    :root {
-        --shadow-strength: 1%;
-        --shadow-1: 0 1px 2px -1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
-        --shadow-2:
-                0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
-                0 7px 14px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%));
-        --shadow-3:
-                0 -1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
-                0 1px 2px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
-                0 2px 5px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
-                0 4px 12px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
-                0 12px 15px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
-        --shadow-4:
-                0 -2px 5px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
-                0 1px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
-                0 2px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
-                0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
-                0 9px 9px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
-                0 16px 16px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%));
-        --shadow-5:
-                0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
-                0 2px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
-                0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
-                0 10px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
-                0 20px 20px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
-                0 40px 40px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
-        --shadow-6:
-                0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
-                0 3px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
-                0 7px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
-                0 12px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
-                0 22px 18px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
-                0 41px 33px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%)),
-                0 100px 80px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
-    }
+  :root {
+    --shadow-strength: 1%;
+    --shadow-1: 0 1px 2px -1px hsl(var(--color-shadow) /
+          calc(var(--shadow-strength) + 9%));
+    --shadow-2: 0 3px 5px -2px hsl(var(--color-shadow) /
+            calc(var(--shadow-strength) + 3%)),
+      0 7px 14px -5px hsl(var(--color-shadow) /
+            calc(var(--shadow-strength) + 5%));
+    --shadow-3: 0 -1px 3px 0 hsl(var(--color-shadow) /
+            calc(var(--shadow-strength) + 2%)),
+      0 1px 2px -5px hsl(var(--color-shadow) / calc(var(--shadow-strength) + 2%)),
+      0 2px 5px -5px hsl(var(--color-shadow) / calc(var(--shadow-strength) + 4%)),
+      0 4px 12px -5px hsl(var(--color-shadow) /
+            calc(var(--shadow-strength) + 5%)),
+      0 12px 15px -5px hsl(var(--color-shadow) /
+            calc(var(--shadow-strength) + 7%));
+    --shadow-4: 0 -2px 5px 0 hsl(var(--color-shadow) /
+            calc(var(--shadow-strength) + 2%)),
+      0 1px 1px -2px hsl(var(--color-shadow) / calc(var(--shadow-strength) + 3%)),
+      0 2px 2px -2px hsl(var(--color-shadow) / calc(var(--shadow-strength) + 3%)),
+      0 5px 5px -2px hsl(var(--color-shadow) / calc(var(--shadow-strength) + 4%)),
+      0 9px 9px -2px hsl(var(--color-shadow) / calc(var(--shadow-strength) + 5%)),
+      0 16px 16px -2px hsl(var(--color-shadow) /
+            calc(var(--shadow-strength) + 6%));
+    --shadow-5: 0 -1px 2px 0 hsl(var(--color-shadow) /
+            calc(var(--shadow-strength) + 2%)),
+      0 2px 1px -2px hsl(var(--color-shadow) / calc(var(--shadow-strength) + 3%)),
+      0 5px 5px -2px hsl(var(--color-shadow) / calc(var(--shadow-strength) + 3%)),
+      0 10px 10px -2px hsl(var(--color-shadow) /
+            calc(var(--shadow-strength) + 4%)),
+      0 20px 20px -2px hsl(var(--color-shadow) /
+            calc(var(--shadow-strength) + 5%)),
+      0 40px 40px -2px hsl(var(--color-shadow) /
+            calc(var(--shadow-strength) + 7%));
+    --shadow-6: 0 -1px 2px 0 hsl(var(--color-shadow) /
+            calc(var(--shadow-strength) + 2%)),
+      0 3px 2px -2px hsl(var(--color-shadow) / calc(var(--shadow-strength) + 3%)),
+      0 7px 5px -2px hsl(var(--color-shadow) / calc(var(--shadow-strength) + 3%)),
+      0 12px 10px -2px hsl(var(--color-shadow) /
+            calc(var(--shadow-strength) + 4%)),
+      0 22px 18px -2px hsl(var(--color-shadow) /
+            calc(var(--shadow-strength) + 5%)),
+      0 41px 33px -2px hsl(var(--color-shadow) /
+            calc(var(--shadow-strength) + 6%)),
+      0 100px 80px -2px hsl(var(--color-shadow) /
+            calc(var(--shadow-strength) + 7%));
+  }
 }
diff --git a/src/Style/General/index.css b/src/Style/General/index.css
@@ -1,3 +1,3 @@
-@import url("Border.css");
-@import url("Color.css");
-@import url("Shadow.css");
+@import url('Border.css');
+@import url('Color.css');
+@import url('Shadow.css');
diff --git a/src/Style/index.css b/src/Style/index.css
@@ -1,2 +1,2 @@
-@import url("./Component/index.css");
-@import url("./General/index.css");
+@import url('./Component/index.css');
+@import url('./General/index.css');
diff --git a/.stylelintrc.json → test/.stylelintrc.json b/.stylelintrc.json → test/.stylelintrc.json
diff --git a/test/.stylelintrc.strict.json b/test/.stylelintrc.strict.json
@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "no-unknown-custom-properties": true
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		@import url("CardVariable.css");
		@import url('CardVariable.css');