esmcss

library0.2.15jsnpmunverified

esmcss (v0.2.15) enables importing CSS via JavaScript/TypeScript modules (.css.ts/.css.js) and provides focused CSS helper classes, built on esbuild >=0.23.1. It allows you to co-locate styles with components, leveraging esbuild's bundling for zero-runtime CSS. Frequent releases, with a focus on ESM-only workflows and esbuild integration. Differentiates from CSS-in-JS by generating static CSS files during build, avoiding runtime overhead.

web-framework

npm install esmcss

github ↗package ↗

INSTALL

IMPORT

SIG · ESMCSS

esmcss

web-frameworkjavascriptv0.2.15

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

css

✓ import { css } from 'esmcss'

✗ import css from 'esmcss'

css is a named export, not default. Only ESM imports supported.

xxs

✓ import { xxs, xs, sm, md, lg, xl, xxl } from 'esmcss'

CSS helper classes exported as named constants. TypeScript types available.

.css.ts file convention

✓ // styles.css.ts export const button = css`color: var(--blue);`

✗ Using .css.ts without exporting css tagged template literal

Files must export css template literals; imported in JS via import { button } from './styles.css.ts'

Shows defining a css tagged template literal with size helpers and using esbuild plugin.

import { css, md, xl } from 'esmcss' import { build } from 'esbuild' import { esmcssPlugin } from 'esmcss/esbuild' // Define styles in a .css.ts file (e.g., styles.css.ts) export const container = css` display: flex; padding: ${md}; @media (min-width: 768px) { padding: ${xl}; } ` // In your build script await build({ entryPoints: ['src/index.js'], bundle: true, plugins: [esmcssPlugin()], outdir: 'dist', }) // Then import the styles in your JS: import { container } from './styles.css.ts' console.log(container) // outputs the generated class name

Debug

Known issues

breakingesmcss v0.2.x drops support for esbuild <0.23.1. Upgrade esbuild to >=0.23.1.

fix

Update esbuild to 0.23.1 or later.

affects: >=0.2.0

deprecatedThe function `createTheme` from v0.1.x is removed; use `css` with CSS variables instead.

fix

Replace createTheme with css tagged template literals and CSS custom properties.

affects: >=0.2.0

gotchaesmcss only supports ESM imports; CommonJS require() will not work. Use dynamic import() in CJS environments.

fix

Use `import('esmcss')` in CommonJS or switch to ESM.

affects: >=0.2.0

gotchaThe esbuild plugin must be registered before other plugins that transform CSS.

fix

Place esmcssPlugin() early in the plugins array.

affects: >=0.2.0

gotchaCSS helper classes (xs, sm, etc.) are numeric pixel values (e.g., 480, 768) and must be interpolated in `css` tagged literals, not used directly in JSX styles.

fix

Use `${md}` inside css`...` template literal.

affects: >=0.2.0

Errors

Common errors & fixes

Error: esbuild version 0.21.0 does not satisfy peer dependency >=0.23.1

esbuild version too old.

fix

Run `npm install esbuild@latest` to update to >=0.23.1.

TypeError: Cannot read properties of undefined (reading 'css')

Named import instead of default export; likely using wrong import syntax.

fix

Use `import { css } from 'esmcss'` instead of `import css from 'esmcss'`.

Module not found: Error: Can't resolve 'esmcss/esbuild'

Missing or misconfigured path to the plugin.

fix

Install esmcss and import from 'esmcss/esbuild' correctly: `import { esmcssPlugin } from 'esmcss/esbuild'`.

Upgrade

Version history

0.2.15latest on npm

Audit

Dependencies

esbuildrequiredesbuild >=0.23.1 is a peer dependency required for bundling CSS modules.

Agent activity

8 hits · last 30 days

node

Resources

githubhttps://github.com/esmfile/esmcss ↗

packagehttps://www.npmjs.com/package/esmcss ↗