Skip to content

fix: make CSS preprocessor plugins compat with Rsbuild 1.2#4909

Merged
chenjiahan merged 2 commits intoweb-infra-dev:mainfrom
colinaaa:colin/0328/style-130-compat
Mar 29, 2025
Merged

fix: make CSS preprocessor plugins compat with Rsbuild 1.2#4909
chenjiahan merged 2 commits intoweb-infra-dev:mainfrom
colinaaa:colin/0328/style-130-compat

Conversation

@colinaaa
Copy link
Copy Markdown
Contributor

@colinaaa colinaaa commented Mar 28, 2025

Summary

Ensure compatibility of plugin-less, plugin-sass, and plugin-stylus with Rsbuild 1.2.x.

I believe it might also crash when using Rsbuild v1.2.x with plugin-sass v1.3.0, though I haven’t tested it myself. 😉

Related Links

See lynx-family/lynx-stack#386.

Checklist

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

@netlify
Copy link
Copy Markdown

netlify bot commented Mar 28, 2025

Deploy Preview for rsbuild ready!

Name Link
🔨 Latest commit d97bc94
🔍 Latest deploy log https://app.netlify.com/sites/rsbuild/deploys/67e69f74a729100008adfb88
😎 Deploy Preview https://deploy-preview-4909--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: 79 (🟢 up 6 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 site configuration.


// Support for importing raw Sass files
chain.module
.rule(CHAIN_ID.RULE.SASS_RAW)
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.

CHAIN_ID.RULE.SASS_RAW is undefined in v1.2.x. So we will get a rule like this:

      /* config.module.rule('undefined') */
      {
        test: /\.s(?:a|c)ss$/,
        resourceQuery: /raw/,
        type: 'asset/source'
      },

I'll make a patch in the next PR

Suggested change
.rule(CHAIN_ID.RULE.SASS_RAW)
.rule(CHAIN_ID.RULE.SASS_RAW ?? "sass-raw")

callback(inlineRule, 'inline');

// Rsbuild < 1.3.0 does not have RULE.CSS_INLINE.
if (chain.module.rules.has(CHAIN_ID.RULE.CSS_INLINE)) {
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.

It might be preferable to use CHAIN_ID.RULE.CSS_INLINE && chain.module.rules.has(CHAIN_ID.RULE.CSS_INLINE) because, theoretically, there could be a rule named undefined.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

this will be better👍

// Rsbuild < 1.3.0 does not have RULE.CSS_INLINE.
if (chain.module.rules.has(CHAIN_ID.RULE.CSS_INLINE)) {
const inlineRule = chain.module
.rule(findRuleId(chain, CHAIN_ID.RULE.LESS_INLINE))
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

findRuleId should not be put inside the updateRules method. It should be only called once.

@chenjiahan chenjiahan changed the title fix: make plugins compat with Rsbuild 1.2.x fix: make CSS preprocessor plugins compat with Rsbuild 1.2 Mar 29, 2025
@chenjiahan chenjiahan merged commit 35b80f4 into web-infra-dev:main Mar 29, 2025
12 checks passed
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