Skip to content

Conversation

@adamziel
Copy link
Collaborator

@adamziel adamziel commented Oct 29, 2025

Overview

Ships a CSSTokenizer class that tokenizes CSS syntax. It follows the CSS Syntax Level 3 spec, giving Data Liberation tooling a reliable foundation for discovering and rewriting URLs without leaning on brittle regular expressions or partial parsers.

This branch is tested using the @rmenke/css-tokenizer-tests test corpus and an extra set of tests designed to cover nuances.

Design choices:

On-the-fly normalization

The CSS Spec requires the following normalization step:

Replace any U+000D CARRIAGE RETURN (CR) code points, U+000C FORM FEED (FF)
code points, or pairs of U+000D CARRIAGE RETURN (CR) followed by U+000A LINE
FEED (LF) in input by a single U+000A LINE FEED (LF) code point.
Replace any U+0000 NULL or surrogate code points in input with U+FFFD REPLACEMENT
CHARACTER (�).

This processor delays normalization as much as possible, rather than preprocessing
the entire input upfront. This avoids the upfront allocation cost for clean CSS
and preserves original byte positions for accurate raw token extraction. A part
of the normalization is performed on-the-fly as the tokens are consumed. The rest
of it is done once the token value is requested.

No EOF token

The EOF token is a CSS parsing concept, not CSS tokenization concept. Therefore,
this processor does not produce it.

UTF-8 handling

Only UTF-8 strings are supported. In case an invalid UTF-8 sequence is encountered,
it is replaced with a U+FFFD REPLACEMENT CHARACTER (�) using the maximal subpart
approach described in https://www.unicode.org/versions/Unicode9.0.0/ch03.pdf,
section 3.9 Best Practices for Using U+FFFD.

Usage

The next_token() method is the main entry point for tokenizing a CSS string.
It will consume the next token from the input stream and return true if a token
was found. Otherwise, it will return false:

$css = 'width: 10px;';
$processor = CSSProcessor::create( $css );
while ( $processor->next_token() ) {
    echo $processor->get_normalized_token();
}
// Outputs:
// width: 10px;

@adamziel adamziel marked this pull request as ready for review October 30, 2025 13:32
@adamziel
Copy link
Collaborator Author

I've applied your feedback @dmsnell, thank you! This PR seems in a pretty good place now. I'll draft a second one with set_token_value() before merging this, just to make sure we have the right APIs.

@adamziel
Copy link
Collaborator Author

I think we're good API-wise. Even if not, we can always adjust since it's the php-toolkit repo.

@adamziel adamziel merged commit ef1c5e3 into trunk Oct 30, 2025
22 checks passed
@adamziel
Copy link
Collaborator Author

CC @sirreal – you may like this

adamziel added a commit that referenced this pull request Oct 31, 2025
Follows up on #197 by
adding a `set_token_value( $new_value )` method to allow rewriting CSS.
At the moment, it only supports updating the URL token value.

```php
$css = 'background: url(old.jpg);';
$processor = CSSProcessor::create( $css );

while ( $processor->next_token() ) {
	if ( CSSProcessor::TOKEN_URL === $processor->get_token_type() ) {
		// URL with safe characters: letters, digits, hyphens, underscores, dots, slashes.
		$processor->set_token_value( "image😀.jpg ("special")" );
	}
}

echo $processor->get_updated_css();
// background: url("image😀.jpg (\22 special\22 )");
```

## Implementation details

`set_token_value( $new_value )` always uses the quoted URL syntax to
encode the new URL. It only escapes quotes newline characters,
backslashes, and double quotes. All other bytes are preserved as-is.

cc @dmsnell
adamziel added a commit that referenced this pull request Oct 31, 2025
Follows up on #197 by
adding a `set_token_value( $new_value )` method to allow rewriting CSS.
At the moment, it only supports updating the URL token value.

```php
$css = 'background: url(old.jpg);';
$processor = CSSProcessor::create( $css );

while ( $processor->next_token() ) {
	if ( CSSProcessor::TOKEN_URL === $processor->get_token_type() ) {
		// URL with safe characters: letters, digits, hyphens, underscores, dots, slashes.
		$processor->set_token_value( "image😀.jpg ("special")" );
	}
}

echo $processor->get_updated_css();
// background: url("image😀.jpg (\22 special\22 )");
```

## Implementation details

`set_token_value( $new_value )` always uses the quoted URL syntax to
encode the new URL. It only escapes quotes newline characters,
backslashes, and double quotes. All other bytes are preserved as-is.

PR #198 was supposed to merge this into trunk, but I never updated the
base.

cc @dmsnell
adamziel added a commit that referenced this pull request Nov 1, 2025
…der (#200)

Replaces two instances of the old UTF-8 decoding utilities with the new
utf-8.php toolkit by @dmsnell:

*
https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-includes/compat-utf8.php
*
https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-includes/utf8.php

This PR only touches two tactical usages of the old tools:

* Blueprint validation now uses `wp_is_valid_utf8`
* CSSProcessor now uses `wp_scrub_utf8` instead of
`_wp_scrub_utf8_fallback`

More refactoring is coming once there's a faster alternative to
`_wp_scan_utf8`, see
https://core.trac.wordpress.org/ticket/63863#comment:51

Related to #196.

Follows up on #199 and
#197.

## Testing instructions

If the CI passes, we're good. Unicode-related scenarios are covered by
tests.
adamziel added a commit to WordPress/wordpress-importer that referenced this pull request Nov 4, 2025
Adds support for rewriting URLs inside CSS syntax, e.g. here:

```html
<div style="background-image:url(/wp-content/uploads/2025/09/image-2-766x1024.jpeg)">
```

Before this PR, the `style` attributes in, e.g., the cover block were skipped by the URL rewriter and continued pointing to the old site.

Fixes #223

## Implementation details

This PR backports `CSSProcessor`, `CSSURLProcessor`, and a few related PRs around Unicode handling from the WordPress/php-toolkit repo:

* WordPress/php-toolkit#197
* WordPress/php-toolkit#195
* WordPress/php-toolkit#199
* WordPress/php-toolkit#200
* WordPress/php-toolkit#201
* WordPress/php-toolkit#202

Note the CSSProcessor and CSSURLProcessor are tested against 300 test cases containing various tricky inputs, quoted and unquoted URLs, strings, comments, unicode escape sequences, and more.

## Testing instructions

This PR comes with a new test case specifically for various tricky CSS inputs. You're also welcome to try and import a WXR file that contains an inline background-image reference and confirm the URL is correctly rewritten.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants