scss-module

name	scss-module
description	Use when creating or refactoring React component styles in react-revjs with CSS Modules, especially when converting local .scss files to .module.scss with classes imports and clsx class composition.

SCSS Module

Use this skill when a revjs React component or page should use local scoped styles instead of a plain .scss import.

When to use

• Converting component-level or page-level .scss files to .module.scss
• Adding new scoped styles for a TSX component
• Refactoring class-heavy JSX into classes + clsx usage
• Styling local UI pieces without leaking selectors globally

Core rules

1. Name the stylesheet with .module.scss and keep it next to the component or page.
2. Import the module as classes.
3. Import clsx and wrap every local class reference with clsx(...), even when there is only one class.
4. Prefer kebab-case selectors in SCSS. Access them from TSX with the generated camelCase names.
5. Keep global .scss imports only for true app-wide styles such as src/styles/index.scss.

Import pattern

import clsx from 'clsx'
import classes from './example.module.scss'

export function Example() {
  return <div className={clsx(classes.root)}>...</div>
}

Class composition

<button
  className={clsx(classes.action, isPrimary && classes.actionPrimary)}
>
  Save
</button>

For icon utility classes or other global utility classes, merge them through clsx instead of string concatenation:

<span className={clsx('i-mdi-check', classes.icon)} aria-hidden="true" />

Styling guidance for revjs

• Start from tokens in src/styles/_tokens.scss
• Reuse the shared mixins injected from @/styles/mixins when useful
• Prefer CSS variables over hard-coded values
• Keep surfaces compact, dense, and tool-like unless the task explicitly asks for a more decorative layout
• Keep selectors shallow and local

Allowed exceptions

Use :global(...) only when styling DOM owned by a third-party library such as CodeMirror.

Example:

.root {
  :global(.cm-editor) {
    min-height: 16rem;
  }
}

Avoid

• Importing local .module.scss files for side effects only
• Mixing styles, s, or other import names when classes is the project convention
• Building class strings manually when clsx is clearer
• Leaving page/component-scoped styles in plain .scss files if they are not intended to be global