feat: scope css to js module to allow treeshaking it (requires vite 6.2) #1092
Conversation
| @@ -133,6 +133,31 @@ export function createCompileSvelte() { | |||
| let compiled; | |||
| try { | |||
| compiled = svelte.compile(finalCode, { ...finalCompileOptions, filename }); | |||
| if (compiled.css) { | |||
| if (finalCode.includes(':global') && compiled.ast.css) { | |||
There was a problem hiding this comment.
Could we have a comment here of what this is trying to do? Is it checking for query selectors that starts with :global() and not the nested kind?
Also a bit concerned of the perf implication with the additional walking but I guess it can be optimized later.
There was a problem hiding this comment.
yes, unscoped :global must be included or it would be a breaking change and also differ in experience between dev and build because in dev vite still includes the css, its only treeshaken in build.
the include check before walking should minimize impact. If you feel this is still too much of a regression, should we make this opt-in?
There was a problem hiding this comment.
I don't think we need to make this opt-in or is a regression, just wondering what specifically this block was doing and I'm fine with the current logic 👍 It would be nice to add a comment here only explaining what it's doing for.
dominikg
force-pushed
the
feat/css-shake
branch
from
12b257d to
6fc698a
Compare
|
the regex approach is a bit less clunky i think. least clunk inside vps would be an option that allows users to define the tests themselves on filename+content, similar to dynamicCompileOptions. |
see vitejs/vite#19418
This allows vite to treeshake unused svelte component css if the component was referenced in a barrel file.