@cwcss/crosswind 0.1.5 → 0.2.0

package/test/layout.test.ts

@@ -1,404 +0,0 @@
-import { describe, expect, it } from 'bun:test'
-import { defaultConfig } from '../src/config'
-import { CSSGenerator } from '../src/generator'
-
-describe('Layout Utilities', () => {
-  describe('Display', () => {
-    it('should generate block', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('block')
-      expect(gen.toCSS(false)).toContain('display: block;')
-    })
-
-    it('should generate inline-block', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('inline-block')
-      expect(gen.toCSS(false)).toContain('display: inline-block;')
-    })
-
-    it('should generate hidden', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('hidden')
-      expect(gen.toCSS(false)).toContain('display: none;')
-    })
-  })
-
-  describe('Position', () => {
-    it('should generate absolute', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('absolute')
-      expect(gen.toCSS(false)).toContain('position: absolute;')
-    })
-
-    it('should generate relative', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('relative')
-      expect(gen.toCSS(false)).toContain('position: relative;')
-    })
-
-    it('should generate fixed', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('fixed')
-      expect(gen.toCSS(false)).toContain('position: fixed;')
-    })
-
-    it('should generate sticky', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('sticky')
-      expect(gen.toCSS(false)).toContain('position: sticky;')
-    })
-  })
-
-  describe('Inset', () => {
-    it('should generate top-4', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('top-4')
-      expect(gen.toCSS(false)).toContain('top: 1rem;')
-    })
-
-    it('should generate right-0', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('right-0')
-      expect(gen.toCSS(false)).toContain('right: 0;')
-    })
-
-    it('should generate bottom-2', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('bottom-2')
-      expect(gen.toCSS(false)).toContain('bottom: 0.5rem;')
-    })
-
-    it('should generate left-8', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('left-8')
-      expect(gen.toCSS(false)).toContain('left: 2rem;')
-    })
-
-    it('should generate inset-0', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('inset-0')
-      const css = gen.toCSS(false)
-      expect(css).toContain('top: 0;')
-      expect(css).toContain('right: 0;')
-      expect(css).toContain('bottom: 0;')
-      expect(css).toContain('left: 0;')
-    })
-
-    it('should generate negative top', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('-top-4')
-      expect(gen.toCSS(false)).toContain('top: -1rem;')
-    })
-
-    it('should generate left-1/2 as 50%', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('left-1/2')
-      expect(gen.toCSS(false)).toContain('left: 50%;')
-    })
-
-    it('should generate top-1/3 as 33.333333%', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('top-1/3')
-      expect(gen.toCSS(false)).toContain('top: 33.33333333333333%;')
-    })
-
-    it('should generate right-3/4 as 75%', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('right-3/4')
-      expect(gen.toCSS(false)).toContain('right: 75%;')
-    })
-
-    it('should generate negative -left-1/2 as -50%', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('-left-1/2')
-      expect(gen.toCSS(false)).toContain('left: -50%;')
-    })
-
-    it('should generate left-full as 100%', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('left-full')
-      expect(gen.toCSS(false)).toContain('left: 100%;')
-    })
-
-    it('should generate top-auto', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('top-auto')
-      expect(gen.toCSS(false)).toContain('top: auto;')
-    })
-  })
-
-  describe('Z-index', () => {
-    it('should generate z-10', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('z-10')
-      expect(gen.toCSS(false)).toContain('z-index: 10;')
-    })
-
-    it('should generate z-0', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('z-0')
-      expect(gen.toCSS(false)).toContain('z-index: 0;')
-    })
-
-    it('should generate z-50', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('z-50')
-      expect(gen.toCSS(false)).toContain('z-index: 50;')
-    })
-  })
-
-  describe('Overflow', () => {
-    it('should generate overflow-hidden', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('overflow-hidden')
-      expect(gen.toCSS(false)).toContain('overflow: hidden;')
-    })
-
-    it('should generate overflow-auto', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('overflow-auto')
-      expect(gen.toCSS(false)).toContain('overflow: auto;')
-    })
-
-    it('should generate overflow-scroll', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('overflow-scroll')
-      expect(gen.toCSS(false)).toContain('overflow: scroll;')
-    })
-
-    it('should generate overflow-x-hidden', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('overflow-x-hidden')
-      expect(gen.toCSS(false)).toContain('overflow-x: hidden;')
-    })
-
-    it('should generate overflow-y-auto', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('overflow-y-auto')
-      expect(gen.toCSS(false)).toContain('overflow-y: auto;')
-    })
-  })
-
-  describe('Aspect Ratio', () => {
-    it('should generate aspect-square', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('aspect-square')
-      expect(gen.toCSS(false)).toContain('aspect-ratio: 1 / 1;')
-    })
-
-    it('should generate aspect-video', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('aspect-video')
-      expect(gen.toCSS(false)).toContain('aspect-ratio: 16 / 9;')
-    })
-
-    it('should handle arbitrary aspect ratio', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('aspect-[4/3]')
-      expect(gen.toCSS(false)).toContain('aspect-ratio: 4/3;')
-    })
-
-    it('should handle aspect-auto', () => {
-      const gen = new CSSGenerator(defaultConfig)
-      gen.generate('aspect-auto')
-      expect(gen.toCSS(false)).toContain('aspect-ratio: auto;')
-    })
-  })
-
-  describe('Edge Cases', () => {
-    describe('Inset with extreme values', () => {
-      it('should handle very large positive inset', () => {
-        const gen = new CSSGenerator(defaultConfig)
-        gen.generate('top-[9999px]')
-        expect(gen.toCSS(false)).toContain('top: 9999px;')
-      })
-
-      it('should handle very large negative inset', () => {
-        const gen = new CSSGenerator(defaultConfig)
-        gen.generate('-top-[9999px]')
-        const css = gen.toCSS(false)
-        expect(css).toBeDefined()
-      })
-
-      it('should handle inset with calc()', () => {
-        const gen = new CSSGenerator(defaultConfig)
-        gen.generate('top-[calc(100%-20px)]')
-        expect(gen.toCSS(false)).toContain('top: calc(100%-20px);')
-      })
-
-      it('should handle inset-x-0', () => {
-        const gen = new CSSGenerator(defaultConfig)
-        gen.generate('inset-x-0')
-        const css = gen.toCSS(false)
-        // inset-x is currently parsed as utility "inset" with value "x-0"
-        // This is a known parser limitation - commenting out until fixed
-        expect(css).toBeDefined()
-      })
-
-      it('should handle inset-y-auto', () => {
-        const gen = new CSSGenerator(defaultConfig)
-        gen.generate('inset-y-auto')
-        const css = gen.toCSS(false)
-        // inset-y is currently parsed as utility "inset" with value "y-auto"
-        // This is a known parser limitation - commenting out until fixed
-        expect(css).toBeDefined()
-      })
-
-      it('should handle inset with CSS variables', () => {
-        const gen = new CSSGenerator(defaultConfig)
-        gen.generate('top-[var(--my-top)]')
-        expect(gen.toCSS(false)).toContain('top: var(--my-top);')
-      })
-
-      it('should handle percentage inset values', () => {
-        const gen = new CSSGenerator(defaultConfig)
-        gen.generate('top-[50%]')
-        expect(gen.toCSS(false)).toContain('top: 50%;')
-      })
-
-      it('should handle decimal inset values', () => {
-        const gen = new CSSGenerator(defaultConfig)
-        gen.generate('top-[0.5rem]')
-        expect(gen.toCSS(false)).toContain('top: 0.5rem;')
-      })
-
-      it('should handle negative inset-x', () => {
-        const gen = new CSSGenerator(defaultConfig)
-        gen.generate('-inset-x-4')
-        const css = gen.toCSS(false)
-        // Negative inset-x is currently not supported - known parser limitation
-        expect(css).toBeDefined()
-      })
-
-      it('should handle negative bottom with arbitrary value', () => {
-        const gen = new CSSGenerator(defaultConfig)
-        gen.generate('-bottom-[2.5rem]')
-        const css = gen.toCSS(false)
-        expect(css).toBeDefined()
-      })
-    })
-
-    describe('Z-index edge cases', () => {
-      it('should handle z-auto', () => {
-        const gen = new CSSGenerator(defaultConfig)
-        gen.generate('z-auto')
-        expect(gen.toCSS(false)).toContain('z-index: auto;')
-      })
-
-      it('should handle arbitrary negative z-index', () => {
-        const gen = new CSSGenerator(defaultConfig)
-        gen.generate('z-[-1]')
-        expect(gen.toCSS(false)).toContain('z-index: -1;')
-      })
-
-      it('should handle very large z-index', () => {
-        const gen = new CSSGenerator(defaultConfig)
-        gen.generate('z-[999999]')
-        expect(gen.toCSS(false)).toContain('z-index: 999999;')
-      })
-
-      it('should handle z-index 0', () => {
-        const gen = new CSSGenerator(defaultConfig)
-        gen.generate('z-0')
-        expect(gen.toCSS(false)).toContain('z-index: 0;')
-      })
-    })
-
-    describe('Display with variants', () => {
-      it('should handle display with responsive variant', () => {
-        const gen = new CSSGenerator(defaultConfig)
-        gen.generate('md:block')
-        const css = gen.toCSS(false)
-        expect(css).toContain('@media (min-width: 768px)')
-        expect(css).toContain('display: block;')
-      })
-
-      it('should handle hidden with hover', () => {
-        const gen = new CSSGenerator(defaultConfig)
-        gen.generate('hover:hidden')
-        const css = gen.toCSS(false)
-        expect(css).toContain(':hover')
-        expect(css).toContain('display: none;')
-      })
-
-      it('should handle inline-block with important', () => {
-        const gen = new CSSGenerator(defaultConfig)
-        gen.generate('!inline-block')
-        expect(gen.toCSS(false)).toContain('display: inline-block !important;')
-      })
-    })
-
-    describe('Overflow edge cases', () => {
-      it('should handle overflow-clip', () => {
-        const gen = new CSSGenerator(defaultConfig)
-        gen.generate('overflow-clip')
-        expect(gen.toCSS(false)).toContain('overflow: clip;')
-      })
-
-      it('should handle overflow-visible', () => {
-        const gen = new CSSGenerator(defaultConfig)
-        gen.generate('overflow-visible')
-        expect(gen.toCSS(false)).toContain('overflow: visible;')
-      })
-
-      it('should handle overflow-x-clip', () => {
-        const gen = new CSSGenerator(defaultConfig)
-        gen.generate('overflow-x-clip')
-        expect(gen.toCSS(false)).toContain('overflow-x: clip;')
-      })
-
-      it('should handle overflow-y-visible', () => {
-        const gen = new CSSGenerator(defaultConfig)
-        gen.generate('overflow-y-visible')
-        expect(gen.toCSS(false)).toContain('overflow-y: visible;')
-      })
-    })
-
-    describe('Position with multiple utilities', () => {
-      it('should handle absolute with all insets', () => {
-        const gen = new CSSGenerator(defaultConfig)
-        gen.generate('absolute')
-        gen.generate('inset-0')
-        const css = gen.toCSS(false)
-        expect(css).toContain('position: absolute;')
-        expect(css).toContain('top: 0;')
-        expect(css).toContain('bottom: 0;')
-      })
-
-      it('should handle sticky with top', () => {
-        const gen = new CSSGenerator(defaultConfig)
-        gen.generate('sticky')
-        gen.generate('top-0')
-        const css = gen.toCSS(false)
-        expect(css).toContain('position: sticky;')
-        expect(css).toContain('top: 0;')
-      })
-    })
-
-    describe('Object positioning', () => {
-      it('should handle object-contain', () => {
-        const gen = new CSSGenerator(defaultConfig)
-        gen.generate('object-contain')
-        expect(gen.toCSS(false)).toContain('object-fit: contain;')
-      })
-
-      it('should handle object-cover', () => {
-        const gen = new CSSGenerator(defaultConfig)
-        gen.generate('object-cover')
-        expect(gen.toCSS(false)).toContain('object-fit: cover;')
-      })
-
-      it('should handle object-top', () => {
-        const gen = new CSSGenerator(defaultConfig)
-        gen.generate('object-top')
-        expect(gen.toCSS(false)).toContain('object-position: top;')
-      })
-
-      it('should handle object-center', () => {
-        const gen = new CSSGenerator(defaultConfig)
-        gen.generate('object-center')
-        expect(gen.toCSS(false)).toContain('object-position: center;')
-      })
-    })
-  })
-})