Migrate from `postcss` to `lightningcss`. by filipsobol · Pull Request #1304 · ckeditor/ckeditor5-dev

filipsobol · 2026-03-05T14:57:49Z

🚀 Summary

Migrate from postcss to lightningcss.

📌 Related issues

See https://github.com/ckeditor/ckeditor5-internal/issues/4266.

💡 Additional information

N/A

Note

Medium Risk
Build output CSS and selector specificity can change due to the switch in nesting implementation and updated PurgeCSS behavior, potentially impacting styling in downstream projects. The changes touch core bundling/loader paths and sourcemap handling, so regressions would surface at build time or in generated CSS.

Overview
Migrates CSS processing away from PostCSS by introducing a new Rollup plugin (bundleCss) backed by Lightning CSS and wiring it into ckeditor5-dev-build-tools in place of rollup-plugin-styles/postcss-nesting, with updated ordering, minification, sourcemap emission, and warning/error handling for unsupported external imports.

Updates splitCss to work with the new pipeline (incl. PurgeCSS v8) and improves content stylesheet generation by synthesizing tokens for functional selectors like :is()/:where() so nested ck-content selectors are retained. In ckeditor5-dev-utils, removes the PostCSS-based styles API and postcss-loader usage, adding a ck-lightningcss-loader webpack loader and build output to transform/minify nested CSS via Lightning CSS; tests and changelog entries are updated accordingly.

^{Written by Cursor Bugbot for commit 6b3c40d. This will update automatically on new commits. Configure here.}

