[babel-plugin] quote content values that contain quote characters (#1828)

transformValue passes a content value through untouched when a quote character occurs at least twice anywhere in it. The intent was to leave values the author already wrote as CSS alone, but that test also matches ordinary text. content: "Bob's and Jim's" and content: 'He said "hello"' both satisfy it, so they compile to content:Bob's and Jim's and content:He said "hello". Neither is a CSS string, so the browser drops the whole declaration and nothing renders. There is no warning at build time.

Replace the character count with a check on the parsed value. A value is now passed through only when it parses as a list of content components, meaning every part is a closed string, a function or one of the quote keywords, and at least one part is a string. Anything else is plain text and gets wrapped in a single quoted string.

Wrapping escapes only what would end that string early: a double quote that is not already escaped, a trailing backslash that would otherwise escape the closing quote, and a line break, which a CSS string writes as \A. A backslash that opens an escape sequence is left alone, so content: '\2014' still compiles to content:"\2014" and still renders an em dash.

Values such as open-quote "hello" close-quote and "a" "b" still pass through. Accepting a value requires a closed string, so the new check only accepts values the old check already accepted, and every value that used to compile to a well formed CSS declaration compiles to exactly the same bytes as before. What changes is the set of values that used to compile to a declaration the browser could not parse.

StyleX ·

StyleX is a JavaScript library for defining styles for optimized user interfaces.

Documentation

Documentation Website

Documentation for individual packages can be found in their respective README files. Start with @stylexjs/stylex.

Example

Here is a simple example of StyleX use:

import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({
  root: {
    padding: 10,
  },
  element: {
    backgroundColor: 'red',
  },
});

const styleProps = stylex.props(styles.root, styles.element);

Development

This is the development monorepo for StyleX.

Structure

.github
- Contains workflows used by GitHub Actions.
- Contains issue templates and contribution guidelines.
examples
- Contains examples using StyleX and its integration with build tools.
packages
- Contains the public and private packages managed in the monorepo.
- babel-plugin
- benchmarks
- cli
- docs
- eslint-plugin
- postcss-plugin
- rollup-plugin
- scripts
- shared
- style-value-parser
- stylex

Tasks

First, yarn install the yarn workspace.

build
- Use yarn build to run the build script in every package.
- Use yarn workspace <package-name> build to run the build script for a specific package.
test
- Use yarn test to run tests for every package.
- Use yarn workspace <package-name> test to run the test script for a specific package. More details can be found in the contributing guide below.

Contributing

Development happens in the open on GitHub and we are grateful for contributions including bug fixes, improvements, and ideas.

Code of Conduct

This project expects all participants to adhere to Meta’s OSS Code of Conduct. Please read the full text so that you can understand what actions will and will not be tolerated.

Contributing Guide

Read the contributing guide to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes.

Architectural Principles

Before proposing a change or addition to the StyleX API, you should familiarize yourself with the goals and architectural principles of the project.

License

StyleX is MIT licensed.