@cwcss/crosswind 0.1.6 → 0.2.0

package/dist/rules.d.ts

@@ -36,4 +36,4 @@ export declare const borderSideWidthRule: UtilityRule;
 export declare const borderRadiusRule: UtilityRule;
 // Export all rules (order matters - more specific rules first)
 export declare const builtInRules: UtilityRule[];
-export type UtilityRule = (parsed: ParsedClass, config: CrosswindConfig) => Record<string, string> | UtilityRuleResult | undefined
+export type UtilityRule = (_parsed: ParsedClass, _config: CrosswindConfig) => Record<string, string> | UtilityRuleResult | undefined

package/dist/{index.js → src/index.js}

@@ -41,6 +41,24 @@ var CSS_UNITS_REGEX = /^\d+(\.\d+)?(px|rem|em|vh|vw|dvh|dvw|svh|svw|lvh|lvw|ch|e
 function needsArbitraryBrackets(value) {
   return SPECIAL_CHARS_REGEX.test(value) || CSS_UNITS_REGEX.test(value);
 }
+function convertArbitraryUnderscores(value) {
+  if (!value.includes("_"))
+    return value;
+  if (value.includes("(")) {
+    let result = "";
+    let depth = 0;
+    for (let i = 0;i < value.length; i++) {
+      const ch = value[i];
+      if (ch === "(")
+        depth++;
+      else if (ch === ")")
+        depth--;
+      result += ch === "_" && depth === 0 ? " " : ch;
+    }
+    return result;
+  }
+  return value.replace(/_/g, " ");
+}
 function handleMinMaxPattern(prefix, parts) {
   if (parts.length !== 2)
     return null;
@@ -820,7 +838,7 @@ function parseClassImpl(className) {
   if (preArbitraryMatch) {
     const variantPart = preArbitraryMatch[1];
     const variants2 = variantPart ? variantPart.split(":").filter(Boolean) : [];
-    let value = preArbitraryMatch[3];
+    let value = convertArbitraryUnderscores(preArbitraryMatch[3]);
     let typeHint;
     const typeHintMatch = value.match(/^(color|length|url|number|percentage|position|line-width|absolute-size|relative-size|image|angle|time|flex|string|family-name):(.*)/i);
     if (typeHintMatch) {
@@ -870,7 +888,7 @@ function parseClassImpl(className) {
   }
   const arbitraryMatch = utility.match(/^([a-z-]+?)-\[(.+?)\]$/);
   if (arbitraryMatch) {
-    let value = arbitraryMatch[2];
+    let value = convertArbitraryUnderscores(arbitraryMatch[2]);
     let typeHint;
     const typeHintMatch = value.match(/^(color|length|url|number|percentage|position|line-width|absolute-size|relative-size|image|angle|time|flex|string|family-name):(.*)/i);
     if (typeHintMatch) {
@@ -1065,7 +1083,7 @@ function parseClassImpl(className) {
       arbitrary: false
     };
   }
-  const opacityMatch = utility.match(/^([a-z]+(?:-[a-z]+)*?)-(.+?)\/(\d+)$/);
+  const opacityMatch = utility.match(/^([a-z]+(?:-[a-z]+)*?)-(.+?)\/(\d+|\[\d*\.?\d+\])$/);
   if (opacityMatch && ["bg", "text", "border", "ring", "placeholder", "divide"].includes(opacityMatch[1])) {
     return {
       raw: className,
@@ -1839,10 +1857,18 @@ var shadowColorRule = (parsed, config) => {
   let opacity;
   if (slashIdx !== -1) {
     colorName = value.slice(0, slashIdx);
-    const opacityValue = Number.parseInt(value.slice(slashIdx + 1), 10);
-    if (Number.isNaN(opacityValue) || opacityValue < 0 || opacityValue > 100)
-      return;
-    opacity = opacityValue / 100;
+    const opacityStr = value.slice(slashIdx + 1);
+    if (opacityStr.charCodeAt(0) === 91 && opacityStr.charCodeAt(opacityStr.length - 1) === 93) {
+      const arbitraryOpacity = Number.parseFloat(opacityStr.slice(1, -1));
+      if (Number.isNaN(arbitraryOpacity) || arbitraryOpacity < 0 || arbitraryOpacity > 1)
+        return;
+      opacity = arbitraryOpacity;
+    } else {
+      const opacityValue = Number.parseInt(opacityStr, 10);
+      if (Number.isNaN(opacityValue) || opacityValue < 0 || opacityValue > 100)
+        return;
+      opacity = opacityValue / 100;
+    }
   } else {
     colorName = value;
   }
@@ -4183,11 +4209,20 @@ var colorRule = (parsed, config) => {
   let colorValue = value;
   if (slashIdx !== -1) {
     colorValue = value.slice(0, slashIdx);
-    const opacityValue = Number.parseInt(value.slice(slashIdx + 1), 10);
-    if (Number.isNaN(opacityValue) || opacityValue < 0 || opacityValue > 100) {
-      return;
+    const opacityStr = value.slice(slashIdx + 1);
+    if (opacityStr.charCodeAt(0) === 91 && opacityStr.charCodeAt(opacityStr.length - 1) === 93) {
+      const arbitraryOpacity = Number.parseFloat(opacityStr.slice(1, -1));
+      if (Number.isNaN(arbitraryOpacity) || arbitraryOpacity < 0 || arbitraryOpacity > 1) {
+        return;
+      }
+      opacity = arbitraryOpacity;
+    } else {
+      const opacityValue = Number.parseInt(opacityStr, 10);
+      if (Number.isNaN(opacityValue) || opacityValue < 0 || opacityValue > 100) {
+        return;
+      }
+      opacity = opacityValue / 100;
     }
-    opacity = opacityValue / 100;
     const baseColor = flatColorCache.get(colorValue);
     if (baseColor) {
       return { [prop]: applyOpacity(baseColor, opacity) };
@@ -4258,10 +4293,19 @@ var placeholderColorRule = (parsed, config) => {
     }
   } else {
     const colorValue = value.slice(0, slashIdx);
-    const opacityValue = Number.parseInt(value.slice(slashIdx + 1), 10);
-    if (Number.isNaN(opacityValue) || opacityValue < 0 || opacityValue > 100)
-      return;
-    const opacity = opacityValue / 100;
+    const opacityStr = value.slice(slashIdx + 1);
+    let opacity;
+    if (opacityStr.charCodeAt(0) === 91 && opacityStr.charCodeAt(opacityStr.length - 1) === 93) {
+      const arbitraryOpacity = Number.parseFloat(opacityStr.slice(1, -1));
+      if (Number.isNaN(arbitraryOpacity) || arbitraryOpacity < 0 || arbitraryOpacity > 1)
+        return;
+      opacity = arbitraryOpacity;
+    } else {
+      const opacityValue = Number.parseInt(opacityStr, 10);
+      if (Number.isNaN(opacityValue) || opacityValue < 0 || opacityValue > 100)
+        return;
+      opacity = opacityValue / 100;
+    }
     const baseColor = flatColorCache.get(colorValue);
     if (baseColor) {
       return {
@@ -4288,6 +4332,9 @@ var fontSizeRule = (parsed, config) => {
         }
         return { "font-size": parsed.value };
       }
+      if (/^#|^rgb|^hsl|^hwb|^lab|^lch|^oklch|^oklab|^color\(|^var\(--/.test(parsed.value)) {
+        return;
+      }
       return { "font-size": parsed.value };
     }
     const fontSize = config.theme.fontSize[parsed.value];
@@ -4424,6 +4471,9 @@ var borderSideWidthRule = (parsed) => {
 };
 var borderRadiusRule = (parsed, config) => {
   if (parsed.utility === "rounded") {
+    if (parsed.arbitrary && parsed.value) {
+      return { "border-radius": parsed.value };
+    }
     const value = parsed.value ? config.theme.borderRadius[parsed.value] : config.theme.borderRadius.DEFAULT;
     return value ? { "border-radius": value } : undefined;
   }

package/dist/types.d.ts

@@ -121,7 +121,7 @@ export declare interface Preset {
   variants?: Partial<VariantConfig>
   preflights?: Preflight[]
 }
-export type CustomRule = [RegExp, (match: RegExpMatchArray) => Record<string, string> | undefined]
+export type CustomRule = [RegExp, (_match: RegExpMatchArray) => Record<string, string> | undefined]
 declare type DeepPartial<T> = {
   [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P]
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cwcss/crosswind",
   "type": "module",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "description": "A performant Utility-First CSS framework. Similar to Tailwind or UnoCSS.",
   "author": "Chris Breuer <chris@stacksjs.org>",
   "license": "MIT",
@@ -37,7 +37,7 @@
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "bin": {
-    "crosswind": "./dist/bin/cli.js"
+    "crosswind": "./dist/cli.js"
   },
   "files": [
     "README.md",
@@ -72,21 +72,7 @@
     "@stacksjs/clapp": "^0.2.0",
     "bunfig": "^0.15.0"
   },
-  "overrides": {
-    "unconfig": "0.3.10"
-  },
   "lint-staged": {
     "*.{js,ts}": "bunx --bun pickier run --mode lint --fix"
-  },
-  "devDependencies": {
-    "@tailwindcss/node": "^4.1.14",
-    "@tailwindcss/postcss": "^4.1",
-    "@tailwindcss/vite": "^4.1",
-    "@unocss/core": "^66.5.4",
-    "@unocss/preset-wind": "^66.5.4",
-    "mitata": "^1.0.34",
-    "postcss": "^8.5.6",
-    "tailwindcss": "^3",
-    "tailwindcss-v4": "npm:tailwindcss@^4"
   }
 }