refactor(build): modernize scss pipeline (@use + sass/lightningcss)#843
Merged
lcottercertinia merged 2 commits intoJul 9, 2026
Merged
Conversation
"Replace deprecated Sass @import with @use / meta.load-css; bump sass to ^1.101.0. DataGrid.scss loads tabulator via meta.load-css with a \$with config map inside @layer; DatabaseView.scss @import->@use. legacy-js-api warning silenced until the pipeline is replaced. Compiled CSS byte-identical to previous output.
…edded + lightningcss plugin" rollup-plugin-postcss uses the deprecated legacy sass.render API and is unmaintained. Replace it in both rollup and rolldown builds with a small custom plugin (scripts/rollup-plugin-css.mjs) built on sass-embedded (modern async API) and lightningcss (minify) — the primitives Vite uses. Each style import both default-exports the compiled CSS string (Lit unsafeCSS shadow styles) and injects a <style> into document.head — the head injection is required because tabulator appends tooltips/edit-list popups to document.body. Drops postcss, postcss-url, sass, and rollup-plugin-postcss. Compiled CSS is semantically identical (only cosmetic minifier differences).
lcottercertinia
approved these changes
Jul 9, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📝 PR Overview
Modernizes the webview's SCSS toolchain: migrates off the deprecated Sass
@importrule to the module system, and replaces the unmaintainedrollup-plugin-postcss(which calls the deprecated legacysass.renderAPI) with a small custom plugin built on Sass's modern API + Lightning CSS. Removes all Sass deprecation warnings, drops three dependencies, and speeds up the dev build ~35%.🛠️ Changes made
DataGrid.scssnow loads tabulator's SCSS via@use 'sass:meta'+meta.load-css(...)with a$withconfig map (kept inside@layer tabulatorto preserve the cascade demotion);DatabaseView.scssuses@use. Bumpssassto^1.101.0. Compiled CSS is byte-identical to before.scripts/rollup-plugin-css.mjs(wired into bothrollup.config.mjsandrolldown.config.ts): compiles SCSS with Sass's moderncompileStringAPI (nolegacy-js-apideprecation) and minifies withlightningcss. Each style import bothexport defaults the compiled CSS string (for LitunsafeCSSshadow styles) and injects a<style>intodocument.head— the head injection is required because tabulator appends tooltips/edit-list popups todocument.body(light DOM), which the shadow-root copy can't reach.rollup-plugin-postcss,postcss-url, andpostcss.pnpm build:dev:fast~1.03s → ~0.68s warm (~35%); no more legacy Sass API deprecation output.🧩 Type of change (check all applicable)
📷 Screenshots / gifs / video [optional]
No visual change — compiled CSS is semantically identical (only cosmetic minifier differences: color notation, selector ordering, shorthand merges). Grid theming, hover/selection, header/footer transparency, min-max filter inputs, progress bars, and body-appended tooltips/edit-list popups all render as before.
🔗 Related Issues
✅ Tests added?
Build-tooling refactor with no runtime behaviour change; the existing suite (962 tests) passes, and CSS parity was verified by diffing the compiled
@layer tabulatoroutput againstmain.📚 Docs updated?
Anything else we need to know? [optional]
sass-embeddedwas evaluated and rejected: it's ~2–3× slower per-compile for this small workload (IPC overhead) and slower on cold builds (which CI uses), for a native-binary dependency — plainsass(modern API) is simpler and faster here.