fix: use valid superellipse() argument in @supports rule

.github/workflows/release.yml

@@ -29,7 +29,7 @@ jobs:
         with:
           node-version-file: ".node-version"
           run-install: true
-          registry-url: 'https://registry.npmjs.org'
+          registry-url: "https://registry.npmjs.org"
 
       - name: Build package
         run: vp run @klinking/squircle#build

README.md

@@ -83,14 +83,14 @@ If you'd rather not add a dependency, copy the source directly:
 
 @utility squircle-amt-* {
   --squircle-amt: --value(--squircle-amt-*, number);
-  @supports (corner-shape: superellipse()) {
+  @supports (corner-shape: superellipse(2)) {
     corner-shape: superellipse(var(--squircle-amt));
   }
 }
 
 @utility squircle-* {
   border-radius: --value(--radius-*);
-  @supports (corner-shape: superellipse()) {
+  @supports (corner-shape: superellipse(2)) {
     --squircle-r: calc(
       --value(--radius- *) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 1.5))))
@@ -105,7 +105,7 @@ If you'd rather not add a dependency, copy the source directly:
 @utility squircle-t-* {
   border-top-left-radius: --value(--radius-*);
   border-top-right-radius: --value(--radius-*);
-  @supports (corner-shape: superellipse()) {
+  @supports (corner-shape: superellipse(2)) {
     --squircle-r: calc(
       --value(--radius- *) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 1.5))))
@@ -119,7 +119,7 @@ If you'd rather not add a dependency, copy the source directly:
 @utility squircle-r-* {
   border-top-right-radius: --value(--radius-*);
   border-bottom-right-radius: --value(--radius-*);
-  @supports (corner-shape: superellipse()) {
+  @supports (corner-shape: superellipse(2)) {
     --squircle-r: calc(
       --value(--radius- *) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 1.5))))
@@ -133,7 +133,7 @@ If you'd rather not add a dependency, copy the source directly:
 @utility squircle-b-* {
   border-bottom-left-radius: --value(--radius-*);
   border-bottom-right-radius: --value(--radius-*);
-  @supports (corner-shape: superellipse()) {
+  @supports (corner-shape: superellipse(2)) {
     --squircle-r: calc(
       --value(--radius- *) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 1.5))))
@@ -147,7 +147,7 @@ If you'd rather not add a dependency, copy the source directly:
 @utility squircle-l-* {
   border-top-left-radius: --value(--radius-*);
   border-bottom-left-radius: --value(--radius-*);
-  @supports (corner-shape: superellipse()) {
+  @supports (corner-shape: superellipse(2)) {
     --squircle-r: calc(
       --value(--radius- *) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 1.5))))
@@ -163,7 +163,7 @@ If you'd rather not add a dependency, copy the source directly:
 @utility squircle-s-* {
   border-start-start-radius: --value(--radius-*);
   border-end-start-radius: --value(--radius-*);
-  @supports (corner-shape: superellipse()) {
+  @supports (corner-shape: superellipse(2)) {
     --squircle-r: calc(
       --value(--radius- *) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 1.5))))
@@ -177,7 +177,7 @@ If you'd rather not add a dependency, copy the source directly:
 @utility squircle-e-* {
   border-start-end-radius: --value(--radius-*);
   border-end-end-radius: --value(--radius-*);
-  @supports (corner-shape: superellipse()) {
+  @supports (corner-shape: superellipse(2)) {
     --squircle-r: calc(
       --value(--radius- *) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 1.5))))
@@ -192,7 +192,7 @@ If you'd rather not add a dependency, copy the source directly:
 
 @utility squircle-tl-* {
   border-top-left-radius: --value(--radius-*);
-  @supports (corner-shape: superellipse()) {
+  @supports (corner-shape: superellipse(2)) {
     border-top-left-radius: calc(
       --value(--radius- *) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 1.5))))
@@ -203,7 +203,7 @@ If you'd rather not add a dependency, copy the source directly:
 
 @utility squircle-tr-* {
   border-top-right-radius: --value(--radius-*);
-  @supports (corner-shape: superellipse()) {
+  @supports (corner-shape: superellipse(2)) {
     border-top-right-radius: calc(
       --value(--radius- *) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 1.5))))
@@ -214,7 +214,7 @@ If you'd rather not add a dependency, copy the source directly:
 
 @utility squircle-br-* {
   border-bottom-right-radius: --value(--radius-*);
-  @supports (corner-shape: superellipse()) {
+  @supports (corner-shape: superellipse(2)) {
     border-bottom-right-radius: calc(
       --value(--radius- *) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 1.5))))
@@ -225,7 +225,7 @@ If you'd rather not add a dependency, copy the source directly:
 
 @utility squircle-bl-* {
   border-bottom-left-radius: --value(--radius-*);
-  @supports (corner-shape: superellipse()) {
+  @supports (corner-shape: superellipse(2)) {
     border-bottom-left-radius: calc(
       --value(--radius- *) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 1.5))))
@@ -238,7 +238,7 @@ If you'd rather not add a dependency, copy the source directly:
 
 @utility squircle-ss-* {
   border-start-start-radius: --value(--radius-*);
-  @supports (corner-shape: superellipse()) {
+  @supports (corner-shape: superellipse(2)) {
     border-start-start-radius: calc(
       --value(--radius- *) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 1.5))))
@@ -249,7 +249,7 @@ If you'd rather not add a dependency, copy the source directly:
 
 @utility squircle-se-* {
   border-start-end-radius: --value(--radius-*);
-  @supports (corner-shape: superellipse()) {
+  @supports (corner-shape: superellipse(2)) {
     border-start-end-radius: calc(
       --value(--radius- *) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 1.5))))
@@ -260,7 +260,7 @@ If you'd rather not add a dependency, copy the source directly:
 
 @utility squircle-es-* {
   border-end-start-radius: --value(--radius-*);
-  @supports (corner-shape: superellipse()) {
+  @supports (corner-shape: superellipse(2)) {
     border-end-start-radius: calc(
       --value(--radius- *) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 1.5))))
@@ -271,7 +271,7 @@ If you'd rather not add a dependency, copy the source directly:
 
 @utility squircle-ee-* {
   border-end-end-radius: --value(--radius-*);
-  @supports (corner-shape: superellipse()) {
+  @supports (corner-shape: superellipse(2)) {
     border-end-end-radius: calc(
       --value(--radius- *) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 1.5))))
@@ -297,7 +297,7 @@ const correctedRadius = (value: string): string =>
 
 const cornerShape = "superellipse(var(--squircle-amt, 1.5))";
 
-const supportsCornerShape = "@supports (corner-shape: superellipse())";
+const supportsCornerShape = "@supports (corner-shape: superellipse(2))";
 
 // eslint-disable-next-line @typescript-eslint/unbound-method
 const squirclePlugin: Parameters<typeof plugin>[0] = ({ matchUtilities, theme }) => {

package.json

@@ -4,7 +4,6 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "ready": "vp fmt && vp lint && vp run -r test",
     "dev": "vp dev",
     "prepare": "vp config"
   },

package/scripts/generate-squircle-css.ts

@@ -10,6 +10,7 @@ import {
   isComment,
   usesIntermediateVar,
 } from "../src/variants";
+import { SUPPORTS_RULE } from "../src/variants";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
@@ -21,7 +22,7 @@ function multiPropUtility(name: string, props: string[]) {
   return `\
 @utility ${name} {
 ${fallbacks}
-  @supports (corner-shape: superellipse()) {
+  ${SUPPORTS_RULE} {
     --squircle-r: ${formula};
 ${corrected}
     corner-shape: ${getCornerShape()};
@@ -33,7 +34,7 @@ function singlePropUtility(name: string, prop: string) {
   return `\
 @utility ${name} {
   ${prop}: --value(--radius-*);
-  @supports (corner-shape: superellipse()) {
+  ${SUPPORTS_RULE} {
     ${prop}: ${formula};
     corner-shape: ${getCornerShape()};
   }
@@ -44,18 +45,13 @@ function generateCss(): string {
   const blocks: string[] = [];
 
   blocks.push(`\
-/* THIS FILE IS GENERATED — do not edit by hand.
- * Source: scripts/generate-squircle-css.ts
- * Formula: src/variants.ts
- * Run: vp run generate:css */
-
 /* ── Squircle utilities ─────────────────────────────────────── */
 /* squircle-amt-[n] sets the superellipse amount (default ${DEFAULT_AMT})    */
 /* squircle-* mirrors rounded-* variants: all, t, r, b, l, s, e, tl, tr, br, bl, ss, se, es, ee */
 
 @utility squircle-amt-* {
   --squircle-amt: --value(--squircle-amt-*, number);
-  @supports (corner-shape: superellipse()) {
+  ${SUPPORTS_RULE} {
     corner-shape: superellipse(var(--squircle-amt));
   }
 }`);

package/src/__snapshots__/squircle-css.test.ts.snap

@@ -4,7 +4,7 @@ exports[`squircle.css utilities > squircle-b-md snapshot 1`] = `
 ".squircle-b-md {
     border-bottom-left-radius: var(--radius-md);
     border-bottom-right-radius: var(--radius-md);
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       --squircle-r: calc(
       var(--radius-md) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
@@ -19,7 +19,7 @@ exports[`squircle.css utilities > squircle-b-md snapshot 1`] = `
 exports[`squircle.css utilities > squircle-bl-md snapshot 1`] = `
 ".squircle-bl-md {
     border-bottom-left-radius: var(--radius-md);
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       border-bottom-left-radius: calc( var(--radius-md) * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2)))) );
       corner-shape: superellipse(var(--squircle-amt, 2));
     }
@@ -29,7 +29,7 @@ exports[`squircle.css utilities > squircle-bl-md snapshot 1`] = `
 exports[`squircle.css utilities > squircle-br-md snapshot 1`] = `
 ".squircle-br-md {
     border-bottom-right-radius: var(--radius-md);
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       border-bottom-right-radius: calc( var(--radius-md) * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2)))) );
       corner-shape: superellipse(var(--squircle-amt, 2));
     }
@@ -40,7 +40,7 @@ exports[`squircle.css utilities > squircle-e-md snapshot 1`] = `
 ".squircle-e-md {
     border-start-end-radius: var(--radius-md);
     border-end-end-radius: var(--radius-md);
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       --squircle-r: calc(
       var(--radius-md) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
@@ -55,7 +55,7 @@ exports[`squircle.css utilities > squircle-e-md snapshot 1`] = `
 exports[`squircle.css utilities > squircle-ee-md snapshot 1`] = `
 ".squircle-ee-md {
     border-end-end-radius: var(--radius-md);
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       border-end-end-radius: calc( var(--radius-md) * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2)))) );
       corner-shape: superellipse(var(--squircle-amt, 2));
     }
@@ -65,7 +65,7 @@ exports[`squircle.css utilities > squircle-ee-md snapshot 1`] = `
 exports[`squircle.css utilities > squircle-es-md snapshot 1`] = `
 ".squircle-es-md {
     border-end-start-radius: var(--radius-md);
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       border-end-start-radius: calc( var(--radius-md) * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2)))) );
       corner-shape: superellipse(var(--squircle-amt, 2));
     }
