ecsstatic

A fully static CSS-in-JS solution that does just enough.

npm i -D @acab/ecsstatic

Minimal API surface

You write some styles, you get back a scoped class name. That's all.

It's like CSS modules, except you get to colocate your styles next to your markup and get the IDE experience of JavaScript variable references. 

import { css } from '@acab/ecsstatic'

export const Button = () => {
	return <button class={button}>hello</button>
}
const button = css`
	background-color: tomato;
	border-radius: 4px;
	padding: 0.5rem 1rem;
	transition: background-color 0.2s;

	&:hover {
		background-color: crimson;
	}
`

Produces a static stylesheet

Compiles away like it never existed, leaving behind just the class name.

The styles end up in a CSS file, with no JavaScript added to your client bundle.

export const Button = () => {
	return <button class={button}>hello</button>
}
const button = '🎈-1yibmfx'
.🎈-1yibmfx {
	background-color: tomato;
	border-radius: 4px;
	padding: 0.5rem 1rem;
	transition: background-color 0.2s;
}
.🎈-1yibmfx:hover {
	background-color: crimson;
}

Write real CSS

CSS is awesome. That's why 100% of CSS features, present and future, will work here.

And you're able to copy-paste huge chunks of styles to/from CSS files and between projects. 

const button = css`
	@layer base {
		background-color: var(--accent-bg);
		border-radius: var(--radius-2);
		padding: var(--space-xxs) var(--space-xs);

		@container style(--variant: ghost) {
			background-color: transparent;
		}
	}

	@layer overrides {
		@media (forced-colors: active) {
			border: 1px solid;
		}
	}
`

Or write SCSS-in-JS

Sass is the preprocessor that continues to work well more than a decade later. That's why there is built-in support for Sass.

You get to use mixins, functions, conditionals, and even import Sass libraries from npm. And of course, the real selling point: double-slash comments! 

import { css } from '@acab/ecsstatic/scss'

const button = css`
	@use 'open-props-scss' as *;

	background: $purple-9;
	border-radius: $radius-1;
	padding: $size-1 $size-2;

	&:hover {
		background: $purple-6;
	}

	// adds outline in windows high-contrast mode
	@include forced-colors-outline;
`

Designed for Vite

Framework-agnostic and works seamlessly with all the new metaframeworks powered by Vite.

Relying on Vite's CSS pipeline also makes it straightforward to do further transformations using PostCSS plugins or LightningCSS.

So, what are you waiting for?

Get started