refactor: echo-433: scss feature rewrites ls label studioweb by luarmr · Pull Request #9531 · HumanSignal/label-studio

luarmr · 2026-03-05T23:18:56Z

Summary

Eliminates all SCSS-specific syntax from both LS and LSE web codebases — @mixin/@include, #{interpolation}, @if/@else, @extend, @at-root/selector-append, $variables, // comments, and SCSS partial @imports — preparing all .scss files for the final loader swap from sass-loader to postcss-loader.

What changed

Commit 1 — Zero-diff SCSS feature rewrites

LS (label-studio/web) — 17 files, 4 deleted:

File	Change
`_functions.scss`	Deleted — `get-color()` was unused
`_variables.scss`	Deleted — only consumed by unused `get-color()`
`_mixins.scss`	Deleted — `respond()` and `waiting()` inlined at all call sites
`waiting.scss` (datamanager)	Deleted — duplicate of editor mixin, inlined into `Label.scss`
`global.scss`	Removed `@import` of deleted partials; added `@keyframes waiting` directly
`App.scss`, `Grid.module.scss`, `Panel.module.scss`, `Controls.module.scss`	Inlined `@include respond("phone"/"tablet")` as `@media (width <= 760px/1200px)`
`Label.scss`	Inlined `waiting()` mixin body + `@keyframes waiting`
`GridView.scss`	Expanded `@for $i from 1 to 15` into 14 static rules
`SimpleBadge.module.scss`	Inlined `$size: 20px` (and `$size / 2` computed to `10px`)
`Paragraphs.module.scss`	Inlined `$border-thin`
`checkbox.module.scss`	Inlined `$check-icon` data URI
`RichText.scss`	Inlined `$handle-radius`, `$hitbox-width` + arithmetic
`Config.scss`	Inlined `$scroll-width`
`Import.scss`	Removed `@mixin custom-scrollbar`, inlined at 2 call sites

LSE (label-studio-enterprise/web) — 6 files, 1 deleted:

File	Change
`Import.scss`	Removed `@mixin custom-scrollbar`, inlined body at 2 call sites
`Config.scss`	Removed `@mixin toggle-items-tab-styles`, inlined body at 2 call sites
`Members.scss`	Replaced `@import skeleton-loader` with `@keyframes shimmer`, inlined mixin
`ProjectCard.scss`	Replaced `@import skeleton-loader` with `@keyframes shimmer`, inlined mixin at 2 sites
`Chat.scss`	Removed 3 mixin defs (`inset-shadow`, `role-styling`, `role-selected-styling`), expanded 17 `@include` calls with resolved parameters — eliminates all `#{$role}` interpolation and `@if/@else`
`skeleton-loader.scss`	Deleted (no longer imported)

Commit 2 — Promote inlined variables to CSS custom properties (LS)

Multi-use SCSS variables that were inlined as literal values in commit 1 are promoted back to named constants using CSS custom properties:

File	Variable	CSS Custom Property	Uses
`Grid.module.scss`	`$gap: 30px`	`--grid-gap` (on `.container, .containerVirtualized`)	2
`SimpleBadge.module.scss`	`$size: 20px`	`--badge-size`	4
`Config.scss`	`$scroll-width: 5px`	`--scroll-width`	2

Commit 3 — Consolidate duplicate CSS blocks using shared selectors

LS: Import.scss — 2 identical custom-scrollbar blocks → shared selector

LSE: Chat.scss (3 inset-shadow blocks), Import.scss (2 scrollbar blocks), Config.scss (2 toggle-items blocks), ProjectCard.scss (2 skeleton-loader blocks) — all consolidated

Commit 4 — Add breakpoint alias comments to media queries

Annotates raw pixel breakpoints with descriptive inline comments (/* phone */, /* desktop */, etc.) to preserve semantic intent after SCSS variable aliases were removed. 16 files across both repos.

Commit 5 — Replace @extend %settings-title with shared selector (LS)

Replaces the SCSS %settings-title placeholder with a combined CSS selector at the top of the file, grouping the 3 consumers (.settings__title, .settings_newUI .settings__label__title, .settings-modal :global(.ant-tabs-tab .ant-tabs-tab-btn)) into a single shared rule block. Each individual selector keeps only its unique overrides. Produces nearly identical compiled CSS to the original @extend.

Commit 6 — Replace @at-root/selector-append with flat CSS selectors (LS)

Replaces SCSS-specific @at-root #{selector-append(&,_leaf,&,_hidden)} in Choice.scss with the explicit flat CSS selectors it compiled to. The selectors are moved outside the nesting block and written out directly.

Commit 7 — Convert remaining SCSS $variables to CSS custom properties (LSE)

