@pyreon/styler 0.11.4 → 0.11.6

package/src/__tests__/useCSS.test.ts

@@ -1,24 +1,30 @@
-import { afterEach, describe, expect, it } from "vitest"
-import { css } from "../css"
-import { sheet } from "../sheet"
-import { useCSS } from "../useCSS"
+import { afterEach, describe, expect, it } from 'vitest'
+import { css } from '../css'
+import { sheet } from '../sheet'
+import { useCSS } from '../useCSS'
 
-describe("useCSS", () => {
+describe('useCSS', () => {
   afterEach(() => {
     sheet.clearAll()
   })
 
-  describe("basic usage", () => {
-    it("returns a className string for static CSS", () => {
-      const template = css`display: flex;`
+  describe('basic usage', () => {
+    it('returns a className string for static CSS', () => {
+      const template = css`
+        display: flex;
+      `
       const result = useCSS(template)
-      expect(typeof result).toBe("string")
+      expect(typeof result).toBe('string')
       expect(result).toMatch(/^pyr-[0-9a-z]+$/)
     })
 
-    it("returns different classNames for different CSS", () => {
-      const template1 = css`display: flex;`
-      const template2 = css`display: block;`
+    it('returns different classNames for different CSS', () => {
+      const template1 = css`
+        display: flex;
+      `
+      const template2 = css`
+        display: block;
+      `
 
       const r1 = useCSS(template1)
       const r2 = useCSS(template2)
@@ -28,115 +34,139 @@ describe("useCSS", () => {
       expect(r1).not.toBe(r2)
     })
 
-    it("returns empty string for empty CSS", () => {
+    it('returns empty string for empty CSS', () => {
       const template = css``
       const result = useCSS(template)
-      expect(result).toBe("")
+      expect(result).toBe('')
     })
 
-    it("returns empty string for whitespace-only CSS", () => {
-      const template = css`   `
+    it('returns empty string for whitespace-only CSS', () => {
+      const template = css``
       const result = useCSS(template)
-      expect(result).toBe("")
+      expect(result).toBe('')
     })
   })
 
-  describe("dynamic values", () => {
-    it("works with static interpolation values", () => {
-      const color = "red"
-      const template = css`color: ${color};`
+  describe('dynamic values', () => {
+    it('works with static interpolation values', () => {
+      const color = 'red'
+      const template = css`
+        color: ${color};
+      `
       const result = useCSS(template)
       expect(result).toMatch(/^pyr-[0-9a-z]+$/)
     })
 
-    it("works with function interpolations resolved via props", () => {
-      const template = css`color: ${(p: any) => p.color};`
-      const result = useCSS(template, { color: "blue" })
+    it('works with function interpolations resolved via props', () => {
+      const template = css`
+        color: ${(p: any) => p.color};
+      `
+      const result = useCSS(template, { color: 'blue' })
       expect(result).toMatch(/^pyr-[0-9a-z]+$/)
     })
 
-    it("different prop values produce different classNames", () => {
-      const template = css`color: ${(p: any) => p.color};`
+    it('different prop values produce different classNames', () => {
+      const template = css`
+        color: ${(p: any) => p.color};
+      `
 
-      const r1 = useCSS(template, { color: "red" })
-      const r2 = useCSS(template, { color: "green" })
+      const r1 = useCSS(template, { color: 'red' })
+      const r2 = useCSS(template, { color: 'green' })
 
       expect(r1).not.toBe(r2)
     })
   })
 
-  describe("caching", () => {
-    it("same CSS returns same className on repeated calls", () => {
-      const template = css`display: flex;`
+  describe('caching', () => {
+    it('same CSS returns same className on repeated calls', () => {
+      const template = css`
+        display: flex;
+      `
       const cls1 = useCSS(template)
       const cls2 = useCSS(template)
       expect(cls1).toBe(cls2)
     })
 
-    it("same dynamic CSS with same props returns same className", () => {
-      const template = css`color: ${(p: any) => p.color};`
-      const cls1 = useCSS(template, { color: "red" })
-      const cls2 = useCSS(template, { color: "red" })
+    it('same dynamic CSS with same props returns same className', () => {
+      const template = css`
+        color: ${(p: any) => p.color};
+      `
+      const cls1 = useCSS(template, { color: 'red' })
+      const cls2 = useCSS(template, { color: 'red' })
       expect(cls1).toBe(cls2)
     })
   })
 
-  describe("cache hit path", () => {
-    it("reuses cached className with identical resolved CSS", () => {
-      const template = css`color: ${(p: any) => p.color};`
-      const cls1 = useCSS(template, { color: "red" })
-      const cls2 = useCSS(template, { color: "red" })
+  describe('cache hit path', () => {
+    it('reuses cached className with identical resolved CSS', () => {
+      const template = css`
+        color: ${(p: any) => p.color};
+      `
+      const cls1 = useCSS(template, { color: 'red' })
+      const cls2 = useCSS(template, { color: 'red' })
       expect(cls1).toBe(cls2)
       expect(cls1).toMatch(/^pyr-/)
     })
 
-    it("updates className when resolved CSS changes", () => {
-      const template = css`color: ${(p: any) => p.color};`
-      const cls1 = useCSS(template, { color: "red" })
-      const cls2 = useCSS(template, { color: "blue" })
+    it('updates className when resolved CSS changes', () => {
+      const template = css`
+        color: ${(p: any) => p.color};
+      `
+      const cls1 = useCSS(template, { color: 'red' })
+      const cls2 = useCSS(template, { color: 'blue' })
       expect(cls1).not.toBe(cls2)
     })
   })
 
-  describe("boost parameter", () => {
-    it("does not throw when boost is true", () => {
-      const template = css`display: flex;`
+  describe('boost parameter', () => {
+    it('does not throw when boost is true', () => {
+      const template = css`
+        display: flex;
+      `
       const result = useCSS(template, undefined, true)
       expect(result).toMatch(/^pyr-[0-9a-z]+$/)
     })
 
-    it("does not throw when boost is false", () => {
-      const template = css`display: flex;`
+    it('does not throw when boost is false', () => {
+      const template = css`
+        display: flex;
+      `
       const result = useCSS(template, undefined, false)
       expect(result).toMatch(/^pyr-[0-9a-z]+$/)
     })
   })
 
-  describe("without theme and without props", () => {
-    it("uses empty object when no props and no theme", () => {
-      const template = css`display: flex;`
+  describe('without theme and without props', () => {
+    it('uses empty object when no props and no theme', () => {
+      const template = css`
+        display: flex;
+      `
       const result = useCSS(template)
       expect(result).toMatch(/^pyr-[0-9a-z]+$/)
     })
 
-    it("handles dynamic template without theme or props", () => {
-      const template = css`color: ${(p: any) => p.color ?? "red"};`
+    it('handles dynamic template without theme or props', () => {
+      const template = css`
+        color: ${(p: any) => p.color ?? 'red'};
+      `
       const result = useCSS(template, undefined)
       expect(result).toMatch(/^pyr-/)
     })
   })
 
-  describe("empty CSS from dynamic resolution", () => {
-    it("returns empty className when dynamic CSS resolves to empty", () => {
-      const template = css`${(p: any) => (p.color ? `color: ${p.color};` : "")}`
+  describe('empty CSS from dynamic resolution', () => {
+    it('returns empty className when dynamic CSS resolves to empty', () => {
+      const template = css`
+        ${(p: any) => (p.color ? `color: ${p.color};` : '')}
+      `
 
       // First call: non-empty CSS
-      const cls1 = useCSS(template, { color: "red" })
+      const cls1 = useCSS(template, { color: 'red' })
       expect(cls1).toMatch(/^pyr-/)
 
       // Second call: empty CSS
       const cls2 = useCSS(template, { color: undefined })
-      expect(cls2).toBe("")
+      expect(cls2).toBe('')
     })
   })
 })

package/src/css.ts

@@ -1,4 +1,4 @@
-import { CSSResult, type Interpolation } from "./resolve"
+import { CSSResult, type Interpolation } from './resolve'
 
 /**
  * Tagged template function for CSS. Captures the template strings and

package/src/forward.ts

@@ -7,189 +7,189 @@
 // Common HTML attributes, event handlers, and ARIA/data attributes
 const HTML_PROPS = new Set([
   // Core props
-  "className",
-  "class",
-  "dangerouslySetInnerHTML",
-  "htmlFor",
-  "id",
-  "key",
-  "ref",
-  "style",
-  "tabIndex",
-  "role",
+  'className',
+  'class',
+  'dangerouslySetInnerHTML',
+  'htmlFor',
+  'id',
+  'key',
+  'ref',
+  'style',
+  'tabIndex',
+  'role',
   // Event handlers
-  "onAbort",
-  "onAnimationEnd",
-  "onAnimationIteration",
-  "onAnimationStart",
-  "onBlur",
-  "onChange",
-  "onClick",
-  "onCompositionEnd",
-  "onCompositionStart",
-  "onCompositionUpdate",
-  "onContextMenu",
-  "onCopy",
-  "onCut",
-  "onDoubleClick",
-  "onDrag",
-  "onDragEnd",
-  "onDragEnter",
-  "onDragLeave",
-  "onDragOver",
-  "onDragStart",
-  "onDrop",
-  "onError",
-  "onFocus",
-  "onInput",
-  "onKeyDown",
-  "onKeyPress",
-  "onKeyUp",
-  "onLoad",
-  "onMouseDown",
-  "onMouseEnter",
-  "onMouseLeave",
-  "onMouseMove",
-  "onMouseOut",
-  "onMouseOver",
-  "onMouseUp",
-  "onPaste",
-  "onPointerCancel",
-  "onPointerDown",
-  "onPointerEnter",
-  "onPointerLeave",
-  "onPointerMove",
-  "onPointerOut",
-  "onPointerOver",
-  "onPointerUp",
-  "onScroll",
-  "onSelect",
-  "onSubmit",
-  "onTouchCancel",
-  "onTouchEnd",
-  "onTouchMove",
-  "onTouchStart",
-  "onTransitionEnd",
-  "onWheel",
+  'onAbort',
+  'onAnimationEnd',
+  'onAnimationIteration',
+  'onAnimationStart',
+  'onBlur',
+  'onChange',
+  'onClick',
+  'onCompositionEnd',
+  'onCompositionStart',
+  'onCompositionUpdate',
+  'onContextMenu',
+  'onCopy',
+  'onCut',
+  'onDoubleClick',
+  'onDrag',
+  'onDragEnd',
+  'onDragEnter',
+  'onDragLeave',
+  'onDragOver',
+  'onDragStart',
+  'onDrop',
+  'onError',
+  'onFocus',
+  'onInput',
+  'onKeyDown',
+  'onKeyPress',
+  'onKeyUp',
+  'onLoad',
+  'onMouseDown',
+  'onMouseEnter',
+  'onMouseLeave',
+  'onMouseMove',
+  'onMouseOut',
+  'onMouseOver',
+  'onMouseUp',
+  'onPaste',
+  'onPointerCancel',
+  'onPointerDown',
+  'onPointerEnter',
+  'onPointerLeave',
+  'onPointerMove',
+  'onPointerOut',
+  'onPointerOver',
+  'onPointerUp',
+  'onScroll',
+  'onSelect',
+  'onSubmit',
+  'onTouchCancel',
+  'onTouchEnd',
+  'onTouchMove',
+  'onTouchStart',
+  'onTransitionEnd',
+  'onWheel',
   // HTML attributes
-  "accept",
-  "acceptCharset",
-  "accessKey",
-  "action",
-  "allow",
-  "allowFullScreen",
-  "alt",
-  "as",
-  "async",
-  "autoCapitalize",
-  "autoComplete",
-  "autoCorrect",
-  "autoFocus",
-  "autoPlay",
-  "capture",
-  "cellPadding",
-  "cellSpacing",
-  "charSet",
-  "checked",
-  "cite",
-  "cols",
-  "colSpan",
-  "content",
-  "contentEditable",
-  "controls",
-  "controlsList",
-  "coords",
-  "crossOrigin",
-  "dateTime",
-  "decoding",
-  "default",
-  "defaultChecked",
-  "defaultValue",
-  "defer",
-  "dir",
-  "disabled",
-  "disablePictureInPicture",
-  "disableRemotePlayback",
-  "download",
-  "draggable",
-  "encType",
-  "enterKeyHint",
-  "fetchPriority",
-  "form",
-  "formAction",
-  "formEncType",
-  "formMethod",
-  "formNoValidate",
-  "formTarget",
-  "frameBorder",
-  "headers",
-  "height",
-  "hidden",
-  "high",
-  "href",
-  "hrefLang",
-  "httpEquiv",
-  "inputMode",
-  "integrity",
-  "is",
-  "label",
-  "lang",
-  "list",
-  "loading",
-  "loop",
-  "low",
-  "max",
-  "maxLength",
-  "media",
-  "method",
-  "min",
-  "minLength",
-  "multiple",
-  "muted",
-  "name",
-  "noModule",
-  "noValidate",
-  "nonce",
-  "open",
-  "optimum",
-  "pattern",
-  "placeholder",
-  "playsInline",
-  "poster",
-  "preload",
-  "readOnly",
-  "referrerPolicy",
-  "rel",
-  "required",
-  "reversed",
-  "rows",
-  "rowSpan",
-  "sandbox",
-  "scope",
-  "scoped",
-  "scrolling",
-  "selected",
-  "shape",
-  "size",
-  "sizes",
-  "slot",
-  "span",
-  "spellCheck",
-  "src",
-  "srcDoc",
-  "srcLang",
-  "srcSet",
-  "start",
-  "step",
-  "summary",
-  "target",
-  "title",
-  "translate",
-  "type",
-  "useMap",
-  "value",
-  "width",
-  "wrap",
+  'accept',
+  'acceptCharset',
+  'accessKey',
+  'action',
+  'allow',
+  'allowFullScreen',
+  'alt',
+  'as',
+  'async',
+  'autoCapitalize',
+  'autoComplete',
+  'autoCorrect',
+  'autoFocus',
+  'autoPlay',
+  'capture',
+  'cellPadding',
+  'cellSpacing',
+  'charSet',
+  'checked',
+  'cite',
+  'cols',
+  'colSpan',
+  'content',
+  'contentEditable',
+  'controls',
+  'controlsList',
+  'coords',
+  'crossOrigin',
+  'dateTime',
+  'decoding',
+  'default',
+  'defaultChecked',
+  'defaultValue',
+  'defer',
+  'dir',
+  'disabled',
+  'disablePictureInPicture',
+  'disableRemotePlayback',
+  'download',
+  'draggable',
+  'encType',
+  'enterKeyHint',
+  'fetchPriority',
+  'form',
+  'formAction',
+  'formEncType',
+  'formMethod',
+  'formNoValidate',
+  'formTarget',
+  'frameBorder',
+  'headers',
+  'height',
+  'hidden',
+  'high',
+  'href',
+  'hrefLang',
+  'httpEquiv',
+  'inputMode',
+  'integrity',
+  'is',
+  'label',
+  'lang',
+  'list',
+  'loading',
+  'loop',
+  'low',
+  'max',
+  'maxLength',
+  'media',
+  'method',
+  'min',
+  'minLength',
+  'multiple',
+  'muted',
+  'name',
+  'noModule',
+  'noValidate',
+  'nonce',
+  'open',
+  'optimum',
+  'pattern',
+  'placeholder',
+  'playsInline',
+  'poster',
+  'preload',
+  'readOnly',
+  'referrerPolicy',
+  'rel',
+  'required',
+  'reversed',
+  'rows',
+  'rowSpan',
+  'sandbox',
+  'scope',
+  'scoped',
+  'scrolling',
+  'selected',
+  'shape',
+  'size',
+  'sizes',
+  'slot',
+  'span',
+  'spellCheck',
+  'src',
+  'srcDoc',
+  'srcLang',
+  'srcSet',
+  'start',
+  'step',
+  'summary',
+  'target',
+  'title',
+  'translate',
+  'type',
+  'useMap',
+  'value',
+  'width',
+  'wrap',
 ])
 
 /**
@@ -204,10 +204,10 @@ export const filterProps = (props: Record<string, unknown>): Record<string, unkn
     if (key.charCodeAt(0) === 36) continue // '$'
 
     // Skip `as` prop — handled separately by styled
-    if (key === "as") continue
+    if (key === 'as') continue
 
     // Keep data-* and aria-* attributes
-    if (key.startsWith("data-") || key.startsWith("aria-")) {
+    if (key.startsWith('data-') || key.startsWith('aria-')) {
       filtered[key] = props[key]
       continue
     }
@@ -246,7 +246,7 @@ export const buildProps = (
   // Component target — forward all props except as/className/class and $-prefixed
   if (!isDOM) {
     for (const key in rawProps) {
-      if (key === "as" || key === "className" || key === "class") continue
+      if (key === 'as' || key === 'className' || key === 'class') continue
       if (key.charCodeAt(0) === 36) continue // $-prefixed transient
       result[key] = rawProps[key]
     }
@@ -256,7 +256,7 @@ export const buildProps = (
   // DOM element with custom shouldForwardProp
   if (customFilter) {
     for (const key in rawProps) {
-      if (key === "as" || key === "className" || key === "class") continue
+      if (key === 'as' || key === 'className' || key === 'class') continue
       if (customFilter(key)) result[key] = rawProps[key]
     }
     return result
@@ -264,9 +264,9 @@ export const buildProps = (
 
   // DOM element with default filtering
   for (const key in rawProps) {
-    if (key === "as" || key === "className" || key === "class") continue
+    if (key === 'as' || key === 'className' || key === 'class') continue
     if (key.charCodeAt(0) === 36) continue // $-prefixed transient
-    if (key.startsWith("data-") || key.startsWith("aria-")) {
+    if (key.startsWith('data-') || key.startsWith('aria-')) {
       result[key] = rawProps[key]
       continue
     }