{"id":25540,"library":"esmcss","title":"esmcss","description":"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.","status":"active","version":"0.2.15","language":"javascript","source_language":"en","source_url":"https://github.com/esmfile/esmcss","tags":["javascript","css","esm","esbuild","typescript"],"install":[{"cmd":"npm install esmcss","lang":"bash","label":"npm"},{"cmd":"yarn add esmcss","lang":"bash","label":"yarn"},{"cmd":"pnpm add esmcss","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"esbuild >=0.23.1 is a peer dependency required for bundling CSS modules.","package":"esbuild","optional":false}],"imports":[{"note":"css is a named export, not default. Only ESM imports supported.","wrong":"import css from 'esmcss'","symbol":"css","correct":"import { css } from 'esmcss'"},{"note":"CSS helper classes exported as named constants. TypeScript types available.","wrong":null,"symbol":"xxs","correct":"import { xxs, xs, sm, md, lg, xl, xxl } from 'esmcss'"},{"note":"Files must export css template literals; imported in JS via import { button } from './styles.css.ts'","wrong":"Using .css.ts without exporting css tagged template literal","symbol":".css.ts file convention","correct":"// styles.css.ts\nexport const button = css`color: var(--blue);`"}],"quickstart":{"code":"import { css, md, xl } from 'esmcss'\nimport { build } from 'esbuild'\nimport { esmcssPlugin } from 'esmcss/esbuild'\n\n// Define styles in a .css.ts file (e.g., styles.css.ts)\nexport const container = css`\n  display: flex;\n  padding: ${md};\n\n  @media (min-width: 768px) {\n    padding: ${xl};\n  }\n`\n\n// In your build script\nawait build({\n  entryPoints: ['src/index.js'],\n  bundle: true,\n  plugins: [esmcssPlugin()],\n  outdir: 'dist',\n})\n\n// Then import the styles in your JS:\nimport { container } from './styles.css.ts'\nconsole.log(container) // outputs the generated class name\n","lang":"typescript","description":"Shows defining a css tagged template literal with size helpers and using esbuild plugin."},"warnings":[{"fix":"Update esbuild to 0.23.1 or later.","message":"esmcss v0.2.x drops support for esbuild <0.23.1. Upgrade esbuild to >=0.23.1.","severity":"breaking","affected_versions":">=0.2.0"},{"fix":"Replace createTheme with css tagged template literals and CSS custom properties.","message":"The function `createTheme` from v0.1.x is removed; use `css` with CSS variables instead.","severity":"deprecated","affected_versions":">=0.2.0"},{"fix":"Use `import('esmcss')` in CommonJS or switch to ESM.","message":"esmcss only supports ESM imports; CommonJS require() will not work. Use dynamic import() in CJS environments.","severity":"gotcha","affected_versions":">=0.2.0"},{"fix":"Place esmcssPlugin() early in the plugins array.","message":"The esbuild plugin must be registered before other plugins that transform CSS.","severity":"gotcha","affected_versions":">=0.2.0"},{"fix":"Use `${md}` inside css`...` template literal.","message":"CSS 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.","severity":"gotcha","affected_versions":">=0.2.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Run `npm install esbuild@latest` to update to >=0.23.1.","cause":"esbuild version too old.","error":"Error: esbuild version 0.21.0 does not satisfy peer dependency >=0.23.1"},{"fix":"Use `import { css } from 'esmcss'` instead of `import css from 'esmcss'`.","cause":"Named import instead of default export; likely using wrong import syntax.","error":"TypeError: Cannot read properties of undefined (reading 'css')"},{"fix":"Install esmcss and import from 'esmcss/esbuild' correctly: `import { esmcssPlugin } from 'esmcss/esbuild'`.","cause":"Missing or misconfigured path to the plugin.","error":"Module not found: Error: Can't resolve 'esmcss/esbuild'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}