File	Variable	Approach
`Config.scss`	`$scroll-width: 5px`	Inlined (single use)
`ProjectCard.scss`	`$transition` (21 uses)	→ `--transition` CSS custom property
`ProjectDashboard.scss`	`$stripes` gradient	Inlined (single use)
`Drawer.scss`	`$header-height: 40px`	→ `--header-height` CSS custom property
`Drawer.scss`	`$header-background`, `$icon-color`	Inlined (CSS var aliases)
`Drawer.scss`	`$grape-500`	Inlined (single use)

Commit 8 — Convert SCSS // comments to CSS /* */ comments

Converts all single-line SCSS comments (//) to standard CSS block comments (/* */) across 42 LS files and 28 LSE files. This removes the last SCSS-specific syntax that would prevent CSS parsers from processing these files.

SCSS features eliminated (complete list)

@mixin / @include — all definitions and call sites removed
#{interpolation} — all occurrences removed
@if / @else — all occurrences removed
@extend / %placeholder — inlined at all usage sites
@at-root / selector-append — replaced with flat CSS selectors
@import of SCSS partials — removed (theme @import chain stays until loader swap)
@for loop — expanded to static rules
SCSS arithmetic — computed to literal values or calc() with CSS custom properties
$variables — converted to CSS custom properties or inlined
// single-line comments — converted to /* */

What remains before renaming `.scss` → `.css`

Swap sass-loader for postcss-loader — webpack config change + postcss-nesting plugin
Convert @import statements — adjust to postcss-import compatible format (~18 files)
Rename files — .scss → .css and update all import paths

Validation

Commits 1-4 validated via validate-scss-transform.js, production builds, and sorted CSS diffs.

Commits 5-8 intentionally change compiled CSS structure (inlined properties replace grouped selectors, literal values become var() references, // comments become /* */). Visual output is identical; builds succeed in both repos.

Test plan

validate-scss-transform.js snapshot/validate passes (commit 1)
Full webpack build succeeds (LS and LSE)
Production build diff confirms consolidation produces functionally identical CSS
Cypress view_all/grid.cy.ts and view_all/readonly.cy.ts pass locally
Pre-push hooks (Biome, stylelint) pass in both repos
Visual spot-check: Chat tag, project cards, Config page tabs, Import scrollbars, Settings modal, Choice visibility toggle, labeling interface responsive breakpoints

netlify · 2026-03-05T23:19:02Z

✅ Deploy Preview for heartex-docs canceled.

Name	Link
🔨 Latest commit	`4e5f76c`
🔍 Latest deploy log	https://app.netlify.com/projects/heartex-docs/deploys/69b04b1fc2a8c3000829c220

netlify · 2026-03-05T23:19:02Z

✅ Deploy Preview for label-studio-docs-new-theme canceled.

Name	Link
🔨 Latest commit	`4e5f76c`
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-docs-new-theme/deploys/69b04b1f90b6010007366ca0

netlify · 2026-03-05T23:19:02Z

✅ Deploy Preview for label-studio-storybook ready!

Name	Link
🔨 Latest commit	`4e5f76c`
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-storybook/deploys/69b04b1fabd56c0008c465f3
😎 Deploy Preview	https://deploy-preview-9531--label-studio-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2026-03-05T23:19:10Z

✅ Deploy Preview for label-studio-playground ready!

Name	Link
🔨 Latest commit	`4e5f76c`
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-playground/deploys/69b04b1f251a5d000818bcc2
😎 Deploy Preview	https://deploy-preview-9531--label-studio-playground.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

codecov · 2026-03-05T23:48:39Z

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

Made-with: Cursor

Promotes multi-use SCSS variables that were inlined as literals back to named constants using CSS custom properties: - $gap: 30px → --grid-gap (Grid.module.scss, 2 uses) - $size: 20px → --badge-size (SimpleBadge.module.scss, 4 uses) - $scroll-width: 5px → --scroll-width (Config.scss, 2 uses) Custom properties are defined on the container elements that parent both the grid and the navigation buttons, ensuring correct CSS inheritance for all consumers. Single-use variables ($border-thin, $check-icon, $handle-radius, $hitbox-width) are left as inline literals since named constants add no value for one-off values. Made-with: Cursor

Extract identical custom-scrollbar CSS blocks from upload_page > main and upload_page__code-wrapper > div into a single shared selector, reducing code duplication from the previous mixin inlining. Made-with: Cursor

Annotate raw pixel breakpoints with descriptive comments (phone, tablet+, desktop, compact desktop, wide desktop) so the intent is preserved now that SCSS variable aliases have been removed. Made-with: Cursor

Replace the SCSS %settings-title placeholder with a combined CSS selector at the top of the file, grouping the 3 consumers into a single rule block. Each individual selector keeps only its unique overrides. Produces nearly identical compiled CSS to @extend. Made-with: Cursor

@at-root

… Choice.scss Replace the SCSS-specific @at-root and selector-append() usage with explicit flat CSS selectors. The selectors are moved outside the nesting block and written out directly, producing the same compiled result. Made-with: Cursor

Convert all single-line SCSS comments (//) to standard CSS block comments (/* */) across 42 files. This removes the last SCSS-specific syntax that would prevent CSS parsers from processing these files. Made-with: Cursor

luarmr · 2026-03-10T16:38:53Z

/git merge

Workflow run
Successfully merged: delete mode 100644 label_studio/core/static/fonts/roboto/roboto.css

…bel-studioweb' Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/22913433195

luarmr requested review from a team, hlomzik and nick-skriabin as code owners March 5, 2026 23:18

github-actions bot added the title needs formatting label Mar 5, 2026

luarmr requested review from bmartel and yyassi-heartex March 5, 2026 23:31

luarmr changed the title ~~Fb echo 433/scss feature rewrites ls label studioweb~~ refactor: echo-433: scss feature rewrites ls label studioweb Mar 5, 2026

github-actions bot added refactor and removed title needs formatting labels Mar 5, 2026

luarmr force-pushed the fb-echo-433/scss-feature-rewrites--ls-label-studioweb branch 3 times, most recently from c27776c to 18b0639 Compare March 6, 2026 23:19

luarmr added 4 commits March 6, 2026 15:48

refactor: ECHO-433: SCSS Feature Rewrites — LS (label-studio/web)

785568b

Made-with: Cursor

refactor: consolidate duplicate scrollbar styles using shared selectors

4b9ff36

Extract identical custom-scrollbar CSS blocks from upload_page > main and upload_page__code-wrapper > div into a single shared selector, reducing code duplication from the previous mixin inlining. Made-with: Cursor

refactor: add breakpoint alias comments to media queries

af60781

Annotate raw pixel breakpoints with descriptive comments (phone, tablet+, desktop, compact desktop, wide desktop) so the intent is preserved now that SCSS variable aliases have been removed. Made-with: Cursor

luarmr force-pushed the fb-echo-433/scss-feature-rewrites--ls-label-studioweb branch from 18b0639 to 0da398a Compare March 6, 2026 23:50

luarmr added 3 commits March 6, 2026 16:02

refactor: convert SCSS // comments to CSS /* */ comments

8675516

Convert all single-line SCSS comments (//) to standard CSS block comments (/* */) across 42 files. This removes the last SCSS-specific syntax that would prevent CSS parsers from processing these files. Made-with: Cursor

luarmr force-pushed the fb-echo-433/scss-feature-rewrites--ls-label-studioweb branch from 0da398a to 8675516 Compare March 7, 2026 00:03

luarmr requested a review from nass600 March 9, 2026 04:43

nass600 approved these changes Mar 10, 2026

View reviewed changes

yyassi-heartex approved these changes Mar 10, 2026

View reviewed changes

bmartel approved these changes Mar 10, 2026

View reviewed changes

Merge branch 'develop' into 'fb-echo-433/scss-feature-rewrites--ls-la…

4e5f76c

…bel-studioweb' Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/22913433195

robot-ci-heartex merged commit c06b967 into develop Mar 10, 2026
53 checks passed

robot-ci-heartex deleted the fb-echo-433/scss-feature-rewrites--ls-label-studioweb branch March 10, 2026 18:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: echo-433: scss feature rewrites ls label studioweb#9531

refactor: echo-433: scss feature rewrites ls label studioweb#9531
robot-ci-heartex merged 8 commits intodevelopfrom
fb-echo-433/scss-feature-rewrites--ls-label-studioweb

luarmr commented Mar 5, 2026 •

edited

Loading

Uh oh!

netlify bot commented Mar 5, 2026 •

edited

Loading

Uh oh!

netlify bot commented Mar 5, 2026 •

edited

Loading

Uh oh!

netlify bot commented Mar 5, 2026 •

edited

Loading

Uh oh!

netlify bot commented Mar 5, 2026 •

edited

Loading

Uh oh!

codecov bot commented Mar 5, 2026 •

edited

Loading

Uh oh!

luarmr commented Mar 10, 2026 •

edited by robot-ci-heartex

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

luarmr commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

What changed

SCSS features eliminated (complete list)

What remains before renaming .scss → .css

Validation

Test plan

Uh oh!

netlify bot commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for heartex-docs canceled.

Uh oh!

netlify bot commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for label-studio-docs-new-theme canceled.

Uh oh!

netlify bot commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for label-studio-storybook ready!

Uh oh!

netlify bot commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for label-studio-playground ready!

Uh oh!

codecov bot commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

luarmr commented Mar 10, 2026 • edited by robot-ci-heartex Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

luarmr commented Mar 5, 2026 •

edited

Loading

What remains before renaming `.scss` → `.css`

netlify bot commented Mar 5, 2026 •

edited

Loading

netlify bot commented Mar 5, 2026 •

edited

Loading

netlify bot commented Mar 5, 2026 •

edited

Loading

netlify bot commented Mar 5, 2026 •

edited

Loading

codecov bot commented Mar 5, 2026 •

edited

Loading

luarmr commented Mar 10, 2026 •

edited by robot-ci-heartex

Loading