@cwcss/crosswind 0.1.5 → 0.2.0

package/test/spacing.test.ts

@@ -1,394 +0,0 @@
-import { describe, expect, it } from 'bun:test'
-import { defaultConfig } from '../src/config'
-import { CSSGenerator } from '../src/generator'
-import { parseClass } from '../src/parser'
-
-describe('Spacing Utilities', () => {
-  describe('Padding', () => {
-    it('should generate p-4', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('p-4')
-      expect(gen.toCSS(false)).toContain('padding: 1rem;')
-    })
-
-    it('should generate px-4', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('px-4')
-      const css = gen.toCSS(false)
-      expect(css).toContain('padding-left: 1rem;')
-      expect(css).toContain('padding-right: 1rem;')
-    })
-
-    it('should generate py-2', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('py-2')
-      const css = gen.toCSS(false)
-      expect(css).toContain('padding-top: 0.5rem;')
-      expect(css).toContain('padding-bottom: 0.5rem;')
-    })
-
-    it('should generate pt-4', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('pt-4')
-      expect(gen.toCSS(false)).toContain('padding-top: 1rem;')
-    })
-
-    it('should generate pr-8', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('pr-8')
-      expect(gen.toCSS(false)).toContain('padding-right: 2rem;')
-    })
-
-    it('should generate pb-0', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('pb-0')
-      expect(gen.toCSS(false)).toContain('padding-bottom: 0;')
-    })
-
-    it('should generate pl-1', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('pl-1')
-      expect(gen.toCSS(false)).toContain('padding-left: 0.25rem;')
-    })
-  })
-
-  describe('Margin', () => {
-    it('should generate m-4', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('m-4')
-      expect(gen.toCSS(false)).toContain('margin: 1rem;')
-    })
-
-    it('should generate mx-auto', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('mx-auto')
-      const css = gen.toCSS(false)
-      expect(css).toContain('margin-left: auto;')
-      expect(css).toContain('margin-right: auto;')
-    })
-
-    it('should generate my-4', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('my-4')
-      const css = gen.toCSS(false)
-      expect(css).toContain('margin-top: 1rem;')
-      expect(css).toContain('margin-bottom: 1rem;')
-    })
-
-    it('should generate mt-8', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('mt-8')
-      expect(gen.toCSS(false)).toContain('margin-top: 2rem;')
-    })
-
-    it('should generate mr-2', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('mr-2')
-      expect(gen.toCSS(false)).toContain('margin-right: 0.5rem;')
-    })
-
-    it('should generate mb-0', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('mb-0')
-      expect(gen.toCSS(false)).toContain('margin-bottom: 0;')
-    })
-
-    it('should generate ml-1', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('ml-1')
-      expect(gen.toCSS(false)).toContain('margin-left: 0.25rem;')
-    })
-  })
-
-  describe('Negative margins', () => {
-    it('should parse negative margin', () => {
-      const result = parseClass('-m-4')
-      expect(result).toEqual({
-        raw: '-m-4',
-        variants: [],
-        utility: 'm',
-        value: '-4',
-        important: false,
-        arbitrary: false,
-      })
-    })
-
-    it('should generate negative margin CSS', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('-m-4')
-      expect(gen.toCSS(false)).toContain('margin: -1rem;')
-    })
-
-    it('should generate negative margin-top', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('-mt-2')
-      expect(gen.toCSS(false)).toContain('margin-top: -0.5rem;')
-    })
-
-    it('should generate negative margin-left', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('-ml-8')
-      expect(gen.toCSS(false)).toContain('margin-left: -2rem;')
-    })
-
-    it('should handle very large negative margin', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('-m-999')
-      expect(gen.toCSS(false)).toContain('margin: -999;')
-    })
-
-    it('should handle negative arbitrary values', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('-m-[100px]')
-      const css = gen.toCSS(false)
-      expect(css).toBeDefined()
-    })
-  })
-
-  describe('Arbitrary spacing values', () => {
-    it('should support arbitrary padding', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('p-[2.5rem]')
-      expect(gen.toCSS(false)).toContain('padding: 2.5rem;')
-    })
-
-    it('should support arbitrary margin', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('m-[15px]')
-      expect(gen.toCSS(false)).toContain('margin: 15px;')
-    })
-  })
-})
-
-describe('Edge Cases', () => {
-  describe('Zero and auto values', () => {
-    it('should handle p-0', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('p-0')
-      expect(gen.toCSS(false)).toContain('padding: 0;')
-    })
-
-    it('should handle m-auto', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('m-auto')
-      expect(gen.toCSS(false)).toContain('margin: auto;')
-    })
-
-    it('should handle px-0 and py-0', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('px-0')
-      gen.generate('py-0')
-      const css = gen.toCSS(false)
-      expect(css).toContain('padding-left: 0;')
-      expect(css).toContain('padding-right: 0;')
-      expect(css).toContain('padding-top: 0;')
-      expect(css).toContain('padding-bottom: 0;')
-    })
-  })
-
-  describe('Extreme values', () => {
-    it('should handle very large padding', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('p-[500px]')
-      expect(gen.toCSS(false)).toContain('padding: 500px;')
-    })
-
-    it('should handle very large negative margin', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('-m-[500px]')
-      const css = gen.toCSS(false)
-      expect(css).toBeDefined()
-    })
-
-    it('should handle padding with decimal values', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('p-[2.5rem]')
-      expect(gen.toCSS(false)).toContain('padding: 2.5rem;')
-    })
-
-    it('should handle margin with decimal values', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('m-[1.25rem]')
-      expect(gen.toCSS(false)).toContain('margin: 1.25rem;')
-    })
-  })
-
-  describe('CSS functions', () => {
-    it('should handle padding with calc()', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('p-[calc(100%-2rem)]')
-      expect(gen.toCSS(false)).toContain('padding: calc(100%-2rem);')
-    })
-
-    it('should handle margin with calc()', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('m-[calc(50%+10px)]')
-      expect(gen.toCSS(false)).toContain('margin: calc(50%+10px);')
-    })
-
-    it('should handle padding with CSS variables', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('p-[var(--spacing)]')
-      expect(gen.toCSS(false)).toContain('padding: var(--spacing);')
-    })
-
-    it('should handle margin with CSS variables', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('m-[var(--margin-size)]')
-      expect(gen.toCSS(false)).toContain('margin: var(--margin-size);')
-    })
-  })
-
-  describe('Negative values comprehensive', () => {
-    it('should handle negative px', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('-px-4')
-      const css = gen.toCSS(false)
-      expect(css).toContain('padding-left: -1rem;')
-      expect(css).toContain('padding-right: -1rem;')
-    })
-
-    it('should handle negative py', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('-py-4')
-      const css = gen.toCSS(false)
-      expect(css).toContain('padding-top: -1rem;')
-      expect(css).toContain('padding-bottom: -1rem;')
-    })
-
-    it('should handle negative mx', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('-mx-8')
-      const css = gen.toCSS(false)
-      expect(css).toContain('margin-left: -2rem;')
-      expect(css).toContain('margin-right: -2rem;')
-    })
-
-    it('should handle negative my', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('-my-8')
-      const css = gen.toCSS(false)
-      expect(css).toContain('margin-top: -2rem;')
-      expect(css).toContain('margin-bottom: -2rem;')
-    })
-
-    it('should handle -m-0 (negative zero)', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('-m-0')
-      const css = gen.toCSS(false)
-      expect(css).toContain('margin: 0;')
-    })
-  })
-
-  describe('Percentage and viewport units', () => {
-    it('should handle padding with percentage', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('p-[10%]')
-      expect(gen.toCSS(false)).toContain('padding: 10%;')
-    })
-
-    it('should handle margin with vw', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('m-[5vw]')
-      expect(gen.toCSS(false)).toContain('margin: 5vw;')
-    })
-
-    it('should handle padding with vh', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('p-[10vh]')
-      expect(gen.toCSS(false)).toContain('padding: 10vh;')
-    })
-  })
-
-  describe('With variants', () => {
-    it('should handle spacing with important', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('!p-4')
-      expect(gen.toCSS(false)).toContain('padding: 1rem !important;')
-    })
-
-    it('should handle negative margin with important', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('!-m-4')
-      expect(gen.toCSS(false)).toContain('margin: -1rem !important;')
-    })
-
-    it('should handle spacing with hover', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('hover:p-8')
-      const css = gen.toCSS(false)
-      expect(css).toContain(':hover')
-      expect(css).toContain('padding: 2rem;')
-    })
-
-    it('should handle spacing with responsive', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('md:p-6')
-      const css = gen.toCSS(false)
-      expect(css).toContain('@media (min-width: 768px)')
-      expect(css).toContain('padding: 1.5rem;')
-    })
-  })
-
-  describe('Individual side combinations', () => {
-    it('should handle all four sides independently', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('pt-1')
-      gen.generate('pr-2')
-      gen.generate('pb-3')
-      gen.generate('pl-4')
-      const css = gen.toCSS(false)
-      expect(css).toContain('padding-top: 0.25rem;')
-      expect(css).toContain('padding-right: 0.5rem;')
-      expect(css).toContain('padding-bottom: 0.75rem;')
-      expect(css).toContain('padding-left: 1rem;')
-    })
-
-    it('should handle mixed negative margins', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('-mt-4')
-      gen.generate('mr-4')
-      gen.generate('-mb-4')
-      gen.generate('ml-4')
-      const css = gen.toCSS(false)
-      expect(css).toContain('margin-top: -1rem;')
-      expect(css).toContain('margin-right: 1rem;')
-      expect(css).toContain('margin-bottom: -1rem;')
-      expect(css).toContain('margin-left: 1rem;')
-    })
-  })
-
-  describe('Edge cases', () => {
-    it('should handle zero spacing', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('p-0')
-      gen.generate('m-0')
-      const css = gen.toCSS(false)
-      expect(css).toContain('0')
-    })
-
-    it('should handle negative zero', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('-m-0')
-      gen.generate('-p-0')
-      const css = gen.toCSS(false)
-      expect(css).toContain('margin')
-    })
-
-    it('should handle decimal spacing values', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('p-0.5')
-      gen.generate('m-2.5')
-      const css = gen.toCSS(false)
-      expect(css.length).toBeGreaterThan(0)
-    })
-
-    it('should handle negative fractional spacing', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('-m-1/2')
-      gen.generate('-translate-x-1/2')
-      const css = gen.toCSS(false)
-      expect(css).toContain('-')
-    })
-  })
-})

