feat: Migrate SCSS to plain CSS with PostCSS, replace Stylelint with Biome

.cursor/rules/design.mdc

@@ -1,6 +1,6 @@
 ---
 description: Design system and UI consistency guidelines for Label Studio
-globs: **/*.tsx,**/*.jsx,**/*.scss,**/*.css
+globs: **/*.tsx,**/*.jsx,**/*.css
 alwaysApply: false
 ---
 
@@ -51,7 +51,7 @@ This rule provides guidance for creating user interfaces consistent with the Hum
 
 ## Design Tokens
 
-**Location**: `web/libs/ui/src/tokens/tokens.scss`
+**Location**: `web/libs/ui/src/tokens/tokens.prefix.css`
 
 **Always Use Semantic Tokens**:
 
@@ -143,9 +143,9 @@ import { cn } from '@humansignal/core';
 <div className="p-200 bg-grape-600 text-16">
 ```
 
-**SCSS Modules** (co-located `.module.scss`):
-```scss
-// Create component tokens → semantic tokens
+**CSS Modules** (co-located `.module.css`):
+```css
+/* Component tokens → semantic tokens */
 .component {
   --component-bg: var(--color-neutral-surface);
   --component-text: var(--color-neutral-content);
@@ -156,7 +156,7 @@ import { cn } from '@humansignal/core';
   padding: var(--component-spacing);
 }
 
