Skip to content

Conversation

@chenjiahan
Copy link
Member

Summary

This change enables postcss-loader and lightningcss-loader for .css?inline files when building Node bundles.

Previously, CSS transformations only applied to web bundles, but .css?inline is also valid in SSR builds. Applying CSS transformation on the server side ensures that inline CSS content is processed consistently between Web and Node bundles, preventing mismatches during SSR hydration.

Checklist

  • Tests updated (or not required).
  • Documentation updated (or not required).

Copilot AI review requested due to automatic review settings November 11, 2025 13:52
@netlify
Copy link

netlify bot commented Nov 11, 2025

Deploy Preview for rsbuild ready!

Name Link
🔨 Latest commit 16b7d01
🔍 Latest deploy log https://app.netlify.com/projects/rsbuild/deploys/69133fb156b6970008f2d912
😎 Deploy Preview https://deploy-preview-6553--rsbuild.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 72 (🟢 up 11 from production)
Accessibility: 97 (no change from production)
Best Practices: 100 (no change from production)
SEO: 100 (no change from production)
PWA: 60 (no change from production)
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull Request Overview

This PR enables CSS transformation (postcss-loader and lightningcss-loader) for .css?inline imports in Node bundles. Previously, these transformations only applied to web bundles, but inline CSS is also used in SSR scenarios where consistent transformation between client and server is critical for hydration.

  • Modified the updateRules helper to conditionally skip normal CSS rules when emitCss is disabled
  • Applied lightningcss-loader and postcss-loader to inline CSS rules regardless of target environment
  • Updated importLoaders count for css-loader configuration

Reviewed Changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 3 comments.

File Description
packages/core/src/plugins/css.ts Added skipNormal option to updateRules helper and applied lightningcss/postcss loaders to inline CSS rules even when emitCss is false
packages/core/tests/snapshots/*.snap Updated test snapshots to reflect new loader configuration with increased importLoaders count and lightningcss-loader added to inline CSS rules
e2e/cases/css/inline-query-node-target/* Added new e2e test to verify CSS transformation for inline imports with Node target in both dev and build modes

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

api.context.bundlerType === 'rspack' &&
config.tools.lightningcssLoader !== false
) {
importLoaders++;
Copy link

Copilot AI Nov 11, 2025

Choose a reason for hiding this comment

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

The importLoaders count is incremented unconditionally but the loader is only added to the inline rule when emitCss is false (via skipNormal: !emitCss). This results in the normal CSS rule having an incorrect importLoaders count. While this doesn't cause issues since the CSS is ignored via ignoreCssLoader, consider tracking separate counts for normal and inline rules or only incrementing when the loader applies to both rules for better code clarity.

Copilot uses AI. Check for mistakes.
@chenjiahan chenjiahan merged commit 103ea8d into main Nov 11, 2025
18 checks passed
@chenjiahan chenjiahan deleted the css_transform_node_1111 branch November 11, 2025 14:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants