{"id":45813271,"url":"https://github.com/nstepien/ecij","last_synced_at":"2026-02-28T21:03:41.560Z","repository":{"id":324073330,"uuid":"1095778219","full_name":"nstepien/ecij","owner":"nstepien","description":"Rolldown and Vite plugin to Extract CSS-in-JS","archived":false,"fork":false,"pushed_at":"2025-12-10T15:05:03.000Z","size":63,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-14T13:58:59.535Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nstepien.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-13T14:05:01.000Z","updated_at":"2025-12-15T18:59:41.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/nstepien/ecij","commit_stats":null,"previous_names":["nstepien/ecis","nstepien/ecij"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/nstepien/ecij","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nstepien%2Fecij","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nstepien%2Fecij/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nstepien%2Fecij/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nstepien%2Fecij/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nstepien","download_url":"https://codeload.github.com/nstepien/ecij/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nstepien%2Fecij/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29867144,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-26T16:38:37.846Z","status":"ssl_error","status_checked_at":"2026-02-26T16:37:58.932Z","response_time":89,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-02-26T17:51:11.853Z","updated_at":"2026-02-26T17:51:12.560Z","avatar_url":"https://github.com/nstepien.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ecij\n\n[![npm version](https://img.shields.io/npm/v/ecij)](https://www.npmjs.com/package/ecij)\n[![CI](https://github.com/nstepien/ecij/actions/workflows/ci.yml/badge.svg)](https://github.com/nstepien/ecij/actions/workflows/ci.yml)\n\necij (**E**xtract **C**SS-**i**n-**J**S) is a zero-runtime css-in-js plugin for [Rolldown](https://rolldown.rs/) and [Vite](https://vite.dev/).\n\nIt achieves this via static analysis by using [oxc-parser](https://www.npmjs.com/package/oxc-parser), as such it is limited to static expressions. The plugin will ignore dynamic or complex expressions.\n\nThe plugin does not process the CSS in any way whatsoever, it is merely output in virtual CSS files for Rolldown and Vite to handle. Separate plugins may be used to process these virtual CSS files.\n\n## Installation\n\n```bash\nnpm install -D ecij\n```\n\n## Usage\n\nSource input:\n\n```ts\n/* main.ts */\nimport { css } from 'ecij';\nimport { redClassname } from './styles';\n\nconst myButtonClassname = css`\n  border: 1px solid blue;\n\n  \u0026.${redClassname} {\n    border-color: red;\n  }\n`;\n```\n\n```ts\n/* styles.ts */\nimport { css } from 'ecij';\n\nconst color = 'red';\n\nexport const redClassname = css`\n  color: ${color};\n`;\n```\n\nBuild output:\n\n```js\n/* js */\nconst color = 'red';\n\nconst redClassname = 'css-a1b2c3d4';\n\nconst myButtonClassname = 'css-1d2c3b4a';\n```\n\n```css\n/* css */\n.css-a1b2c3d4 {\n  color: red;\n}\n\n.css-1d2c3b4a {\n  border: 1px solid blue;\n\n  \u0026.css-a1b2c3d4 {\n    border-color: red;\n  }\n}\n```\n\n## Set up\n\nIn `rolldown.config.ts`:\n\n```ts\nimport { defineConfig } from 'rolldown';\nimport { ecij } from 'ecij/plugin';\n\nexport default defineConfig({\n  // ...\n  plugins: [ecij()],\n});\n```\n\nIn `vite.config.ts`:\n\n```ts\nimport { defineConfig } from 'vite';\nimport { ecij } from 'ecij/plugin';\n\nexport default defineConfig({\n  // ...\n  plugins: [ecij()],\n});\n```\n\n## Configuration\n\nThe `ecij()` plugin accepts an optional configuration object:\n\n```ts\nexport interface Configuration {\n  /**\n   * Include patterns for files to process.\n   * Can be a string, RegExp, or array of strings/RegExp.\n   * @default /\\.[cm]?[jt]sx?$/\n   */\n  include?: string | RegExp | ReadonlyArray\u003cstring | RegExp\u003e;\n\n  /**\n   * Exclude patterns for files to skip.\n   * Can be a string, RegExp, or array of strings/RegExp.\n   * @default [/\\/node_modules\\//, /\\.d\\.ts$/]\n   */\n  exclude?: string | RegExp | ReadonlyArray\u003cstring | RegExp\u003e;\n\n  /**\n   * Prefix for generated CSS class names.\n   * Should not be empty, as generated hashes may start with a digit, resulting in invalid CSS class names.\n   * @default 'css-'\n   */\n  classPrefix?: string;\n}\n```\n\n**Example:**\n\n```ts\necij({\n  classPrefix: 'lib-',\n});\n```\n\n## Development\n\n### Building\n\n```bash\nnpm run build\n```\n\n### Formatting\n\n```bash\nnpm run format\n```\n\n### Type Checking\n\n```bash\nnpm run typecheck\n```\n\n### Running Tests\n\nThe project uses **integration tests** with **inline snapshot testing** to validate transformations.\n\n```bash\n# Run tests once\nnpm test\n\n# Run tests with coverage\nnpm run test:coverage\n\n# Update inline snapshots after intentional changes\nnpm test -- -u\n```\n\n## TODO\n\n- Log CSS extraction failures\n- Scope handling\n- Full import/export handling (default/namespace import/export)\n- Sourcemaps\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnstepien%2Fecij","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnstepien%2Fecij","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnstepien%2Fecij/lists"}