Skip to content

Native CSS Packaging Full Integration#1075

Open
OscarCookeAbbott wants to merge 68 commits intomainfrom
oscar/native-css-packaging-integration
Open

Native CSS Packaging Full Integration#1075
OscarCookeAbbott wants to merge 68 commits intomainfrom
oscar/native-css-packaging-integration

Conversation

@OscarCookeAbbott
Copy link
Copy Markdown
Contributor

@OscarCookeAbbott OscarCookeAbbott commented Mar 27, 2026

Motivation

With all the components in place we need to finish and properly integrate the native CSS packager and validate it with a comprehensive suite of tests.

Looks big but is mostly tests...

Changes

CSS Packaging

  • Add proper browser target inference for Lightning CSS calls
  • Add proper CSS optimisation step (lightningcss::minify())
  • Fix filenames and other string manipulation
  • Added diagnostics integration
  • Optimise repeated path traversal into small HashMap
  • Added packager-parity.ts comparitive test suite to validate Rust implementation against JS
  • Various small fixes and improvements
  • Lots of code quality refactoring across css_packager.rs and url_replacer.rs
  • Added lots of unit tests in their respective files
  • Added lots of integration tests in the atlaspack-v3.ts suite

General

  • Updated Lightning CSS dependency in Rust and JS, was one year discrepancy between them and multiple years out of date as well
  • Add raw fallback option for native file transformers (mimicking JS pathway)
  • Shorten filename hashes to match JS pathways
  • Add needs_stable_name inheritance to allow proper filenames for CSS files imported from JS
  • Remove needs_stable_name carve-out for shared bundles

Performance

The native implementation seems to be around 2.5x faster on average, varying significantly based on the CSS being packaged, especially since Node runtime is prone to random slowdown that native code is not. Based on basic but reasonably accurate and repeatable duration logging in the package() function of each implementation.

Checklist

  • Existing or new tests cover this change
  • There is a changeset for this change, or one is not required
  • Added documentation for any new features to the docs/ folder

- Add the atlaspack_packager_css crate stub
- Close BundleGraph API gaps
needed by the CSS packager
- Wire the source map write path in
- Add tests for present and absent cases.
- API hygiene: private fields, pub(crate) visibility
- Test cleanup: remove stale TDD comments, fix fragile path construction, add missing diamond test
- Docs: sibling-order caveat, TODO for context consolidation, Cargo dep rationale
- Structure: move NativeBundleGraph test module to bottom of file
- Replace empty results with explicit `unimplemented!` macros
…al diagnostics during packaging.

- Updated `JsPackager` and `JsPackageResult` to include the new `warnings` field.
- Enhanced CSS packager to emit warnings for default import usage and tree-shaking issues.
- Simplified comments and documentation for clarity.
- Removed unnecessary comments and code related to CSS @import dependencies.
- Enhanced readability by reducing redundant code and comments.
- Maintained functionality for resolving asset paths and inline data URIs.
- Updated tests to reflect changes in the URL replacement logic.
@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Mar 27, 2026

🦋 Changeset detected

