@depup/react-email 5.2.10-depup.1 → 6.9.0-depup.1

package/src/components/tailwind/utils/css/sanitize-declarations.spec.ts

@@ -0,0 +1,491 @@
+import { generate, parse } from 'css-tree';
+import { sanitizeDeclarations } from './sanitize-declarations.js';
+
+describe('sanitizeDeclarations', () => {
+  it('converts border-radius:calc(Infinity * 1px) to border-radius:9999px', () => {
+    let root = parse(`.rounded-full {
+  border-radius: calc(Infinity * 1px);
+}
+`);
+    sanitizeDeclarations(root);
+    expect(generate(root)).toBe('.rounded-full{border-radius:9999px}');
+
+    root = parse(`.rounded-full {
+  border-radius: calc(infinity * 1px);
+}
+`);
+    sanitizeDeclarations(root);
+    expect(generate(root)).toBe('.rounded-full{border-radius:9999px}');
+
+    root = parse(`.rounded-full {
+  border-radius: calc(infinity*1px);
+}
+`);
+    sanitizeDeclarations(root);
+    expect(generate(root)).toBe('.rounded-full{border-radius:9999px}');
+
+    root = parse(`.rounded-full {
+  border-radius: calc(Infinity*1px);
+}
+`);
+    sanitizeDeclarations(root);
+    expect(generate(root)).toBe('.rounded-full{border-radius:9999px}');
+  });
+
+  it('converts calc(infinity * 1px) for corner and logical border-radius longhands', () => {
+    let root = parse(`.rounded-tl-full {
+  border-top-left-radius: calc(infinity * 1px);
+}
+`);
+    sanitizeDeclarations(root);
+    expect(generate(root)).toBe(
+      '.rounded-tl-full{border-top-left-radius:9999px}',
+    );
+
+    root = parse(`.rounded-e-full {
+  border-start-end-radius: calc(infinity * 1px);
+  border-end-end-radius: calc(infinity * 1px);
+}
+`);
+    sanitizeDeclarations(root);
+    expect(generate(root)).toBe(
+      '.rounded-e-full{border-start-end-radius:9999px;border-end-end-radius:9999px}',
+    );
+  });
+
+  it('separates padding-block and padding-inline', () => {
+    let root = parse(`.box {
+  padding-inline: 4px 14;
+}
+`);
+    sanitizeDeclarations(root);
+    expect(generate(root)).toMatchInlineSnapshot(
+      `".box{padding-right:14;padding-left:4px}"`,
+    );
+
+    root = parse(`.box {
+  padding-block: 10px 20%;
+}
+`);
+    sanitizeDeclarations(root);
+    expect(generate(root)).toMatchInlineSnapshot(
+      `".box{padding-bottom:20%;padding-top:10px}"`,
+    );
+
+    root = parse(`.box {
+  padding-inline: 99rem;
+}
+`);
+    sanitizeDeclarations(root);
+    expect(generate(root)).toMatchInlineSnapshot(
+      `".box{padding-right:99rem;padding-left:99rem}"`,
+    );
+
+    root = parse(`.box {
+  padding-block: 8px;
+}
+`);
+    sanitizeDeclarations(root);
+    expect(generate(root)).toMatchInlineSnapshot(
+      `".box{padding-bottom:8px;padding-top:8px}"`,
+    );
+  });
+
+  it('should do separation of margin-block and margin-inline', () => {
+    let root = parse(`.box {
+  margin-inline: 4px 14;
+}
+`);
+    sanitizeDeclarations(root);
+    expect(generate(root)).toMatchInlineSnapshot(
+      `".box{margin-right:14;margin-left:4px}"`,
+    );
+
+    root = parse(`.box {
+  margin-block: 10px 20%;
+}
+`);
+    sanitizeDeclarations(root);
+    expect(generate(root)).toMatchInlineSnapshot(
+      `".box{margin-bottom:20%;margin-top:10px}"`,
+    );
+
+    root = parse(`.box {
+  margin-inline: 99rem;
+}
+`);
+    sanitizeDeclarations(root);
+    expect(generate(root)).toMatchInlineSnapshot(
+      `".box{margin-right:99rem;margin-left:99rem}"`,
+    );
+
+    root = parse(`.box {
+  margin-block: 8px;
+}
+`);
+    sanitizeDeclarations(root);
+    expect(generate(root)).toMatchInlineSnapshot(
+      `".box{margin-bottom:8px;margin-top:8px}"`,
+    );
+  });
+
+  it('separates two-value logical shorthands with auto, var, or calc', () => {
+    let root = parse('.x { margin-inline: 1rem auto; }');
+    sanitizeDeclarations(root);
+    expect(generate(root)).toMatchInlineSnapshot(
+      `".x{margin-right:auto;margin-left:1rem}"`,
+    );
+
+    root = parse('.x { margin-inline: 0 auto; }');
+    sanitizeDeclarations(root);
+    expect(generate(root)).toMatchInlineSnapshot(
+      `".x{margin-right:auto;margin-left:0}"`,
+    );
+
+    root = parse('.x { padding-inline: 10px calc(1rem + 2px); }');
+    sanitizeDeclarations(root);
+    expect(generate(root)).toMatchInlineSnapshot(
+      `".x{padding-right:calc(1rem + 2px);padding-left:10px}"`,
+    );
+  });
+
+  test('oklch to rgb conversion', () => {
+    let stylesheet = parse('div { color: oklch(90.5% 0.2 180); }');
+    sanitizeDeclarations(stylesheet);
+    expect(
+      generate(stylesheet),
+      'conversion without alpha',
+    ).toMatchInlineSnapshot(`"div{color:rgb(0,255,229)}"`);
+
+    stylesheet = parse('div { color: oklch(96.6% 0.147 107 / 80%); }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet), 'conversion with alpha').toMatchInlineSnapshot(
+      `"div{color:rgb(255,251,126,0.8)}"`,
+    );
+
+    stylesheet = parse('div { color: oklch(96.6% 0.147 107deg / 80%); }');
+    sanitizeDeclarations(stylesheet);
+    expect(
+      generate(stylesheet),
+      'conversion with deg unit',
+    ).toMatchInlineSnapshot(`"div{color:rgb(255,251,126,0.8)}"`);
+
+    stylesheet = parse('div { color: oklch(92.6% 0.0546 218 / 50%); }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchInlineSnapshot(
+      `"div{color:rgb(191,240,255,0.5)}"`,
+    );
+
+    stylesheet = parse('div { color: oklch(88.3% 0.102 329); }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchInlineSnapshot(
+      `"div{color:rgb(255,193,250)}"`,
+    );
+
+    stylesheet = parse('div { color: oklch(69.3% 0.206 42.8); }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchInlineSnapshot(
+      `"div{color:rgb(255,100,0)}"`,
+    );
+  });
+
+  test('rgba space syntax to comma syntax conversion', () => {
+    let stylesheet = parse('div { color: rgb(255 0 128); }');
+    sanitizeDeclarations(stylesheet);
+    expect(
+      generate(stylesheet),
+      'conversion with space syntax and no alpha',
+    ).toMatchInlineSnapshot(`"div{color:rgb(255,0,128)}"`);
+
+    stylesheet = parse('div { color: rgb(255 0 128 / 0.5); }');
+    sanitizeDeclarations(stylesheet);
+    expect(
+      generate(stylesheet),
+      'conversion with space syntax and alpha',
+    ).toMatchInlineSnapshot(`"div{color:rgb(255,0,128,0.5)}"`);
+
+    stylesheet = parse('div { color: rgb(100% 0% 50% / 50%); }');
+    sanitizeDeclarations(stylesheet);
+    expect(
+      generate(stylesheet),
+      'conversion with percentage values',
+    ).toMatchInlineSnapshot(`"div{color:rgb(255,0,128,0.5)}"`);
+
+    stylesheet = parse('div { color: rgb(255 0 128 / 50%); }');
+    sanitizeDeclarations(stylesheet);
+    expect(
+      generate(stylesheet),
+      'conversion with space syntax and alpha with a percetange syntax',
+    ).toMatchInlineSnapshot(`"div{color:rgb(255,0,128,0.5)}"`);
+
+    stylesheet = parse('div { color: rgb(255 0 128 / 1); }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchInlineSnapshot(
+      `"div{color:rgb(255,0,128)}"`,
+    );
+
+    stylesheet = parse(
+      'div { background: linear-gradient(rgb(255 0 0), rgb(0 255 0 / 0.8)); }',
+    );
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchInlineSnapshot(
+      `"div{background:linear-gradient(rgb(255,0,0),rgb(0,255,0,0.8))}"`,
+    );
+
+    stylesheet = parse('div { color: rgb(  255   0   128  /  0.7  ); }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchInlineSnapshot(
+      `"div{color:rgb(255,0,128,0.7)}"`,
+    );
+
+    stylesheet = parse('div { color: rgb(0 0 0); }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchInlineSnapshot(
+      `"div{color:rgb(0,0,0)}"`,
+    );
+
+    stylesheet = parse('div { color: rgb(255, 0, 128); }');
+    sanitizeDeclarations(stylesheet);
+    expect(
+      generate(stylesheet),
+      'treatment for already supported rgb syntax',
+    ).toMatchInlineSnapshot(`"div{color:rgb(255,0,128)}"`);
+
+    stylesheet = parse('div { color: rgba(255 0 128 / 0.5); }');
+    sanitizeDeclarations(stylesheet);
+    expect(
+      generate(stylesheet),
+      'rgba() space syntax with alpha',
+    ).toMatchInlineSnapshot(`"div{color:rgb(255,0,128,0.5)}"`);
+
+    stylesheet = parse('div { color: rgba(100% 0% 50% / 100%); }');
+    sanitizeDeclarations(stylesheet);
+    expect(
+      generate(stylesheet),
+      'rgba() percentage syntax with full alpha',
+    ).toMatchInlineSnapshot(`"div{color:rgb(255,0,128)}"`);
+
+    stylesheet = parse('div { color: rgba(255, 0, 128, 0.5); }');
+    sanitizeDeclarations(stylesheet);
+    expect(
+      generate(stylesheet),
+      'legacy comma rgba() is left untouched',
+    ).toMatchInlineSnapshot(`"div{color:rgb(255,0,128,0.5)}"`);
+  });
+
+  test('hex to rgb conversion', () => {
+    let stylesheet = parse('div { color: #f0a; }');
+    sanitizeDeclarations(stylesheet);
+    expect(
+      generate(stylesheet),
+      '3-digit hex without alpha',
+    ).toMatchInlineSnapshot(`"div{color:rgb(255,0,170)}"`);
+
+    stylesheet = parse('div { color: #f0a8; }');
+    sanitizeDeclarations(stylesheet);
+    expect(
+      generate(stylesheet),
+      '4-digit hex with alpha',
+    ).toMatchInlineSnapshot(`"div{color:rgb(255,0,170,0.5333333333333333)}"`);
+
+    stylesheet = parse('div { color: #ff00aa; }');
+    sanitizeDeclarations(stylesheet);
+    expect(
+      generate(stylesheet),
+      '6-digit hex without alpha',
+    ).toMatchInlineSnapshot(`"div{color:rgb(255,0,170)}"`);
+
+    stylesheet = parse('div { color: #ff00aa80; }');
+    sanitizeDeclarations(stylesheet);
+    expect(
+      generate(stylesheet),
+      '8-digit hex with alpha',
+    ).toMatchInlineSnapshot(`"div{color:rgb(255,0,170,0.5019607843137255)}"`);
+
+    stylesheet = parse('div { color: #000; }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchInlineSnapshot(
+      `"div{color:rgb(0,0,0)}"`,
+    );
+
+    stylesheet = parse('div { color: #fff; }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchInlineSnapshot(
+      `"div{color:rgb(255,255,255)}"`,
+    );
+
+    stylesheet = parse('div { color: #ff0000; }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchInlineSnapshot(
+      `"div{color:rgb(255,0,0)}"`,
+    );
+
+    stylesheet = parse('div { color: #00ff00; }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchInlineSnapshot(
+      `"div{color:rgb(0,255,0)}"`,
+    );
+
+    stylesheet = parse('div { color: #0000ff; }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchInlineSnapshot(
+      `"div{color:rgb(0,0,255)}"`,
+    );
+
+    stylesheet = parse('div { color: #abcdef; }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchInlineSnapshot(
+      `"div{color:rgb(171,205,239)}"`,
+    );
+
+    stylesheet = parse('div { color: #ABCDEF; }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchInlineSnapshot(
+      `"div{color:rgb(171,205,239)}"`,
+    );
+
+    stylesheet = parse('div { color: #AbCdEf; }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet), 'mixed casing').toMatchInlineSnapshot(
+      `"div{color:rgb(171,205,239)}"`,
+    );
+
+    stylesheet = parse('div { color: #ff000000; }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchInlineSnapshot(
+      `"div{color:rgb(255,0,0,0)}"`,
+    );
+
+    stylesheet = parse('div { color: #ff0000ff; }');
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchInlineSnapshot(
+      `"div{color:rgb(255,0,0)}"`,
+    );
+
+    stylesheet = parse(
+      'div { background: linear-gradient(#ff0000, #00ff00, #0000ff); }',
+    );
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchInlineSnapshot(
+      `"div{background:linear-gradient(rgb(255,0,0),rgb(0,255,0),rgb(0,0,255))}"`,
+    );
+
+    stylesheet = parse(
+      'div { background: linear-gradient(#ff0000, rgb(0 255 0), oklch(50% 0.2 240)); }',
+    );
+    sanitizeDeclarations(stylesheet);
+    const result = generate(stylesheet);
+    expect(result).toMatchInlineSnapshot(
+      `"div{background:linear-gradient(rgb(255,0,0),rgb(0,255,0),rgb(0,105,199))}"`,
+    );
+
+    stylesheet = parse(
+      'div { content: "Visit our site at example.com#section"; }',
+    );
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchInlineSnapshot(
+      `"div{content:"Visit our site at example.com#section"}"`,
+    );
+
+    stylesheet = parse(`
+      div {
+        color: #ff0000;
+        background-color: #00ff00;
+        border-color: #0000ff;
+        box-shadow: 0 0 10px #333;
+      }
+    `);
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet)).toMatchInlineSnapshot(
+      `"div{color:rgb(255,0,0);background-color:rgb(0,255,0);border-color:rgb(0,0,255);box-shadow:0 0 10px rgb(51,51,51)}"`,
+    );
+  });
+
+  it('handles transparency generated with color-mix', () => {
+    const stylesheet = parse(`
+     .bg-blue-600/50 {
+        background-color: color-mix(in oklab, oklch(54.6% 0.245 262.881) 60%, transparent);
+      }
+    `);
+    sanitizeDeclarations(stylesheet);
+    const result = generate(stylesheet);
+    expect(result).toMatchInlineSnapshot(
+      `".bg-blue-600/50{background-color:rgb(21,93,252,0.6)}"`,
+    );
+  });
+
+  it('converts the color-mix opacity percentage into a decimal alpha', () => {
+    let stylesheet = parse(`
+      .bg-blue-600\\/50 {
+        background-color: color-mix(in oklab, oklch(54.6% 0.245 262.881) 50%, transparent);
+      }
+    `);
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet), 'half opacity').toMatchInlineSnapshot(
+      `".bg-blue-600\\/50{background-color:rgb(21,93,252,0.5)}"`,
+    );
+
+    stylesheet = parse(`
+      .bg-blue-600\\/12\\.5 {
+        background-color: color-mix(in oklab, oklch(54.6% 0.245 262.881) 12.5%, transparent);
+      }
+    `);
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet), 'fractional opacity').toMatchInlineSnapshot(
+      `".bg-blue-600\\/12\\.5{background-color:rgb(21,93,252,0.125)}"`,
+    );
+
+    stylesheet = parse(`
+      .bg-blue-600\\/100 {
+        background-color: color-mix(in oklab, oklch(54.6% 0.245 262.881) 100%, transparent);
+      }
+    `);
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet), 'full opacity').toMatchInlineSnapshot(
+      `".bg-blue-600\\/100{background-color:rgb(21,93,252)}"`,
+    );
+  });
+
+  describe('complex scenarios', () => {
+    it('handles multiple declarations with different rgb formats', () => {
+      const stylesheet = parse(`
+        div {
+          color: rgb(255 0 128 / 0.5);
+          background-color: rgb(0 255 0);
+          border-color: rgb(128, 128, 128);
+        }
+      `);
+      sanitizeDeclarations(stylesheet);
+      const result = generate(stylesheet);
+      expect(result).toMatchInlineSnapshot(
+        `"div{color:rgb(255,0,128,0.5);background-color:rgb(0,255,0);border-color:rgb(128,128,128)}"`,
+      );
+    });
+
+    it('handles nested rules', () => {
+      const stylesheet = parse(`
+        @media (min-width: 768px) {
+          div { color: rgb(255 0 128 / 0.8); }
+        }
+      `);
+      sanitizeDeclarations(stylesheet);
+      expect(generate(stylesheet)).toMatchInlineSnapshot(
+        `"@media (min-width:768px){div{color:rgb(255,0,128,0.8)}}"`,
+      );
+    });
+
+    it('processes at-rule declarations', () => {
+      const stylesheet = parse(`
+        @keyframes fade {
+          from { background: rgb(255 0 0 / 0); }
+          to { background: rgb(255 0 0 / 1); }
+        }
+      `);
+      sanitizeDeclarations(stylesheet);
+      const result = generate(stylesheet);
+      expect(result).toMatchInlineSnapshot(
+        `"@keyframes fade{from{background:rgb(255,0,0,0)}to{background:rgb(255,0,0)}}"`,
+      );
+    });
+  });
+});