custom plugin to combine rules - diff only

.gitignore

@@ -2,8 +2,8 @@
 dist/
 .cache/
 node_modules/
-*.min.css
+# *.min.css
 src/shadow.*.css
 *.json
 *.ts
-*.d.ts
+*.d.ts

animations.min.css

@@ -0,0 +1,126 @@
+:where(html) {
+  --animation-fade-in: fade-in .5s var(--ease-3);
+  --animation-fade-in-bloom: fade-in-bloom 2s var(--ease-3);
+  --animation-fade-out: fade-out .5s var(--ease-3);
+  --animation-fade-out-bloom: fade-out-bloom 2s var(--ease-3);
+  --animation-scale-up: scale-up .5s var(--ease-3);
+  --animation-scale-down: scale-down .5s var(--ease-3);
+  --animation-slide-out-up: slide-out-up .5s var(--ease-3);
+  --animation-slide-out-down: slide-out-down .5s var(--ease-3);
+  --animation-slide-out-right: slide-out-right .5s var(--ease-3);
+  --animation-slide-out-left: slide-out-left .5s var(--ease-3);
+  --animation-slide-in-up: slide-in-up .5s var(--ease-3);
+  --animation-slide-in-down: slide-in-down .5s var(--ease-3);
+  --animation-slide-in-right: slide-in-right .5s var(--ease-3);
+  --animation-slide-in-left: slide-in-left .5s var(--ease-3);
+  --animation-shake-x: shake-x .75s var(--ease-out-5);
+  --animation-shake-y: shake-y .75s var(--ease-out-5);
+  --animation-spin: spin 2s linear infinite;
+  --animation-ping: ping 5s var(--ease-out-3) infinite;
+  --animation-blink: blink 1s var(--ease-out-3) infinite;
+  --animation-float: float 3s var(--ease-in-out-3) infinite;
+  --animation-bounce: bounce 2s var(--ease-squish-2) infinite;
+  --animation-pulse: pulse 2s var(--ease-out-3) infinite;
+}
+@keyframes fade-in {
+  to { opacity: 1 }
+}
+@keyframes fade-in-bloom {
+  0% { opacity: 0; filter: brightness(1) blur(20px) }
+ 10% { opacity: 1; filter: brightness(2) blur(10px) }
+100% { opacity: 1; filter: brightness(1) blur(0) }
+}
+@keyframes fade-out {
+  to { opacity: 0 }
+}
+@keyframes fade-out-bloom {
+100% { opacity: 0; filter: brightness(1) blur(20px) }
+ 10% { opacity: 1; filter: brightness(2) blur(10px) }
+  0% { opacity: 1; filter: brightness(1) blur(0) }
+}
+@keyframes scale-up {
+  to { transform: scale(1.25) }
+}
+@keyframes scale-down {
+  to { transform: scale(.75) }
+}
+@keyframes slide-out-up {
+  to { transform: translateY(-100%) }
+}
+@keyframes slide-out-down {
+  to { transform: translateY(100%) }
+}
+@keyframes slide-out-right {
+  to { transform: translateX(100%) }
+}
+@keyframes slide-out-left {
+  to { transform: translateX(-100%) }
+}
+@keyframes slide-in-up {
+  from { transform: translateY(100%) }
+}
+@keyframes slide-in-down {
+  from { transform: translateY(-100%) }
+}
+@keyframes slide-in-right {
+  from { transform: translateX(-100%) }
+}
+@keyframes slide-in-left {
+  from { transform: translateX(100%) }
+}
+@keyframes shake-x {
+  0%, 100% { transform: translateX(0%) }
+  20% { transform: translateX(-5%) }
+  40% { transform: translateX(5%) }
+  60% { transform: translateX(-5%) }
+  80% { transform: translateX(5%) }
+}
+@keyframes shake-y {
+  0%, 100% { transform: translateY(0%) }
+  20% { transform: translateY(-5%) }
+  40% { transform: translateY(5%) }
+  60% { transform: translateY(-5%) }
+  80% { transform: translateY(5%) }
+}
+@keyframes spin {
+  to { transform: rotate(1turn) }
+}
+@keyframes ping {
+  90%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+@keyframes blink {
+  0%, 100% {
+    opacity: 1
+  }
+  50% {
+    opacity: .5
+  }
+}
+@keyframes float {
+  50% { transform: translateY(-25%) }
+}
+@keyframes bounce {
+  25% { transform: translateY(-20%) }
+  40% { transform: translateY(-3%) }
+  0%, 60%, 100% { transform: translateY(0) }
+}
+@keyframes pulse {
+  50% { transform: scale(.9,.9) }
+}
+@media (prefers-color-scheme: dark) {
+  @keyframes fade-in-bloom {
+    0% { opacity: 0; filter: brightness(1) blur(20px) }
+   10% { opacity: 1; filter: brightness(0.5) blur(10px) }
+  100% { opacity: 1; filter: brightness(1) blur(0) }
+  };
+}
+@media (prefers-color-scheme: dark) {
+  @keyframes fade-out-bloom {
+  100% { opacity: 0; filter: brightness(1) blur(20px) }
+   10% { opacity: 1; filter: brightness(0.5) blur(10px) }
+    0% { opacity: 1; filter: brightness(1) blur(0) }
+  };
+}

animations.shadow.min.css

@@ -0,0 +1,126 @@
+:host {
+  --animation-fade-in: fade-in .5s var(--ease-3);
+  --animation-fade-in-bloom: fade-in-bloom 2s var(--ease-3);
+  --animation-fade-out: fade-out .5s var(--ease-3);
+  --animation-fade-out-bloom: fade-out-bloom 2s var(--ease-3);
+  --animation-scale-up: scale-up .5s var(--ease-3);
+  --animation-scale-down: scale-down .5s var(--ease-3);
+  --animation-slide-out-up: slide-out-up .5s var(--ease-3);
+  --animation-slide-out-down: slide-out-down .5s var(--ease-3);
+  --animation-slide-out-right: slide-out-right .5s var(--ease-3);
+  --animation-slide-out-left: slide-out-left .5s var(--ease-3);
+  --animation-slide-in-up: slide-in-up .5s var(--ease-3);
+  --animation-slide-in-down: slide-in-down .5s var(--ease-3);
+  --animation-slide-in-right: slide-in-right .5s var(--ease-3);
+  --animation-slide-in-left: slide-in-left .5s var(--ease-3);
+  --animation-shake-x: shake-x .75s var(--ease-out-5);
+  --animation-shake-y: shake-y .75s var(--ease-out-5);
+  --animation-spin: spin 2s linear infinite;
+  --animation-ping: ping 5s var(--ease-out-3) infinite;
+  --animation-blink: blink 1s var(--ease-out-3) infinite;
+  --animation-float: float 3s var(--ease-in-out-3) infinite;
+  --animation-bounce: bounce 2s var(--ease-squish-2) infinite;
+  --animation-pulse: pulse 2s var(--ease-out-3) infinite;
+}
+@keyframes fade-in {
+  to { opacity: 1 }
+}
+@keyframes fade-in-bloom {
+  0% { opacity: 0; filter: brightness(1) blur(20px) }
+ 10% { opacity: 1; filter: brightness(2) blur(10px) }
+100% { opacity: 1; filter: brightness(1) blur(0) }
+}
+@keyframes fade-out {
+  to { opacity: 0 }
+}
+@keyframes fade-out-bloom {
+100% { opacity: 0; filter: brightness(1) blur(20px) }
+ 10% { opacity: 1; filter: brightness(2) blur(10px) }
+  0% { opacity: 1; filter: brightness(1) blur(0) }
+}
+@keyframes scale-up {
+  to { transform: scale(1.25) }
+}
+@keyframes scale-down {
+  to { transform: scale(.75) }
+}
+@keyframes slide-out-up {
+  to { transform: translateY(-100%) }
+}
+@keyframes slide-out-down {
+  to { transform: translateY(100%) }
+}
+@keyframes slide-out-right {
+  to { transform: translateX(100%) }
+}
+@keyframes slide-out-left {
+  to { transform: translateX(-100%) }
+}
+@keyframes slide-in-up {
+  from { transform: translateY(100%) }
+}
+@keyframes slide-in-down {
+  from { transform: translateY(-100%) }
+}
+@keyframes slide-in-right {
+  from { transform: translateX(-100%) }
+}
+@keyframes slide-in-left {
+  from { transform: translateX(100%) }
+}
+@keyframes shake-x {
+  0%, 100% { transform: translateX(0%) }
+  20% { transform: translateX(-5%) }
+  40% { transform: translateX(5%) }
+  60% { transform: translateX(-5%) }
+  80% { transform: translateX(5%) }
+}
+@keyframes shake-y {
+  0%, 100% { transform: translateY(0%) }
+  20% { transform: translateY(-5%) }
+  40% { transform: translateY(5%) }
+  60% { transform: translateY(-5%) }
+  80% { transform: translateY(5%) }
+}
+@keyframes spin {
+  to { transform: rotate(1turn) }
+}
+@keyframes ping {
+  90%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+@keyframes blink {
+  0%, 100% {
+    opacity: 1
+  }
+  50% {
+    opacity: .5
+  }
+}
+@keyframes float {
+  50% { transform: translateY(-25%) }
+}
+@keyframes bounce {
+  25% { transform: translateY(-20%) }
+  40% { transform: translateY(-3%) }
+  0%, 60%, 100% { transform: translateY(0) }
+}
+@keyframes pulse {
+  50% { transform: scale(.9,.9) }
+}
+@media (prefers-color-scheme: dark) {
+  @keyframes fade-in-bloom {
+    0% { opacity: 0; filter: brightness(1) blur(20px) }
+   10% { opacity: 1; filter: brightness(0.5) blur(10px) }
+  100% { opacity: 1; filter: brightness(1) blur(0) }
+  };
+}
+@media (prefers-color-scheme: dark) {
+  @keyframes fade-out-bloom {
+  100% { opacity: 0; filter: brightness(1) blur(20px) }
+   10% { opacity: 1; filter: brightness(0.5) blur(10px) }
+    0% { opacity: 1; filter: brightness(1) blur(0) }
+  };
+}

aspects.min.css

@@ -0,0 +1,8 @@
+:where(html) {
+  --ratio-square: 1;
+  --ratio-landscape: 4/3;
+  --ratio-portrait: 3/4;
+  --ratio-widescreen: 16/9;
+  --ratio-ultrawide: 18/5;
+  --ratio-golden: 1.6180/1;
+}

aspects.shadow.min.css

@@ -0,0 +1,8 @@
+:host {
+  --ratio-square: 1;
+  --ratio-landscape: 4/3;
+  --ratio-portrait: 3/4;
+  --ratio-widescreen: 16/9;
+  --ratio-ultrawide: 18/5;
+  --ratio-golden: 1.6180/1;
+}

blue-hsl.min.css

@@ -0,0 +1,15 @@
+:where(html) {
+  --blue-0-hsl: 205 100% 95%;
+  --blue-1-hsl: 206 100% 91%;
+  --blue-2-hsl: 206 100% 82%;
+  --blue-3-hsl: 206 96% 72%;
+  --blue-4-hsl: 207 91% 64%;
+  --blue-5-hsl: 207 86% 57%;
+  --blue-6-hsl: 208 80% 52%;
+  --blue-7-hsl: 208 77% 47%;
+  --blue-8-hsl: 209 77% 43%;
+  --blue-9-hsl: 209 75% 38%;
+  --blue-10-hsl: 209 76% 32%;
+  --blue-11-hsl: 209 75% 27%;
+  --blue-12-hsl: 209 76% 21%;
+}

blue-hsl.shadow.min.css

@@ -0,0 +1,15 @@
+:host {
+  --blue-0-hsl: 205 100% 95%;
+  --blue-1-hsl: 206 100% 91%;
+  --blue-2-hsl: 206 100% 82%;
+  --blue-3-hsl: 206 96% 72%;
+  --blue-4-hsl: 207 91% 64%;
+  --blue-5-hsl: 207 86% 57%;
+  --blue-6-hsl: 208 80% 52%;
+  --blue-7-hsl: 208 77% 47%;
+  --blue-8-hsl: 209 77% 43%;
+  --blue-9-hsl: 209 75% 38%;
+  --blue-10-hsl: 209 76% 32%;
+  --blue-11-hsl: 209 75% 27%;
+  --blue-12-hsl: 209 76% 21%;
+}

blue.min.css

@@ -0,0 +1,15 @@
+:where(html) {
+  --blue-0: #e7f5ff;
+  --blue-1: #d0ebff;
+  --blue-2: #a5d8ff;
+  --blue-3: #74c0fc;
+  --blue-4: #4dabf7;
+  --blue-5: #339af0;
+  --blue-6: #228be6;
+  --blue-7: #1c7ed6;
+  --blue-8: #1971c2;
+  --blue-9: #1864ab;
+  --blue-10: #145591;
+  --blue-11: #114678;
+  --blue-12: #0d375e;
+}

blue.shadow.min.css

@@ -0,0 +1,15 @@
+:host {
+  --blue-0: #e7f5ff;
+  --blue-1: #d0ebff;
+  --blue-2: #a5d8ff;
+  --blue-3: #74c0fc;
+  --blue-4: #4dabf7;
+  --blue-5: #339af0;
+  --blue-6: #228be6;
+  --blue-7: #1c7ed6;
+  --blue-8: #1971c2;
+  --blue-9: #1864ab;
+  --blue-10: #145591;
+  --blue-11: #114678;
+  --blue-12: #0d375e;
+}

borders.min.css

@@ -0,0 +1,25 @@
+:where(html) {
+  --border-size-1: 1px;
+  --border-size-2: 2px;
+  --border-size-3: 5px;
+  --border-size-4: 10px;
+  --border-size-5: 25px;
+  --radius-1: 2px;
+  --radius-2: 5px;
+  --radius-3: 1rem;
+  --radius-4: 2rem;
+  --radius-5: 4rem;
+  --radius-6: 8rem;
+  --radius-round: 1e5px;
+  --radius-blob-1: 30% 70% 70% 30% / 53% 30% 70% 47%;
+  --radius-blob-2: 53% 47% 34% 66% / 63% 46% 54% 37%;
+  --radius-blob-3: 37% 63% 56% 44% / 49% 56% 44% 51%;
+  --radius-blob-4: 63% 37% 37% 63% / 43% 37% 63% 57%;
+  --radius-blob-5: 49% 51% 48% 52% / 57% 44% 56% 43%;
+  --radius-conditional-1: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-1));
+  --radius-conditional-2: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-2));
+  --radius-conditional-3: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-3));
+  --radius-conditional-4: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-4));
+  --radius-conditional-5: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-5));
+  --radius-conditional-6: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-6));
+}