package/test/transformer-compile-class.test.ts

@@ -1,287 +0,0 @@
-import { describe, expect, it } from 'bun:test'
-import {
-  CompileClassTransformer,
-  extractCompileClasses,
-  generateCompiledClassNames,
-  transformContent,
-} from '../src/transformer-compile-class'
-
-describe('Compile Class Transformer', () => {
-  describe('extractCompileClasses', () => {
-    it('should extract classes with default trigger', () => {
-      const content = '<div class=":hw: text-center sm:text-left">Content</div>'
-      const result = extractCompileClasses(content)
-
-      expect(result.size).toBe(1)
-      const classes = Array.from(result.values())[0]
-      expect(classes.sort()).toEqual(['sm:text-left', 'text-center'])
-    })
-
-    it('should extract classes with custom trigger', () => {
-      const content = '<div class=":hw: p-4 m-2">Content</div>'
-      const result = extractCompileClasses(content, { trigger: ':hw:' })
-
-      expect(result.size).toBe(1)
-      const classes = Array.from(result.values())[0]
-      expect(classes.sort()).toEqual(['m-2', 'p-4'])
-    })
-
-    it('should handle multiple elements', () => {
-      const content = `
-        <div class=":hw: text-center sm:text-left">
-          <span class=":hw: font-bold text-red-500">Text</span>
-        </div>
-      `
-      const result = extractCompileClasses(content)
-
-      expect(result.size).toBe(2)
-    })
-
-    it('should ignore elements without trigger', () => {
-      const content = `
-        <div class="regular-class another-class">
-          <span class=":hw: compiled-class">Compiled</span>
-        </div>
-      `
-      const result = extractCompileClasses(content)
-
-      expect(result.size).toBe(1)
-      const classes = Array.from(result.values())[0]
-      expect(classes.sort()).toEqual(['compiled-class'])
-    })
-
-    it('should handle className attribute (React)', () => {
-      const content = '<div className=":hw: flex items-center">Content</div>'
-      const result = extractCompileClasses(content)
-
-      expect(result.size).toBe(1)
-      const classes = Array.from(result.values())[0]
-      expect(classes.sort()).toEqual(['flex', 'items-center'])
-    })
-
-    it('should deduplicate identical class groups', () => {
-      const content = `
-        <div class=":hw: p-4 m-2">First</div>
-        <div class=":hw: m-2 p-4">Second</div>
-      `
-      const result = extractCompileClasses(content)
-
-      // Should be 1 because both have same classes (order doesn't matter after sorting)
-      expect(result.size).toBe(1)
-    })
-  })
-
-  describe('generateCompiledClassNames', () => {
-    it('should generate unique class names', () => {
-      const compiledClasses = new Map([
-        ['text-center sm:text-left', ['text-center', 'sm:text-left']],
-        ['p-4 m-2', ['p-4', 'm-2']],
-      ])
-
-      const result = generateCompiledClassNames(compiledClasses)
-
-      expect(result.size).toBe(2)
-      for (const className of result.values()) {
-        expect(className).toMatch(/^hw-[a-z0-9]+$/)
-      }
-    })
-
-    it('should use custom prefix', () => {
-      const compiledClasses = new Map([
-        ['text-center', ['text-center']],
-      ])
-
-      const result = generateCompiledClassNames(compiledClasses, {
-        classPrefix: 'hw-',
-      })
-
-      const className = Array.from(result.values())[0]
-      expect(className).toMatch(/^hw-[a-z0-9]+$/)
-    })
-
-    it('should generate same hash for same content', () => {
-      const compiledClasses = new Map([
-        ['text-center sm:text-left', ['text-center', 'sm:text-left']],
-      ])
-
-      const result1 = generateCompiledClassNames(compiledClasses)
-      const result2 = generateCompiledClassNames(compiledClasses)
-
-      expect(Array.from(result1.values())[0]).toBe(Array.from(result2.values())[0])
-    })
-  })
-
-  describe('transformContent', () => {
-    it('should replace compile markers with generated class names', () => {
-      const content = '<div class=":hw: text-center sm:text-left">Content</div>'
-      const classMap = new Map([
-        ['sm:text-left text-center', 'hw-abc123'],
-      ])
-
-      const result = transformContent(content, classMap)
-
-      expect(result).toBe('<div class="hw-abc123">Content</div>')
-    })
-
-    it('should handle multiple replacements', () => {
-      const content = `
-        <div class=":hw: p-4 m-2">First</div>
-        <span class=":hw: font-bold">Second</span>
-      `
-      const classMap = new Map([
-        ['m-2 p-4', 'hw-abc'],
-        ['font-bold', 'hw-def'],
-      ])
-
-      const result = transformContent(content, classMap)
-
-      expect(result).toContain('class="hw-abc"')
-      expect(result).toContain('class="hw-def"')
-      expect(result).not.toContain(':hw:')
-    })
-
-    it('should preserve non-compile classes', () => {
-      const content = '<div class="regular-class another-class">Content</div>'
-      const classMap = new Map()
-
-      const result = transformContent(content, classMap)
-
-      expect(result).toBe(content)
-    })
-
-    it('should handle className attribute', () => {
-      const content = '<div className=":hw: flex items-center">Content</div>'
-      const classMap = new Map([
-        ['flex items-center', 'hw-xyz'],
-      ])
-
-      const result = transformContent(content, classMap)
-
-      expect(result).toBe('<div className="hw-xyz">Content</div>')
-    })
-  })
-
-  describe('CompileClassTransformer', () => {
-    it('should process file and extract compile classes', () => {
-      const transformer = new CompileClassTransformer()
-      const content = '<div class=":hw: text-center sm:text-left">Content</div>'
-
-      const result = transformer.processFile(content)
-
-      expect(result.hasChanges).toBe(true)
-      expect(result.content).not.toContain(':hw:')
-      expect(result.content).toMatch(/class="hw-[a-z0-9]+"/)
-    })
-
-    it('should not modify content without compile markers', () => {
-      const transformer = new CompileClassTransformer()
-      const content = '<div class="regular-class">Content</div>'
-
-      const result = transformer.processFile(content)
-
-      expect(result.hasChanges).toBe(false)
-      expect(result.content).toBe(content)
-    })
-
-    it('should accumulate compiled classes across multiple files', () => {
-      const transformer = new CompileClassTransformer()
-
-      transformer.processFile('<div class=":hw: p-4 m-2">File 1</div>')
-      transformer.processFile('<div class=":hw: font-bold">File 2</div>')
-
-      const compiledClasses = transformer.getCompiledClasses()
-      expect(compiledClasses.size).toBe(2)
-    })
-
-    it('should deduplicate identical class groups across files', () => {
-      const transformer = new CompileClassTransformer()
-
-      transformer.processFile('<div class=":hw: p-4 m-2">File 1</div>')
-      transformer.processFile('<div class=":hw: m-2 p-4">File 2</div>')
-
-      const compiledClasses = transformer.getCompiledClasses()
-      expect(compiledClasses.size).toBe(1)
-    })
-
-    it('should provide accurate statistics', () => {
-      const transformer = new CompileClassTransformer()
-
-      transformer.processFile('<div class=":hw: p-4 m-2">File 1</div>')
-      transformer.processFile('<div class=":hw: font-bold text-sm">File 2</div>')
-
-      const stats = transformer.getStats()
-      expect(stats.totalGroups).toBe(2)
-      expect(stats.totalUtilities).toBe(4) // p-4, m-2, font-bold, text-sm
-      expect(stats.averageUtilitiesPerGroup).toBe(2)
-    })
-
-    it('should reset state correctly', () => {
-      const transformer = new CompileClassTransformer()
-
-      transformer.processFile('<div class=":hw: p-4 m-2">Content</div>')
-      expect(transformer.getCompiledClasses().size).toBe(1)
-
-      transformer.reset()
-      expect(transformer.getCompiledClasses().size).toBe(0)
-    })
-
-    it('should use custom options', () => {
-      const transformer = new CompileClassTransformer({
-        trigger: ':hw:',
-        classPrefix: 'crosswind-',
-      })
-
-      const content = '<div class=":hw: p-4 m-2">Content</div>'
-      const result = transformer.processFile(content)
-
-      expect(result.hasChanges).toBe(true)
-      expect(result.content).toMatch(/class="crosswind-[a-z0-9]+"/)
-    })
-  })
-
-  describe('Edge Cases', () => {
-    it('should handle empty trigger marker', () => {
-      const content = '<div class=":hw: ">Content</div>'
-      const result = extractCompileClasses(content)
-
-      expect(result.size).toBe(0)
-    })
-
-    it('should handle trigger with extra spaces', () => {
-      const content = '<div class=":hw:   p-4   m-2  ">Content</div>'
-      const result = extractCompileClasses(content)
-
-      expect(result.size).toBe(1)
-      const classes = Array.from(result.values())[0]
-      expect(classes.sort()).toEqual(['m-2', 'p-4'])
-    })
-
-    it('should handle single class', () => {
-      const content = '<div class=":hw: single-class">Content</div>'
-      const result = extractCompileClasses(content)
-
-      expect(result.size).toBe(1)
-      const classes = Array.from(result.values())[0]
-      expect(classes.sort()).toEqual(['single-class'])
-    })
-
-    it('should handle classes with special characters', () => {
-      const content = '<div class=":hw: hover:bg-blue-500 md:w-1/2">Content</div>'
-      const result = extractCompileClasses(content)
-
-      expect(result.size).toBe(1)
-      const classes = Array.from(result.values())[0].sort()
-      expect(classes).toContain('hover:bg-blue-500')
-      expect(classes).toContain('md:w-1/2')
-    })
-
-    it('should handle single quotes', () => {
-      const content = '<div class=\':hw: p-4 m-2\'>Content</div>'
-      const result = extractCompileClasses(content)
-
-      expect(result.size).toBe(1)
-      const classes = Array.from(result.values())[0]
-      expect(classes.sort()).toEqual(['m-2', 'p-4'])
-    })
-  })
-})