🎈 ecsstatic

The predefinite CSS-in-JS library for Vite.

fully static. compiles away like it never existed.
uses regular css syntax, not javascript objects.
minimal api surface: you write some styles, you get back a scoped class.
suppports nesting selectors and at-rules, including @container, and @layer.
supports sass itself!

Try one of the starter templates on stackblitz:

Also check out the landing page: ecsstatic.dev.

Usage

Install:

npm install --save-dev @acab/ecsstatic

Add the vite plugin to your config:

import { ecsstatic } from '@acab/ecsstatic/vite';

export default defineConfig({
  plugins: [ecsstatic()],
});

Start using css in any JS/TS file:

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

export const Button = (props) => {
  return <button {...props} className={button} />;
};

const button = css`
  all: unset;
  font: inherit;
  color: #862e9c;
  border: 1px solid;
  border-radius: 4px;
  padding: 0.5rem 1rem;

  &:hover,
  &:focus {
    color: #be4bdb;
  }
`;

Or use with /scss:

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

export const Button = (props) => {
  return <button {...props} className={button} />;
};

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

  // ...
  color: op.$purple-9;

  &:hover,
  &:focus {
    color: op.$purple-6;
  }
`;

Evaluating expressions (interpolation)

Evaluating expressions interpolated in the template strings works out-of-the-box for many cases but might not work perfectly in big files/projects. If you are seeing unexpected results, try moving your component out to a smaller file.

By default, npm packages are not processed (they are "external"-ized) before evaluating expressions. This requires the package to be compatible with Node ESM. If it doesn't work, you can pass its name to the resolvePackages option to force it to be processed before evaluating expressions.

export default defineConfig({
  plugins: [ecsstatic({ resolvePackages: ['some-non-esm-pkg'] })],
});

Global styles

The createGlobalStyle function can be used to apply unscoped, global styles. Note that this is unnecessary in most cases as you can just create a regular .css/.scss file, but it can be useful for interpolating values that only exist in JS.

import { createGlobalStyle } from '@acab/ecsstatic';

createGlobalStyle`
  :root {
    --foo: ${1 + 1};
  }
`;

Syntax highlighting

For syntax highlighting and intellisense, use the vscode-styled-components extension.

Atomic classes

There is an experimental flag marqueeMode. When enabled, the prod build output will contain atomic classes, where one class maps to one declaration. This can potentially result in a smaller CSS file, at the cost of bloating the markup with lots of classes. This tradeoff can be worth it for large sites where the size of the CSS would be a concern.

export default defineConfig({
  plugins: [ecsstatic({ marqueeMode: true })],
});

Prior art

Huge shoutout to the previous libraries that came before this; ecsstatic would not have been possible without them paving the way.

styled-components / emotion
css modules
linaria

Contributing

Open an issue or see CONTRIBUTING.md.

mayank99/ecsstatic