chore: cascade order improvements

Author: chrisbbreuer

packages/crosswind/src/generator.ts

@@ -2393,11 +2393,42 @@ export class CSSGenerator {
     return minify ? parts.join('') : parts.join('\n\n')
   }
 
+  /**
+   * Rank a rule by utility specificity so shorthands emit BEFORE directional
+   * utilities. Without this, class authoring order decides the cascade and
+   * combinations like `m-0 mx-auto` silently break (the shorthand resets
+   * the auto margins). Matches Tailwind's own stylesheet ordering.
+   *
+   * 0 — shorthand (`m-*`, `p-*`, `border`, `rounded`, `inset-*`)
+   * 1 — axis     (`mx-*`, `my-*`, `px-*`, `py-*`, `inset-x-*`, corner radii)
+   * 2 — side     (`mt-*`, `mr-*`, `pt-*`, `top-*`, `border-t-*`, …)
+   */
+  private getUtilityRank(selector: string): number {
+    const m = selector.match(/\.(?:[a-zA-Z0-9_-]*\\?:)*([a-zA-Z0-9_-]+)/)
+    if (!m) return 0
+    const cls = m[1]
+    if (/^(?:mx|my|px|py|inset-x|inset-y|border-x|border-y|scroll-mx|scroll-my|scroll-px|scroll-py|space-x|space-y)-/.test(cls)
+      || /^rounded-(?:[tlbr]|tl|tr|bl|br)(?:-|$)/.test(cls)) {
+      return 1
+    }
+    if (/^(?:mt|mr|mb|ml|pt|pr|pb|pl|top|right|bottom|left|border-t|border-r|border-b|border-l|scroll-mt|scroll-mr|scroll-mb|scroll-ml|scroll-pt|scroll-pr|scroll-pb|scroll-pl)-/.test(cls)) {
+      return 2
+    }
+    return 0
+  }
+
   /**
    * Convert rules to CSS string
   */
   private rulesToCSS(rules: CSSRule[], minify: boolean): string {
-    const grouped = this.groupRulesBySelector(rules)
+    // Stable sort by utility rank so shorthand utilities emit before their
+    // axis/side counterparts. Stable so that within the same rank, original
+    // insertion order (which drives other cascade semantics) is preserved.
+    const ranked = rules.map((r, i) => ({ r, i, rank: this.getUtilityRank(r.selector) }))
+    ranked.sort((a, b) => a.rank - b.rank || a.i - b.i)
+    const sorted = ranked.map(x => x.r)
+
+    const grouped = this.groupRulesBySelector(sorted)
     const parts: string[] = []
 
     for (const [selector, properties] of grouped.entries()) {

packages/crosswind/test/spacing.test.ts

@@ -526,4 +526,52 @@ describe('Edge Cases', () => {
       expect(css).toContain('-')
     })
   })
+
+  // ============================================================================
+  // Regression: Tailwind-style cascade ordering. Shorthand utilities (`m-0`,
+  // `p-0`, etc.) MUST emit before directional counterparts (`mx-auto`) so that
+  // a combination like `class="m-0 mx-auto"` keeps the auto margins — the
+  // shorthand coming last would otherwise reset them and silently break
+  // horizontal centering.
+  // ============================================================================
+  describe('Cascade order — shorthand vs directional', () => {
+    it('emits m-0 BEFORE mx-auto regardless of generate() order', () => {
+      const gen = new CSSGenerator(defaultConfig)
+      // Authoring order: mx-auto first, m-0 second — the buggy case
+      gen.generate('mx-auto')
+      gen.generate('m-0')
+      const css = gen.toCSS(false)
+      const mPos = css.indexOf('.m-0')
+      const mxPos = css.indexOf('.mx-auto')
+      expect(mPos).toBeGreaterThan(-1)
+      expect(mxPos).toBeGreaterThan(-1)
+      // mx-auto must appear AFTER m-0 in the output
+      expect(mxPos).toBeGreaterThan(mPos)
+    })
+
+    it('emits p-2 BEFORE py-4 so py overrides shorthand on equal specificity', () => {
+      const gen = new CSSGenerator(defaultConfig)
+      gen.generate('py-4')
+      gen.generate('p-2')
+      const css = gen.toCSS(false)
+      expect(css.indexOf('.py-4')).toBeGreaterThan(css.indexOf('.p-2'))
+    })
+
+    it('emits mx-auto BEFORE mt-4 (axis before single-side)', () => {
+      const gen = new CSSGenerator(defaultConfig)
+      gen.generate('mt-4')
+      gen.generate('mx-auto')
+      const css = gen.toCSS(false)
+      expect(css.indexOf('.mt-4')).toBeGreaterThan(css.indexOf('.mx-auto'))
+    })
+
+    it('stably preserves order within the same rank', () => {
+      const gen = new CSSGenerator(defaultConfig)
+      gen.generate('p-2')
+      gen.generate('m-0')
+      const css = gen.toCSS(false)
+      // Both rank 0; p-2 was emitted first, so it stays first
+      expect(css.indexOf('.p-2')).toBeLessThan(css.indexOf('.m-0'))
+    })
+  })
 })