[Bug] Cannot work when using with `@import 'tailwindcss/utilities.css'` in .scss

Open
#29 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
48/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
sass, scss, tailwindcss, typescript
Domain
build-system, tooling

Research direction

Use the linked reproduction as the starting point: run pnpm install and pnpm build, then inspect the generated CSS in dist. Focus on the interaction between @rsbuild/plugin-sass, .scss @import, disabled lightningcss-loader, and sass-loader; done means the Tailwind utilities import remains separate from the following .foo rule in the output.

Written by the indexing model from the issue text.

Description

Versions
pnpm dlx envinfo --system --npmPackages
  System:
    OS: macOS 14.6.1
    CPU: (12) arm64 Apple M2 Max
    Memory: 2.34 GB / 96.00 GB
    Shell: 3.7.1 - /opt/homebrew/bin/fish
  npmPackages:
    @rsbuild/core: ^1.1.8 => 1.1.10 
    @rsbuild/plugin-sass: ^1.1.2 => 1.1.2 
    @rsdoctor/rspack-plugin: ^0.4.12 => 0.4.12 
    rsbuild-plugin-tailwindcss: ^0.0.3 => 0.0.3 
    tailwindcss: ^3.4.17 => 3.4.17
Details

When using this plugin with:

  1. @rsbuild/plugin-sass
  2. Using @import in .scss
  3. Disabling lightningcss-loader
@import 'tailwindcss/utilities.css';

.foo {
  color: red;
}

The tailwindcss could not work properly.

Debugging with Rsdoctor, it shows that the semicolon is removed by sass-loader.

image
Reproduce

https://github.com/colinaaa-reproductions/rsbuild-plugin-tailwindcss-scss-import

  • pnpm install
  • pnpm build

Then, checkout the output CSS in dist, it would be something like:

@tailwind utilities.foo{color:red}
Dominant language
TypeScript
Stars
54
Forks
6
No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from rstackjs/rsbuild-plugin-tailwindcss

All issues in rstackjs/rsbuild-plugin-tailwindcss

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.