Replies: 2 comments 1 reply
-
I prefer the name |
Beta Was this translation helpful? Give feedback.
0 replies
-
The implementation of the |
Beta Was this translation helpful? Give feedback.
1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Summary
This RFC proposes to add the ability to process sass/scss files for RSPack by
sass-loader
(orrspack_plugin_sass
), which transforms the sass/scss syntax to CSS syntax, then leaves the CSS torspack_plugin_css
.Motivation
Support sass for RSPack.
Detailed design
The sass/scss handling ability for RSPack mainly includes two parts, the loader and the sass compiler in rust.
sass compiler in rust
There are several implementations for sass in rust, choosing the right implementation is essential for both correctness and performance.
Rewrite in rust implementations like grass and rsass are incomplete for the sass-spec and unoptimized at some cases.
Wrap LibSass (which is written in cpp) in rust like sass-rs and sass-alt are also unrecommend because LibSass has already deprecated.
Embed dart-sass in rust has excellent support for sass-spec and consistent performance with dart-sass and LibSass, cause it's just dart-sass using a protocol to communicate with the host, like sass-embedded-host-node does but implement the host in rust.
the loader
input: sass/scss content string
output: CSS content string, source map
the loader uses the sass compiler above to compile sass/scss content.
Problems with
url(...)
This problem also happens in webpack's sass-loader, parcel and vite, webpack has
resolve-url-loader
which uses sass's source map to relocate the URL and rewite it.The root cause of the problem is how the dart-sass compiler resolves, the priority of the custom importer is lower than resolving a relative file in sass according to the sass API document, and doesn't support rewrite URLs for relative file as less does.
Since this is a behavior triggered by dart-sass, we could provide a
resolve-url-loader
for RSPack like webpack dose shortly, and support rewrites URLs once dart-sass officially supports it.Should we support sass modern API
Sass has two sets of API, webpack sass-loader support both by
api option
, parcel and vite haven't supported it.The sass modern API leads to different behavior for sassOptions, one of the biggest problems of sass modern API is it doesn't support custom resolve, alias, plugin resolve, etc. Since it will increase the user's mental burden, we should not support it for the loader for now.
Partial support for sassOptions
RSPack config file is JSON format and it does not support the js function, so the
logger
,function
, andimporter
need the user to define js functions in sassOptions can't be implemented.Prior Art
Unresolved questions
Naming: should we call it
sass-loader (rspack_sass_loader)
like webpack or call itrspack_plugin_sass
.How to install dart-sass-embedded for user side: postinstall? optionalDependencies? or some better way to link it and rspack into one executable binary?
loaderContext.addDependency
for RSPack, this adds a file as a dependency of the loader result to make them watchable.loaderContext.getResolve
for RSPack, the resolverFactory, which is needed to create a resolver for sass/scss file (extensions: [".sass", ".scss", ".css"], mainFiles: ["_index", "index"]
) to implementwebpackImporter
, for now RSPack has an singleton resolver (extensions: [".tsx", ".jsx", ".ts", ".js", ".json"]
) on plugin_driver, and it can't used for sass/scss file.loader pipelines for RSPack: for now, RSPack has a
transform_include
hook which is controlled by the plugin. For example, if we wantrspack_plugin_css
to handle the result of the sass-loader, we needrspack_plugin_css
'stransform_include
to return true for the sass/scss file, which causes coupling. So it's needed to let the user control (or config) thetransform_include
asRule.test
orpipelines
does. Or just coupling the sass/scss transform logic in the CSS plugin as vite does 😥.Beta Was this translation helpful? Give feedback.
All reactions