@csszyx/compiler 0.1.0 → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 csszyx contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -355,7 +355,6 @@ var PROPERTY_MAP = {
   color: "text",
   text: "text",
   fontWeight: "font",
-  font: "font",
   fontFamily: "font",
   fontStretch: "font-stretch",
   textAlign: "text",
@@ -416,6 +415,7 @@ var PROPERTY_MAP = {
   shadow: "shadow",
   shadowColor: "shadow",
   insetShadow: "inset-shadow",
+  insetShadowColor: "inset-shadow",
   textShadow: "text-shadow",
   textShadowColor: "text-shadow",
   opacity: "opacity",
@@ -515,6 +515,11 @@ var PROPERTY_MAP = {
   // Overflow
   overflow: "overflow"
 };
+var CSS_VAR_TYPE_HINTS = {
+  fontFamily: "family-name",
+  fontWeight: "weight",
+  text: "length"
+};
 var SUGGESTION_MAP = {
   // Background
   backgroundColor: "bg",
@@ -561,6 +566,7 @@ var SUGGESTION_MAP = {
   objectPosition: "objectPos",
   zIndex: "z",
   // Typography
+  font: "fontWeight (for weight) or fontFamily (for family)",
   fontStyle: "italic/notItalic (boolean)",
   weight: "fontWeight",
   textDecoration: "decoration or underline/lineThrough/noUnderline (boolean)",
@@ -1680,6 +1686,14 @@ function transform(szProp, prefix = "", mangleMap) {
         }
         continue;
       }
+      if (rawKey === "insetShadowColor") {
+        if (String(value).startsWith("--")) {
+          classes.push(`${prefix}inset-shadow-(color:${value})`);
+        } else {
+          classes.push(`${prefix}inset-shadow-${value}`);
+        }
+        continue;
+      }
       if (rawKey === "brightness" || rawKey === "contrast" || rawKey === "saturate" || rawKey === "scale" || rawKey === "backdropBrightness" || rawKey === "backdropContrast" || rawKey === "backdropSaturate") {
         const prop = rawKey.startsWith("backdrop") ? `backdrop-${rawKey.slice(8).toLowerCase()}` : rawKey;
         const sValue = String(value);
@@ -1952,7 +1966,12 @@ function transform(szProp, prefix = "", mangleMap) {
       }
       const isAspectRatio = key === "aspect" && /^\d+\/\d+$/.test(finalValue);
       if (finalValue.startsWith("--")) {
-        finalValue = `(${finalValue})`;
+        const typeHint = CSS_VAR_TYPE_HINTS[rawKey];
+        if (typeHint) {
+          finalValue = `(${typeHint}:${finalValue})`;
+        } else {
+          finalValue = `(${finalValue})`;
+        }
       } else if (finalValue.startsWith("var(")) {
         finalValue = `[${normalizeArbitraryValue(finalValue)}]`;
       } else if (/^\d+\/\d+$/.test(finalValue)) {
@@ -1969,7 +1988,36 @@ function transform(szProp, prefix = "", mangleMap) {
       classes.push(className);
     }
   }
-  const finalClasses = classes.filter(Boolean);
+  let mergedClasses = classes;
+  const textSizePattern = /^((?:[a-z0-9\-[\]@/:]*:)*)text-(.+)$/;
+  const leadingPattern = /^((?:[a-z0-9\-[\]@/:]*:)*)leading-(.+)$/;
+  const textEntries = [];
+  const leadingEntries = [];
+  for (let i = 0; i < classes.length; i++) {
+    const cls = classes[i];
+    const tm = textSizePattern.exec(cls);
+    if (tm) {
+      textEntries.push({ index: i, prefix: tm[1], size: tm[2] });
+    }
+    const lm = leadingPattern.exec(cls);
+    if (lm) {
+      leadingEntries.push({ index: i, prefix: lm[1], value: lm[2] });
+    }
+  }
+  if (textEntries.length > 0 && leadingEntries.length > 0) {
+    const removeIndices = /* @__PURE__ */ new Set();
+    for (const te of textEntries) {
+      const matchingLeading = leadingEntries.find((le) => le.prefix === te.prefix);
+      if (matchingLeading) {
+        mergedClasses[te.index] = `${te.prefix}text-${te.size}/${matchingLeading.value}`;
+        removeIndices.add(matchingLeading.index);
+      }
+    }
+    if (removeIndices.size > 0) {
+      mergedClasses = mergedClasses.filter((_, i) => !removeIndices.has(i));
+    }
+  }
+  const finalClasses = mergedClasses.filter(Boolean);
   if (mangleMap) {
     const mangledClasses = finalClasses.map((cls) => mangleMap[cls] || cls);
     return {

package/dist/index.d.cts

@@ -779,17 +779,15 @@ interface SizingProps {
  *
  */
 interface TypographyProps {
-    /** @see https://tailwindcss.com/docs/font-size */
-    text?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl' | 'left' | 'center' | 'right' | 'justify' | 'start' | 'end' | ColorPropValue | (string & {});
+    /** @see https://tailwindcss.com/docs/font-size — use `color` for text color, `textAlign` for alignment */
+    text?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl' | (string & {});
     /** @see https://tailwindcss.com/docs/font-smoothing */
     antialiased?: boolean;
     subpixelAntialiased?: boolean;
     /** @see https://tailwindcss.com/docs/font-style */
     italic?: boolean;
     notItalic?: boolean;
-    /** @see https://tailwindcss.com/docs/font-weight — also accepts font-family keywords */
-    font?: 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black' | 'sans' | 'serif' | 'mono' | (string & {});
-    /** Explicit font-weight key. Use `font` for the short form */
+    /** @see https://tailwindcss.com/docs/font-weight */
     fontWeight?: 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | (string & {});
     /** Explicit font-family key. Use `font` for the short form */
     fontFamily?: 'sans' | 'serif' | 'mono' | (string & {});
@@ -918,8 +916,8 @@ interface BorderProps {
     roundedSe?: BorderRadiusValue;
     roundedEs?: BorderRadiusValue;
     roundedEe?: BorderRadiusValue;
-    /** @see https://tailwindcss.com/docs/border-width */
-    border?: boolean | 0 | 2 | 4 | 8 | ColorValue | (string & {});
+    /** @see https://tailwindcss.com/docs/border-width — use `borderColor` for border color */
+    border?: boolean | 0 | 2 | 4 | 8 | (string & {});
     borderX?: boolean | 0 | 2 | 4 | 8 | (string & {});
     borderY?: boolean | 0 | 2 | 4 | 8 | (string & {});
     borderT?: boolean | 0 | 2 | 4 | 8 | (string & {});

package/dist/index.d.ts

@@ -779,17 +779,15 @@ interface SizingProps {
  *
  */
 interface TypographyProps {
-    /** @see https://tailwindcss.com/docs/font-size */
-    text?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl' | 'left' | 'center' | 'right' | 'justify' | 'start' | 'end' | ColorPropValue | (string & {});
+    /** @see https://tailwindcss.com/docs/font-size — use `color` for text color, `textAlign` for alignment */
+    text?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl' | (string & {});
     /** @see https://tailwindcss.com/docs/font-smoothing */
     antialiased?: boolean;
     subpixelAntialiased?: boolean;
     /** @see https://tailwindcss.com/docs/font-style */
     italic?: boolean;
     notItalic?: boolean;
-    /** @see https://tailwindcss.com/docs/font-weight — also accepts font-family keywords */
-    font?: 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black' | 'sans' | 'serif' | 'mono' | (string & {});
-    /** Explicit font-weight key. Use `font` for the short form */
+    /** @see https://tailwindcss.com/docs/font-weight */
     fontWeight?: 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | (string & {});
     /** Explicit font-family key. Use `font` for the short form */
     fontFamily?: 'sans' | 'serif' | 'mono' | (string & {});
@@ -918,8 +916,8 @@ interface BorderProps {
     roundedSe?: BorderRadiusValue;
     roundedEs?: BorderRadiusValue;
     roundedEe?: BorderRadiusValue;
-    /** @see https://tailwindcss.com/docs/border-width */
-    border?: boolean | 0 | 2 | 4 | 8 | ColorValue | (string & {});
+    /** @see https://tailwindcss.com/docs/border-width — use `borderColor` for border color */
+    border?: boolean | 0 | 2 | 4 | 8 | (string & {});
     borderX?: boolean | 0 | 2 | 4 | 8 | (string & {});
     borderY?: boolean | 0 | 2 | 4 | 8 | (string & {});
     borderT?: boolean | 0 | 2 | 4 | 8 | (string & {});

package/dist/index.js

@@ -303,7 +303,6 @@ var PROPERTY_MAP = {
   color: "text",
   text: "text",
   fontWeight: "font",
-  font: "font",
   fontFamily: "font",
   fontStretch: "font-stretch",
   textAlign: "text",
@@ -364,6 +363,7 @@ var PROPERTY_MAP = {
   shadow: "shadow",
   shadowColor: "shadow",
   insetShadow: "inset-shadow",
+  insetShadowColor: "inset-shadow",
   textShadow: "text-shadow",
   textShadowColor: "text-shadow",
   opacity: "opacity",
@@ -463,6 +463,11 @@ var PROPERTY_MAP = {
   // Overflow
   overflow: "overflow"
 };
+var CSS_VAR_TYPE_HINTS = {
+  fontFamily: "family-name",
+  fontWeight: "weight",
+  text: "length"
+};
 var SUGGESTION_MAP = {
   // Background
   backgroundColor: "bg",
@@ -509,6 +514,7 @@ var SUGGESTION_MAP = {
   objectPosition: "objectPos",
   zIndex: "z",
   // Typography
+  font: "fontWeight (for weight) or fontFamily (for family)",
   fontStyle: "italic/notItalic (boolean)",
   weight: "fontWeight",
   textDecoration: "decoration or underline/lineThrough/noUnderline (boolean)",
@@ -1628,6 +1634,14 @@ function transform(szProp, prefix = "", mangleMap) {
         }
         continue;
       }
+      if (rawKey === "insetShadowColor") {
+        if (String(value).startsWith("--")) {
+          classes.push(`${prefix}inset-shadow-(color:${value})`);
+        } else {
+          classes.push(`${prefix}inset-shadow-${value}`);
+        }
+        continue;
+      }
       if (rawKey === "brightness" || rawKey === "contrast" || rawKey === "saturate" || rawKey === "scale" || rawKey === "backdropBrightness" || rawKey === "backdropContrast" || rawKey === "backdropSaturate") {
         const prop = rawKey.startsWith("backdrop") ? `backdrop-${rawKey.slice(8).toLowerCase()}` : rawKey;
         const sValue = String(value);
@@ -1900,7 +1914,12 @@ function transform(szProp, prefix = "", mangleMap) {
       }
       const isAspectRatio = key === "aspect" && /^\d+\/\d+$/.test(finalValue);
       if (finalValue.startsWith("--")) {
-        finalValue = `(${finalValue})`;
+        const typeHint = CSS_VAR_TYPE_HINTS[rawKey];
+        if (typeHint) {
+          finalValue = `(${typeHint}:${finalValue})`;
+        } else {
+          finalValue = `(${finalValue})`;
+        }
       } else if (finalValue.startsWith("var(")) {
         finalValue = `[${normalizeArbitraryValue(finalValue)}]`;
       } else if (/^\d+\/\d+$/.test(finalValue)) {
@@ -1917,7 +1936,36 @@ function transform(szProp, prefix = "", mangleMap) {
       classes.push(className);
     }
   }
-  const finalClasses = classes.filter(Boolean);
+  let mergedClasses = classes;
+  const textSizePattern = /^((?:[a-z0-9\-[\]@/:]*:)*)text-(.+)$/;
+  const leadingPattern = /^((?:[a-z0-9\-[\]@/:]*:)*)leading-(.+)$/;
+  const textEntries = [];
+  const leadingEntries = [];
+  for (let i = 0; i < classes.length; i++) {
+    const cls = classes[i];
+    const tm = textSizePattern.exec(cls);
+    if (tm) {
+      textEntries.push({ index: i, prefix: tm[1], size: tm[2] });
+    }
+    const lm = leadingPattern.exec(cls);
+    if (lm) {
+      leadingEntries.push({ index: i, prefix: lm[1], value: lm[2] });
+    }
+  }
+  if (textEntries.length > 0 && leadingEntries.length > 0) {
+    const removeIndices = /* @__PURE__ */ new Set();
+    for (const te of textEntries) {
+      const matchingLeading = leadingEntries.find((le) => le.prefix === te.prefix);
+      if (matchingLeading) {
+        mergedClasses[te.index] = `${te.prefix}text-${te.size}/${matchingLeading.value}`;
+        removeIndices.add(matchingLeading.index);
+      }
+    }
+    if (removeIndices.size > 0) {
+      mergedClasses = mergedClasses.filter((_, i) => !removeIndices.has(i));
+    }
+  }
+  const finalClasses = mergedClasses.filter(Boolean);
   if (mangleMap) {
     const mangledClasses = finalClasses.map((cls) => mangleMap[cls] || cls);
     return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@csszyx/compiler",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Core compiler and transformation logic for csszyx",
   "keywords": [
     "csszyx",
@@ -34,18 +34,11 @@
   "files": [
     "dist"
   ],
-  "scripts": {
-    "build": "tsup src/index.ts --format esm,cjs --dts",
-    "dev": "tsup src/index.ts --format esm --dts --watch",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "type-check": "tsc --noEmit"
-  },
   "dependencies": {
     "@babel/core": "^7.23.7",
     "@babel/types": "^7.23.6",
     "@babel/traverse": "^7.23.7",
-    "@csszyx/core": "workspace:*"
+    "@csszyx/core": "0.1.1"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",
@@ -54,5 +47,12 @@
     "tsup": "^8.0.0",
     "typescript": "^5.3.3",
     "vitest": "^1.2.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts",
+    "dev": "tsup src/index.ts --format esm --dts --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "type-check": "tsc --noEmit"
   }
-}
+}