…ent.css` stylesheets contain all the necessary styles.

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

✅ Fixed: Unreachable code path in CSS import resolver
- Removed the redundant specifier.startsWith('/') fallback branch so the resolver no longer contains unreachable code.

Or push these changes by commenting:

@cursor push ffd68916f7

Preview (ffd68916f7)

diff --git a/packages/ckeditor5-dev-build-tools/src/plugins/bundleCss.ts b/packages/ckeditor5-dev-build-tools/src/plugins/bundleCss.ts
--- a/packages/ckeditor5-dev-build-tools/src/plugins/bundleCss.ts
+++ b/packages/ckeditor5-dev-build-tools/src/plugins/bundleCss.ts
@@ -276,7 +276,7 @@
 							return specifier;
 						}
 
-						if ( specifier.startsWith( '.' ) || specifier.startsWith( '/' ) ) {
+						if ( specifier.startsWith( '.' ) ) {
 							// Keep backward compatibility with relative path resolution.
 							return resolve( dirname( normalizedOrigin ), specifier );
 						}

_{This Bugbot Autofix run was free. To enable autofix for future PRs, go to the Cursor dashboard.}

packages/ckeditor5-dev-build-tools/src/plugins/bundleCss.ts

Copilot

Pull request overview

Migrates CKEditor 5 dev tooling CSS processing from the PostCSS-based pipeline to LightningCSS across both Rollup build tools and webpack loaders, updating related dependencies and tests.

Changes:

Replace Rollup CSS extraction (rollup-plugin-styles + postcss-nesting) with a new LightningCSS-based Rollup plugin (bundleCss) and update build/test pipelines accordingly.
Replace postcss-loader usage in ckeditor5-dev-utils with a custom ck-lightningcss-loader + getLightningCssConfig.
Update splitCss to better preserve nested/functional content selectors (e.g. :is()) when running PurgeCSS, and bump PurgeCSS to v8.

Reviewed changes

Copilot reviewed 44 out of 45 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
pnpm-lock.yaml	Updates lockfile for LightningCSS migration and related dependency bumps/removals.
packages/ckeditor5-dev-utils/tests/styles/index.ts	Updates styles index test to the LightningCSS config export.
packages/ckeditor5-dev-utils/tests/styles/getpostcssconfig.ts	Removes tests for the deleted PostCSS config helper.
packages/ckeditor5-dev-utils/tests/styles/getlightningcssconfig.ts	Adds tests for the new LightningCSS config helper.
packages/ckeditor5-dev-utils/tests/loaders/getstylesloader.ts	Updates loader tests from `postcss-loader` to `ck-lightningcss-loader`.
packages/ckeditor5-dev-utils/src/styles/index.ts	Switches export from `getPostCssConfig` to `getLightningCssConfig`.
packages/ckeditor5-dev-utils/src/styles/getpostcssconfig.ts	Deletes PostCSS config implementation.
packages/ckeditor5-dev-utils/src/styles/getlightningcssconfig.ts	Adds LightningCSS config helper (`include: Features.Nesting`).
packages/ckeditor5-dev-utils/src/loaders/getstylesloader.ts	Updates webpack styles loader chain to use LightningCSS loader + options.
packages/ckeditor5-dev-utils/src/loaders/ck-lightningcss-loader.ts	Adds a custom webpack loader that runs LightningCSS `transform()`.
packages/ckeditor5-dev-utils/package.json	Drops PostCSS-related deps, adds `lightningcss`.
packages/ckeditor5-dev-dependency-checker/lib/checkdependencies.js	Renames CSS parser hook from `parsePostCSS` to `parseCSS`.
packages/ckeditor5-dev-build-tools/tests/plugins/splitCss/splitCss.test.ts	Updates splitCss tests to new bundling/minification output and adds new selector coverage.
packages/ckeditor5-dev-build-tools/tests/plugins/splitCss/fixtures/is-selector-content/input.ts	Adds fixture entry importing CSS with `:is()` content selector.
packages/ckeditor5-dev-build-tools/tests/plugins/splitCss/fixtures/is-selector-content/file.css	Adds CSS fixture containing functional selectors and editor-only rules.
packages/ckeditor5-dev-build-tools/tests/plugins/splitCss/fixtures/is-selector-content-no-editor-leak/input.ts	Adds fixture entry for ensuring no editor selector leakage.
packages/ckeditor5-dev-build-tools/tests/plugins/splitCss/fixtures/is-selector-content-no-editor-leak/file.css	Adds CSS fixture mixing `:is()` content selectors and editor selectors.
packages/ckeditor5-dev-build-tools/tests/plugins/splitCss/fixtures/functional-selector-tokens/input.ts	Adds fixture entry for tokenizing complex functional selectors.
packages/ckeditor5-dev-build-tools/tests/plugins/splitCss/fixtures/functional-selector-tokens/file.css	Adds CSS fixture covering ids/attrs/pseudo-args inside functional selectors.
packages/ckeditor5-dev-build-tools/tests/plugins/emitCss/emitCss.test.ts	Updates emitCss tests to use `bundleCss` instead of `rollup-plugin-styles`.
packages/ckeditor5-dev-build-tools/tests/plugins/bundleCss/fixtures/warning.css	Adds fixture for LightningCSS warning propagation.
packages/ckeditor5-dev-build-tools/tests/plugins/bundleCss/fixtures/second.css	Adds fixture ensuring import order and minification behavior.
packages/ckeditor5-dev-build-tools/tests/plugins/bundleCss/fixtures/packages/bundle-css-test-package/style.css	Adds fixture for package-based CSS imports.
packages/ckeditor5-dev-build-tools/tests/plugins/bundleCss/fixtures/packages/bundle-css-test-package/package.json	Adds minimal package fixture for resolving CSS from dependencies.
packages/ckeditor5-dev-build-tools/tests/plugins/bundleCss/fixtures/package-import.css	Adds fixture for package import resolution.
packages/ckeditor5-dev-build-tools/tests/plugins/bundleCss/fixtures/nested.ts	Adds fixture to create nested import ordering scenario.
packages/ckeditor5-dev-build-tools/tests/plugins/bundleCss/fixtures/input.ts	Adds bundleCss fixture entry.
packages/ckeditor5-dev-build-tools/tests/plugins/bundleCss/fixtures/input-warning.ts	Adds bundleCss fixture entry that triggers warning.
packages/ckeditor5-dev-build-tools/tests/plugins/bundleCss/fixtures/input-package-import.ts	Adds bundleCss fixture entry to validate package import resolution.
packages/ckeditor5-dev-build-tools/tests/plugins/bundleCss/fixtures/input-nested-first.ts	Adds fixture entry to validate ordering when nesting imports first.
packages/ckeditor5-dev-build-tools/tests/plugins/bundleCss/fixtures/input-external-import.ts	Adds fixture entry to validate external `@import` rejection.
packages/ckeditor5-dev-build-tools/tests/plugins/bundleCss/fixtures/first.css	Adds fixture for ordering validation.
packages/ckeditor5-dev-build-tools/tests/plugins/bundleCss/fixtures/external-import.css	Adds fixture with external `@import` URL.
packages/ckeditor5-dev-build-tools/tests/plugins/bundleCss/bundleCss.test.ts	Adds integration tests for `bundleCss` (order, minify, sourcemaps, warnings, externals).
packages/ckeditor5-dev-build-tools/tests/plugins/bundleCss/bundleCss.mocked.test.ts	Adds mocked unit tests validating resolver behavior and error paths.
packages/ckeditor5-dev-build-tools/tests/plugins/banner/banner.test.ts	Updates banner tests to use `bundleCss` and adds sourcemap edge-case coverage.
packages/ckeditor5-dev-build-tools/tests/build/build.test.ts	Adjusts expected output ordering for CSS + source maps.
packages/ckeditor5-dev-build-tools/src/plugins/splitCss.ts	Updates splitCss to synthesize PurgeCSS content tokens from LightningCSS-parsed selectors and updates PurgeCSS typings.
packages/ckeditor5-dev-build-tools/src/plugins/bundleCss.ts	Adds the new LightningCSS-based Rollup plugin that bundles CSS in stable order and supports minify/sourcemaps/warnings.
packages/ckeditor5-dev-build-tools/src/plugins/banner.ts	Improves source map merging by applying source maps with explicit `fileName`.
packages/ckeditor5-dev-build-tools/src/index.ts	Exports the new `bundleCss` plugin.
packages/ckeditor5-dev-build-tools/src/config.ts	Replaces `rollup-plugin-styles` with `bundleCss` in the generated Rollup config.
packages/ckeditor5-dev-build-tools/package.json	Drops PostCSS/rollup-plugin-styles deps, adds `lightningcss`, bumps `purgecss`.
.changelog/20260306164036_ci_4266_replace_postcss_with_lightningcss.md	Adds changelog entry about improved content selector detection in splitCss.
.changelog/20260305102235_ci_4266_replace_postcss_with_lightningcss.md	Adds changelog entry documenting the migration and minor breaking change.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/ckeditor5-dev-utils/src/loaders/getstylesloader.ts

packages/ckeditor5-dev-utils/src/loaders/ck-lightningcss-loader.ts

pomek · 2026-03-10T11:37:51Z

Is this – https://github.com/ckeditor/ckeditor5-dev/blob/581afa14cd54abb6ae9475e9b40d6a0fce314781/packages/ckeditor5-dev-utils/src/styles/utils/getpackagename.ts – still needed?

packages/ckeditor5-dev-utils/src/styles/getlightningcssconfig.ts

pomek · 2026-03-10T11:43:33Z

packages/ckeditor5-dev-utils/src/loaders/getstylesloader.ts

+	} );
+
+	const getLightningCssLoader = () => ( {
+		loader: path.join( import.meta.dirname, 'ck-lightningcss-loader.js' ),


I see import.meta.dirname and potential Windows issues. Someone needs to confirm it works.

@psmyrek @przemyslaw-zan

filipsobol · 2026-03-10T14:53:25Z

Is this – https://github.com/ckeditor/ckeditor5-dev/blob/581afa14cd54abb6ae9475e9b40d6a0fce314781/packages/ckeditor5-dev-utils/src/styles/utils/getpackagename.ts – still needed?

I am afraid that this is quite a small utility and does not need to be extracted via utils. Instead, could we add it to the build and testing tools?

Done in 64e01fa and 91c9436.

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

packages/ckeditor5-dev-build-tools/tests/plugins/bundleCss/fixtures/input-nested-first.ts

Copilot

Pull request overview

Copilot reviewed 45 out of 46 changed files in this pull request and generated no new comments.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

filipsobol added 3 commits March 5, 2026 10:26

Migrate from postcss to lightningcss.

b7322e3

Replace postcss with lightningcss in ckeditor5-dev-utils.

e61add0

Forward LightningCSS warnings to Rollup.

b3a99ba

filipsobol mentioned this pull request Mar 5, 2026

Fix CSS selector specificity in button.css ckeditor/ckeditor5#19901

Closed

18 tasks

Improve detection of the nested ck-content classes, so that `*-cont…

