Styling

Vanilla Extract

The @vanilla-extract/css package is not included by default. Install it.

$ pnpm install @vanilla-extract/css

You can then create .css.ts files in your project.

// BigBox.css.ts
import { style } from '@vanilla-extract/css';

export const bigBox = style({
  width: 500,
  height: 500,
});

// BigBox.tsx
import * as styles from './BigBox.css';

export function BigBox() {
  return <div className={styles.bigBox}>I am a big box</div>;
}

See Vanilla Extract for full documentation.

Locally Scoped CSS

As of sku v13, sku removed LESS support in favour of Vanilla Extract.

treat

As of sku v12, sku removed treat support in favour of Vanilla Extract.

External CSS

You can load CSS from third-party dependencies with a side-effect import.

For example:

import { SomeComponent } from 'some-package';

import 'some-package/dist/styles.css';

export const MyComponent = () => {
  return <SomeComponent>{/* ... */}</SomeComponent>;
};

NOTE

Use this only when you import CSS from a third-party package in node_modules. If you write custom CSS, see the Vanilla Extract section.