{"id":13533180,"url":"https://github.com/Bluskript/vite-plugin-inline-css-modules","last_synced_at":"2025-04-01T21:31:58.002Z","repository":{"id":40481454,"uuid":"488274939","full_name":"bluskript/vite-plugin-inline-css-modules","owner":"bluskript","description":"Write CSS modules without leaving your javascript!","archived":false,"fork":false,"pushed_at":"2024-04-16T00:01:13.000Z","size":665,"stargazers_count":55,"open_issues_count":1,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-05-30T16:42:44.221Z","etag":null,"topics":["postcss","solidjs","vite","vite-plugin"],"latest_commit_sha":null,"homepage":"","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/bluskript.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}},"created_at":"2022-05-03T16:00:40.000Z","updated_at":"2024-06-06T05:32:49.930Z","dependencies_parsed_at":"2024-01-14T02:03:40.862Z","dependency_job_id":"a7e9928e-9027-471d-be1b-eeeeca26a806","html_url":"https://github.com/bluskript/vite-plugin-inline-css-modules","commit_stats":{"total_commits":12,"total_committers":2,"mean_commits":6.0,"dds":0.08333333333333337,"last_synced_commit":"67f4aa453990dbfee6d3b03e315b7f5b15f87395"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluskript%2Fvite-plugin-inline-css-modules","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluskript%2Fvite-plugin-inline-css-modules/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluskript%2Fvite-plugin-inline-css-modules/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluskript%2Fvite-plugin-inline-css-modules/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bluskript","download_url":"https://codeload.github.com/bluskript/vite-plugin-inline-css-modules/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222774597,"owners_count":17035752,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["postcss","solidjs","vite","vite-plugin"],"created_at":"2024-08-01T07:01:17.299Z","updated_at":"2024-11-02T20:31:15.155Z","avatar_url":"https://github.com/bluskript.png","language":"TypeScript","funding_links":[],"categories":["📦 Components \u0026 Libraries"],"sub_categories":["DX"],"readme":"# vite-plugin-inline-css-modules\n\n[![npm](https://img.shields.io/npm/v/vite-plugin-inline-css-modules.svg)](https://www.npmjs.com/package/vite-plugin-inline-css-modules)\n[![Code style: Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\n\u003e Write CSS modules without leaving your javascript!\n\n- Zero Runtime\n- Contains full feature set of CSS modules (Includes PostCSS if you use that!)\n  - Supports `@apply` and others!\n  - Scopes your CSS locally to your component!\n- Supports ANY framework\n\n### Usage\n\n```\nnpm install vite-plugin-inline-css-modules\n```\n\n```ts\nimport inlineCssModules from 'vite-plugin-inline-css-modules'\n\nexport default {\n  plugins: [inlineCssModules()],\n}\n```\n\n```ts\nimport { css } from 'vite-plugin-inline-css-modules'\n\nconst classes = css`\n  .root {\n    background-color: #1f1;\n    @apply rounded-md;\n  }\n`\n\nexport const Root = () =\u003e \u003cdiv class={classes.root}\u003eHello world\u003c/div\u003e\n```\n\n### Why is this useful?\n\nThis was originally written for writing styles in SolidJS. I came from Vue, which already contained a special `\u003cstyle scoped\u003e` tag, and I wanted something just as easy to use as that. If you are using a framework that does not support writing scoped styles natively, this is for you!\n\n### Why not one of the hundreds of existing CSS-in-JS solutions?\n\nEvery single CSS-in-JS solution i've seen suffers from the same problem: it can't integrate with existing tooling.\nThis plugin simply generates a CSS module using the contents of the string. This allows it to integrate with PostCSS\nand things like Tailwind or UnoCSS with ease.\n\nIn addition, a lot of solutions also have an implicit bundling cost. This differs in that it is completely based on CSS modules. \nNo addition javascript is added when using this plugin.\n\n### Caveats\n\n- This plugin does not support string interpolation. It may seem that way from the use of template strings, but all this plugin really does is move the contents of the string template **into a real CSS module**, meaning string interpolation can't work.\n\n- You can't manipulate the classes variables as normal JS variables.\n\n  Why? because at compile time, this plugin transforms:\n\n  ```ts\n  const classes = css``\n  ```\n\n  into:\n\n  ```ts\n  import classes from 'virtual:inline-css-modules/App-0.module.css'\n  ```\n\n### Plugin Options\n\n- `tagName`: The CSS template tag name to match for.\n  - Default: `css`\n  - If you are using other CSS-in-JS frameworks, you can use import aliases during destructuring and set the tagName value to the new name to prevent conflicts.\n- `fileMatch`: The regex pattern used to match files to inline.\n  - Default: `/\\.(tsx|jsx|js|vue|svelte)$/`\n\n### Help\n\n- I'm getting an error like `inlineCss is not defined`\n  - This is probably because you didn't set the tag name correctly in config.\n    This plugin might be deleting your import of `inlineCss` from this plugin, so please check to make sure that the `tagName` option is set correctly.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBluskript%2Fvite-plugin-inline-css-modules","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBluskript%2Fvite-plugin-inline-css-modules","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBluskript%2Fvite-plugin-inline-css-modules/lists"}