427ad72

…ent.css` stylesheets contain all the necessary styles.

cursor bot reviewed Mar 6, 2026

View reviewed changes

packages/ckeditor5-dev-build-tools/src/plugins/bundleCss.ts Show resolved Hide resolved

Improve code coverage for splitCss and bundleCss.

2fea969

filipsobol force-pushed the ci/4266-replace-postcss-with-lightningcss branch from 2bdd0a3 to 2fea969 Compare March 9, 2026 09:41

filipsobol requested a review from Copilot March 9, 2026 11:54

Copilot started reviewing on behalf of filipsobol March 9, 2026 11:55 View session

Copilot AI reviewed Mar 9, 2026

View reviewed changes

packages/ckeditor5-dev-utils/src/loaders/getstylesloader.ts Show resolved Hide resolved

Generate separate chunk for LightningCSS loader.

581afa1

cursor bot reviewed Mar 9, 2026

View reviewed changes

packages/ckeditor5-dev-utils/src/loaders/ck-lightningcss-loader.ts Show resolved Hide resolved

pomek reviewed Mar 10, 2026

View reviewed changes

packages/ckeditor5-dev-utils/src/styles/getlightningcssconfig.ts Outdated Show resolved Hide resolved

pomek reviewed Mar 10, 2026

View reviewed changes

filipsobol mentioned this pull request Mar 10, 2026

Fix CSS selector specificity in button.css ckeditor/ckeditor5#19939

Open

18 tasks

filipsobol added 2 commits March 10, 2026 15:45

Remove unused file.

64e01fa

Remove unused code and unnecessary abstractions.

91c9436

cursor bot reviewed Mar 10, 2026

View reviewed changes

packages/ckeditor5-dev-build-tools/tests/plugins/bundleCss/fixtures/input-nested-first.ts Outdated Show resolved Hide resolved

filipsobol added 2 commits March 11, 2026 12:42

Remove unused fixture

056718d

lightningCssOptions should not override hardcoded properties.

6b3c40d

filipsobol requested review from Copilot and pomek March 11, 2026 12:03

Copilot started reviewing on behalf of filipsobol March 11, 2026 12:03 View session

Copilot AI reviewed Mar 11, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migrate from `postcss` to `lightningcss`.#1304

Migrate from `postcss` to `lightningcss`.#1304
filipsobol wants to merge 10 commits intoepic/ci/4168-drop-oimfrom
ci/4266-replace-postcss-with-lightningcss

filipsobol commented Mar 5, 2026 •

edited by cursor bot

Loading

Uh oh!

cursor bot left a comment •

edited

Loading

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

pomek commented Mar 10, 2026

Uh oh!

Uh oh!

pomek Mar 10, 2026

Uh oh!

filipsobol Mar 11, 2026

Uh oh!

filipsobol commented Mar 10, 2026

Uh oh!

cursor bot left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

filipsobol commented Mar 5, 2026 • edited by cursor bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 Summary

📌 Related issues

💡 Additional information

Uh oh!

cursor bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

pomek commented Mar 10, 2026

Uh oh!

Uh oh!

pomek Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

filipsobol Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

filipsobol commented Mar 10, 2026

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

filipsobol commented Mar 5, 2026 •

edited by cursor bot

Loading

cursor bot left a comment •

edited

Loading