{"id":14990540,"url":"https://github.com/anidetrix/rollup-plugin-styles","last_synced_at":"2025-04-09T08:04:31.016Z","repository":{"id":42125349,"uuid":"246885943","full_name":"Anidetrix/rollup-plugin-styles","owner":"Anidetrix","description":"🎨 Universal Rollup plugin for styles: PostCSS, Sass, Less, Stylus and more.","archived":false,"fork":false,"pushed_at":"2023-11-27T03:18:51.000Z","size":3622,"stargazers_count":251,"open_issues_count":68,"forks_count":44,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-18T16:54:31.860Z","etag":null,"topics":["css","css-modules","less","postcss","rollup","rollup-plugin","rollup-plugin-styles","sass","scss","styles","stylus"],"latest_commit_sha":null,"homepage":"https://anidetrix.github.io/rollup-plugin-styles","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/Anidetrix.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","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},"funding":{"github":null,"patreon":null,"open_collective":"rollup-plugin-styles","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2020-03-12T16:51:13.000Z","updated_at":"2025-03-15T04:49:29.000Z","dependencies_parsed_at":"2024-01-13T11:57:52.234Z","dependency_job_id":"72d74bab-6584-46ad-9fd6-1557a3c54252","html_url":"https://github.com/Anidetrix/rollup-plugin-styles","commit_stats":{"total_commits":464,"total_committers":14,"mean_commits":"33.142857142857146","dds":"0.19612068965517238","last_synced_commit":"ca9879deca6de34da52a1f90cd25fc52d77f1985"},"previous_names":[],"tags_count":99,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Anidetrix%2Frollup-plugin-styles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Anidetrix%2Frollup-plugin-styles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Anidetrix%2Frollup-plugin-styles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Anidetrix%2Frollup-plugin-styles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Anidetrix","download_url":"https://codeload.github.com/Anidetrix/rollup-plugin-styles/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247830003,"owners_count":21003125,"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":["css","css-modules","less","postcss","rollup","rollup-plugin","rollup-plugin-styles","sass","scss","styles","stylus"],"created_at":"2024-09-24T14:20:19.369Z","updated_at":"2025-04-09T08:04:30.996Z","avatar_url":"https://github.com/Anidetrix.png","language":"TypeScript","readme":"# rollup-plugin-styles\n\n[![npm version](https://img.shields.io/npm/v/rollup-plugin-styles)](https://www.npmjs.com/package/rollup-plugin-styles)\n[![monthly downloads count](https://img.shields.io/npm/dm/rollup-plugin-styles)](https://www.npmjs.com/package/rollup-plugin-styles)\n[![required rollup version](https://img.shields.io/npm/dependency-version/rollup-plugin-styles/peer/rollup)](https://www.npmjs.com/package/rollup)\n[![build status](https://github.com/Anidetrix/rollup-plugin-styles/workflows/CI/badge.svg)](https://github.com/Anidetrix/rollup-plugin-styles/actions?query=workflow%3ACI)\n[![code coverage](https://codecov.io/gh/Anidetrix/rollup-plugin-styles/branch/main/graph/badge.svg)](https://codecov.io/gh/Anidetrix/rollup-plugin-styles)\n[![license](https://img.shields.io/github/license/Anidetrix/rollup-plugin-styles)](./LICENSE)\n[![financial contributors](https://opencollective.com/rollup-plugin-styles/tiers/badge.svg)](https://opencollective.com/rollup-plugin-styles)\n\n### 🎨 Universal [Rollup](https://github.com/rollup/rollup) plugin for styles:\n\n- [PostCSS](https://github.com/postcss/postcss)\n- [Sass](https://github.com/sass/dart-sass)\n- [Less](https://github.com/less/less.js)\n- [Stylus](https://github.com/stylus/stylus)\n- [CSS Modules](https://github.com/css-modules/css-modules)\n- URL resolving/rewriting with asset handling\n- Ability to use `@import` statements inside regular CSS\n\n...and more!\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Importing a file](#importing-a-file)\n    - [CSS/Stylus](#cssstylus)\n    - [Sass/Less](#sassless)\n  - [CSS Injection](#css-injection)\n  - [CSS Extraction](#css-extraction)\n  - [Emitting processed CSS](#emitting-processed-css)\n  - [CSS Modules](#css-modules)\n  - [With Sass/Less/Stylus](#with-sasslessstylus)\n- [Configuration](#configuration)\n- [Why](#why)\n- [License](#license)\n- [Thanks](#thanks)\n\n## Installation\n\n```bash\n# npm\nnpm install -D rollup-plugin-styles\n# pnpm\npnpm add -D rollup-plugin-styles\n# yarn\nyarn add rollup-plugin-styles --dev\n```\n\n## Usage\n\n```js\n// rollup.config.js\nimport styles from \"rollup-plugin-styles\";\n\nexport default {\n  output: {\n    // Governs names of CSS files (for assets from CSS use `hash` option for url handler).\n    // Note: using value below will put `.css` files near js,\n    // but make sure to adjust `hash`, `assetDir` and `publicPath`\n    // options for url handler accordingly.\n    assetFileNames: \"[name]-[hash][extname]\",\n  },\n  plugins: [styles()],\n};\n```\n\nAfter that you can import CSS files in your code:\n\n```js\nimport \"./style.css\";\n```\n\nDefault mode is `inject`, which means CSS is embedded inside JS and injected into `\u003chead\u003e` at runtime, with ability to pass options to CSS injector or even pass your own injector.\n\nCSS is available as default export in `inject` and `extract` modes, but if [CSS Modules](https://github.com/css-modules/css-modules) are enabled you need to use named `css` export.\n\n```js\n// Injects CSS, also available as `style` in this example\nimport style from \"./style.css\";\n// Using named export of CSS string\nimport { css } from \"./style.css\";\n```\n\nIn `emit` mode none of the exports are available as CSS is purely processed and passed along the build pipeline, which is useful if you want to preprocess CSS before using it with CSS consuming plugins, e.g. [rollup-plugin-lit-css](https://github.com/bennypowers/rollup-plugin-lit-css).\n\nPostCSS configuration files will be found and loaded automatically, but this behavior is configurable using `config` option.\n\n### Importing a file\n\n#### CSS/Stylus\n\n```css\n/* Import from `node_modules` */\n@import \"bulma/css/bulma\";\n/* Local import */\n@import \"./custom\";\n/* ...or (if no package named `custom` in `node_modules`) */\n@import \"custom\";\n```\n\n#### Sass/Less\n\nYou can prepend the path with `~` to resolve in `node_modules`:\n\n```scss\n// Import from `node_modules`\n@import \"~bulma/css/bulma\";\n// Local import\n@import \"./custom\";\n// ...or\n@import \"custom\";\n```\n\nAlso note that partials are considered first, e.g.\n\n```scss\n@import \"custom\";\n```\n\nWill look for `_custom` first (_with the appropriate extension(s)_), and then for `custom` if `_custom` doesn't exist.\n\n### CSS Injection\n\n```js\nstyles({\n  mode: \"inject\", // Unnecessary, set by default\n  // ...or with custom options for injector\n  mode: [\n    \"inject\",\n    { container: \"body\", singleTag: true, prepend: true, attributes: { id: \"global\" } },\n  ],\n  // ...or with custom injector\n  mode: [\"inject\", (varname, id) =\u003e `console.log(${varname},${JSON.stringify(id)})`],\n});\n```\n\n### CSS Extraction\n\n```js\nstyles({\n  mode: \"extract\",\n  // ... or with relative to output dir/output file's basedir (but not outside of it)\n  mode: [\"extract\", \"awesome-bundle.css\"],\n});\n```\n\n### Emitting processed CSS\n\n```js\n// rollup.config.js\nimport styles from \"rollup-plugin-styles\";\n\n// Any plugin which consumes pure CSS\nimport litcss from \"rollup-plugin-lit-css\";\n\nexport default {\n  plugins: [\n    styles({ mode: \"emit\" }),\n\n    // Make sure to list it after this one\n    litcss(),\n  ],\n};\n```\n\n### [CSS Modules](https://github.com/css-modules/css-modules)\n\n```js\nstyles({\n  modules: true,\n  // ...or with custom options\n  modules: {},\n  // ...additionally using autoModules\n  autoModules: true,\n  // ...with custom regex\n  autoModules: /\\.mod\\.\\S+$/,\n  // ...or custom function\n  autoModules: id =\u003e id.includes(\".modular.\"),\n});\n```\n\n### With Sass/Less/Stylus\n\nInstall corresponding dependency:\n\n- For `Sass` support install `sass` or `node-sass`:\n\n  ```bash\n  # npm\n  npm install -D sass\n  # pnpm\n  pnpm add -D sass\n  # yarn\n  yarn add sass --dev\n  ```\n\n  ```bash\n  # npm\n  npm install -D node-sass\n  # pnpm\n  pnpm add -D node-sass\n  # yarn\n  yarn add node-sass --dev\n  ```\n\n- For `Less` support install `less`:\n\n  ```bash\n  # npm\n  npm install -D less\n  # pnpm\n  pnpm add -D less\n  # yarn\n  yarn add less --dev\n  ```\n\n- For `Stylus` support install `stylus`:\n\n  ```bash\n  # npm\n  npm install -D stylus\n  # pnpm\n  pnpm add -D stylus\n  # yarn\n  yarn add stylus --dev\n  ```\n\nThat's it, now you can import `.scss` `.sass` `.less` `.styl` `.stylus` files in your code.\n\n## Configuration\n\nSee [API Reference for `Options`](https://anidetrix.github.io/rollup-plugin-styles/interfaces/types.Options.html) for full list of available options.\n\n## Why\n\nBecause alternatives did not look good enough - they are either too basic, too buggy or poorly maintained.\n\nFor example, the main alternative (and inspiration) is [rollup-plugin-postcss](https://github.com/egoist/rollup-plugin-postcss), but at the time it is not actively maintained, has a bunch of critical bugs and subjectively lacks some useful features and quality of life improvements which should be a part of it.\n\nWith that said, here is the basic list of things which differentiate this plugin from the aforementioned one:\n\n- Written completely in TypeScript\n- Up-to-date [CSS Modules](https://github.com/css-modules/css-modules) implementation\n- Built-in `@import` handler\n- Built-in assets handler\n- Ability to emit pure CSS for other plugins\n- Complete code splitting support, with respect for multiple entries, `preserveModules` and `manualChunks`\n- Multiple instances support, with check for already processed files\n- Proper sourcemaps, with included sources content by default\n- Respects `assetFileNames` for CSS file names\n- Respects sourcemaps from loaded files\n- Support for implementation forcing for Sass\n- Support for partials and `~` in Less import statements\n- More smaller things that I forgot\n\n## License\n\nMIT \u0026copy; [Anton Kudryavtsev](https://github.com/Anidetrix)\n\n## Thanks\n\n- [rollup-plugin-postcss](https://github.com/egoist/rollup-plugin-postcss) - for good reference 👍\n- [rollup](https://github.com/rollup/rollup) - for awesome bundler 😎\n","funding_links":["https://opencollective.com/rollup-plugin-styles"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanidetrix%2Frollup-plugin-styles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanidetrix%2Frollup-plugin-styles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanidetrix%2Frollup-plugin-styles/lists"}