scss-modules

SCSS Modules (Tackl)

Tackl styles with SCSS CSS Modules — static CSS, no runtime. There is no styled-components, no Div, no theme getters and no @tackl/type. Never recreate them.

File structure

src/components/Example/
  index.tsx            # logic + markup
  styles.module.scss   # ALL styles
  interface.ts         # prop types

// index.tsx
import { cx } from '@utils/cx';
import type * as I from './interface';
import s from './styles.module.scss';

const Example = ({ isOpen, className }: I.ExampleProps) => (
	<section className={cx(s.jacket, className)} data-state={isOpen ? 'open' : 'closed'} data-pad>
		<h2 className={cx(s.title, 't-headlineL')}>Title</h2>
	</section>
);

// styles.module.scss — no imports: the Tackl layer is injected
.jacket {
	display: grid;
	gap: var(--gap-m);
	background: alpha(--brand-c3, 40);
	transition: background var(--time-m) var(--easing-bezzy);

	@include bp(l) {
		gap: var(--gap-xl);
	}

	&[data-state='open'] {
		background: var(--brand-c1);
	}
}

.title {
	color: var(--global-white);
}

Rules

1. Outermost class is .jacket; others are descriptive camelCase (s.removeButton).
2. Write the HTML tag in JSX. State → data-* attributes; dynamic values → CSS custom properties via style={{ '--progress': value }} (typed — CSSProperties accepts --*).
3. Tokens are CSS variables — always var(--…), never hard-coded values: --brand-c1…c5, --global-white|black, --feedback-*, --space-s|m|l|xl|col, --gap-xxs…uber, --br-xs|s|m|l|round, --easing-bezzy*, --time-s|m|l, --font-heading|body|mono|script|serif, --weight-light…black.
4. Mobile-first: base styles, then @include bp(m) { … }, bp(l), … (min-width). @include bpd(m) { … } only for the rare max-width case.
5. Module rules must sit under a local class. Bare top-level tag selectors go in src/css/global.scss.
6. 'use client' only for hooks/events/browser APIs — never for styling.
7. Lint with bun run lint (Biome + Stylelint). Stylelint rejects unknown var(--…) names.