cssupgrade 2026.0.1 → 2026.0.2

package/.github/workflows/ci.yml

@@ -21,7 +21,10 @@ jobs:
           text: ${{ steps.read_readme.outputs.content }}
   node-test:
     name: Test
-    runs-on: ubuntu-latest
+    runs-on: macos-latest
+    permissions:
+      contents: read
+      id-token: write
     steps:
       - uses: actions/checkout@v7
       - name: Set up Node.js
@@ -29,9 +32,13 @@ jobs:
         with:
           node-version-file: package.json
       - run: npm ci
+      - run: npx playwright install
+      - run: sudo safaridriver --enable
       - run: npm test
+        env:
+          SAFARI: "1"
       - uses: codecov/codecov-action@v7
         with:
-          token: ${{ secrets.CODECOV_TOKEN }}
+          use_oidc: true
           flags: css
           files: lcov.info

package/CONTRIBUTING.md

@@ -4,9 +4,21 @@ To run tests locally, follow these steps:
 
 ```console
 npm ci
+npx playwright install
 npm test
 ```
 
+The browser tests render every fixture with the original and transformed CSS and
+compare the computed styles of all elements in Chromium, Firefox, WebKit, and
+Safari. Register fixtures in the test file of the transformer they cover.
+
+Real Safari runs only on macOS with Remote Automation enabled:
+
+```console
+sudo safaridriver --enable
+npm run test:safari
+```
+
 We use pre-commit hooks to lint and format code before committing.
 
 To install the pre-commit hooks, run:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cssupgrade",
-  "version": "2026.0.1",
+  "version": "2026.0.2",
   "description": "Auto-upgrade your CSS syntax",
   "type": "module",
   "main": "src/index.js",
@@ -8,7 +8,8 @@
     "cssupgrade": "./bin/cssupgrade.js"
   },
   "scripts": {
-    "test": "node --test --experimental-test-coverage --test-reporter=spec --test-reporter=lcov --test-reporter-destination=stdout --test-reporter-destination=lcov.info --test-coverage-exclude=tests/**/* tests/*.test.js tests/**/*.test.js"
+    "test": "node --test --experimental-test-coverage --test-reporter=spec --test-reporter=lcov --test-reporter-destination=stdout --test-reporter-destination=lcov.info --test-coverage-exclude=tests/**/* tests/*.test.js tests/**/*.test.js",
+    "test:safari": "SAFARI=1 node --test --test-reporter=spec --test-name-pattern=\"computed styles safari\" tests/*.test.js tests/**/*.test.js"
   },
   "keywords": [
     "css",
@@ -32,5 +33,9 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/codingjoe/cssupgrade.git"
+  },
+  "devDependencies": {
+    "playwright": "^1.65.0",
+    "selenium-webdriver": "^4.51.0"
   }
 }

package/src/widelyAvailable/cssNesting.js

@@ -1,3 +1,4 @@
+import { generate } from "css-tree"
 import { parseCss } from "../parser.js"
 
 /**
@@ -40,13 +41,16 @@ const selectorListPseudoClasses = new Set([
   "-webkit-any",
   "any",
   "has",
-  "host",
-  "host-context",
   "is",
   "matches",
   "not",
 ])
 
+/**
+ * Pseudo-classes whose specificity is a pseudo-class plus their argument.
+ */
+const hostPseudoClasses = new Set(["host", "host-context"])
+
 /**
  * Pseudo-classes that select the nth element and accept an optional selector list.
  */
