diff --git a/CHANGELOG-GRAVITYPDF.md b/CHANGELOG-GRAVITYPDF.md
index 86e478799..d2c0a85c1 100644
--- a/CHANGELOG-GRAVITYPDF.md
+++ b/CHANGELOG-GRAVITYPDF.md
@@ -168,6 +168,11 @@ Bugfixes
 * The rule after an `@supports`, `@layer`, `@keyframes`, `@container` or other block at-rule was lost, and so were the rules inside `@supports` and `@layer`. The rule after `@charset`, `@namespace` or `@import` was lost too. `@supports` and `@layer` blocks are now unwrapped as `@media` blocks are, except `@supports not`, and other at-rules are removed whole. [#524] [#566]
 * `@media` was matched by looking for the word `print`, so `@media not print` applied, `orientation` was ignored and `min-width` never matched. Media queries are now evaluated for the print medium against the page current when the stylesheet is read: media types with `not` and `only`; `and`, `or` and `not` conditions; and `width`, `height` and `orientation`, with `min-`/`max-` prefixes and range syntax such as `(width >= 600px)`. An A4 page is about 794px wide, so `@media (min-width: 768px)` rules now apply to it. [#552] [#575]
 * `@import` ignored its media list, and did not load a URL that does not end in `.css`, such as a Google Fonts stylesheet. [#552] [#575]
+* A brace, semicolon or comment marker inside a quoted string, an unquoted `url()` or an escape broke the stylesheet around it. `q { quotes: "}" }` lost the rule after it, `font-family: 'a;color:red'` set the colour, a `/*` in one string and a `*/` in a later one removed every rule between them, and `@import url(…?family=Inter:wght@300;400)` lost the rule after it. A rule or at-rule nested in a block, as CSS nesting writes them, lost the rest of the block and the rule after it. Stylesheets are now split by a tokenizer that reads strings, `url()`, escapes and comments as CSS does, in either `cssMode`. A rule or at-rule nested in a block is left out, and the declarations after it apply. [#536] [#635]
+  * A string left open ends at the line break, as in CSS. A block or comment left open ends with its `<style>` or stylesheet file instead of running into the next one.
+  * A byte order mark at the start of a stylesheet, as `WriteHTML(file_get_contents('style.css'), HTMLParserMode::HEADER_CSS)` passes one on, no longer spoils the first rule.
+  * An `@import` is loaded only from the stylesheet's own rules, not from a comment, a string or a block.
+  * A `style` attribute is split the same way, so `style="font-family: 'a;b', serif; color: red"` applies both, and a value may run over several lines.
 * `td:nth-child()` and `th:nth-child()` counted grid columns, so a `colspan` or `rowspan` before a cell made the rule miss it and reach the cell after. They now count the cells of the row. `:first-child` on a `tr`, `td` or `th` now works, as `:nth-child(1)`. [#528] [#572]
 * Some colour values were read wrongly. [#552] [#570]
   * `#rgba` was read from the wrong digits: `#f008` drew `rgb(240, 8, 0)`. `#rrggbbaa` dropped its alpha. Both are now read with their alpha.
@@ -789,6 +794,7 @@ These changes do not change output.
 [#528]: https://github.com/GravityPDF/mpdf/issues/528
 [#533]: https://github.com/GravityPDF/mpdf/issues/533
 [#535]: https://github.com/GravityPDF/mpdf/issues/535
+[#536]: https://github.com/GravityPDF/mpdf/issues/536
 [#537]: https://github.com/GravityPDF/mpdf/issues/537
 [#538]: https://github.com/GravityPDF/mpdf/issues/538
 [#549]: https://github.com/GravityPDF/mpdf/pull/549
@@ -836,4 +842,5 @@ These changes do not change output.
 [#631]: https://github.com/GravityPDF/mpdf/pull/631
 [#632]: https://github.com/GravityPDF/mpdf/issues/632
 [#633]: https://github.com/GravityPDF/mpdf/pull/633
+[#635]: https://github.com/GravityPDF/mpdf/pull/635
 [#634]: https://github.com/GravityPDF/mpdf/pull/634
diff --git a/src/Css/AtRuleProcessor.php b/src/Css/AtRuleProcessor.php
deleted file mode 100644
index 04f2a6048..000000000
--- a/src/Css/AtRuleProcessor.php
+++ /dev/null
@@ -1,217 +0,0 @@
-<?php
-
-namespace Mpdf\Css;
-
-/**
- * Settles the at-rules in a stylesheet before it is split into rules at each brace.
- *
- * The rules in a matching @media block, and in @supports and @layer blocks, are unwrapped into the stylesheet. An
- * @supports condition is taken to pass, as its rules are unwrapped, so an @supports not block, the fallback for
- * engines without a feature, is removed. @page rules are kept, less any margin boxes nested in them. Every other
- * at-rule is removed whole, with its block if it has one: splitting at each brace would otherwise end the at-rule at
- * its first inner brace and take the rest of it as the start of the next rule.
- */
-class AtRuleProcessor
-{
-
-	/**
-	 * @var MediaQueryProcessor
-	 */
-	private $mediaQueryProcessor;
-
-	/**
-	 * @param MediaQueryProcessor $mediaQueryProcessor
-	 */
-	public function __construct(MediaQueryProcessor $mediaQueryProcessor)
-	{
-		$this->mediaQueryProcessor = $mediaQueryProcessor;
-	}
-
-	/**
-	 * Unwrap, keep or remove each at-rule in a list of rules, copying the other rules as they are
-	 *
-	 * @param string $css A stylesheet with its comments removed
-	 * @return string The stylesheet with only plain rules and @page rules left
-	 */
-	public function process($css)
-	{
-		if (strpos($css, '@') === false) {
-			return $css;
-		}
-
-		$processed = '';
-		$length = strlen($css);
-		$pos = 0;
-
-		while ($pos < $length) {
-			$at = $this->find($css, $pos, '@');
-			if ($at >= $length || $css[$at] === '}') {
-				$processed .= substr($css, $pos, $at + 1 - $pos);
-				$pos = $at + 1;
-				continue;
-			}
-
-			$processed .= substr($css, $pos, $at - $pos) . ' ';
-			list($name, $prelude, $body, $end) = $this->readAtRule($css, $at);
-			if ($body !== null) {
-				$processed .= $this->processBlock($name, $prelude, $body) . ' ';
-			}
-
-			$pos = $end + 1;
-		}
-
-		return $processed;
-	}
-
-	/**
-	 * What a block at-rule leaves in the stylesheet
-	 *
-	 * @param string $name The at-rule's name in lower case, without the @
-	 * @param string $prelude What comes between the name and the block
-	 * @param string $body What is inside the block
-	 * @return string
-	 */
-	private function processBlock($name, $prelude, $body)
-	{
-		switch ($name) {
-			case 'media':
-				return $this->mediaQueryProcessor->matches($prelude) ? $this->process($body) : '';
-
-			case 'supports':
-				return preg_match('/^not\b/i', $prelude) ? '' : $this->process($body);
-
-			case 'layer':
-				return $this->process($body);
-
-			case 'page':
-				return '@page ' . $prelude . ' {' . $this->removeNestedAtRules($body) . '}';
-		}
-
-		return '';
-	}
-
-	/**
-	 * Remove the at-rules from a block of declarations, such as the margin boxes in an @page rule
-	 *
-	 * @param string $declarations
-	 * @return string
-	 */
-	private function removeNestedAtRules($declarations)
-	{
-		if (strpos($declarations, '@') === false) {
-			return $declarations;
-		}
-
-		$length = strlen($declarations);
-		$kept = '';
-		$pos = 0;
-
-		while ($pos < $length) {
-			$pos += strspn($declarations, " \t\n\r\f", $pos);
-			if ($pos >= $length) {
-				break;
-			}
-
-			if ($declarations[$pos] === '@') {
-				list(, , , $end) = $this->readAtRule($declarations, $pos);
-			} else {
-				$end = $this->find($declarations, $pos, ';');
-				$kept .= ' ' . substr($declarations, $pos, $end + 1 - $pos);
-			}
-
-			$pos = $end + 1;
-		}
-
-		return $kept;
-	}
-
-	/**
-	 * Read the at-rule starting at $at
-	 *
-	 * @param string $css
-	 * @param int $at The position of the @
-	 * @return array The name in lower case, the prelude, and the block's content or null for a statement at-rule,
-	 *               then the position of the semicolon or brace that ends it
-	 */
-	private function readAtRule($css, $at)
-	{
-		$open = $this->find($css, $at, ';{');
-		if ($open >= strlen($css) || $css[$open] !== '{') {
-			return [null, null, null, $open];
-		}
-
-		$close = $this->find($css, $open + 1, '');
-		preg_match('/^@([-\w]*)(.*)$/s', substr($css, $at, $open - $at), $m);
-
-		return [strtolower($m[1]), trim($m[2]), substr($css, $open + 1, $close - $open - 1), $close];
-	}
-
-	/**
-	 * The position of the first of $chars at or after $pos that is outside any string or nested block
-	 *
-	 * A closing brace that is not nested in the search ends it as well, since it closes the block being searched. The
-	 * length of the stylesheet is returned if neither is found.
-	 *
-	 * @param string $css
-	 * @param int $pos
-	 * @param string $chars
-	 * @return int
-	 */
-	private function find($css, $pos, $chars)
-	{
-		$length = strlen($css);
-		$stops = $chars . '{}"\'\\';
-		$depth = 0;
-
-		while ($pos < $length) {
-			$pos += strcspn($css, $stops, $pos);
-			if ($pos >= $length) {
-				break;
-			}
-
-			$char = $css[$pos];
-			if ($depth === 0 && ($char === '}' || strpos($chars, $char) !== false)) {
-				return $pos;
-			}
-
-			if ($char === '"' || $char === '\'') {
-				$pos = $this->endOfString($css, $pos);
-			} elseif ($char === '\\') {
-				$pos++;
-			} elseif ($char === '{') {
-				$depth++;
-			} elseif ($char === '}') {
-				$depth--;
-			}
-
-			$pos++;
-		}
-
-		return $length;
-	}
-
-	/**
-	 * The position of the quote that closes the string opening at $pos, or of the line break or end of the stylesheet
-	 * that ends it unclosed
-	 *
-	 * @param string $css
-	 * @param int $pos
-	 * @return int
-	 */
-	private function endOfString($css, $pos)
-	{
-		$length = strlen($css);
-		$quote = $css[$pos];
-
-		while (++$pos < $length) {
-			$pos += strcspn($css, $quote . "\\\n\r\f", $pos);
-			if ($pos >= $length || $css[$pos] !== '\\') {
-				return $pos;
-			}
-
-			$pos++;
-		}
-
-		return $length;
-	}
-}
diff --git a/src/Css/CommentParser.php b/src/Css/CommentParser.php
index bfe819468..0fa695668 100644
--- a/src/Css/CommentParser.php
+++ b/src/Css/CommentParser.php
@@ -21,10 +21,11 @@ public function removeHtmlComments($html)
 	}
 
 	/**
-	 * Remove HTML and CSS comments from style blocks.
+	 * Remove the HTML comment markers from style blocks.
 	 *
-	 * Removes both HTML comments (<!-- -->) and CSS comments from
-	 * <style> tag contents while preserving the structure.
+	 * Replaces each <!-- and --> in <style> tag contents with a space, so removeHtmlComments() does not take the
+	 * stylesheet for a comment. CSS comments are left for StylesheetTokenizer::removeComments(), which knows a comment
+	 * marker inside a string is not one.
 	 *
 	 * @param string $html HTML content with style tags
 	 * @return string HTML with cleaned style blocks
@@ -37,8 +38,7 @@ public function removeCommentsFromStyleBlocks($html)
 		}
 
 		foreach ($m[1] as $style) {
-			$sub = str_replace(['<!--', '-->'], ' ', $style);
-			$sub = '>' . preg_replace('|/\*.*?\*/|s', ' ', $sub) . '</style>';
+			$sub = '>' . str_replace(['<!--', '-->'], ' ', $style) . '</style>';
 			$html = str_replace('>' . $style . '</style>', $sub, $html);
 		}
 
diff --git a/src/Css/CssLoader.php b/src/Css/CssLoader.php
index 56d840987..d58dce9e4 100644
--- a/src/Css/CssLoader.php
+++ b/src/Css/CssLoader.php
@@ -32,12 +32,18 @@ class CssLoader
 	 */
 	private $mediaQueryProcessor;
 
+	/**
+	 * @var StylesheetTokenizer
+	 */
+	private $tokenizer;
+
 	public function __construct(Mpdf $mpdf, AssetFetcher $assetFetcher, Cache $cache, MediaQueryProcessor $mediaQueryProcessor)
 	{
 		$this->mpdf = $mpdf;
 		$this->assetFetcher = $assetFetcher;
 		$this->cache = $cache;
 		$this->mediaQueryProcessor = $mediaQueryProcessor;
+		$this->tokenizer = new StylesheetTokenizer();
 	}
 
 	/**
@@ -93,29 +99,40 @@ public function extractExternalStylesheetUrls($html)
 		}
 
 		preg_match_all('/<style.*?>(.*?)<\/style>/si', $html, $styles);
+		foreach ($styles[1] as $css) {
+			$cssUrls = array_merge($cssUrls, $this->extractImportUrls($css));
+		}
 
-		return array_merge($cssUrls, $this->extractImportUrls(implode(' ', $styles[1])));
+		return $cssUrls;
 	}
 
 	/**
 	 * The URLs the @import rules in $css load, less those whose media query list does not match
 	 *
-	 * A layer() before the media query list is ignored. A supports() condition is taken to pass, as the rules in an
-	 * @supports block are unwrapped, so one that starts with not fails.
+	 * Only an @import among the stylesheet's own rules is read, not one in a comment, a string or a block. A layer()
+	 * before the media query list is ignored. A supports() condition is taken to pass, as the rules in an @supports
+	 * block are unwrapped, so one that starts with not fails.
 	 *
 	 * @param string $css
 	 * @return string[]
 	 */
 	private function extractImportUrls($css)
 	{
+		if (stripos($css, '@import') === false) {
+			return [];
+		}
+
 		$url = '(?|url\(\s*"([^"]*)"\s*\)|url\(\s*\'([^\']*)\'\s*\)|url\(\s*([^\s"\')]*)\s*\)|"([^"]*)"|\'([^\']*)\')';
 		$layer = '(?:\s*layer(?:\([^)]*\))?)?';
 		$supports = '(?:\s*supports\(\s*(not\b)?(?:[^()]|\([^()]*\))*\))?';
-		preg_match_all('/@import\s*' . $url . $layer . $supports . '([^;{}]*)/i', $css, $imports, PREG_SET_ORDER);
+		$pattern = '/^' . $url . $layer . $supports . '(.*)$/is';
 
 		$urls = [];
-		foreach ($imports as $import) {
-			if ($import[1] !== '' && $import[2] === '' && $this->mediaQueryProcessor->matches($import[3])) {
+		foreach ($this->tokenizer->rules($this->tokenizer->removeComments($css)) as $rule) {
+			if ($rule[0] === 'import' && $rule[2] === null
+				&& preg_match($pattern, $rule[1], $import)
+				&& $import[1] !== '' && $import[2] === '' && $this->mediaQueryProcessor->matches($import[3])
+			) {
 				$urls[] = $import[1];
 			}
 		}
@@ -135,8 +152,6 @@ private function extractImportUrls($css)
 	 */
 	public function processExternalCssImports($stylesheetCss, $path, &$externalCss, &$externalCssCount)
 	{
-		$css = '';
-
 		$cssBasePath = preg_replace('/\/[^\/]*$/', '', $path) . '/';
 		foreach ($this->extractImportUrls($stylesheetCss) as $cxtembedded) {
 			// path is relative to original stylesheet!!
@@ -144,9 +159,7 @@ public function processExternalCssImports($stylesheetCss, $path, &$externalCss,
 			$externalCssCount++;
 		}
 
-		$css .= ' ' . $this->resolveBackgroundUrls($stylesheetCss, $cssBasePath);
-
-		return $css;
+		return $this->resolveBackgroundUrls($stylesheetCss, $cssBasePath);
 	}
 
 	/**
diff --git a/src/Css/CssParser.php b/src/Css/CssParser.php
index 724e40e35..d8d20f2a9 100644
--- a/src/Css/CssParser.php
+++ b/src/Css/CssParser.php
@@ -13,6 +13,11 @@
 
 class CssParser
 {
+	/**
+	 * Whitespace, each character of which is read as a space in a selector or declaration
+	 */
+	const WHITESPACE = '/\s/';
+
 	/**
 	 * @var Mpdf
 	 */
@@ -29,9 +34,9 @@ class CssParser
 	private $mediaQueryProcessor;
 
 	/**
-	 * @var AtRuleProcessor
+	 * @var StylesheetTokenizer
 	 */
-	private $atRuleProcessor;
+	private $tokenizer;
 
 	/**
 	 * @var CommentParser
@@ -138,7 +143,7 @@ public function __construct(
 		$this->normalizeProperties = new NormalizeProperties($mpdf, $sizeConverter, $colorConverter);
 		$this->mediaQueryProcessor = new MediaQueryProcessor($mpdf, $sizeConverter);
 		$this->cssLoader = new CssLoader($mpdf, $assetFetcher, $cache, $this->mediaQueryProcessor);
-		$this->atRuleProcessor = new AtRuleProcessor($this->mediaQueryProcessor);
+		$this->tokenizer = new StylesheetTokenizer();
 		$this->commentParser = new CommentParser();
 		$this->inlineStyleParser = new InlineStyleParser($this->normalizeProperties);
 		$this->selectorParser = new SelectorParser($mpdf);
@@ -159,7 +164,7 @@ public function parse($html)
 		$this->compiledRules = [];
 
 		$ind = 0;
-		$css = '';
+		$stylesheets = [];
 
 		$html = $this->mediaQueryProcessor->filterByMediaQuery($html, '/<style[^>]*media=["\']([^"\'>]*)["\'].*?<\/style>/is');
 		$html = $this->mediaQueryProcessor->filterByMediaQuery($html, '/<link[^>]*media=["\']([^"\'>]*)["\'].*?>/is');
@@ -177,7 +182,7 @@ public function parse($html)
 
 			$stylesheetCss = $this->cssLoader->loadStylesheet($path);
 			if ($stylesheetCss) {
-				$css .= $this->cssLoader->processExternalCssImports($stylesheetCss, $path, $externalCss, $externalCssCount);
+				$stylesheets[] = $this->cssLoader->processExternalCssImports($stylesheetCss, $path, $externalCss, $externalCssCount);
 			}
 
 			$externalCssCount--;
@@ -185,19 +190,16 @@ public function parse($html)
 		}
 
 		// CSS as <style> in HTML document
-		$regexp = '/<style.*?>(.*?)<\/style>/si';
-		if (preg_match_all($regexp, $html, $cssBlock)) {
-			$css .= ' ' . $this->cssLoader->resolveBackgroundUrls(implode(' ', $cssBlock[1]));
+		if (preg_match_all('/<style.*?>(.*?)<\/style>/si', $html, $cssBlock)) {
+			foreach ($cssBlock[1] as $css) {
+				$stylesheets[] = $this->cssLoader->resolveBackgroundUrls($css);
+			}
 		}
 
-		$css = preg_replace('|/\*.*?\*/|s', ' ', $css);
-		$css = preg_replace('/(<\!\-\-|\-\->)/s', ' ', $css);
-		$css = $this->atRuleProcessor->process($css);
-		$css = preg_replace('/[\s\n\r\t\f]/s', ' ', $css);
-		$css = $this->cssLoader->processDataUriImages($css);
-		$css = $this->inlineStyleParser->processUrlsInCss($css);
-
-		$this->processCssString($css);
+		// Each is read on its own, so a block or comment one leaves open ends with it
+		foreach ($stylesheets as $css) {
+			$this->processCssString($this->tokenizer->removeComments($css));
+		}
 
 		// Remove CSS (tags and content), if any (it can be <style> or <style type="txt/css">)
 		$html = preg_replace('/<style.*?>(.*?)<\/style>/si', '', $html);
@@ -260,22 +262,54 @@ public function getNthChildFormulas($tag)
 	}
 
 	/**
-	 * @param string $css
+	 * Reads each rule in a list of rules, unwrapping the @media blocks that match, and @supports and @layer blocks.
+	 *
+	 * An @supports condition is taken to pass, as its rules are unwrapped, so an @supports not block, the fallback for
+	 * engines without a feature, is left out. Every other at-rule is left out, @page rules apart.
+	 *
+	 * @param string $css A stylesheet, or the content of an at-rule's block, with its comments removed
 	 * @return void
 	 */
 	private function processCssString($css)
 	{
-		preg_match_all('/(.*?)\{(.*?)\}/', $css, $styles);
-		$count = count($styles[1]);
-		for ($i = 0; $i < $count; $i++) {
-			$classProperties = $this->parseCssProperties($styles[2][$i]);
+		foreach ($this->tokenizer->rules($css) as $rule) {
+			list($name, $prelude, $block) = $rule;
+
+			if ($block === null) {
+				continue;
+			}
 
-			foreach ($this->selectorCompiler->splitList($styles[1][$i]) as $selector) {
-				$this->processCssSelector($selector, $classProperties);
+			if ($name === null || $name === 'page') {
+				$this->processRule($name === null ? $prelude : '@page ' . $prelude, $block);
+			} elseif (($name === 'media' && $this->mediaQueryProcessor->matches($prelude))
+				|| ($name === 'supports' && !preg_match('/^not\b/i', $prelude))
+				|| $name === 'layer'
+			) {
+				$this->processCssString($block);
 			}
 		}
 	}
 
+	/**
+	 * Stores the declarations of a rule under each selector in its list
+	 *
+	 * @param string $selectors
+	 * @param string $declarations
+	 * @return void
+	 */
+	private function processRule($selectors, $declarations)
+	{
+		$classProperties = $this->parseCssProperties($declarations);
+
+		if (strpbrk($selectors, "\t\n\r\f\v") !== false) {
+			$selectors = preg_replace(self::WHITESPACE, ' ', $selectors);
+		}
+
+		foreach ($this->selectorCompiler->splitList($selectors) as $selector) {
+			$this->processCssSelector($selector, $classProperties);
+		}
+	}
+
 	/**
 	 * Process a CSS selector.
 	 *
@@ -428,50 +462,24 @@ private function compileRule($selector, array $classProperties)
 	/**
 	 * Parse CSS property string into an array.
 	 *
-	 * @param string $rawStyles CSS style string (e.g. "color: red; font-size: 12px")
+	 * @param string $rawStyles The declarations of a block, with its comments removed (e.g. "color: red; font-size: 12px")
 	 * @return array Associative array of CSS properties
 	 */
 	public function parseCssProperties($rawStyles)
 	{
-		$classProperties = [];
-		$styles = explode(';', trim($rawStyles));
-
-		foreach ($styles as $style) {
-			if (empty(trim($style))) {
-				continue;
-			}
-
-			// Changed to allow style="background: url('http://www.bpm1.com/bg.jpg')"
-			$tmp = explode(':', $style, 2);
-			$property = strtoupper(trim($tmp[0]));
-			$value = isset($tmp[1]) ? $tmp[1] : '';
-
-			$value = str_replace('%ZZ', ';', $value); // restore URL placeholder
-			$value = preg_replace('/\s*!important/i', '', $value);
-			$value = trim($value);
-
-			if (empty($property) || strlen($value) === 0) {
-				continue;
+		$declarations = $this->tokenizer->declarations($rawStyles);
+		foreach ($declarations as &$declaration) {
+			if (strpbrk($declaration[1], "\t\n\r\f\v") !== false) {
+				$declaration[1] = preg_replace(self::WHITESPACE, ' ', $declaration[1]);
 			}
 
-			// Ignores -webkit-gradient so doesn't override -moz-
-			if (($property === 'BACKGROUND-IMAGE' || $property === 'BACKGROUND') &&
-				stripos($value, '-webkit-gradient') !== false
-			) {
-				continue;
+			if (stripos($declaration[1], 'url(data:') !== false) {
+				$declaration[1] = $this->cssLoader->processDataUriImages($declaration[1]);
 			}
-
-			// Dropped before it can replace an earlier declaration of the property in the same block
-			if (!$this->normalizeProperties->canParse($property, $value)) {
-				continue;
-			}
-
-			// A repeated property moves to its last place, so it is expanded after a shorthand written before it
-			unset($classProperties[$property]);
-			$classProperties[$property] = $value;
 		}
+		unset($declaration);
 
-		return $this->normalizeProperties->normalize($classProperties);
+		return $this->inlineStyleParser->parseDeclarations($declarations);
 	}
 
 	/**
diff --git a/src/Css/InlineStyleParser.php b/src/Css/InlineStyleParser.php
index 3ff957cc4..25d7b3447 100644
--- a/src/Css/InlineStyleParser.php
+++ b/src/Css/InlineStyleParser.php
@@ -9,9 +9,15 @@ class InlineStyleParser
 	 */
 	private $normalizeProperties;
 
+	/**
+	 * @var StylesheetTokenizer
+	 */
+	private $tokenizer;
+
 	public function __construct(NormalizeProperties $normalizeProperties)
 	{
 		$this->normalizeProperties = $normalizeProperties;
+		$this->tokenizer = new StylesheetTokenizer();
 	}
 
 	/**
@@ -25,45 +31,39 @@ public function __construct(NormalizeProperties $normalizeProperties)
 	 */
 	public function parse($html)
 	{
-		$html = htmlspecialchars_decode($html); // mPDF 5.7.4 URLs
-		// mPDF 5.7.4 URLs
-		// Characters "(", ")", and ";" in url() e.g. background-image, cause problems parsing the CSS string
-		// URLencode ( and ), but change ";" to a code which can be converted back after parsing (so as not to confuse ;
-		// with a segment delimiter in the URI)
-		$html = $this->processUrlsInCss($html);
-
-		// Fix incomplete CSS code
-		$size = strlen($html) - 1;
-		if (substr($html, $size, 1) !== ';') {
-			$html .= ';';
-		}
-
-		// Make CSS[Name-of-the-class] = array(key => value)
-		$regexp = '|\\s*?(\\S+?):(.+?);|i';
-		preg_match_all($regexp, $html, $styleinfo);
-		$properties = $styleinfo[1];
-		$values = $styleinfo[2];
+		return $this->parseDeclarations($this->tokenizer->declarations(htmlspecialchars_decode($html)));
+	}
 
-		// Array-properties and Array-values must have the SAME SIZE!
+	/**
+	 * The properties a list of declarations sets, whether from a style attribute or a stylesheet's block
+	 *
+	 * @param string[][] $declarations Each [name, value], as StylesheetTokenizer::declarations() gives them
+	 * @return array Parsed CSS properties
+	 */
+	public function parseDeclarations(array $declarations)
+	{
 		$classproperties = [];
-		$properties_count = count($properties);
-		for ($i = 0; $i < $properties_count; $i++) {
+		foreach ($declarations as $declaration) {
+			$property = strtoupper(trim($declaration[0], " \t\n\r\0\x0B\f"));
+			$value = trim(preg_replace('/\s*!important/i', '', $this->processUrlsInCss($declaration[1])));
+
+			if (empty($property) || $value === '') {
+				continue;
+			}
 
 			// Ignores -webkit-gradient so doesn't override -moz-
-			if ((strtoupper($properties[$i]) === 'BACKGROUND-IMAGE' || strtoupper($properties[$i]) === 'BACKGROUND') && false !== stripos($values[$i], '-webkit-gradient')) {
+			if (($property === 'BACKGROUND-IMAGE' || $property === 'BACKGROUND') && false !== stripos($value, '-webkit-gradient')) {
 				continue;
 			}
 
-			// Dropped before it can replace an earlier declaration of the property in the same attribute
-			if (!$this->normalizeProperties->canParse(strtoupper($properties[$i]), $values[$i])) {
+			// Dropped before it can replace an earlier declaration of the property in the same list
+			if (!$this->normalizeProperties->canParse($property, $value)) {
 				continue;
 			}
 
-			$values[$i] = str_replace('%ZZ', ';', $values[$i]); // mPDF 5.7.4 URLs
 			// A repeated property moves to its last place, so it is expanded after a shorthand written before it
-			$property = strtoupper($properties[$i]);
 			unset($classproperties[$property]);
-			$classproperties[$property] = trim(preg_replace('/\s*!important/i', '', $values[$i]));
+			$classproperties[$property] = $value;
 		}
 
 		return $this->normalizeProperties->normalize($classproperties);
@@ -74,8 +74,7 @@ public function parse($html)
 	 *
 	 * The URL is read as CSS reads it: in either quote, with the other quote allowed inside, or unquoted, without the
 	 * whitespace around it. A backslash before a quote, a parenthesis or whitespace is dropped. Other backslashes
-	 * are kept, as a Windows path is full of them. Parentheses and braces are percent-encoded, and ";" becomes the
-	 * placeholder %ZZ, which the caller turns back once the declarations are split.
+	 * are kept, as a Windows path is full of them. Parentheses and braces are percent-encoded.
 	 *
 	 * @param string $css CSS string containing url() references
 	 * @return string CSS string with processed URLs
@@ -93,7 +92,7 @@ function ($m) {
 				$url = isset($m[3]) ? rtrim($m[3]) : (isset($m[2]) ? $m[2] : $m[1]);
 				$url = preg_replace('/\\\\(["\'()\s])/', '$1', $url);
 
-				return "url('" . str_replace(['(', ')', '{', '}', ';'], ['%28', '%29', '%7B', '%7D', '%ZZ'], $url) . "')";
+				return "url('" . str_replace(['(', ')', '{', '}'], ['%28', '%29', '%7B', '%7D'], $url) . "')";
 			},
 			$css
 		);
diff --git a/src/Css/StylesheetTokenizer.php b/src/Css/StylesheetTokenizer.php
new file mode 100644
index 000000000..4bb29f04a
--- /dev/null
+++ b/src/Css/StylesheetTokenizer.php
@@ -0,0 +1,226 @@
+<?php
+
+namespace Mpdf\Css;
+
+/**
+ * Splits a stylesheet into its rules, and a block into its declarations, reading the text as CSS Syntax Level 3
+ * tokenizes it.
+ *
+ * A brace, semicolon or comment marker inside a quoted string or an unquoted url(), or escaped with a backslash, is
+ * part of the text around it. A string left open ends at the line break, and a comment or block left open ends with
+ * the stylesheet. Parentheses and square brackets are not matched, so a brace or semicolon inside one still ends the
+ * block or declaration: one left open does not take the rest of the stylesheet with it.
+ */
+class StylesheetTokenizer
+{
+
+	/**
+	 * A quoted string, to its closing quote or to the line break or end that leaves it open. A backslash escapes the
+	 * next character, a line break included.
+	 */
+	const STRING = '"(?:[^"\\\\\n\r\f]++|\\\\(?:\r\n|[\s\S]))*+"?|\'(?:[^\'\\\\\n\r\f]++|\\\\(?:\r\n|[\s\S]))*+\'?';
+
+	/**
+	 * An unquoted url(), to its closing parenthesis or the end. A quoted one is read as a string.
+	 */
+	const URL = '(?<![\w\x80-\xff\\\\-])url\(\s*+(?![\'"])(?:[^)\\\\]++|\\\\[\s\S])*+\)?';
+
+	/**
+	 * A backslash and the character it escapes
+	 */
+	const ESCAPE = '\\\\[\s\S]';
+
+	/**
+	 * A comment, to its end or to the end of the stylesheet
+	 */
+	const COMMENT = '\/\*(?:[^*]++|\*(?!\/))*+(?:\*\/)?';
+
+	/**
+	 * A string, url() or escape, or a comment or HTML comment marker, which is captured
+	 */
+	const COMMENTS = '/' . self::STRING . '|' . self::URL . '|' . self::ESCAPE . '|(' . self::COMMENT . '|<!--|-->)/i';
+
+	/**
+	 * A brace or semicolon outside strings, url() and escapes
+	 */
+	const STRUCTURE = '/(?:' . self::STRING . '|' . self::URL . '|' . self::ESCAPE . ')(*SKIP)(*FAIL)|[{};]/i';
+
+	/**
+	 * Replaces each comment in a stylesheet with a space, and each <!-- and --> an HTML comment around it leaves,
+	 * leaving those inside strings and url() alone
+	 *
+	 * @param string $css
+	 *
+	 * @return string
+	 */
+	public function removeComments($css)
+	{
+		if (strpos($css, '/*') === false && strpos($css, '<!--') === false && strpos($css, '-->') === false) {
+			return $css;
+		}
+
+		return preg_replace_callback(
+			self::COMMENTS,
+			function ($m) {
+				return isset($m[1]) ? ' ' : $m[0];
+			},
+			$css
+		);
+	}
+
+	/**
+	 * The rules in a list of rules: a stylesheet, or the block of an at-rule that holds rules, such as @media
+	 *
+	 * A qualified rule's prelude runs to the brace that opens its block, taking in any semicolon or unmatched closing
+	 * brace before it, so a stray one spoils only the selector after it. An at-rule ends at a semicolon, at the end of
+	 * its block, or at the end of the list. A byte order mark at the start is left out.
+	 *
+	 * @param string $css With its comments removed
+	 *
+	 * @return array[] Each [the at-rule's name in lower case, without the @, or null for a qualified rule; the
+	 *                 selector list of a qualified rule as written, or what follows an at-rule's name, trimmed; the
+	 *                 text inside the block, or null for an at-rule without one]
+	 */
+	public function rules($css)
+	{
+		$rules = [];
+		$depth = 0;
+		$open = 0;
+
+		// A byte order mark, as a stylesheet read from a file may start with, is not part of the first rule
+		$start = preg_match('/^\s*+\xEF\xBB\xBF/', $css, $bom) ? strlen($bom[0]) : 0;
+
+		foreach ($this->structure($css) as $token) {
+			list($char, $offset) = $token;
+
+			if ($char === '{') {
+				if ($depth++ === 0) {
+					$open = $offset;
+				}
+			} elseif ($char === '}') {
+				if ($depth > 0 && --$depth === 0) {
+					$rules[] = $this->rule(substr($css, $start, $open - $start), (string) substr($css, $open + 1, $offset - $open - 1));
+					$start = $offset + 1;
+				}
+			} elseif ($depth === 0 && $this->startsAtRule($css, $start)) {
+				$rules[] = $this->rule(substr($css, $start, $offset - $start), null);
+				$start = $offset + 1;
+			}
+		}
+
+		if ($depth > 0) {
+			$rules[] = $this->rule(substr($css, $start, $open - $start), (string) substr($css, $open + 1));
+		} elseif ($start < strlen($css) && $this->startsAtRule($css, $start)) {
+			$rules[] = $this->rule(substr($css, $start), null);
+		}
+
+		return $rules;
+	}
+
+	/**
+	 * The declarations in a block, as property name and value split at the first colon
+	 *
+	 * A declaration ends at a semicolon, or at the end of the block. An at-rule in the block, such as a margin box in
+	 * an @page rule, and a rule nested in it, end at the close of their own block and are left out, as is anything
+	 * else with a block in it, and any part without a colon.
+	 *
+	 * @param string $block With its comments removed
+	 *
+	 * @return string[][] Each [name, value], as written
+	 */
+	public function declarations($block)
+	{
+		$declarations = [];
+
+		// With no string, url(), escape or block in it, every semicolon ends a declaration
+		if (strpbrk($block, "\"'\\{}") === false && stripos($block, 'url(') === false) {
+			foreach (explode(';', $block) as $text) {
+				$this->addDeclaration($declarations, $text);
+			}
+
+			return $declarations;
+		}
+
+		$start = 0;
+		$depth = 0;
+
+		foreach ($this->structure($block) as $token) {
+			list($char, $offset) = $token;
+
+			if ($char === '{') {
+				$depth++;
+			} elseif ($char === '}') {
+				if ($depth > 0 && --$depth === 0) {
+					$start = $offset + 1;
+				}
+			} elseif ($depth === 0) {
+				$this->addDeclaration($declarations, substr($block, $start, $offset - $start));
+				$start = $offset + 1;
+			}
+		}
+
+		if ($depth === 0) {
+			$this->addDeclaration($declarations, (string) substr($block, $start));
+		}
+
+		return $declarations;
+	}
+
+	/**
+	 * Each brace and semicolon outside strings, unquoted url() and escapes
+	 *
+	 * @param string $css
+	 *
+	 * @return array[] Each [the character, its offset]
+	 */
+	private function structure($css)
+	{
+		preg_match_all(self::STRUCTURE, $css, $matches, PREG_OFFSET_CAPTURE);
+
+		return $matches[0];
+	}
+
+	/**
+	 * Whether the text from $start, after any whitespace, is an at-rule
+	 *
+	 * @param string $css
+	 * @param int $start
+	 *
+	 * @return bool
+	 */
+	private function startsAtRule($css, $start)
+	{
+		$start += strspn($css, " \t\n\r\f", $start);
+
+		return isset($css[$start]) && $css[$start] === '@';
+	}
+
+	/**
+	 * @param string $prelude Everything before the block or the semicolon
+	 * @param string|null $block
+	 *
+	 * @return array A rule, as rules() describes
+	 */
+	private function rule($prelude, $block)
+	{
+		if (preg_match('/^[ \t\n\r\f]*+@([-\w]*)(.*)$/s', $prelude, $m)) {
+			return [strtolower($m[1]), trim($m[2]), $block];
+		}
+
+		return [null, $prelude, $block];
+	}
+
+	/**
+	 * Adds a part of a block to its declarations, if it is one
+	 *
+	 * @param string[][] $declarations
+	 * @param string $text
+	 */
+	private function addDeclaration(array &$declarations, $text)
+	{
+		$colon = strpos($text, ':');
+		if ($colon !== false && !$this->startsAtRule($text, 0)) {
+			$declarations[] = [substr($text, 0, $colon), (string) substr($text, $colon + 1)];
+		}
+	}
+}
diff --git a/tests/Mpdf/Css/AtRuleProcessorTest.php b/tests/Mpdf/Css/AtRuleProcessorTest.php
deleted file mode 100644
index 09180b188..000000000
--- a/tests/Mpdf/Css/AtRuleProcessorTest.php
+++ /dev/null
@@ -1,116 +0,0 @@
-<?php
-
-namespace Mpdf\Css;
-
-use Mpdf\Mpdf;
-use Mpdf\SizeConverter;
-use Psr\Log\NullLogger;
-
-/**
- * The pass that unwraps, keeps or removes each at-rule before a stylesheet is split into rules at each brace
- */
-class AtRuleProcessorTest extends \Yoast\PHPUnitPolyfills\TestCases\TestCase
-{
-
-	/**
-	 * @var AtRuleProcessor
-	 */
-	private $processor;
-
-	/**
-	 * A processor matching @media against the default medium, print
-	 */
-	protected function set_up()
-	{
-		parent::set_up();
-
-		$mpdf = new Mpdf();
-		$sizeConverter = new SizeConverter($mpdf->dpi, $mpdf->default_font_size, $mpdf, new NullLogger());
-		$this->processor = new AtRuleProcessor(new MediaQueryProcessor($mpdf, $sizeConverter));
-	}
-
-	/**
-	 * Release the processor and its document
-	 */
-	protected function tear_down()
-	{
-		unset($this->processor);
-
-		parent::tear_down();
-	}
-
-	/**
-	 * Each at-rule is unwrapped, kept or removed whole, and the rule after it is left as it was
-	 *
-	 * @dataProvider stylesheets
-	 *
-	 * @param string $css
-	 * @param string $expected The stylesheet left, with its whitespace collapsed
-	 */
-	public function testProcess($css, $expected)
-	{
-		$this->assertSame($expected, trim(preg_replace('/\s+/', ' ', $this->processor->process($css))));
-	}
-
-	/**
-	 * Stylesheets with an at-rule in them, and what is left of each
-	 *
-	 * @return array[]
-	 */
-	public function stylesheets()
-	{
-		return [
-			'no at-rule' => ['p { color: red }', 'p { color: red }'],
-
-			'@charset' => ['@charset "UTF-8"; p { color: red }', 'p { color: red }'],
-			'@namespace' => ['@namespace svg url(http://www.w3.org/2000/svg); p { color: red }', 'p { color: red }'],
-			'@import' => ['@import url("a.css") screen; @import "b.css"; p { color: red }', 'p { color: red }'],
-			'@layer statement' => ['@layer base, theme; p { color: red }', 'p { color: red }'],
-
-			'@keyframes' => ['@keyframes spin { from { opacity: 0 } to { opacity: 1 } } p { color: red }', 'p { color: red }'],
-			'prefixed @keyframes' => ['@-webkit-keyframes spin { 0% { opacity: 0 } } p { color: red }', 'p { color: red }'],
-			'@container' => ['@container (min-width: 1px) { h1 { color: blue } } p { color: red }', 'p { color: red }'],
-			'@font-feature-values' => ['@font-feature-values Font { @swash { fancy: 1 } } p { color: red }', 'p { color: red }'],
-			'@font-face' => ['@font-face { font-family: x; src: url(x.ttf) } p { color: red }', 'p { color: red }'],
-			'an empty unknown block' => ['@unknown {} p { color: red }', 'p { color: red }'],
-
-			'@supports' => ['@supports (display: grid) { h1 { color: blue } } p { color: red }', 'h1 { color: blue } p { color: red }'],
-			'@supports not' => ['@supports not (display: grid) { h1 { color: blue } } p { color: red }', 'p { color: red }'],
-			'@supports with not inside it' => ['@supports (display: grid) and (not (display: inline-grid)) { h1 { color: blue } }', 'h1 { color: blue }'],
-			'@layer block' => ['@layer base { h1 { color: blue } } p { color: red }', 'h1 { color: blue } p { color: red }'],
-			'@layer block with no name' => ['@layer { h1 { color: blue } }', 'h1 { color: blue }'],
-
-			'@media for print' => ['@media print { h1 { color: blue } } p { color: red }', 'h1 { color: blue } p { color: red }'],
-			'@media for screen' => ['@media screen { h1 { color: blue } } p { color: red }', 'p { color: red }'],
-			'@media in upper case' => ['@MEDIA print { h1 { color: blue } }', 'h1 { color: blue }'],
-			'an empty @media block' => ['@media print {} p { color: red }', 'p { color: red }'],
-			'@media inside @supports' => ['@supports (display: grid) { @media print { h1 { color: blue } } @media screen { h2 { color: blue } } }', 'h1 { color: blue }'],
-			'@supports inside @media' => ['@media print { @supports (display: grid) { h1 { color: blue } } h2 { color: blue } }', 'h1 { color: blue } h2 { color: blue }'],
-			'@media inside @media' => ['@media print { @media all { h1 { color: blue } } }', 'h1 { color: blue }'],
-			'@keyframes inside @media' => ['@media print { @keyframes spin { from { opacity: 0 } } h1 { color: blue } }', 'h1 { color: blue }'],
-
-			'@page' => ['@page { margin: 10mm } p { color: red }', '@page { margin: 10mm } p { color: red }'],
-			'@page with a pseudo page' => ['@page :first { margin-top: 10mm }', '@page :first { margin-top: 10mm }'],
-			'@page with margin boxes' => [
-				'@page { margin: 10mm; @top-center { content: "x" } margin-bottom: 20mm; @bottom-left { content: "y" } } p { color: red }',
-				'@page { margin: 10mm; margin-bottom: 20mm;} p { color: red }',
-			],
-			'@page with an at sign in a declaration' => [
-				'@page { background: url(a@2x.png); @top-center { content: "x" } }',
-				'@page { background: url(a@2x.png);}',
-			],
-
-			'a brace in a string in a prelude' => ['@supports (content: "}") { h1 { color: blue } } p { color: red }', 'h1 { color: blue } p { color: red }'],
-			'a brace in a string in a removed block' => ['@keyframes x { from { content: "}" } } p { color: red }', 'p { color: red }'],
-			'a brace in a string in an unwrapped block' => ['@layer { h1 { content: \'{\' } } p { color: red }', 'h1 { content: \'{\' } p { color: red }'],
-			'a quote escaped in a string' => ['@keyframes x { from { content: "\"}" } } p { color: red }', 'p { color: red }'],
-			'a semicolon in a string in a statement' => ['@import "a;b.css"; p { color: red }', 'p { color: red }'],
-			'an escaped brace' => ['@keyframes x { from { content: \} } } p { color: red }', 'p { color: red }'],
-			'an at sign in a declaration' => ['p { background: url(a@2x.png) } h1 { color: blue }', 'p { background: url(a@2x.png) } h1 { color: blue }'],
-			'a string left open at the end of a line' => ["@keyframes x { from { content: \"} } }\n} } p { color: red }", 'p { color: red }'],
-
-			'a block left open' => ['p { color: red } @keyframes x { from { opacity: 0 }', 'p { color: red }'],
-			'a statement left open' => ['p { color: red } @import "a.css"', 'p { color: red }'],
-		];
-	}
-}
diff --git a/tests/Mpdf/Css/CssLoaderTest.php b/tests/Mpdf/Css/CssLoaderTest.php
index 876245720..b3d87bf04 100644
--- a/tests/Mpdf/Css/CssLoaderTest.php
+++ b/tests/Mpdf/Css/CssLoaderTest.php
@@ -109,6 +109,47 @@ public function testExtractExternalStylesheetUrlsMatchesEachImportsMediaQueryLis
 		);
 	}
 
+	/**
+	 * Only an @import among a stylesheet's rules is loaded: not one in a comment, a string or a block, and not one
+	 * after a block left open
+	 */
+	public function testExtractExternalStylesheetUrlsReadsOnlyImportRules()
+	{
+		$html = '<style>
+			/* @import url(commented.css); */
+			@import url(https://fonts.example/css2?family=Inter:wght@300;400&display=swap);
+			p { font-family: "@import url(string.css);"; }
+			@media print { @import url(nested.css); }
+			@import url(after.css);
+		</style>
+		<style>h1 { color: red</style>
+		<style>@import url(next.css);</style>';
+
+		$this->assertSame(
+			['https://fonts.example/css2?family=Inter:wght@300;400&display=swap', 'after.css', 'next.css'],
+			$this->cssLoader->extractExternalStylesheetUrls($html)
+		);
+	}
+
+	/**
+	 * An @import in a loaded stylesheet is queued relative to that stylesheet when its media query list matches, in
+	 * either form, and not when it is in a comment
+	 */
+	public function testProcessExternalCssImportsSkipsACommentedImport()
+	{
+		$externalCss = [];
+		$count = 0;
+
+		$this->cssLoader->processExternalCssImports(
+			'/* @import "old.css"; */ @import "base.css"; p { color: red; }',
+			'http://example.com/css/main.css',
+			$externalCss,
+			$count
+		);
+
+		$this->assertSame(['http://example.com/css/base.css'], $externalCss);
+	}
+
 	/**
 	 * An @import in a loaded stylesheet is queued relative to that stylesheet when its media query list matches, in
 	 * either form
diff --git a/tests/Mpdf/Css/CssParserTest.php b/tests/Mpdf/Css/CssParserTest.php
index 22593314b..6143406df 100644
--- a/tests/Mpdf/Css/CssParserTest.php
+++ b/tests/Mpdf/Css/CssParserTest.php
@@ -323,4 +323,266 @@ public function testCompilesEveryRuleUnderTheStandardCascade()
 		$this->assertSame(['P', 'CLASS>>A', '@PAGE'], array_keys($this->parser->getCss()));
 		$this->assertSame([], $this->parser->getCascadeCss());
 	}
+
+	/**
+	 * Each at-rule is unwrapped, kept or left out whole, in either cssMode, and the rules around it are stored as
+	 * they are written
+	 *
+	 * @dataProvider atRulesInEachMode
+	 *
+	 * @param string $mode
+	 * @param string $css
+	 * @param array[] $expected Each key stored, with the values of the properties to check
+	 */
+	public function testAtRules($mode, $css, array $expected)
+	{
+		$this->mpdf->cssMode = $mode;
+		$this->parser->parse('<style>' . $css . '</style>');
+
+		$this->assertSame($expected, $this->storedValues($expected));
+	}
+
+	/**
+	 * Each stylesheet in atRules() in each cssMode
+	 *
+	 * @return array[]
+	 */
+	public function atRulesInEachMode()
+	{
+		return $this->inEachMode($this->atRules());
+	}
+
+	/**
+	 * Stylesheets with an at-rule in them, and the keys each stores
+	 *
+	 * @return array[]
+	 */
+	private function atRules()
+	{
+		$p = ['P' => ['COLOR' => 'red']];
+		$h1 = ['H1' => ['COLOR' => 'blue']];
+		$h1p = ['H1' => ['COLOR' => 'blue'], 'P' => ['COLOR' => 'red']];
+
+		return [
+			'no at-rule' => ['p { color: red }', $p],
+
+			'@charset' => ['@charset "UTF-8"; p { color: red }', $p],
+			'@namespace' => ['@namespace svg url(http://www.w3.org/2000/svg); p { color: red }', $p],
+			'@import' => ['@import url("a.css") screen; @import "b.css"; p { color: red }', $p],
+			'@import with semicolons in its url()' => ['@import url(https://fonts.example/css2?family=Inter:wght@300;400;500&display=swap); p { color: red }', $p],
+			'@layer statement' => ['@layer base, theme; p { color: red }', $p],
+
+			'@keyframes' => ['@keyframes spin { from { opacity: 0 } to { opacity: 1 } } p { color: red }', $p],
+			'prefixed @keyframes' => ['@-webkit-keyframes spin { 0% { opacity: 0 } } p { color: red }', $p],
+			'@container' => ['@container (min-width: 1px) { h1 { color: blue } } p { color: red }', $p],
+			'@font-feature-values' => ['@font-feature-values Font { @swash { fancy: 1 } } p { color: red }', $p],
+			'@font-face' => ['@font-face { font-family: x; src: url(x.ttf) } p { color: red }', $p],
+			'an empty unknown block' => ['@unknown {} p { color: red }', $p],
+
+			'@supports' => ['@supports (display: grid) { h1 { color: blue } } p { color: red }', $h1p],
+			'@supports not' => ['@supports not (display: grid) { h1 { color: blue } } p { color: red }', $p],
+			'@supports with not inside it' => ['@supports (display: grid) and (not (display: inline-grid)) { h1 { color: blue } }', $h1],
+			'@layer block' => ['@layer base { h1 { color: blue } } p { color: red }', $h1p],
+			'@layer block with no name' => ['@layer { h1 { color: blue } }', $h1],
+
+			'@media for print' => ['@media print { h1 { color: blue } } p { color: red }', $h1p],
+			'@media for screen' => ['@media screen { h1 { color: blue } } p { color: red }', $p],
+			'@media in upper case' => ['@MEDIA print { h1 { color: blue } }', $h1],
+			'an empty @media block' => ['@media print {} p { color: red }', $p],
+			'@media inside @supports' => ['@supports (display: grid) { @media print { h1 { color: blue } } @media screen { h2 { color: blue } } }', $h1],
+			'@supports inside @media' => ['@media print { @supports (display: grid) { h1 { color: blue } } h2 { color: blue } }', $h1 + ['H2' => ['COLOR' => 'blue']]],
+			'@media inside @media' => ['@media print { @media all { h1 { color: blue } } }', $h1],
+			'@keyframes inside @media' => ['@media print { @keyframes spin { from { opacity: 0 } } h1 { color: blue } }', $h1],
+			'@media left open' => ['p { color: red } @media print { h1 { color: blue }', ['P' => ['COLOR' => 'red'], 'H1' => ['COLOR' => 'blue']]],
+
+			'@page' => ['@page { margin-top: 10mm } p { color: red }', ['@PAGE' => ['MARGIN-TOP' => '10mm'], 'P' => ['COLOR' => 'red']]],
+			'@page with a pseudo page' => ['@page :first { margin-top: 10mm }', ['@PAGE>>PSEUDO>>FIRST' => ['MARGIN-TOP' => '10mm']]],
+			'@page with a pseudo page and no space' => ['@page:first { margin-top: 10mm }', ['@PAGE>>PSEUDO>>FIRST' => ['MARGIN-TOP' => '10mm']]],
+			'@page inside @media' => ['@media print { @page { margin-top: 10mm } }', ['@PAGE' => ['MARGIN-TOP' => '10mm']]],
+			'@page with margin boxes' => [
+				'@page { margin-top: 10mm; @top-center { content: "}" } margin-bottom: 20mm; @bottom-left { content: "y" } } p { color: red }',
+				['@PAGE' => ['MARGIN-TOP' => '10mm', 'MARGIN-BOTTOM' => '20mm'], 'P' => ['COLOR' => 'red']],
+			],
+
+			'a brace in a string in a prelude' => ['@supports (content: "}") { h1 { color: blue } } p { color: red }', $h1p],
+			'a brace in a string in a removed block' => ['@keyframes x { from { content: "}" } } p { color: red }', $p],
+			'a brace in a string in an unwrapped block' => ['@layer { h1 { content: \'{\'; color: blue } } p { color: red }', $h1p],
+			'a quote escaped in a string' => ['@keyframes x { from { content: "\"}" } } p { color: red }', $p],
+			'a semicolon in a string in a statement' => ['@import "a;b.css"; p { color: red }', $p],
+			'an escaped brace' => ['@keyframes x { from { content: \} } } p { color: red }', $p],
+			'an at sign in a declaration' => ['h1 { color: blue; background: url(a@2x.png) } p { color: red }', $h1p],
+			'a string left open at the end of a line' => ["@keyframes x { from { content: \"} } }\n} } p { color: red }", $p],
+			'a statement left open' => ['p { color: red } @import "a.css"', $p],
+		];
+	}
+
+	/**
+	 * Braces, semicolons and comment markers inside strings, url() and escapes are part of the declaration or selector
+	 * they are in, in either cssMode, and the rules around them are stored as they are written
+	 *
+	 * @dataProvider constructsInEachMode
+	 *
+	 * @param string $mode
+	 * @param string $css
+	 * @param array[] $expected Each key stored, with the values of the properties to check
+	 */
+	public function testStringsUrlsAndEscapes($mode, $css, array $expected)
+	{
+		$this->mpdf->cssMode = $mode;
+		$this->parser->parse('<style>' . $css . '</style>');
+
+		$this->assertSame($expected, $this->storedValues($expected));
+	}
+
+	/**
+	 * Each stylesheet in constructs() in each cssMode
+	 *
+	 * @return array[]
+	 */
+	public function constructsInEachMode()
+	{
+		return $this->inEachMode($this->constructs());
+	}
+
+	/**
+	 * Stylesheets with braces, semicolons or comment markers in strings, url() or escapes, and the keys each stores
+	 *
+	 * @return array[]
+	 */
+	private function constructs()
+	{
+		$quotes = function ($value) {
+			return ['Q' => ['QUOTES' => $value], 'P' => ['COLOR' => 'red']];
+		};
+
+		return [
+			'braces in a string' => ['q { quotes: "}" "{" } p { color: red }', $quotes('"}" "{"')],
+			'an unbalanced brace in a string' => ['q { quotes: "}" } p { color: red }', $quotes('"}"')],
+			'a semicolon in a string' => ['q { quotes: ";" ";" } p { color: red }', $quotes('";" ";"')],
+			'a declaration in a string' => [
+				'p { color: red; font-family: \'x;color:blue;y\', monospace }',
+				['P' => ['COLOR' => 'red', 'FONT-FAMILY' => 'monospace']],
+			],
+			'an escaped quote in a string' => ['q { quotes: "\"}" "x" } p { color: red }', $quotes('"\"}" "x"')],
+			'a comment opener in a string' => ['q { quotes: "/*" "x" } p { color: red } q { quotes: "*/" "x" }', $quotes('"*/" "x"')],
+			'a comment in a string' => ['q { quotes: "/* x */" "y" } p { color: red }', $quotes('"/* x */" "y"')],
+			'a comment with a quote in it' => ['/* it\'s } */ q { quotes: "x" "y" } p { color: red }', $quotes('"x" "y"')],
+			'a string left open at a line break' => ["q { quotes: \"a}b\n; } p { color: red }", ['Q' => [], 'P' => ['COLOR' => 'red']]],
+
+			'an escaped brace in a selector' => ['.a\{b { color: blue } p { color: red }', ['P' => ['COLOR' => 'red']]],
+			'a brace in an attribute selector' => ['q[title="{"] { color: blue } p { color: red }', ['P' => ['COLOR' => 'red']]],
+
+			'braces and a semicolon in an unquoted url()' => [
+				'div { background-image: url(http://example.com/a};{b.png) } p { color: red }',
+				['DIV' => ['BACKGROUND-IMAGE' => 'http://example.com/a%7D;%7Bb.png'], 'P' => ['COLOR' => 'red']],
+			],
+			'a semicolon in a quoted url()' => [
+				'div { background-image: url("data:image/svg+xml;utf8,<svg></svg>"); color: blue } p { color: red }',
+				['DIV' => ['BACKGROUND-IMAGE' => 'data:image/svg+xml;utf8,<svg></svg>', 'COLOR' => 'blue'], 'P' => ['COLOR' => 'red']],
+			],
+			'a percent sign and ZZ in a url()' => ['div { background-image: url(http://example.com/a%ZZb.png) }', ['DIV' => ['BACKGROUND-IMAGE' => 'http://example.com/a%ZZb.png']]],
+
+			'a rule nested in a block' => [
+				'q { color: blue; & b { color: green } margin-top: 1mm } p { color: red }',
+				['Q' => ['COLOR' => 'blue', 'MARGIN-TOP' => '1mm'], 'P' => ['COLOR' => 'red']],
+			],
+			'an at-rule nested in a block' => [
+				'q { color: blue; @media print { color: green } margin-top: 1mm } p { color: red }',
+				['Q' => ['COLOR' => 'blue', 'MARGIN-TOP' => '1mm'], 'P' => ['COLOR' => 'red']],
+			],
+			'whitespace across lines' => ["p\n{ margin:\n1mm\t2mm; }", ['P' => ['MARGIN-TOP' => '1mm', 'MARGIN-RIGHT' => '2mm']]],
+		];
+	}
+
+	/**
+	 * In standard mode, a selector with escapes in it reaches the compiler whole, which reads each escape as the
+	 * character it stands for
+	 */
+	public function testASelectorWithEscapesReachesTheCompilerWhole()
+	{
+		$this->mpdf->cssMode = CssMode::STANDARD;
+		$this->parser->parse('<style>.sm\\:hidden { color: blue } .a\\{b\\;c { color: green }</style>');
+
+		$rules = $this->parser->getCompiledRules();
+		$this->assertCount(2, $rules);
+		$this->assertSame(['SM:HIDDEN'], $rules[0][0]['compounds'][0]['classes']);
+		$this->assertSame(['COLOR' => 'blue'], $rules[0][1]);
+		$this->assertSame(['A{B;C'], $rules[1][0]['compounds'][0]['classes']);
+		$this->assertSame(['COLOR' => 'green'], $rules[1][1]);
+	}
+
+	/**
+	 * A block, comment or string left open in one stylesheet ends with it, and the next stylesheet is read from its
+	 * start
+	 *
+	 * @dataProvider stylesheetsLeftOpen
+	 *
+	 * @param string $first
+	 */
+	public function testEachStylesheetIsReadOnItsOwn($first)
+	{
+		$this->parser->parse('<style>' . $first . '</style><style>p { color: red }</style>');
+
+		$this->assertSame(['COLOR' => 'red'], $this->parser->getCss()['P']);
+	}
+
+	/**
+	 * Stylesheets that leave something open at their end
+	 *
+	 * @return array[]
+	 */
+	public function stylesheetsLeftOpen()
+	{
+		return [
+			'a block' => ['h1 { color: blue'],
+			'a comment' => ['/* h1 { color: blue }'],
+			'a string' => ['h1 { font-family: "a'],
+		];
+	}
+
+	/**
+	 * A byte order mark at the start of a stylesheet, as one read from a file may have, is not part of its first rule
+	 */
+	public function testAByteOrderMarkIsNotPartOfTheFirstRule()
+	{
+		$this->parser->parse("<style> \xEF\xBB\xBF@charset \"UTF-8\"; p { color: red }</style><style>\xEF\xBB\xBFh1 { color: blue }</style>");
+
+		$this->assertSame(['P' => ['COLOR' => 'red'], 'H1' => ['COLOR' => 'blue']], $this->parser->getCss());
+	}
+
+	/**
+	 * Each case in each cssMode
+	 *
+	 * @param array[] $cases
+	 *
+	 * @return array[] Each case with the mode before its arguments, named for both
+	 */
+	private function inEachMode(array $cases)
+	{
+		$data = [];
+		foreach ([CssMode::LEGACY, CssMode::STANDARD] as $mode) {
+			foreach ($cases as $name => $case) {
+				$data[$mode . ': ' . $name] = array_merge([$mode], $case);
+			}
+		}
+
+		return $data;
+	}
+
+	/**
+	 * The keys the last CSS parsed stored, each with the values of the properties named for it
+	 *
+	 * @param array[] $properties The properties to read for each key, keyed by their names
+	 *
+	 * @return array[] Each key stored, with those of the properties named for it that it has
+	 */
+	private function storedValues(array $properties)
+	{
+		$stored = [];
+		foreach ($this->parser->getCss() as $key => $values) {
+			$stored[$key] = array_intersect_key($values, isset($properties[$key]) ? $properties[$key] : []);
+		}
+
+		return $stored;
+	}
 }
diff --git a/tests/Mpdf/Css/InlineStyleParserTest.php b/tests/Mpdf/Css/InlineStyleParserTest.php
index a16e30479..7c72f6c0b 100644
--- a/tests/Mpdf/Css/InlineStyleParserTest.php
+++ b/tests/Mpdf/Css/InlineStyleParserTest.php
@@ -64,14 +64,44 @@ public function testParse_WithUrls()
 		$this->assertEquals('image.png', $result['BACKGROUND-IMAGE']);
 	}
 
-	public function testProcessUrls_WithParenthesesAndSemicolons()
+	/**
+	 * A style attribute splits into declarations as a stylesheet's block does
+	 *
+	 * @dataProvider declarationLists
+	 *
+	 * @param string $style
+	 * @param array $expected
+	 */
+	public function testParse_SplitsDeclarationsAsABlock($style, array $expected)
+	{
+		$this->assertSame($expected, $this->inlineStyleParser->parse($style));
+	}
+
+	/**
+	 * Style attributes, and the properties each gives
+	 *
+	 * @return array[]
+	 */
+	public function declarationLists()
+	{
+		return [
+			'a semicolon in a string' => ["font-family: 'x;color:#f00;y', monospace; color: #00f", ['FONT-FAMILY' => 'monospace', 'COLOR' => '#00f']],
+			'a semicolon in an unquoted url()' => ['background-image: url(a;b.png); color: #00f', ['BACKGROUND-IMAGE' => 'a;b.png', 'COLOR' => '#00f']],
+			'a value across lines' => ["color:\n#00f", ['COLOR' => '#00f']],
+			'a space before the colon' => ['color : #00f', ['COLOR' => '#00f']],
+			'escaped quotes as HTML entities' => ['font-family: &quot;a;b&quot;, monospace; color: #00f', ['FONT-FAMILY' => 'monospace', 'COLOR' => '#00f']],
+		];
+	}
+
+	/**
+	 * A semicolon in a url() is kept, and the declaration after it still applies
+	 */
+	public function testParse_WithASemicolonInAUrl()
 	{
-		$css = 'background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\'%3E%3C/svg%3E");';
+		$result = $this->inlineStyleParser->parse('background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\'%3E%3C/svg%3E"); color: #00f');
 
-		$result = $this->inlineStyleParser->processUrlsInCss($css);
-		
-		$this->assertStringContainsString('svg+xml%ZZ', $result);
-		$this->assertStringNotContainsString('svg+xml;', $result);
+		$this->assertSame('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\'%3E%3C/svg%3E', $result['BACKGROUND-IMAGE']);
+		$this->assertSame('#00f', $result['COLOR']);
 	}
 	
 	/**
@@ -109,15 +139,15 @@ public function urlProvider()
 			'spaces and parentheses' => ['url("sub dir/im (1).png")', "url('sub dir/im %281%29.png')"],
 			'whitespace around a quoted url' => ['url(  "a.png"  )', "url('a.png')"],
 			'whitespace around an unquoted url' => ["url(\n  a.png\t)", "url('a.png')"],
-			'semicolon and braces' => ["url('data:image/svg+xml;utf8,<svg><style>p{}</style></svg>')", "url('data:image/svg+xml%ZZutf8,<svg><style>p%7B%7D</style></svg>')"],
+			'semicolon and braces' => ["url('data:image/svg+xml;utf8,<svg><style>p{}</style></svg>')", "url('data:image/svg+xml;utf8,<svg><style>p%7B%7D</style></svg>')"],
 			'escaped quote' => ['url("a\\"b.png")', "url('a\"b.png')"],
 			'escaped parenthesis, unquoted' => ['url(a\\(1\\).png)', "url('a%281%29.png')"],
 			'escaped space, unquoted' => ['url(a\\ b.png)', "url('a b.png')"],
 			'Windows path' => ['url("D:\\a\\mpdf\\data\\img (1).png")', "url('D:\\a\\mpdf\\data\\img %281%29.png')"],
 			'two urls' => ['url(a.png), url( "b c.png" )', "url('a.png'), url('b c.png')"],
 			'upper case' => ['URL(a.png)', "url('a.png')"],
-			'long quoted data URI' => ['url("data:image/png;base64,' . $long . '")', "url('data:image/png%ZZbase64," . $long . "')"],
-			'long unquoted data URI' => ['url( data:image/png;base64,' . $long . ' )', "url('data:image/png%ZZbase64," . $long . "')"],
+			'long quoted data URI' => ['url("data:image/png;base64,' . $long . '")', "url('data:image/png;base64," . $long . "')"],
+			'long unquoted data URI' => ['url( data:image/png;base64,' . $long . ' )', "url('data:image/png;base64," . $long . "')"],
 		];
 	}
 
diff --git a/tests/Mpdf/Css/StylesheetTokenizerTest.php b/tests/Mpdf/Css/StylesheetTokenizerTest.php
new file mode 100644
index 000000000..912dd883a
--- /dev/null
+++ b/tests/Mpdf/Css/StylesheetTokenizerTest.php
@@ -0,0 +1,205 @@
+<?php
+
+namespace Mpdf\Css;
+
+use Yoast\PHPUnitPolyfills\TestCases\TestCase;
+
+/**
+ * Splitting a stylesheet into rules and a block into declarations, with the braces, semicolons and comment markers
+ * inside strings, url() and escapes left as text
+ */
+class StylesheetTokenizerTest extends TestCase
+{
+
+	/**
+	 * @var StylesheetTokenizer
+	 */
+	private $tokenizer;
+
+	/**
+	 * A tokenizer, which keeps no state between calls
+	 */
+	protected function set_up()
+	{
+		parent::set_up();
+
+		$this->tokenizer = new StylesheetTokenizer();
+	}
+
+	/**
+	 * Release the tokenizer
+	 */
+	protected function tear_down()
+	{
+		unset($this->tokenizer);
+
+		parent::tear_down();
+	}
+
+	/**
+	 * Each comment, and each HTML comment marker, becomes a space, and those inside strings and url() stay
+	 *
+	 * @dataProvider comments
+	 *
+	 * @param string $css
+	 * @param string $expected
+	 */
+	public function testRemoveComments($css, $expected)
+	{
+		$this->assertSame($expected, $this->tokenizer->removeComments($css));
+	}
+
+	/**
+	 * Stylesheets with comments, or with text that looks like one, and what is left of each
+	 *
+	 * @return array[]
+	 */
+	public function comments()
+	{
+		return [
+			'no comment' => ['p { color: red }', 'p { color: red }'],
+			'a comment' => ['p { /* a */ color: red }', 'p {   color: red }'],
+			'two comments' => ['/* a */p/* b */{}', ' p {}'],
+			'a comment across lines' => ["/* a\n b */p {}", ' p {}'],
+			'a comment with quotes and braces in it' => ['/* it\'s "} { */ p {}', '  p {}'],
+			'a comment left open' => ['p {} /* a { b', 'p {}  '],
+			'a comment with only an asterisk after the opener' => ['/*/ p {} */q {}', ' q {}'],
+			'a comment with asterisks in it' => ['/** a **/p {}', ' p {}'],
+
+			'a comment opener in a double-quoted string' => ['q { quotes: "/*" "x" } p {} q { quotes: "*/" }', 'q { quotes: "/*" "x" } p {} q { quotes: "*/" }'],
+			'a comment in a single-quoted string' => ["q { quotes: '/* x */' }", "q { quotes: '/* x */' }"],
+			'a comment opener after an escaped quote' => ['q { quotes: "\\"/*" } p {}', 'q { quotes: "\\"/*" } p {}'],
+			'a comment in an unquoted url()' => ['p { background: url(http://a/*b*/c.png) }', 'p { background: url(http://a/*b*/c.png) }'],
+			'a comment after url() in upper case' => ['p { background: URL(a.png) /* b */ }', 'p { background: URL(a.png)   }'],
+			'a comment in a function whose name ends in url' => ['p { x: myurl(a /* b */) }', 'p { x: myurl(a  ) }'],
+			'an escaped comment opener' => ['.a\\/* { color: red } */', '.a\\/* { color: red } */'],
+			'a string left open at a line break' => ["q { quotes: \"a /* b\n/* c */ }", "q { quotes: \"a /* b\n  }"],
+
+			'HTML comment markers' => ['<!-- p {} -->', '  p {}  '],
+			'HTML comment markers in a string' => ['q { quotes: "<!--" "-->" }', 'q { quotes: "<!--" "-->" }'],
+		];
+	}
+
+	/**
+	 * A stylesheet splits into its rules at the braces and semicolons outside strings, url() and escapes
+	 *
+	 * @dataProvider stylesheets
+	 *
+	 * @param string $css
+	 * @param array[] $expected
+	 */
+	public function testRules($css, array $expected)
+	{
+		$this->assertSame($expected, $this->tokenizer->rules($css));
+	}
+
+	/**
+	 * Stylesheets, and the rules in each
+	 *
+	 * @return array[]
+	 */
+	public function stylesheets()
+	{
+		return [
+			'nothing' => ['', []],
+			'whitespace' => [" \n\t", []],
+			'one rule' => ['p { color: red }', [[null, 'p ', ' color: red ']]],
+			'two rules' => ['p{color:red}h1{color:blue}', [[null, 'p', 'color:red'], [null, 'h1', 'color:blue']]],
+			'an empty block' => ['p {}', [[null, 'p ', '']]],
+			'a selector list' => ['h1, h2 { color: red }', [[null, 'h1, h2 ', ' color: red ']]],
+
+			'braces in a string' => ['q { quotes: "}" "{"; } p { color: red }', [[null, 'q ', ' quotes: "}" "{"; '], [null, ' p ', ' color: red ']]],
+			'an unbalanced brace in a string' => ["q { quotes: '}'; } p { color: red }", [[null, 'q ', " quotes: '}'; "], [null, ' p ', ' color: red ']]],
+			'an escaped quote in a string' => ['q { quotes: "\\"}" "x" } p {}', [[null, 'q ', ' quotes: "\\"}" "x" '], [null, ' p ', '']]],
+			'an escaped backslash before the closing quote' => ['q { quotes: "\\\\" "}" } p {}', [[null, 'q ', ' quotes: "\\\\" "}" '], [null, ' p ', '']]],
+			'an escaped line break in a string' => ["q { quotes: \"a\\\n}\" } p {}", [[null, 'q ', " quotes: \"a\\\n}\" "], [null, ' p ', '']]],
+			'a string left open at a line break' => ["q { quotes: \"a}\n} p { color: red }", [[null, 'q ', " quotes: \"a}\n"], [null, ' p ', ' color: red ']]],
+			'a string left open at the end' => ['q { quotes: "a}', [[null, 'q ', ' quotes: "a}']]],
+			'a brace in an attribute selector' => ['a[title="{"] { color: red } p {}', [[null, 'a[title="{"] ', ' color: red '], [null, ' p ', '']]],
+			'an escaped brace in a selector' => ['.a\\{b { color: red } p {}', [[null, '.a\\{b ', ' color: red '], [null, ' p ', '']]],
+			'an escaped colon in a selector' => ['.sm\\:hidden { display: none }', [[null, '.sm\\:hidden ', ' display: none ']]],
+
+			'braces and a semicolon in an unquoted url()' => ['q { background: url(a};{b.png) } p {}', [[null, 'q ', ' background: url(a};{b.png) '], [null, ' p ', '']]],
+			'an escaped parenthesis in an unquoted url()' => ['q { background: url(a\\)}.png) } p {}', [[null, 'q ', ' background: url(a\\)}.png) '], [null, ' p ', '']]],
+			'a brace in a quoted url()' => ['q { background: url( "a}.png" ) } p {}', [[null, 'q ', ' background: url( "a}.png" ) '], [null, ' p ', '']]],
+			'an unquoted url() in upper case' => ['q { background: URL(a}.png) } p {}', [[null, 'q ', ' background: URL(a}.png) '], [null, ' p ', '']]],
+			'a function whose name ends in url' => ['q { x: myurl(a}b) } p {}', [[null, 'q ', ' x: myurl(a'], [null, 'b) } p ', '']]],
+			'an unquoted url() left open' => ['q { background: url(a.png } p {}', [[null, 'q ', ' background: url(a.png } p {}']]],
+
+			'a block left open' => ['p { color: red } q { color: blue', [[null, 'p ', ' color: red '], [null, ' q ', ' color: blue']]],
+			'a selector with no block' => ['p { color: red } q', [[null, 'p ', ' color: red ']]],
+			'a semicolon before a selector' => ['p {} ; q { color: red }', [[null, 'p ', ''], [null, ' ; q ', ' color: red ']]],
+			'a brace closing no block' => ['p {} } q { color: red }', [[null, 'p ', ''], [null, ' } q ', ' color: red ']]],
+
+			'a statement at-rule' => ['@charset "UTF-8"; p {}', [['charset', '"UTF-8"', null], [null, ' p ', '']]],
+			'a semicolon in a string in a statement' => ['@import "a;b.css"; p {}', [['import', '"a;b.css"', null], [null, ' p ', '']]],
+			'a statement at-rule left open' => ['p {} @import url(a.css)', [[null, 'p ', ''], ['import', 'url(a.css)', null]]],
+			'a block at-rule' => ['@media print { p { color: red } }', [['media', 'print', ' p { color: red } ']]],
+			'an at-rule name in upper case' => ['@MEDIA print {}', [['media', 'print', '']]],
+			'an at-rule with a vendor prefix' => ['@-webkit-keyframes x { from {} }', [['-webkit-keyframes', 'x', ' from {} ']]],
+			'an at-rule without a space before its prelude' => ['@page:first { margin: 0 }', [['page', ':first', ' margin: 0 ']]],
+			'nested at-rules' => [
+				'@supports (display: grid) { @media print { p { color: red } } } h1 {}',
+				[['supports', '(display: grid)', ' @media print { p { color: red } } '], [null, ' h1 ', '']],
+			],
+			'a brace in a string in an at-rule prelude' => ['@supports (content: "}") { p {} } h1 {}', [['supports', '(content: "}")', ' p {} '], [null, ' h1 ', '']]],
+			'an at sign in a declaration' => ['p { background: url(a@2x.png) } h1 {}', [[null, 'p ', ' background: url(a@2x.png) '], [null, ' h1 ', '']]],
+			'an at-rule after a semicolon in a selector' => ['; @media print { p {} }', [[null, '; @media print ', ' p {} ']]],
+
+			'a byte order mark before an at-rule' => ["\xEF\xBB\xBF@charset \"UTF-8\"; p {}", [['charset', '"UTF-8"', null], [null, ' p ', '']]],
+			'a byte order mark after whitespace, before a rule' => [" \xEF\xBB\xBFp {}", [[null, 'p ', '']]],
+		];
+	}
+
+	/**
+	 * A block splits into its declarations at the semicolons outside strings, url(), escapes and nested blocks
+	 *
+	 * @dataProvider blocks
+	 *
+	 * @param string $block
+	 * @param array[] $expected
+	 */
+	public function testDeclarations($block, array $expected)
+	{
+		$this->assertSame($expected, $this->tokenizer->declarations($block));
+	}
+
+	/**
+	 * Blocks, and the declarations in each
+	 *
+	 * @return array[]
+	 */
+	public function blocks()
+	{
+		return [
+			'nothing' => ['', []],
+			'one declaration' => [' color: red ', [[' color', ' red ']]],
+			'two declarations' => ['color:red;margin:0', [['color', 'red'], ['margin', '0']]],
+			'a trailing semicolon' => ['color: red;', [['color', ' red']]],
+			'empty declarations' => [' ; ;color: red;; ', [['color', ' red']]],
+			'a colon in the value' => ['background: url(http://a/b.png)', [['background', ' url(http://a/b.png)']]],
+			'a part with no colon' => ['color red; margin: 0', [[' margin', ' 0']]],
+			'a declaration with no value' => ['color:; margin: 0', [['color', ''], [' margin', ' 0']]],
+
+			'a semicolon in a double-quoted string' => ['font-family: "a;b"; color: red', [['font-family', ' "a;b"'], [' color', ' red']]],
+			'a semicolon in a single-quoted string' => ["font-family: 'a;color:red'; margin: 0", [['font-family', " 'a;color:red'"], [' margin', ' 0']]],
+			'a semicolon after an escaped quote' => ['quotes: "\\";" "x"; color: red', [['quotes', ' "\\";" "x"'], [' color', ' red']]],
+			'a semicolon in an unquoted url()' => ['background: url(data:image/png;base64,AA==); color: red', [['background', ' url(data:image/png;base64,AA==)'], [' color', ' red']]],
+			'a semicolon in a quoted url()' => ['background: url("a;b.png"); color: red', [['background', ' url("a;b.png")'], [' color', ' red']]],
+			'an escaped semicolon' => ['font-family: a\\;b; color: red', [['font-family', ' a\\;b'], [' color', ' red']]],
+			'a string left open at a line break' => ["quotes: \"a;\nb; color: red", [['quotes', " \"a;\nb"], [' color', ' red']]],
+			'a brace closing no block' => ['color: red }; margin: 0', [['color', ' red }'], [' margin', ' 0']]],
+
+			'an at-rule with a block' => [
+				'margin: 10mm; @top-center { content: "x"; } margin-bottom: 20mm; @bottom-left { content: "}" }',
+				[['margin', ' 10mm'], [' margin-bottom', ' 20mm']],
+			],
+			'a statement at-rule' => ['@import "a.css"; color: red', [[' color', ' red']]],
+			'an at-rule with a colon in its prelude' => ['@media (min-width: 1px) { color: blue } color: red', [[' color', ' red']]],
+			'a nested rule' => ['color: red; &:hover { color: blue; } margin: 0', [['color', ' red'], [' margin', ' 0']]],
+			'a declaration with a block in its value' => ['color: red { x: y } margin: 0', [[' margin', ' 0']]],
+			'nested blocks' => ['@a { @b { color: blue } color: blue } color: red', [[' color', ' red']]],
+			'a nested block left open' => ['color: red; @a { color: blue', [['color', ' red']]],
+		];
+	}
+}
diff --git a/tests/Mpdf/StylesheetSyntaxTest.php b/tests/Mpdf/StylesheetSyntaxTest.php
new file mode 100644
index 000000000..a5ea8b6a6
--- /dev/null
+++ b/tests/Mpdf/StylesheetSyntaxTest.php
@@ -0,0 +1,120 @@
+<?php
+
+namespace Mpdf;
+
+use Yoast\PHPUnitPolyfills\TestCases\TestCase;
+
+/**
+ * A rule written after a brace, semicolon or comment marker inside a string, a url() or an escape, or after a rule or
+ * at-rule nested in a block, still applies, in either cssMode, wherever the element it styles is: a block, an
+ * inline element, a table cell, a header or a positioned block.
+ */
+class StylesheetSyntaxTest extends TestCase
+{
+
+	use DrawnStyles;
+
+	const GREEN = '0.000 0.502 0.000 rg';
+	const BLACK = '0.000 g';
+
+	/**
+	 * The element the rule after the construct names is green, and its neighbour, which the rule does not name, is
+	 * black
+	 *
+	 * @dataProvider constructsInContexts
+	 *
+	 * @param string $mode
+	 * @param string $context
+	 * @param string $css With {T} for the subjects' tag, and {AFTER} for the rule after the construct if it is not
+	 *                    at the end
+	 */
+	public function testTheRuleAfterTheConstructApplies($mode, $context, $css)
+	{
+		$this->assertDrawnInColours(
+			['after' => self::GREEN, 'plain' => self::BLACK],
+			$this->drawnColours($this->document($context, $css), ['cssMode' => $mode])
+		);
+	}
+
+	/**
+	 * Every construct in every context, in each cssMode
+	 *
+	 * @return array[]
+	 */
+	public function constructsInContexts()
+	{
+		$data = [];
+		foreach ([CssMode::LEGACY, CssMode::STANDARD] as $mode) {
+			foreach (['block', 'inline', 'table cell', 'header', 'positioned block'] as $context) {
+				foreach ($this->constructs() as $name => $css) {
+					$data[$mode . ', ' . $context . ': ' . $name] = [$mode, $context, $css];
+				}
+			}
+		}
+
+		return $data;
+	}
+
+	/**
+	 * Stylesheets that were split in the wrong place, each with the rule after its tricky part
+	 *
+	 * @return string[]
+	 */
+	private function constructs()
+	{
+		return [
+			'braces in a string' => 'q { quotes: "}" "{"; }',
+			'an unbalanced brace in a string' => 'q { quotes: "}"; }',
+			'a declaration in a string' => "{T}.after { color: #008000; font-family: 'x;color:#f00;y', courier; }",
+			'an escaped quote in a string' => 'q { quotes: "\"}" "x"; }',
+			'a comment opener in a string' => 'q { quotes: "/*" "x"; } {AFTER} q { quotes: "*/" "x"; }',
+			'a comment opener in a url()' => 'q { background-image: url(http://example.com/*.png); } {AFTER} /* a comment */',
+			'a comment with a quote and a brace in it' => '/* it\'s { */',
+			'a string left open at a line break' => "q { quotes: \"a}b\n; }",
+			'an escaped brace in a selector' => '.a\{b { color: #f00; }',
+			'a brace in an attribute selector' => 'q[title="{"] { color: #f00; }',
+			'braces and a semicolon in a url()' => 'q { background-image: url(a};{b.png); }',
+			'semicolons in an @import url()' => '@import url(missing.css?family=a:wght@300;400);',
+			'nested at-rules' => '@supports (display: block) { @media print { q { color: #f00; } } }',
+			'an at-rule nested in a block' => '{T}.after { color: #f00; @media print { color: #00f; } color: #008000; }',
+			'a rule nested in a block' => '{T}.after { color: #f00; & b { color: #00f; } color: #008000; }',
+			'an @page margin box with a brace in a string' => '@page { @top-center { content: "}"; } }',
+		];
+	}
+
+	/**
+	 * A document with an element the rule after the construct names and one it does not, in a context
+	 *
+	 * @param string $context
+	 * @param string $css As constructs() gives it
+	 *
+	 * @return string
+	 */
+	private function document($context, $css)
+	{
+		$tag = $context === 'inline' ? 'span' : ($context === 'table cell' ? 'td' : 'p');
+		if (strpos($css, '{AFTER}') === false && strpos($css, '{T}.after') === false) {
+			$css .= ' {AFTER}';
+		}
+
+		$style = '<style>' . str_replace(['{AFTER}', '{T}'], ['{T}.after { color: #008000; }', $tag], $css) . '</style>';
+		$html = '<' . $tag . ' class="after">after</' . $tag . '> <' . $tag . '>plain</' . $tag . '>';
+
+		switch ($context) {
+			case 'inline':
+				return $style . '<p>' . $html . '</p>';
+
+			case 'table cell':
+				return $style . '<table><tr>' . $html . '</tr></table>';
+
+			case 'header':
+				return $style . '<htmlpageheader name="h">' . $html . '</htmlpageheader><sethtmlpageheader name="h" value="on" show-this-page="1" /><p>body</p>';
+
+			case 'positioned block':
+				return $style . '<div style="position: absolute; top: 60mm; left: 20mm; width: 150mm;">' . $html . '</div>';
+
+			default:
+				return $style . $html;
+		}
+	}
+}
diff --git a/tests/Snapshots/FrameworkStylesheetLegacySnapshotTest.php b/tests/Snapshots/FrameworkStylesheetLegacySnapshotTest.php
new file mode 100644
index 000000000..5ac7ad5bd
--- /dev/null
+++ b/tests/Snapshots/FrameworkStylesheetLegacySnapshotTest.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace Snapshots;
+
+use Mpdf\CssMode;
+
+/**
+ * The framework stylesheet in cssMode legacy
+ *
+ * @group snapshot
+ */
+class FrameworkStylesheetLegacySnapshotTest extends FrameworkStylesheetSnapshot
+{
+
+	/**
+	 * @return string
+	 */
+	protected function mode()
+	{
+		return CssMode::LEGACY;
+	}
+
+}
diff --git a/tests/Snapshots/FrameworkStylesheetSnapshot.php b/tests/Snapshots/FrameworkStylesheetSnapshot.php
new file mode 100644
index 000000000..7d800ba3f
--- /dev/null
+++ b/tests/Snapshots/FrameworkStylesheetSnapshot.php
@@ -0,0 +1,144 @@
+<?php
+
+namespace Snapshots;
+
+/**
+ * A page styled by a stylesheet written the way frameworks ship them: a licence comment, @charset and @import, custom
+ * properties, @font-face and @keyframes, @layer, utilities with escaped class names inside nested @media and @supports
+ * blocks, content strings with braces and semicolons, data URIs, and comments everywhere. Written under each value of
+ * cssMode, which draw it the same but for the escaped class names, which only standard matches.
+ *
+ * @group snapshot
+ */
+abstract class FrameworkStylesheetSnapshot extends Snapshot
+{
+
+	/**
+	 * @return string A CssMode value
+	 */
+	abstract protected function mode();
+
+	/**
+	 * The fixture's name
+	 *
+	 * @return string
+	 */
+	public function getId()
+	{
+		return 'framework-stylesheet-' . $this->mode();
+	}
+
+	/**
+	 * The components, each under a caption saying what should be seen
+	 */
+	public function generatePdf()
+	{
+		ob_start();
+		?>
+		<style>
+			@charset "UTF-8";
+			/*! Framework v1.0.0 | MIT License | "quotes", {braces}; and semicolons */
+			@import url("missing-theme.css") screen;
+			@import url(missing-print.css?v=1;2) print and (min-width: 1000px);
+			@layer reset, components, utilities;
+			<!--
+			:root { --brand: #0d6efd; --font: "Inter;var", sans-serif; --empty: { }; }
+			@font-face { font-family: "Brand Icons"; src: url("brand-icons.woff2?v=3#iefix") format("woff2"), url(data:font/woff2;base64,d09GMgABAAAAAA==) format("woff2"); font-display: swap; }
+			@keyframes spinner-border { to { transform: rotate(360deg) /* a full turn } */; } }
+			@-webkit-keyframes pulse { 50% { opacity: .5; } }
+
+			@layer reset {
+				body { font-size: 9pt; color: #212529; /* the default text */ }
+				h1, /* one */ h2 /* two */ { margin: 0 0 1mm 0; }
+				h1 { font-size: 15pt; }
+				h2 { font-size: 10pt; margin-top: 4mm; }
+			}
+
+			p.caption { font-size: 7.5pt; color: #6c757d; margin: 0 0 1.5mm 0; }
+
+			@layer components {
+				/* Alerts: an icon from a data URI, and a close button drawn with a content string */
+				.alert { padding: 2mm 3mm; border: 0.3mm solid #badbcc; margin-bottom: 2mm; }
+				.alert-success { color: #0f5132; background-color: #d1e7dd; }
+				.alert-icon { padding-left: 8mm; background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAIAAgDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAP/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAABAX/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCACkA//9k=); background-repeat: no-repeat; background-position: 2mm 50%; background-size: 4mm 4mm; }
+				.btn-close::before { content: "}"; }
+				.alert-dismissible { padding-right: 10mm; font-weight: bold; }
+
+				/* Quotations, with the marks in strings */
+				blockquote.quote { quotes: "\201C" "\201D" "{" "}"; color: #495057; font-style: italic; border-left: 1mm solid #dee2e6; padding-left: 3mm; margin: 0 0 2mm 0; }
+				.breadcrumb-item + .breadcrumb-item::before { content: "/\00a0;"; }
+				.breadcrumb-item { color: #0d6efd; }
+
+				/* Code, in a font whose name has a semicolon in it */
+				code, .font-mono { font-family: "Source Code;Pro", 'Menlo{Regular}', monospace; color: #d63384; }
+
+				/* A theme switch that matches nothing here */
+				[data-theme="dark{mode}"] .card, .card[data-x='};'] { background-color: #212529; color: #ff0000; }
+				.card { border: 0.3mm solid #ced4da; padding: 2mm 3mm; margin-bottom: 2mm; }
+				.card-title { font-size: 11pt; color: #0d6efd; /* after a string with a brace */ }
+			}
+
+			@layer utilities {
+				.text-center { text-align: center !important; }
+				.fw-bold { font-weight: bold !important; }
+				.text-muted { color: #6c757d; }
+				.hover\:underline:hover { text-decoration: underline; }
+
+				@media (min-width: 640px) {
+					.sm\:hidden { display: none; }
+					.sm\:text-end { text-align: right; }
+				}
+				@media (min-width: 1024px) {
+					.lg\:hidden { display: none; }
+				}
+				@supports (display: grid) {
+					@media print {
+						.print\:bg-warning { background-color: #fff3cd; }
+						.md\:w-1\/2 { width: 50%; }
+					}
+					@media screen { .print\:bg-warning { background-color: #f8d7da; color: #ff0000; } }
+				}
+				@supports not (display: grid) {
+					.grid-fallback { color: #ff0000; }
+				}
+			}
+			-->
+		</style>
+
+		<h1>A framework's stylesheet</h1>
+		<p class="caption">Written with cssMode set to <?php echo $this->mode(); ?>. No text on the page is red.</p>
+
+		<h2>Alert</h2>
+		<p class="caption">Dark green bold text on light green, with a small blue square from a JPEG data URI at its left, and a border. The rule after the close button's content string applies.</p>
+		<div class="alert alert-success alert-icon alert-dismissible">A saved record, from a data URI icon</div>
+
+		<h2>Quotation and breadcrumb</h2>
+		<p class="caption">The quotation is grey and italic with a grey rule at its left, and the breadcrumb items are blue: rules after strings with braces, semicolons and escapes.</p>
+		<blockquote class="quote">A quotation, with its marks set in the stylesheet.</blockquote>
+		<p><span class="breadcrumb-item">Home</span> <span class="breadcrumb-item">Library</span> <span class="breadcrumb-item">Data</span></p>
+
+		<h2>Code</h2>
+		<p class="caption">Pink, in a monospace font: the font names with a semicolon and braces in them are skipped for the next in the list.</p>
+		<p>Call <code>render()</code>, or set <span class="font-mono">font-mono</span> on any element.</p>
+
+		<h2>Card</h2>
+		<p class="caption">A bordered card with a blue title, not white on black: the dark theme selectors, with a brace and a semicolon in their strings, match nothing here.</p>
+		<div class="card" data-x="plain"><p class="card-title">Card title</p><p class="text-muted">Muted text in the card.</p></div>
+
+		<h2>Utilities in nested @media and @supports</h2>
+		<p class="caption">An A4 page is about 794px wide, so the min-width: 640px block applies and the min-width: 1024px block does not. Standard: the line marked sm:hidden is not shown, the line marked lg:hidden is; sm:text-end is right-aligned; print:bg-warning has a pale yellow background and md:w-1/2 is half the width. Legacy: escaped class names such as .sm\:hidden match nothing, so those lines are all shown, plain and left-aligned. In both, the fallback in @supports not is black, and the last line is centred and bold.</p>
+		<p class="sm:hidden">sm:hidden, which should not be shown</p>
+		<p class="lg:hidden">lg:hidden, which is shown</p>
+		<p class="sm:text-end">sm:text-end</p>
+		<p class="print:bg-warning md:w-1/2">print:bg-warning md:w-1/2</p>
+		<p class="grid-fallback">grid-fallback</p>
+		<p class="text-center fw-bold hover:underline">text-center fw-bold, not underlined</p>
+		<?php
+		$html = ob_get_clean();
+
+		$this->mpdf = $this->createMpdf(['cssMode' => $this->mode()]);
+
+		$this->mpdf->WriteHTML($html);
+	}
+
+}
diff --git a/tests/Snapshots/FrameworkStylesheetStandardSnapshotTest.php b/tests/Snapshots/FrameworkStylesheetStandardSnapshotTest.php
new file mode 100644
index 000000000..f6411880b
--- /dev/null
+++ b/tests/Snapshots/FrameworkStylesheetStandardSnapshotTest.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace Snapshots;
+
+use Mpdf\CssMode;
+
+/**
+ * The framework stylesheet in cssMode standard
+ *
+ * @group snapshot
+ */
+class FrameworkStylesheetStandardSnapshotTest extends FrameworkStylesheetSnapshot
+{
+
+	/**
+	 * @return string
+	 */
+	protected function mode()
+	{
+		return CssMode::STANDARD;
+	}
+
+}
diff --git a/tests/Snapshots/StylesheetSyntaxSnapshotTest.php b/tests/Snapshots/StylesheetSyntaxSnapshotTest.php
new file mode 100644
index 000000000..c2b5f9435
--- /dev/null
+++ b/tests/Snapshots/StylesheetSyntaxSnapshotTest.php
@@ -0,0 +1,150 @@
+<?php
+
+namespace Snapshots;
+
+use Mpdf\CssMode;
+
+/**
+ * Braces, semicolons and comment markers inside strings, url() and escapes, and rules and at-rules nested in a block,
+ * each read as a browser reads it, so the rule it is in and the rule after it both apply.
+ *
+ * @group snapshot
+ */
+class StylesheetSyntaxSnapshotTest extends Snapshot
+{
+
+	/**
+	 * The fixture's name
+	 *
+	 * @return string
+	 */
+	public function getId()
+	{
+		return 'stylesheet-syntax';
+	}
+
+	/**
+	 * Pairs of paragraphs, the first styled by a rule with the construct in it and the second by the rule after,
+	 * under a caption saying what should be seen
+	 */
+	public function generatePdf()
+	{
+		ob_start();
+		?>
+		<style>
+			@import url(missing.css?family=Inter:wght@300;400;500&display=swap);
+			p.after-import { color: #0a7d32; font-weight: bold; }
+
+			body { font-size: 9pt; }
+			h1 { font-size: 15pt; margin: 0 0 2mm 0; }
+			h2 { margin: 3mm 0 1mm 0; font-size: 10pt; }
+			p.caption { margin: 0 0 1mm 0; font-size: 8pt; color: #606060; }
+			div.case { border: 0.2mm solid #999999; padding: 0 2mm; }
+			div.case p { margin: 1mm 0; }
+
+			p.brace-string { quotes: "}" "{"; color: #1f3a93; font-style: italic; }
+			p.after-brace-string { color: #0a7d32; font-weight: bold; }
+
+			p.unbalanced-string { quotes: "}" "»"; color: #1f3a93; font-style: italic; }
+			p.after-unbalanced-string { color: #0a7d32; font-weight: bold; }
+
+			p.semicolon-string { color: #1f3a93; font-family: 'x;color:#ff0000;y', monospace; }
+			p.after-semicolon-string { color: #0a7d32; font-weight: bold; }
+
+			p.escaped-quote { quotes: "\"}" "x"; color: #1f3a93; font-style: italic; }
+			p.after-escaped-quote { color: #0a7d32; font-weight: bold; }
+
+			p.comment-string { quotes: "/*" "x"; color: #1f3a93; font-style: italic; }
+			p.after-comment-string { color: #0a7d32; font-weight: bold; }
+			q { quotes: "*/" "x"; }
+
+			p.comment-url { background-image: url(missing/*.png); color: #1f3a93; font-style: italic; }
+			p.after-comment-url { color: #0a7d32; font-weight: bold; } /* a comment */
+
+			p.open-string { color: #1f3a93; quotes: "a}b
+			; font-style: italic; }
+			p.after-open-string { color: #0a7d32; font-weight: bold; }
+
+			p.md\:italic { color: #1f3a93; font-style: italic; }
+			p.a\{b\} { color: #1f3a93; font-style: italic; }
+			p.after-escapes { color: #0a7d32; font-weight: bold; }
+
+			p[title="{"] { color: #1f3a93; font-style: italic; }
+			p.after-attribute { color: #0a7d32; font-weight: bold; }
+
+			p.url-braces { background-image: url(missing};{.png); background-color: #f9e79f; }
+			p.after-url-braces { color: #0a7d32; font-weight: bold; }
+
+			p.nested-rule { color: #1f3a93; & b { color: #ff0000; } font-style: italic; }
+			p.nested-at-rule { color: #1f3a93; @media screen { color: #ff0000; } font-style: italic; }
+			p.after-nested { color: #0a7d32; font-weight: bold; }
+		</style>
+		<style>p.left-open { color: #1f3a93; font-style: italic;</style>
+		<style>p.after-left-open { color: #0a7d32; font-weight: bold; }</style>
+		<style><?php echo "\xEF\xBB\xBF"; ?>@charset "UTF-8"; p.byte-order-mark { color: #0a7d32; font-weight: bold; }</style>
+
+		<h1>Strings, url() and escapes in a stylesheet</h1>
+
+		<h2>An @import with semicolons in its url()</h2>
+		<p class="caption">The @import ends at the semicolon after its url(): the paragraph is green and bold.</p>
+		<div class="case"><p class="after-import">After the @import</p></div>
+
+		<h2>Braces in a string</h2>
+		<p class="caption">The first paragraph is blue and italic, the second green and bold.</p>
+		<div class="case"><p class="brace-string">Braces in quotes</p><p class="after-brace-string">After the rule</p></div>
+
+		<h2>A brace in a string with no brace to pair with</h2>
+		<p class="caption">The first paragraph is blue and italic, the second green and bold.</p>
+		<div class="case"><p class="unbalanced-string">One brace in quotes</p><p class="after-unbalanced-string">After the rule</p></div>
+
+		<h2>A declaration in a string</h2>
+		<p class="caption">The string is a font name, not a color: the first paragraph is blue, in a monospace font; the second green and bold. None is red.</p>
+		<div class="case"><p class="semicolon-string">Semicolons in quotes</p><p class="after-semicolon-string">After the rule</p></div>
+
+		<h2>An escaped quote in a string</h2>
+		<p class="caption">The first paragraph is blue and italic, the second green and bold.</p>
+		<div class="case"><p class="escaped-quote">An escaped quote before a brace</p><p class="after-escaped-quote">After the rule</p></div>
+
+		<h2>Comment markers in strings and url()</h2>
+		<p class="caption">A /* in a string, closed by a */ in a later string, and a /* in an unquoted url() before a real comment, start no comment: each first paragraph is blue and italic, each second green and bold.</p>
+		<div class="case">
+			<p class="comment-string">A comment opener in quotes</p><p class="after-comment-string">After the rule</p>
+			<p class="comment-url">A comment opener in url()</p><p class="after-comment-url">After the rule</p>
+		</div>
+
+		<h2>A string left open</h2>
+		<p class="caption">The string ends at the line break, taking the brace with it, and the declaration on the next line applies: the first paragraph is blue and italic, the second green and bold.</p>
+		<div class="case"><p class="open-string">A string with no closing quote</p><p class="after-open-string">After the rule</p></div>
+
+		<h2>Escapes in selectors</h2>
+		<p class="caption">.md\:italic and .a\{b\} match the classes md:italic and a{b}: the first two paragraphs are blue and italic, the third green and bold.</p>
+		<div class="case"><p class="md:italic">class="md:italic"</p><p class="a{b}">class="a{b}"</p><p class="after-escapes">After the rules</p></div>
+
+		<h2>A brace in an attribute selector</h2>
+		<p class="caption">p[title="{"] matches the first paragraph, which is blue and italic; the second is green and bold.</p>
+		<div class="case"><p title="{">title="{"</p><p class="after-attribute">After the rule</p></div>
+
+		<h2>Braces and a semicolon in an unquoted url()</h2>
+		<p class="caption">The url() is one value: the first paragraph has a yellow background, the second is green and bold.</p>
+		<div class="case"><p class="url-braces">Braces in url()</p><p class="after-url-braces">After the rule</p></div>
+
+		<h2>A rule and an at-rule nested in a block</h2>
+		<p class="caption">Each is left out and the declarations after it apply: the first two paragraphs are blue and italic, with no red, and the third green and bold.</p>
+		<div class="case"><p class="nested-rule">A rule nested in the block, with <b>bold</b> text</p><p class="nested-at-rule">An @media screen block nested in the block</p><p class="after-nested">After the rules</p></div>
+
+		<h2>Each stylesheet on its own</h2>
+		<p class="caption">A block left open ends with its &lt;style&gt;, and the next one starts afresh: the first paragraph is blue and italic, the second green and bold.</p>
+		<div class="case"><p class="left-open">In a block left open</p><p class="after-left-open">In the next &lt;style&gt;</p></div>
+
+		<h2>A byte order mark</h2>
+		<p class="caption">A stylesheet starting with a byte order mark and @charset: the paragraph is green and bold.</p>
+		<div class="case"><p class="byte-order-mark">After the byte order mark</p></div>
+		<?php
+		$html = ob_get_clean();
+
+		$this->mpdf = $this->createMpdf(['cssMode' => CssMode::STANDARD]);
+
+		$this->mpdf->WriteHTML($html);
+	}
+
+}
diff --git a/tests/data/snapshots/framework-stylesheet-legacy.pdf b/tests/data/snapshots/framework-stylesheet-legacy.pdf
new file mode 100644
index 000000000..596d7135e
Binary files /dev/null and b/tests/data/snapshots/framework-stylesheet-legacy.pdf differ
diff --git a/tests/data/snapshots/framework-stylesheet-standard.pdf b/tests/data/snapshots/framework-stylesheet-standard.pdf
new file mode 100644
index 000000000..01fde4e5b
Binary files /dev/null and b/tests/data/snapshots/framework-stylesheet-standard.pdf differ
diff --git a/tests/data/snapshots/stylesheet-syntax.pdf b/tests/data/snapshots/stylesheet-syntax.pdf
new file mode 100644
index 000000000..0475de44b
Binary files /dev/null and b/tests/data/snapshots/stylesheet-syntax.pdf differ