@@ -76,7 +76,7 @@ exports[`squircle.css utilities > squircle-l-md snapshot 1`] = `
 ".squircle-l-md {
     border-top-left-radius: var(--radius-md);
     border-bottom-left-radius: var(--radius-md);
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       --squircle-r: calc(
       var(--radius-md) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
@@ -91,7 +91,7 @@ exports[`squircle.css utilities > squircle-l-md snapshot 1`] = `
 exports[`squircle.css utilities > squircle-md snapshot 1`] = `
 ".squircle-md {
     border-radius: var(--radius-md);
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       --squircle-r: calc(
       var(--radius-md) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
@@ -106,7 +106,7 @@ exports[`squircle.css utilities > squircle-r-md snapshot 1`] = `
 ".squircle-r-md {
     border-top-right-radius: var(--radius-md);
     border-bottom-right-radius: var(--radius-md);
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       --squircle-r: calc(
       var(--radius-md) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
@@ -122,7 +122,7 @@ exports[`squircle.css utilities > squircle-s-md snapshot 1`] = `
 ".squircle-s-md {
     border-start-start-radius: var(--radius-md);
     border-end-start-radius: var(--radius-md);
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       --squircle-r: calc(
       var(--radius-md) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
@@ -137,7 +137,7 @@ exports[`squircle.css utilities > squircle-s-md snapshot 1`] = `
 exports[`squircle.css utilities > squircle-se-md snapshot 1`] = `
 ".squircle-se-md {
     border-start-end-radius: var(--radius-md);
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       border-start-end-radius: calc( var(--radius-md) * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2)))) );
       corner-shape: superellipse(var(--squircle-amt, 2));
     }
@@ -147,7 +147,7 @@ exports[`squircle.css utilities > squircle-se-md snapshot 1`] = `
 exports[`squircle.css utilities > squircle-ss-md snapshot 1`] = `
 ".squircle-ss-md {
     border-start-start-radius: var(--radius-md);
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       border-start-start-radius: calc( var(--radius-md) * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2)))) );
       corner-shape: superellipse(var(--squircle-amt, 2));
     }
@@ -158,7 +158,7 @@ exports[`squircle.css utilities > squircle-t-md snapshot 1`] = `
 ".squircle-t-md {
     border-top-left-radius: var(--radius-md);
     border-top-right-radius: var(--radius-md);
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       --squircle-r: calc(
       var(--radius-md) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
@@ -173,7 +173,7 @@ exports[`squircle.css utilities > squircle-t-md snapshot 1`] = `
 exports[`squircle.css utilities > squircle-tl-md snapshot 1`] = `
 ".squircle-tl-md {
     border-top-left-radius: var(--radius-md);
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       border-top-left-radius: calc( var(--radius-md) * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2)))) );
       corner-shape: superellipse(var(--squircle-amt, 2));
     }
@@ -183,7 +183,7 @@ exports[`squircle.css utilities > squircle-tl-md snapshot 1`] = `
 exports[`squircle.css utilities > squircle-tr-md snapshot 1`] = `
 ".squircle-tr-md {
     border-top-right-radius: var(--radius-md);
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       border-top-right-radius: calc( var(--radius-md) * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2)))) );
       corner-shape: superellipse(var(--squircle-amt, 2));
     }