@@ -58,19 +62,9 @@ const nthPseudoClasses = new Set(["nth-child", "nth-last-child"])
 const plainFunctionalPseudoClasses = new Set(["dir", "lang", "state"])
 
 /**
- * Text that can follow a parent selector when a child selector extends it.
- */
-const selectorContinuationPattern = /^[\s>+~.#:[]/
-
-/**
- * Relative combinator at the start of a nested selector.
+ * CSS whitespace characters.
  */
-const relativeCombinatorPattern = /^[>+~]/
-
-/**
- * Leading whitespace of the first selector in a nested selector.
- */
-const leadingWhitespacePattern = /^\s/
+const cssWhitespaceCharacters = new Set([" ", "\t", "\n", "\r", "\f"])
 
 /**
  * Add two specificity values.
@@ -200,6 +194,16 @@ function calculatePseudoClassSpecificity(node) {
       return [0, 1, 0]
     case selectorListPseudoClasses.has(name):
       return calculateSelectorArgumentSpecificity(node)
+    case hostPseudoClasses.has(name): {
+      const argumentSpecificity = calculateSelectorArgumentSpecificity(node)
+
+      switch (argumentSpecificity) {
+        case null:
+          return null
+        default:
+          return addSpecificity([0, 1, 0], argumentSpecificity)
+      }
+    }
     case nthPseudoClasses.has(name): {
       const argumentSpecificity = calculateNthSelectorSpecificity(node)
 
@@ -286,16 +290,14 @@ function isPlainRule(rule) {
 }
 
 /**
- * Read the source text of every selector in a rule.
+ * Check whether two selector nodes serialize identically.
  *
- * @param {string} code - CSS source text.
- * @param {import("css-tree").CssNode} rule - Style rule.
- * @returns {string[]} Selector texts.
+ * @param {import("css-tree").CssNode} left - First selector node.
+ * @param {import("css-tree").CssNode} right - Second selector node.
+ * @returns {boolean} True when both nodes are equal.
  */
-function extractSelectorTexts(code, rule) {
-  return Array.from(rule.prelude.children, (selector) =>
-    code.slice(selector.loc.start.offset, selector.loc.end.offset).trim(),
-  )
+function isEqualSelectorNode(left, right) {
+  return generate(left) === generate(right)
 }
 
 /**
@@ -332,47 +334,146 @@ function hasCommentOutsideBlock(comments, rule) {
 }
 
 /**
- * Match a parent selector against the start of a child selector.
+ * Describe the remainder of a child selector that starts with a combinator.
  *
- * @param {string} parentSelector - Parent selector text.
- * @param {string} childSelector - Child selector text.
- * @returns {string | null} Remaining child selector text, or null without a match.
+ * @param {string} code - CSS source text.
+ * @param {import("css-tree").CssNode} childSelector - Child selector.
+ * @param {import("css-tree").CssNode} combinator - Combinator node.
+ * @param {import("css-tree").CssNode} next - First node after the combinator.
+ * @returns {{kind: string, text: string}} Child selector remainder.
  */
-function matchSelectorPrefix(parentSelector, childSelector) {
-  switch (true) {
-    case !childSelector.startsWith(parentSelector):
-      return null
-    default: {
-      const remainder = childSelector.slice(parentSelector.length)
+function describeCombinatorRemainder(code, childSelector, combinator, next) {
+  switch (combinator.name.trim()) {
+    case "":
+      return {
+        kind: "descendant",
+        text: code.slice(next.loc.start.offset, childSelector.loc.end.offset),
+      }
+    default:
+      return {
+        kind: "relative",
+        text: code.slice(combinator.loc.start.offset, childSelector.loc.end.offset),
+      }
+  }
+}
 
-      switch (true) {
-        case remainder.trim() === "":
-          return null
-        case !selectorContinuationPattern.test(remainder):
+/**
+ * Describe the remainder of a child selector after a parent selector.
+ *
+ * @param {string} code - CSS source text.
+ * @param {import("css-tree").CssNode} childSelector - Child selector.
+ * @param {import("css-tree").CssNode[]} childNodes - Child selector nodes.
+ * @param {number} index - Index of the first node after the parent selector.
+ * @returns {{kind: string, text: string} | null} Remainder, or null when incomplete.
+ */
+function describeSelectorRemainder(code, childSelector, childNodes, index) {
+  const boundary = childNodes[index]
+
+  switch (boundary.type) {
+    case "Combinator": {
+      const next = childNodes[index + 1]
+
+      switch (next === undefined) {
+        case true:
           return null
         default:
-          return remainder
+          return describeCombinatorRemainder(code, childSelector, boundary, next)
       }
     }
+    default:
+      return {
+        kind: "compound",
+        text: code.slice(boundary.loc.start.offset, childSelector.loc.end.offset),
+      }
+  }
+}
+
+/**
+ * Match a parent selector against the start of a child selector.
+ *
+ * @param {string} code - CSS source text.
+ * @param {import("css-tree").CssNode} parentSelector - Parent selector.
+ * @param {import("css-tree").CssNode} childSelector - Child selector.
+ * @returns {{kind: string, text: string} | null} Remainder, or null without a match.
+ */
+function matchSelectorPrefix(code, parentSelector, childSelector) {
+  const parentNodes = [...parentSelector.children]
+  const childNodes = [...childSelector.children]
+
+  switch (true) {
+    case parentNodes.length >= childNodes.length:
+      return null
+    case !parentNodes.every((node, index) =>
+      isEqualSelectorNode(node, childNodes[index]),
+    ):
+      return null
+    default:
+      return describeSelectorRemainder(
+        code,
+        childSelector,
+        childNodes,
+        parentNodes.length,
+      )
   }
 }
 
 /**
  * Render the remainder of a child selector as a nested selector.
  *
- * @param {string} remainder - Child selector text after the parent selector.
+ * @param {{kind: string, text: string}} remainder - Child selector remainder.
  * @returns {string} Nested selector.
  */
 function renderNestedSelector(remainder) {
-  const text = remainder.trim()
+  switch (remainder.kind) {
+    case "descendant":
+      return remainder.text
+    case "relative":
+      return `& ${remainder.text}`
+    default:
+      return `&${remainder.text}`
+  }
+}
 
+/**
+ * Count the backslashes that end a string.
+ *
+ * @param {string} text - CSS source text.
+ * @returns {number} Number of trailing backslashes.
+ */
+function countTrailingBackslashes(text) {
+  switch (text.endsWith("\\")) {
+    case true:
+      return countTrailingBackslashes(text.slice(0, -1)) + 1
+    default:
+      return 0
+  }
+}
+
+/**
+ * Check whether a character is escaped by a preceding backslash.
+ *
+ * @param {string} text - CSS source text.
+ * @param {number} index - Index of the character to inspect.
+ * @returns {boolean} True when the character is escaped.
+ */
+function isEscapedCharacter(text, index) {
+  return countTrailingBackslashes(text.slice(0, index)) % 2 === 1
+}
+
+/**
+ * Remove trailing whitespace that is not part of an escape.
+ *
+ * @param {string} text - Declaration source text.
+ * @returns {string} Text without insignificant trailing whitespace.
+ */
+function trimDeclarationText(text) {
   switch (true) {
-    case relativeCombinatorPattern.test(text):
-      return `& ${text}`
-    case leadingWhitespacePattern.test(remainder):
+    case !cssWhitespaceCharacters.has(text.at(-1)):
+      return text
+    case isEscapedCharacter(text, text.length - 1):
       return text
     default:
-      return `&${text}`
+      return trimDeclarationText(text.slice(0, -1))
   }
 }
 
@@ -397,13 +498,15 @@ function findNestedPrelude(code, parent, child, comments) {
       break
   }
 
-  const parentSelectors = extractSelectorTexts(code, parent)
-  const childSelectors = extractSelectorTexts(code, child)
+  const parentSelectors = [...parent.prelude.children]
+  const childSelectors = [...child.prelude.children]
 
   switch (true) {
-    case new Set(parentSelectors).size !== parentSelectors.length:
+    case new Set(parentSelectors.map((selector) => generate(selector))).size !==
+      parentSelectors.length:
       return null
-    case new Set(childSelectors).size !== childSelectors.length:
+    case new Set(childSelectors.map((selector) => generate(selector))).size !==
+      childSelectors.length:
       return null
     default:
       break
@@ -423,11 +526,10 @@ function findNestedPrelude(code, parent, child, comments) {
   }
 
   const matches = childSelectors.map((selector) => ({
-    selector,
     parents: parentSelectors
       .map((parentSelector) => ({
         parentSelector,
-        remainder: matchSelectorPrefix(parentSelector, selector),
+        remainder: matchSelectorPrefix(code, parentSelector, selector),
       }))
       .filter(({ remainder }) => remainder !== null),
   }))
@@ -443,7 +545,7 @@ function findNestedPrelude(code, parent, child, comments) {
     parentSelector,
     remainders: matches
       .filter(({ parents }) => parents[0].parentSelector === parentSelector)
-      .map(({ parents }) => parents[0].remainder),
+      .map(({ parents }) => renderNestedSelector(parents[0].remainder)),
   }))
   const remainders = suffixes[0].remainders
 
@@ -451,13 +553,11 @@ function findNestedPrelude(code, parent, child, comments) {
     case suffixes.some(
       ({ remainders: candidate }) =>
         candidate.length !== remainders.length ||
-        candidate.some(
-          (remainder, index) => remainder.trim() !== remainders[index].trim(),
-        ),
+        candidate.some((remainder, index) => remainder !== remainders[index]),
     ):
       return null
     default:
-      return remainders.map(renderNestedSelector).join(", ")
+      return remainders.join(", ")
   }
 }
 
@@ -575,7 +675,10 @@ class NestingModernizer {
       case true: {
         const group = {
           node: child,
-          prelude: extractSelectorTexts(this.#code, child).join(", "),
+          prelude: this.#code.slice(
+            child.prelude.loc.start.offset,
+            child.prelude.loc.end.offset,
+          ),
           children: [],
           leadingComments: [],
         }
@@ -763,9 +866,9 @@ class NestingModernizer {
    * @returns {string} Declaration text.
    */
   #declarationText(declaration) {
-    return `${this.#code
-      .slice(declaration.loc.start.offset, declaration.loc.end.offset)
-      .trim()};`
+    return `${trimDeclarationText(
+      this.#code.slice(declaration.loc.start.offset, declaration.loc.end.offset),
+    )};`
   }
 
   /**

package/tests/computedStyles.js

@@ -0,0 +1,319 @@
+import assert from "node:assert/strict"
+import { after, before, describe, test } from "node:test"
+import { chromium, firefox, webkit } from "playwright"
+import { Builder, By } from "selenium-webdriver"
+import { transform } from "../src/index.js"
+
+/**
+ * @typedef {Object} ComputedStyleFixture
+ * @property {string} name - Scenario in imperative mood.
+ * @property {string} html - Markup rendered with the original and transformed CSS.
+ * @property {string} css - CSS source that the transformation rewrites.
+ * @property {string[]} [hover] - Selectors to hover before reading the computed styles.
+ */
+
+/**
+ * @typedef {Object} ComputedElement
+ * @property {string} tagName - Lowercase tag name.
+ * @property {string} id - Element id, or an empty string.
+ * @property {string[]} classes - Class names.
+ * @property {Record<string, string>} styles - Computed value per pseudo-element and property.
+ */
+
+/**
+ * @typedef {Object} BrowserSession
+ * @property {function({html: string, hover?: string[]}, string): Promise<Record<string, string>>} readStyles - Render a stylesheet and read the computed styles.
+ * @property {function(): Promise<void>} close - Stop the browser.
+ */
+
+/**
+ * Playwright engines that must show the same styles before and after a transformation.
+ */
+const playwrightEngines = { chromium, firefox, webkit }
+
+/**
+ * Baselines whose transformations must preserve the computed styles.
+ */
+const baselines = ["widely-available", "newly-available"]
+
+/**
+ * Read every computed property of every element and its pseudo-elements.
+ *
+ * Runs in the browser, so it must not reference the module scope.
+ *
+ * @returns {ComputedElement[]} Computed styles in document order.
+ */
+function collectComputedStyles() {
+  const pseudoElements = [null, "::before", "::after", "::marker"]
+
+  return [...document.querySelectorAll("*")].map((element) => ({
+    tagName: element.tagName.toLowerCase(),
+    id: element.id,
+    classes: [...element.classList],
+    styles: Object.fromEntries(
+      pseudoElements.flatMap((pseudoElement) => {
+        const computed = getComputedStyle(element, pseudoElement)
+
+        return [...computed].map((property) => [
+          `${pseudoElement ?? "self"} ${property}`,
+          computed.getPropertyValue(property),
+        ])
+      }),
+    ),
+  }))
+}
+
+/**
+ * Format an element for a difference message.
+ *
+ * @param {ComputedElement} element - Computed element.
+ * @param {number} index - Position in document order.
+ * @returns {string} Element name with id and classes.
+ */
+function formatElement({ tagName, id, classes }, index) {
+  return `${index} ${tagName}${id === "" ? "" : `#${id}`}${classes
+    .map((name) => `.${name}`)
+    .join("")}`
+}
+
+/**
+ * Flatten the computed styles of all elements into one record.
+ *
+ * @param {ComputedElement[]} elements - Computed styles in document order.
+ * @returns {Record<string, string>} Computed value per element, pseudo-element, and property.
+ */
+function flattenStyles(elements) {
+  return Object.fromEntries(
+    elements.flatMap((element, index) =>
+      Object.entries(element.styles).map(([key, value]) => [
+        `${formatElement(element, index)} ${key}`,
+        value,
+      ]),
+    ),
+  )
+}
+
+/**
+ * List the computed styles that differ between two snapshots.
+ *
+ * @param {Record<string, string>} before - Styles of the original source.
+ * @param {Record<string, string>} after - Styles of the transformed source.
+ * @returns {string[]} One entry per changed property.
+ */
+function calculateDifferences(before, after) {
+  return [...new Set([...Object.keys(before), ...Object.keys(after)])]
+    .filter((key) => before[key] !== after[key])
+    .sort()
+    .map((key) => `${key}: ${before[key]} -> ${after[key]}`)
+}
+
+/**
+ * Replace the document with markup.
+ *
+ * Runs in the browser, so it must not reference the module scope.
+ *
+ * @param {string} markup - Document markup.
+ * @returns {void}
+ */
+function writeDocument(markup) {
+  document.open()
+  document.write(markup)
+  document.close()
+}
+
+/**
+ * Drives a Playwright browser.
+ */
+class PlaywrightSession {
+  #browser
+
+  /**
+   * @param {import("playwright").Browser} browser - Launched browser.
+   */
+  constructor(browser) {
+    this.#browser = browser
+  }
+
+  /**
+   * Launch a Playwright browser engine.
+   *
+   * @param {import("playwright").BrowserType} engine - Browser engine.
+   * @returns {Promise<PlaywrightSession>} Launched session.
+   */
+  static async launch(engine) {
+    return new PlaywrightSession(await engine.launch())
+  }
+
+  /**
+   * Render markup with a stylesheet and read the computed styles.
+   *
+   * @param {{html: string, hover?: string[]}} fixture - Markup and selectors to hover.
+   * @param {string} css - Stylesheet to apply.
+   * @returns {Promise<Record<string, string>>} Computed styles of all elements.
+   */
+  async readStyles(fixture, css) {
+    const page = await this.#browser.newPage()
+
+    try {
+      await page.setContent(`<!doctype html><style>${css}</style>${fixture.html}`)
+
+      for (const selector of fixture.hover ?? []) {
+        await page.hover(selector)
+      }
+
+      return flattenStyles(await page.evaluate(collectComputedStyles))
+    } finally {
+      await page.close()
+    }
+  }
+
+  /**
+   * Stop the browser.
+   *
+   * @returns {Promise<void>} Resolves when the browser stopped.
+   */
+  async close() {
+    await this.#browser.close()
+  }
+}
+
+/**
+ * Drives Safari through SafariDriver.
+ */
+class SafariSession {
+  #driver
+
+  /**
+   * @param {import("selenium-webdriver").WebDriver} driver - SafariDriver session.
+   */
+  constructor(driver) {
+    this.#driver = driver
+  }
+
+  /**
+   * Launch Safari.
+   *
+   * @returns {Promise<SafariSession>} Launched session.
+   */
+  static async launch() {
+    return new SafariSession(await new Builder().forBrowser("safari").build())
+  }
+
+  /**
+   * Render markup with a stylesheet and read the computed styles.
+   *
+   * @param {{html: string, hover?: string[]}} fixture - Markup and selectors to hover.
+   * @param {string} css - Stylesheet to apply.
+   * @returns {Promise<Record<string, string>>} Computed styles of all elements.
+   */
+  async readStyles(fixture, css) {
+    await this.#driver.get("about:blank")
+    await this.#driver.actions().move({ x: 0, y: 0 }).perform()
+    await this.#driver.executeScript(
+      writeDocument,
+      `<!doctype html><style>${css}</style>${fixture.html}`,
+    )
+
+    for (const selector of fixture.hover ?? []) {
+      const element = await this.#driver.findElement(By.css(selector))
+
+      await this.#driver.actions().move({ origin: element }).perform()
+    }
+
+    return flattenStyles(await this.#driver.executeScript(collectComputedStyles))
+  }
+
+  /**
+   * Stop Safari.
+   *
+   * @returns {Promise<void>} Resolves when Safari stopped.
+   */
+  async close() {
+    await this.#driver.quit()
+  }
+}
+
+/**
+ * Verify that a fixture keeps its computed styles after the transformation.
+ *
+ * @param {BrowserSession} session - Browser session.
+ * @param {ComputedStyleFixture} fixture - Fixture to transform.
+ * @returns {Promise<void>} Resolves when the styles match.
+ */
+async function verifyComputedStyles(session, fixture) {
+  const transformed = baselines
+    .map((baseline) => ({ baseline, ...transform(fixture.css, baseline) }))
+    .filter(({ modified }) => modified)
+
+  assert(transformed.length > 0, "must transform the fixture")
+
+  const before = await session.readStyles(fixture, fixture.css)
+
+  for (const { baseline, code } of transformed) {
+    const after = await session.readStyles(fixture, code)
+
+    assert.deepEqual(
+      calculateDifferences(before, after),
+      [],
+      `differs with the ${baseline} baseline`,
+    )
+  }
+}
+
+/**
+ * Register computed style tests for one browser.
+ *
+ * @param {string} name - Browser name.
+ * @param {function(): Promise<BrowserSession>} launch - Starts the browser.
+ * @param {ComputedStyleFixture[]} fixtures - Fixtures to test.
+ * @returns {void}
+ */
+function describeBrowser(name, launch, fixtures) {
+  describe(name, () => {
+    let session
+
+    before(async () => {
+      session = await launch()
+    })
+
+    after(async () => {
+      await session.close()
+    })
+
+    for (const fixture of fixtures) {
+      test(fixture.name, async () => {
+        await verifyComputedStyles(session, fixture)
+      })
+    }
+
+    test("detect a changed declaration", async () => {
+      const fixture = { html: `<div class="box">x</div>` }
+      const before = await session.readStyles(fixture, ".box { color: red }")
+      const after = await session.readStyles(fixture, ".box { color: blue }")
+
+      assert.notDeepEqual(calculateDifferences(before, after), [])
+    })
+  })
+}
+
+/**
+ * Compare the computed styles of every fixture before and after the transformation.
+ *
+ * Call inside the `describe` block of a transformer. The tests run in Chromium,
+ * Firefox, WebKit, and Safari for every baseline that changes the fixture source.
+ * Safari runs only when `SAFARI=1` is set.
+ *
+ * @param {ComputedStyleFixture[]} fixtures - Stylesheets and markup to test.
+ * @returns {void}
+ */
+export function testComputedStyles(fixtures) {
+  describe("computed styles", () => {
+    for (const [engineName, engine] of Object.entries(playwrightEngines)) {
+      describeBrowser(engineName, () => PlaywrightSession.launch(engine), fixtures)
+    }
+
+    if (process.env.SAFARI === "1") {
+      describeBrowser("safari", () => SafariSession.launch(), fixtures)
+    }
+  })
+}

package/tests/css-nesting.test.js

@@ -1,6 +1,8 @@
 import assert from "node:assert/strict"
 import { describe, test } from "node:test"
 import { transform } from "../src/index.js"
+import { testComputedStyles } from "./computedStyles.js"
+import { cssNestingFixtures } from "./fixtures/cssNesting.js"
 
 /**
  * Assert that a transformation produces the expected source text.
@@ -510,6 +512,8 @@ describe("cssNesting", () => {
 
     assert.equal(transform(input).modified, false)
   })
+
+  testComputedStyles(cssNestingFixtures)
 })
 
 describe("cssNesting edge cases", () => {
@@ -819,6 +823,140 @@ describe("cssNesting host selectors", () => {
 }`,
     )
   })
+
+  test("leave :host with a different specificity unchanged", () => {
+    const input = `:host(.a), .b { color: red; }
+:host(.a) .c, .b .c { color: blue; }`
+
+    assert.equal(transform(input).modified, false)
+  })
+
+  test("leave :host-context with a different specificity unchanged", () => {
+    const input = `:host-context(.a), .b { color: red; }
+:host-context(.a) .c, .b .c { color: blue; }`
+
+    assert.equal(transform(input).modified, false)
+  })
+
+  test("leave :host with an unknown selector argument unchanged", () => {
+    const input = `:host(:foo(.a)) { color: red; }
+:host(:foo(.a)) .c { color: blue; }`
+
+    assert.equal(transform(input).modified, false)
+  })
+})
+
+describe("cssNesting escaped selectors", () => {
+  test("leave a hex escape that consumes whitespace unchanged", () => {
+    const input = String.raw`.\31 { color: red; }
+.\31 23 { color: blue; }`
+
+    assert.equal(transform(input).modified, false)
+  })
+
+  test("leave a class name that continues a hex escape unchanged", () => {
+    const input = String.raw`.m-1\31 { color: red; }
+.m-1\31 0 { color: blue; }`
+
+    assert.equal(transform(input).modified, false)
+  })
+
+  test("nest a compound selector with an escaped space", () => {
+    assertTransform(
+      String.raw`.a\  { color: red; }
+.a\ .b { color: blue; }`,
+      String.raw`.a\  {
+  color: red;
+  &.b {
+    color: blue;
+  }
+}`,
+    )
+  })
+
+  test("nest a parent list with escaped spaces", () => {
+    assertTransform(
+      String.raw`.a\ , .b { color: red; }
+.a\  .c, .b .c { color: blue; }`,
+      String.raw`.a\ , .b {
+  color: red;
+  .c {
+    color: blue;
+  }
+}`,
+    )
+  })
+
+  test("nest a parent with a non-breaking space in its selector", () => {
+    assertTransform(
+      ".a\u00A0 { color: red; }\n.a\u00A0 .b { color: blue; }",
+      ".a\u00A0 {\n  color: red;\n  .b {\n    color: blue;\n  }\n}",
+    )
+  })
+
+  test("leave a child joined by a non-breaking space unchanged", () => {
+    const input = ".a { color: red; }\n.a\u00A0.b { color: blue; }"
+
+    assert.equal(transform(input).modified, false)
+  })
+})
+
+describe("cssNesting escaped declarations", () => {
+  test("preserve a declaration with a trailing escaped space", () => {
+    assertTransform(
+      String.raw`.a { --x: \ }
+.a .b { color: blue; }`,
+      String.raw`.a {
+  --x: \ ;
+  .b {
+    color: blue;
+  }
+}`,
+    )
+  })
+
+  test("preserve declarations after a trailing escaped space", () => {
+    assertTransform(
+      String.raw`.a { --x: \ ; color: red; }
+.a .b { color: blue; }`,
+      String.raw`.a {
+  --x: \ ;
+  color: red;
+  .b {
+    color: blue;
+  }
+}`,
+    )
+  })
+
+  test("trim whitespace after an escaped backslash", () => {
+    assertTransform(
+      String.raw`.a { --x: \\ }
+.a .b { color: blue; }`,
+      String.raw`.a {
+  --x: \\;
+  .b {
+    color: blue;
+  }
+}`,
+    )
+  })
+})
+
+describe("cssNesting selector boundaries", () => {
+  test("leave a child with a trailing combinator unchanged", () => {
+    const input = `.a { color: red; }
+.a > { color: blue; }`
+
+    assert.equal(transform(input).modified, false)
+  })
+
+  test("leave a shorter child selector unchanged", () => {
+    const input = `.a .b { color: red; }
+.a { color: blue; }`
+
+    assert.equal(transform(input).modified, false)
+  })
 })
 
 describe("cssNesting line endings", () => {

package/tests/fixtures/cssNesting.js

@@ -0,0 +1,109 @@
+/**
+ * @typedef {import("../computedStyles.js").ComputedStyleFixture} ComputedStyleFixture
+ */
+
+/**
+ * Stylesheets and matching markup for the cssNesting computed style tests.
+ *
+ * @type {ComputedStyleFixture[]}
+ */
+export const cssNestingFixtures = [
+  {
+    name: "nest descendant and compound selectors",
+    html: `
+      <article class="card primary"><h2 class="title">A</h2></article>
+      <article class="card"><h2 class="title">B</h2></article>`,
+    css: `
+      .card {
+        color: red;
+        padding: 1rem;
+      }
+      .card .title {
+        color: blue;
+        font-weight: bold;
+      }
+      .card.primary {
+        border: 1px solid green;
+      }
+      .card.primary .title {
+        text-decoration: underline;
+      }`,
+  },
+  {
+    name: "nest combinators",
+    html: `
+      <div class="card"><span class="title">A</span><span class="subtitle">B</span></div>
+      <div class="card"><span class="title">C</span><span class="subtitle">D</span></div>
+      <div class="card"><span class="title">E</span><span class="subtitle">F</span></div>`,
+    css: `
+      .card { color: red }
+      .card > .title { color: blue }
+      .card + .card { margin-top: 1rem }
+      .card ~ .card { opacity: 0.5 }
+      .card > .title + .subtitle { color: green }`,
+  },
+  {
+    name: "nest selectors of equal specificity",
+    html: `
+      <div class="a"><span class="child">A</span></div>
+      <div class="b"><span class="child">B</span></div>
+      <ul class="list"><li>1</li><li class="skip">2</li><li>3</li></ul>`,
+    css: `
+      .a, .b { color: red }
+      .a .child, .b .child { color: blue }
+      .a .child:hover, .b .child:hover { color: green }
+      .list li { color: purple }
+      .list li:nth-child(2n + 1) { color: orange }
+      .list li:not(.skip) { text-decoration: underline }
+      .list li:where(.skip) { opacity: 0.5 }`,
+  },
+  {
+    name: "nest pseudo-classes on functional selectors",
+    html: `
+      <div class="alpha"><span class="content">A</span></div>
+      <div class="beta"><span class="content">B</span></div>`,
+    css: `
+      :is(.alpha, .beta) .content { color: red }
+      :is(.alpha, .beta) .content:hover { color: blue }
+      :not(.alpha) .content { font-style: italic }`,
+  },
+  {
+    name: "nest pseudo-elements",
+    html: `<p class="item">text <strong>bold</strong></p>`,
+    css: `
+      .item { color: red }
+      .item::before { content: "before"; color: blue }
+      .item::after { content: "after"; color: green }
+      .item strong { color: purple }`,
+  },
+  {
+    name: "nest rules inside at-rules",
+    html: `
+      <div class="card"><h2 class="title">A <span>B</span></h2></div>
+      <div class="grid"><div>C</div></div>
+      <div class="layered">D <span>E</span></div>`,
+    css: `
+      @media (min-width: 1px) {
+        .card .title { color: blue }
+        .card .title span { color: pink }
+      }
+      @supports (display: grid) {
+        .grid { display: grid }
+        .grid > * { display: block }
+      }
+      @layer base {
+        .layered { color: teal }
+        .layered span { color: maroon }
+      }`,
+  },
+  {
+    name: "nest interactive states",
+    html: `<button class="button"><span class="label">A</span></button>`,
+    hover: [".button"],
+    css: `
+      .button { color: red }
+      .button:hover { color: green }
+      .button .label { color: blue }
+      .button:hover .label { color: purple }`,
+  },
+]