p0nch000 commented 4 days ago

Fix StyleX content property quotes handling

What changed / motivation

Updated transformValue function to correctly handle CSS content property values:

Prevents wrapping CSS functions (counter, attr, url) in quotes
Preserves CSS keywords (normal, none, open-quote)
Supports mixed content values
Only adds quotes for plain text strings

Previously, StyleX incorrectly wrapped CSS functions like counters() in quotes, breaking their functionality.

Linked PR/Issues

Fixes #771 - Don't wrap content: counters(...) in quotes

Additional Context

Test Coverage

describe('transformValue content property tests', () => {
  test('preserves CSS functions without quotes', () => {
    const functions = [
      ['counters(div, ".")', 'counters(div, ".")'],
      ['counter(chapter)', 'counter(chapter)'],
      ['attr(href)', 'attr(href)'],
      ['url(image.jpg)', 'url(image.jpg)']
    ];
    functions.forEach(([input, expected]) => {
      expect(transformValue('content', input, {})).toBe(expected);
    });
  });

  test('preserves CSS keywords without quotes', () => {
    const keywords = ['normal', 'none', 'open-quote'];
    keywords.forEach(keyword => {
      expect(transformValue('content', keyword, {})).toBe(keyword);
    });
  });

  test('handles mixed content values', () => {
    expect(transformValue('content', 'open-quote counter(chapter)', {}))
      .toBe('open-quote counter(chapter)');
  });
});

Implementation Notes

Pattern matches CSS functions and keywords
Errs on side of not adding quotes when uncertain
Returns unchanged value if parsing unclear
No breaking changes - maintains backward compatibility

Pre-flight checklist

[x] I have read the contributing guidelines Contribution Guidelines
[x] Performed a self-review of my code

p0nch000 commented 4 days ago

@nmn this was my first approach for the content issue, lmk if need to do some fixes :)

nmn commented 4 days ago

@p0nch000 Thanks for the great work. Turns out values for content don't need to be separated by spaces, so we might need to adjust the code a bit.

p0nch000 commented 2 days ago

Heyy took your advice i think is better now, lmk if it needs extra work