-// Variant pattern
+/* Variant pattern */
 .variant-primary {
   --component-bg: var(--color-primary-surface);
   --component-text: var(--color-primary-surface-content);
@@ -187,7 +187,7 @@ See `react.mdc` for complete React patterns.
 ```
 button/
   button.tsx
-  button.module.scss
+  button.module.css
   button.stories.tsx
   button.test.tsx
   index.ts
@@ -196,7 +196,7 @@ button/
 **Pattern**:
 ```tsx
 import { forwardRef } from 'react';
-import styles from './button.module.scss';
+import styles from './button.module.css';
 import { cn } from '@humansignal/core';
 
 export interface ButtonProps {
@@ -315,7 +315,7 @@ export const Primary: Story = {
 
 **Files**:
 - Components: `web/libs/ui/src/lib/`
-- Tokens: `web/libs/ui/src/tokens/tokens.scss`
+- Tokens: `web/libs/ui/src/tokens/tokens.prefix.css`
 - Storybook: `yarn nx storybook storybook`
 
 **Related Rules**:

.cursor/rules/react.mdc

@@ -31,7 +31,7 @@ globs: **/*.jsx,**/*.tsx
   ```
   component-name/
     component-name.tsx
-    component-name.module.scss
+    component-name.module.css
     component-name.test.tsx
     index.ts
   ```
@@ -64,7 +64,7 @@ globs: **/*.jsx,**/*.tsx
 
 ## Tooling
 - Use Biome for code linting and formatting
-- Follow CSS/SCSS linting rules defined in .stylelintrc.json
+- Follow CSS linting rules defined in biome.json (css section)
 - Use TypeScript for type safety
 - Keep bundle size in check by monitoring imports
 
@@ -104,7 +104,7 @@ globs: **/*.jsx,**/*.tsx
 ## Code Organization
 - Use proper file naming conventions which is kebab-case ie. ListItem -> `list-item.tsx`
 - Prefer one component per folder, but group related components together when necessary, and ensure there is only one component per file.
-- Component folders should have a SCSS `.module.scss` with the name of the component kebab-case ie. ListItem -> `list-item.module.scss`
+- Component folders should have a CSS `.module.css` with the name of the component kebab-case ie. ListItem -> `list-item.module.css`
 - Implement proper directory structure
 - UI components live within `web/libs/ui`
 - Application components that are shared across applications such as certain page-level blocks live within `web/libs/app-common`

.cursor/rules/tailwind.mdc

@@ -1,23 +1,23 @@
 ---
 description: Tailwind CSS and UI component best practices for the LabelStudio clientside application
-globs: **/*.css,tailwind.config.ts,tailwind.config.js,**/*.scss,**/*.tsx,**/*.jsx
+globs: **/*.css,tailwind.config.ts,tailwind.config.js,**/*.tsx,**/*.jsx
 ---
 
 # Tailwind CSS Best Practices
 
 ## Component Styling
 - Use utility classes over custom CSS
 - Group related utilities with @apply when needed
-- Use custom component styles as a SCSS module only when necessary to improve the readability and maintainability of the components
+- Use custom component styles as a CSS module only when necessary to improve the readability and maintainability of the components
 - Use proper responsive design utilities
 - Use proper state variants
 - Keep component styles consistent
 
 ## Tokens
-- All tokens from Figma are programatically generated and defined in the `web/libs/ui/src/tokens/tokens.scss` file
+- All tokens from Figma are programatically generated and defined in the `web/libs/ui/src/tokens/tokens.prefix.css` file
 - Tokens can be regenerated by exporting from Figma using the plugin `Figma Variable Exporter` and replacing the contents of `web/design-tokens.json` with the newly exported json file then using the `cd web/ && yarn design-tokens` command
 - When regenerating tokens, ensure that the project root level `make fmt-all` command is run to ensure all the files are linted and formatted properly
-- Do not use any of the tokens not defined through the Figma Variable Exporter plugin and established in the `web/libs/ui/src/tokens/tokens.scss` file
+- Do not use any of the tokens not defined through the Figma Variable Exporter plugin and established in the `web/libs/ui/src/tokens/tokens.prefix.css` file
 - Do not use any of the default tailwind css classes, only use the ones defined through the `web/libs/ui/src/tokens/tokens.js` file
 
 ## Layout

.github/workflows/cicd_pipeline.yml

@@ -140,15 +140,6 @@ jobs:
     with:
       head_sha: ${{ github.event.pull_request.head.sha || github.event.after }}
 
-  stylelint:
-    name: "Linter"
-    needs:
-      - changed_files
-    if: needs.changed_files.outputs.frontend == 'true'
-    uses: ./.github/workflows/stylelint.yml
-    with:
-      head_sha: ${{ github.event.pull_request.head.sha || github.event.after }}
-
   build-frontend-docs:
     name: "Build"
     needs:
@@ -509,7 +500,6 @@ jobs:
       - bandit
       - ruff
       - biome
-      - stylelint
       - pytest
       - migrations
       - build-docker
@@ -521,7 +511,7 @@ jobs:
       - name: Decide whether the needed jobs succeeded or failed
         uses: re-actors/alls-green@release/v1
         with:
-          allowed-skips: gitleaks, bandit, ruff, biome, stylelint, pytest, migrations, conda-test, build-docker, tests-yarn-unit, tests-yarn-lsf, cursor-review
+          allowed-skips: gitleaks, bandit, ruff, biome, pytest, migrations, conda-test, build-docker, tests-yarn-unit, tests-yarn-lsf, cursor-review
           allowed-failures: |
             [
               "gitleaks",

.github/workflows/cicd_pipeline_develop.yml

@@ -35,12 +35,6 @@ jobs:
     with:
       head_sha: ${{ github.event.pull_request.head.sha || github.event.after }}
 
-  stylelint:
-    name: "Linter"
-    uses: ./.github/workflows/stylelint.yml
-    with:
-      head_sha: ${{ github.event.pull_request.head.sha || github.event.after }}
-
   build-docker:
     name: "Build"
     permissions:
@@ -122,7 +116,6 @@ jobs:
       - bandit
       - ruff
       - biome
-      - stylelint
       - pytest
       - migrations
       - build-docker
@@ -133,5 +126,5 @@ jobs:
       - name: Decide whether the needed jobs succeeded or failed
         uses: re-actors/alls-green@release/v1
         with:
-          allowed-skips: gitleaks, bandit, ruff, biome, stylelint, pytest, migrations, conda-test, build-docker, tests-yarn-unit, tests-yarn-lsf
+          allowed-skips: gitleaks, bandit, ruff, biome, pytest, migrations, conda-test, build-docker, tests-yarn-unit, tests-yarn-lsf
           jobs: ${{ toJSON(needs) }}

.pre-commit-config.yaml

@@ -17,9 +17,3 @@ repos:
         language: system
         pass_filenames: false
         files: ^web/.*
-      - id: stylelint
-        name: stylelint
-        entry: bash -c 'cd web && npx stylelint **/*.scss --fix'
-        language: node
-        types: [ scss ]
-        files: ^.*\.scss$

.pre-commit-dev.yaml

@@ -16,9 +16,3 @@ repos:
         language: system
         pass_filenames: false
         files: ^web/.*
-      - id: stylelint
-        name: stylelint
-        entry: bash -c 'cd web && npx stylelint **/*.scss --fix'
-        language: node
-        types: [ scss ]
-        files: ^.*\.scss$

DESIGN.md

@@ -97,7 +97,7 @@ For domain terminology (Project, Task, Annotation, etc.), see `terminology.mdc`
 
 ## Design Tokens
 
-**Location**: `web/libs/ui/src/tokens/tokens.scss`
+**Location**: `web/libs/ui/src/tokens/tokens.prefix.css`
 
 **Always use semantic tokens** instead of numeric values:
 
@@ -118,27 +118,27 @@ For domain terminology (Project, Task, Annotation, etc.), see `terminology.mdc`
 - **Accent**: Decorative colors (grape, blueberry, kale, kiwi, mango, canteloupe, persimmon, plum, fig, sand)
 
 **Color Token Structure**:
-```scss
-// Surface colors (for backgrounds of interactive elements)
+```css
+/* Surface colors (for backgrounds of interactive elements) */
 --color-primary-surface
 --color-primary-surface-hover
 --color-primary-surface-active
 
-// Content colors (for text)
+/* Content colors (for text) */
 --color-neutral-content
 --color-neutral-content-subtle
 --color-neutral-content-subtler
---color-neutral-content-subtlest  // Use for disabled text
+--color-neutral-content-subtlest  /* Use for disabled text */
 
-// Background colors (for page/container backgrounds)
+/* Background colors (for page/container backgrounds) */
 --color-neutral-background
 --color-primary-background
 
-// Border colors
+/* Border colors */
 --color-neutral-border
 --color-primary-border-subtle
 
-// Icon colors
+/* Icon colors */
 --color-primary-icon
 --color-negative-icon
 ```
@@ -225,12 +225,12 @@ See `tailwind.mdc` for complete guidelines.
 
 **Responsive**: `sm:`, `md:`, `lg:` utilities
 
-### SCSS Modules
+### CSS Modules
 
-Co-locate `.module.scss` with components.
+Co-locate `.module.css` with components.
 
 **Component Tokens Pattern**:
-```scss
+```css
 .base {
   --background-color: var(--color-primary-surface);
   --text-color: var(--color-primary-surface-content);
@@ -244,7 +244,7 @@ Co-locate `.module.scss` with components.
 }
 ```
 
-**Tailwind in SCSS**: `@apply flex items-center gap-tight;`
+**Tailwind in CSS**: `@apply flex items-center gap-tight;`
 
 **Canvas Elements**:
 
@@ -265,7 +265,7 @@ See `react.mdc` for complete React patterns.
 
 - `@humansignal/ui` components: kebab-case (`button.tsx`, `empty-state.tsx`)
 - Application components: PascalCase acceptable (`DataManager.tsx`)
-- Co-locate: `.tsx`, `.module.scss`, `.stories.tsx`, `.test.tsx`
+- Co-locate: `.tsx`, `.module.css`, `.stories.tsx`, `.test.tsx`
 - Every component must have Storybook stories
 
 ---
@@ -338,7 +338,7 @@ Before creating new components, check `@humansignal/ui` and Storybook.
 Never hard-code values. Use semantic tokens: `text-primary-content p-tight text-body-medium`
 
 Create component tokens:
-```scss
+```css
 .component {
   --component-bg: var(--color-neutral-surface);
   background: var(--component-bg);
@@ -393,7 +393,7 @@ Exceptions: draft content, preferences, immediate toggles.
 ### Key Files
 
 - Components: `web/libs/ui/src/lib/`
-- Tokens: `web/libs/ui/src/tokens/tokens.scss`
+- Tokens: `web/libs/ui/src/tokens/tokens.prefix.css`
 - Icons: `@humansignal/icons`
 - Storybook: `yarn nx storybook storybook`
 

web/.gitignore

@@ -26,7 +26,6 @@ dist
 !.vscode/extensions.json
 
 # misc
-/.sass-cache
 /connect.lock
 /coverage
 /libpeerconnection.log
@@ -121,4 +120,3 @@ libs/datamanager/.cache
 dist
 .cursor/rules/nx-rules.mdc
 .github/instructions/nx.instructions.md
-.scss-snapshots/