Latest commit: 49bed0c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 113 packages
Name Type
@atlaspack/integration-tests Minor
@atlaspack/transformer-css Minor
@atlaspack/optimizer-css Minor
@atlaspack/packager-css Minor
@atlaspack/core Minor
@atlaspack/rust Minor
@atlaspack/config-default Major
atlaspack Patch
@atlaspack/config-webextension Major
@atlaspack/cli Patch
@atlaspack/e2e-tests Patch
@atlaspack/register Patch
@atlaspack/test-utils Patch
@atlaspack/inspector Patch
@atlaspack/bundle-stats Patch
@atlaspack/packaging-test-harness Patch
@atlaspack/query Patch
@atlaspack/optimizer-image Major
@atlaspack/reporter-bundle-stats Patch
@atlaspack/transformer-html Patch
@atlaspack/transformer-image Major
@atlaspack/transformer-js Major
@atlaspack/inspector-frontend Patch
@atlaspack/bundler-default Patch
@atlaspack/cache Patch
@atlaspack/fs Patch
@atlaspack/logger Patch
@atlaspack/source-map Patch
@atlaspack/utils Patch
@atlaspack/link Patch
@atlaspack/optimizer-inline-requires Patch
@atlaspack/packager-js Patch
@atlaspack/transformer-compiled-css-in-js Patch
@atlaspack/transformer-postcss Patch
@atlaspack/transformer-svg Patch
@atlaspack/transformer-tokens Patch
@atlaspack/node-resolver-core Patch
@atlaspack/package-manager Patch
@atlaspack/profiler Patch
@atlaspack/workers Patch
@atlaspack/watcher-watchman-js Patch
@atlaspack/types-internal Patch
@atlaspack/optimizer-cssnano Patch
@atlaspack/optimizer-swc Patch
@atlaspack/optimizer-terser Patch
@atlaspack/transformer-babel Patch
@atlaspack/transformer-compiled-external Patch
@atlaspack/transformer-compiled Patch
@atlaspack/transformer-less Patch
@atlaspack/transformer-sass Patch
@atlaspack/transformer-typescript-tsc Patch
@atlaspack/transformer-typescript-types Patch
@atlaspack/optimizer-blob-url Patch
@atlaspack/optimizer-data-url Patch
@atlaspack/optimizer-svgo Patch
@atlaspack/packager-html Patch
@atlaspack/packager-raw-url Patch
@atlaspack/packager-svg Patch
@atlaspack/packager-webextension Patch
@atlaspack/packager-xml Patch
@atlaspack/reporter-build-metrics Patch
@atlaspack/reporter-bundle-analyzer Patch
@atlaspack/reporter-cli Patch
@atlaspack/reporter-dev-server Patch
@atlaspack/reporter-json Patch
@atlaspack/reporter-lsp Patch
@atlaspack/reporter-sourcemap-visualiser Patch
@atlaspack/reporter-tracer Patch
@atlaspack/resolver-glob Patch
@atlaspack/runtime-browser-hmr Patch
@atlaspack/runtime-js Patch
@atlaspack/runtime-react-refresh Patch
@atlaspack/runtime-service-worker Patch
@atlaspack/runtime-webextension Patch
@atlaspack/transformer-posthtml Patch
@atlaspack/transformer-react-refresh-wrap Patch
@atlaspack/transformer-webextension Patch
@atlaspack/transformer-webmanifest Patch
@atlaspack/validator-eslint Patch
@atlaspack/validator-typescript Patch
@atlaspack/resolver-default Patch
@atlaspack/resolver-tesseract Patch
@atlaspack/types Patch
@atlaspack/codeframe Patch
@atlaspack/graph Patch
@atlaspack/plugin Patch
@atlaspack/reporter-bundle-buddy Patch
@atlaspack/transformer-xml Patch
@atlaspack/ts-utils Patch
@atlaspack/packager-ts Patch
@atlaspack/transformer-jsonld Patch
@atlaspack/bundler-library Patch
@atlaspack/compressor-brotli Patch
@atlaspack/compressor-gzip Patch
@atlaspack/compressor-raw Patch
@atlaspack/namer-default Patch
@atlaspack/optimizer-htmlnano Patch
@atlaspack/packager-raw Patch
@atlaspack/packager-wasm Patch
@atlaspack/reporter-compiled-css-in-js-migration-map Patch
@atlaspack/reporter-conditional-manifest Patch
@atlaspack/transformer-glsl Patch
@atlaspack/transformer-graphql Patch
@atlaspack/transformer-inline-string Patch
@atlaspack/transformer-inline Patch
@atlaspack/transformer-json Patch
@atlaspack/transformer-mdx Patch
@atlaspack/transformer-pug Patch
@atlaspack/transformer-raw Patch
@atlaspack/transformer-svg-react Patch
@atlaspack/transformer-toml Patch
@atlaspack/transformer-worklet Patch
@atlaspack/transformer-yaml Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Base automatically changed from oscar/native-css-packaging-sourcemap to main March 27, 2026 04:00
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 27, 2026

Rust Package Changeset Check

✅ The @atlaspack/rust package has been included in your changeset. Your Rust changes will be published.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 27, 2026

📊 Type Coverage Report

Coverage Comparison

Metric Baseline Current Change
Coverage Percentage 92.28% 92.24% 📉 -0.04%
Correctly Typed 223,657 224,242 +585
Total Expressions 242,350 243,102 +752
Untyped Expressions 18,693 18,860 +167

Files with Most Type Issues (Top 15)

File Issues Affected Lines
packages/core/integration-tests/test/javascript.ts 1152 745
packages/core/integration-tests/test/cache.ts 884 625
packages/core/integration-tests/test/scope-hoisting.ts 622 489
packages/utils/node-resolver-core/test/resolver.ts 476 177
packages/core/integration-tests/test/html.ts 468 294
packages/core/integration-tests/test/sourcemaps.ts 364 182
packages/core/test-utils/src/utils.ts 330 205
packages/core/integration-tests/test/incremental-bundling.ts 298 206
packages/core/core/src/dumpGraphToGraphViz.ts 251 108
packages/core/integration-tests/test/transpilation.ts 239 143
packages/core/integration-tests/test/output-formats.ts 227 161
packages/transformers/webextension/src/WebExtensionTransformer.ts 210 80
packages/core/core/src/requests/AssetGraphRequestRust.ts 197 84
packages/core/core/src/requests/BundleGraphRequestRust.ts 195 68
packages/core/integration-tests/test/css-modules.ts 191 107

This report was generated by the Type Coverage GitHub Action

@OscarCookeAbbott OscarCookeAbbott marked this pull request as ready for review March 31, 2026 03:36
@OscarCookeAbbott OscarCookeAbbott requested a review from a team as a code owner March 31, 2026 03:36
@@ -522,9 +682,10 @@ mod tests {
use atlaspack_core::database::{DatabaseRef, InMemoryDatabase};
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

↓ Tests ↓

}

#[test]
fn inline_asset_replaced_with_base64_data_uri() {
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

↓ Tests ↓

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant