Default not support vue style lang="postcss"

[ZWkang]

how to setting make vue3 style block lang="postcss" work?

reproduction https://github.com/ZWkang/rsbuild-problem

[ZWkang]

https://github.com/ZWkang/rsbuild-problem/tree/problem/dep-scss-file-import-css-file

still have one another problem, when deps import css file from scss file will be fail ~

[xc2]

This looks weird. Have to dig into it.

As a workaround, @import './h.css?'; would work.

[xc2]

likely a sass-loader bug or feature.

[xc2]

sry it's by design of sass.

Sass can import plain old .css files. The only rule is that the import must not explicitly include the .css extension, because that’s used to indicate a plain CSS @import.

So you have to change the statement to @import './h'.

[ZWkang]

it work fine in vite. ok i will change my code ~

[ZWkang]

It would be better if I could do some configuration to support my original usage without modifying the code

[xc2]

how to setting make vue3 style block lang="postcss" work?

reproduction https://github.com/ZWkang/rsbuild-problem

Rsbuild applies postcss for .css files by default. Please just use lang="css" instead which behaves the same as .css file.

[ZWkang]

ok, thanks. Could you please check another one problem?

[ZWkang]

vue template render value could not use generic type.
https://github.com/ZWkang/rsbuild-problem/tree/problem/generic-vue

vite case is work fine.
https://github.com/ZWkang/rsbuild-problem/tree/problem/generic-vue-vite

is the swc-loader problem?

cc @xc2

[xc2]

TypeScript advises against using type assertions of angle-bracket syntax in jsx as well:

You can also use the angle-bracket syntax (except if the code is in a .tsx file)

[ZWkang]

Yes, I confused and said it wrong, it is type assertion.
In this case, does rsbuild support complete replacement of swc?

[xc2]

pluginBabel will help transforming code before swc.

However the cause of this problem is that rsbuild transforms .ts files with tsx: true(swc) or isTSX: true(babel), both of which will throw error when using angle-bracket syntax type assertions in it.

So the solution is to turn tsx(swc) or isTSX(babel) off for .ts files. Examples:

Use SWC

import { defineConfig } from "@rsbuild/core";
import { pluginVue } from "@rsbuild/plugin-vue";

export default defineConfig({
  plugins: [pluginVue()],
  tools: {
    bundlerChain(chain, { CHAIN_ID }) {
      const swcRule = chain.module.rule(CHAIN_ID.RULE.JS).use(CHAIN_ID.USE.SWC);
      const options = swcRule.get('options');
// create a new rule for `.ts` files with `bulitin:swc-loader` and swc config `tsx: false`
      chain.module
        .rule('tsonly')
        .after(CHAIN_ID.RULE.JS)
        .test(/\.ts$/)
        .use('tsonlyswc')
        .loader(swcRule.get('loader'))
        .options({
          ...options,
          jsc: { ...options.jsc, parser: { ...options.jsc.parser, tsx: false } },
        });
    },
  },
});

Use Babel

import { defineConfig } from '@rsbuild/core';
import { pluginBabel } from '@rsbuild/plugin-babel';
import { pluginVue } from '@rsbuild/plugin-vue';

export default defineConfig({
  plugins: [
    pluginVue(),
    pluginBabel({
      babelLoaderOptions(options, c) {
        for (const p of options.presets || []) {
          if (Array.isArray(p) && /typescript/.test(p[0])) {
            p[1].isTSX = false;
          }
        }
      },
    }),
  ],
});

[ZWkang]

ok, i remove the type assertion from vue template using. Finally I got the bundle well. Looks great!!

Just still have some runtime fail from plugin adaptor dependency.
Next I will try to adapt the plug-ins I depend on locally.
Thanks again for your help.

[xc2]

Feel free to open new thread or ask in discord/lark when you meet further problems.

[ZWkang]

Maybe i should open other thread to record my problem?

[ZWkang]

https://github.com/ZWkang/rsbuild-problem/tree/problem/svg-file-adaptor
Here i want to adaptor https://github.com/jpkleemans/vite-svg-loader, it allow using ?component to generator svg vue component use.
i make plugin-svg.js in my example. but i don't know how to make it work with rsbuild ecosystem.rebuild have builtin svg support. i just want to improve the svg loader, make it support ?component same as vite-svg-loader.

cc @xc2

[xc2]

You could use https://github.com/egoist/svg-to-vue-component to do the transformation

In rspack/rsbuild, resourceQuery is the thing for matching requesting with specific querystring.

Here's an example that should work:

import { defineConfig } from '@rsbuild/core';
import { pluginVue } from '@rsbuild/plugin-vue';

export default defineConfig({
  plugins: [pluginVue()],
  tools: {
    bundlerChain: (chain, { CHAIN_ID, env }) => {
      // get the first svg rule name, we have to add our new rule before it.
      const firstSvgRule = (chain.module.rule(CHAIN_ID.RULE.SVG).oneOfs.values()[0] as any)
        .ruleName;

      chain.module
        .rule(CHAIN_ID.RULE.SVG)
        .oneOf('svg-vue')
        // matching request like `xxx.svg?component`
        .resourceQuery(/component/)
        .before(firstSvgRule)
        // adopt all uses from vue rule to handle transformed code by svg-to-vue-component loader
        .uses.merge(chain.module.rule(CHAIN_ID.RULE.VUE).uses.entries())
        .end()
        // append svg-to-vue-component loader
        .use('svg-use')
        .loader('svg-to-vue-component/loader')
        .options({
          svgoConfig: {},
        });
    },
  },
});