@ordojs/core/src/compiler/css-parser.test.ts

Core compiler and runtime for OrdoJS framework

/**
 * @fileoverview Tests for the CSS Parser
 */

import { describe, expect, it } from 'vitest';
import { OrdoJSCSSParser } from './css-parser.js';

describe('OrdoJSCSSParser', () => {
  it('should parse a simple CSS rule', () => {
    const parser = new OrdoJSCSSParser();
    const css = `.button { color: red; }`;

    const result = parser.parse(css);

    expect(result.type).toBe('StyleBlock');
    expect(result.rules.length).toBe(1);
    expect(result.rules[0].selector).toBe('.button');
    expect(result.rules[0].declarations.length).toBe(1);
    expect(result.rules[0].declarations[0].property).toBe('color');
    expect(result.rules[0].declarations[0].value).toBe('red');
  });

  it('should parse multiple CSS rules', () => {
    const parser = new OrdoJSCSSParser();
    const css = `
      .button {
        color: red;
        background: blue;
      }

      .input {
        border: 1px solid black;
      }
    `;

    const result = parser.parse(css);

    expect(result.rules.length).toBe(2);
    expect(result.rules[0].selector).toBe('.button');
    expect(result.rules[0].declarations.length).toBe(2);
    expect(result.rules[1].selector).toBe('.input');
    expect(result.rules[1].declarations.length).toBe(1);
  });

  it('should handle complex selectors', () => {
    const parser = new OrdoJSCSSParser();
    const css = `
      .button:hover, .button:focus {
        color: blue;
      }
    `;

    const result = parser.parse(css);

    expect(result.rules.length).toBe(1);
    expect(result.rules[0].selector).toBe('.button:hover, .button:focus');
  });

  it('should handle complex values with functions', () => {
    const parser = new OrdoJSCSSParser();
    const css = `
      .gradient {
        background: linear-gradient(to right, red, blue);
      }
    `;

    const result = parser.parse(css);

    expect(result.rules.length).toBe(1);
    expect(result.rules[0].declarations[0].value).toBe('linear-gradient(to right, red, blue)');
  });

  it('should handle CSS variables', () => {
    const parser = new OrdoJSCSSParser();
    const css = `
      :root {
        --primary-color: #ff0000;
      }
    `;

    const result = parser.parse(css);

    expect(result.rules.length).toBe(1);
    expect(result.rules[0].selector).toBe(':root');
    expect(result.rules[0].declarations[0].property).toBe('--primary-color');
    expect(result.rules[0].declarations[0].value).toBe('#ff0000');
  });

  it('should handle missing semicolons in last declaration', () => {
    const parser = new OrdoJSCSSParser();
    const css = `
      .button {
        color: red;
        background: blue
      }
    `;

    const result = parser.parse(css);

    expect(result.rules.length).toBe(1);
    expect(result.rules[0].declarations.length).toBe(2);
    expect(result.rules[0].declarations[1].property).toBe('background');
    expect(result.rules[0].declarations[1].value).toBe('blue');
  });

  it('should handle pseudo-elements correctly', () => {
    const parser = new OrdoJSCSSParser();
    const css = `
      .button::before {
        content: "";
      }
    `;

    const result = parser.parse(css);

    expect(result.rules.length).toBe(1);
    expect(result.rules[0].selector).toBe('.button::before');
  });

  it('should handle vendor prefixes', () => {
    const parser = new OrdoJSCSSParser();
    const css = `
      .box {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
      }
    `;

    const result = parser.parse(css);

    expect(result.rules.length).toBe(1);
    expect(result.rules[0].declarations.length).toBe(2);
    expect(result.rules[0].declarations[0].property).toBe('-webkit-transform');
    expect(result.rules[0].declarations[1].property).toBe('transform');
  });
});