{"id":13600616,"url":"https://github.com/egoist/rollup-plugin-postcss","last_synced_at":"2025-04-12T01:55:36.469Z","repository":{"id":37752242,"uuid":"47565123","full_name":"egoist/rollup-plugin-postcss","owner":"egoist","description":"Seamless integration between Rollup and PostCSS.","archived":false,"fork":false,"pushed_at":"2024-02-28T10:34:15.000Z","size":2397,"stargazers_count":684,"open_issues_count":181,"forks_count":217,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-10T05:05:25.534Z","etag":null,"topics":["css-modules","less","postcss","rollup","sass","stylus"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/egoist.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG-OLD.md","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},"funding":{"github":"egoist"}},"created_at":"2015-12-07T16:40:03.000Z","updated_at":"2025-04-03T01:40:27.000Z","dependencies_parsed_at":"2024-02-04T16:19:45.903Z","dependency_job_id":"a8d19958-7144-4f07-92a1-d882c51f3032","html_url":"https://github.com/egoist/rollup-plugin-postcss","commit_stats":{"total_commits":200,"total_committers":45,"mean_commits":4.444444444444445,"dds":"0.43500000000000005","last_synced_commit":"71593d9f4698ce564482b86cc2fa7f69626e8b8a"},"previous_names":[],"tags_count":84,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Frollup-plugin-postcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Frollup-plugin-postcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Frollup-plugin-postcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Frollup-plugin-postcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/egoist","download_url":"https://codeload.github.com/egoist/rollup-plugin-postcss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248345270,"owners_count":21088244,"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-modules","less","postcss","rollup","sass","stylus"],"created_at":"2024-08-01T18:00:44.961Z","updated_at":"2025-04-12T01:55:36.444Z","avatar_url":"https://github.com/egoist.png","language":"JavaScript","readme":"# rollup-plugin-postcss\n\n[![NPM version](https://img.shields.io/npm/v/rollup-plugin-postcss.svg?style=flat)](https://npmjs.com/package/rollup-plugin-postcss) [![NPM downloads](https://img.shields.io/npm/dm/rollup-plugin-postcss.svg?style=flat)](https://npmjs.com/package/rollup-plugin-postcss) [![Build Status](https://img.shields.io/circleci/project/egoist/rollup-plugin-postcss/master.svg?style=flat)](https://circleci.com/gh/egoist/rollup-plugin-postcss) [![codecov](https://codecov.io/gh/egoist/rollup-plugin-postcss/branch/master/graph/badge.svg)](https://codecov.io/gh/egoist/rollup-plugin-postcss)\n [![donate](https://img.shields.io/badge/$-donate-ff69b4.svg?maxAge=2592000\u0026style=flat)](https://github.com/egoist/donate)\n\n\u003cimg align=\"right\" width=\"95\" height=\"95\"\n     title=\"Philosopher’s stone, logo of PostCSS\"\n     src=\"http://postcss.github.io/postcss/logo.svg\"\u003e\n\nSeamless integration between [Rollup](https://github.com/rollup/rollup) and [PostCSS](https://github.com/postcss/postcss).\n\n## Install\n\n```bash\nyarn add postcss rollup-plugin-postcss --dev\n```\n\n## Usage\n\n`v2.0` support rollup v1 or above, but it prints deprecated warning from rollup v2.\n\n**Breaking change**: `v3.0` only support rollup v2, and the extract path based on bundle root\n the location of the generated file outside the bundle directory not allowed in rollup v2.\n\n```js\n// rollup.config.js\nimport postcss from 'rollup-plugin-postcss'\n\nexport default {\n  plugins: [\n    postcss({\n      plugins: []\n    })\n  ]\n}\n```\n\nThen you can use CSS files:\n\n```js\nimport './style.css'\n```\n\nNote that the generated CSS will be injected to `\u003chead\u003e` by default, and the CSS string is also available as default export unless `extract: true`:\n\n```js\n// Inject to `\u003chead\u003e` and also available as `style`\nimport style from './style.css'\n```\n\nIt will also automatically use local PostCSS config files.\n\n### Extract CSS\n\n```js\n// for v2\npostcss({\n  extract: true,\n  // Or with custom file name, it will generate file relative to bundle.js in v3\n  extract: 'dist/my-custom-file-name.css'\n})\n\n// for v3\nimport path from 'path'\npostcss({\n  extract: true,\n  // Or with custom file name\n  extract: path.resolve('dist/my-custom-file-name.css')\n})\n```\n\n### CSS modules\n\n```js\npostcss({\n  modules: true,\n  // Or with custom options for `postcss-modules`\n  modules: {}\n})\n```\n\n### With Sass/Stylus/Less\n\nInstall corresponding dependency:\n\n- For `Sass` install `node-sass`: `yarn add node-sass --dev`\n- For `Stylus` Install `stylus`: `yarn add stylus --dev`\n- For `Less` Install `less`: `yarn add less --dev`\n\nThat's it, you can now import `.styl` `.scss` `.sass` `.less` files in your library.\n\n#### imports\n\n__For Sass/Scss Only.__\n\nSimilar to how webpack's [sass-loader](https://github.com/webpack-contrib/sass-loader#imports) works, you can prepend the path with `~` to tell this plugin to resolve in `node_modules`:\n\n```sass\n@import \"~bootstrap/dist/css/bootstrap\";\n```\n\n## Options\n\n### extensions\n\nType: `string[]`\u003cbr\u003e\nDefault: `['.css', '.sss', '.pcss']`\n\nThis plugin will process files ending with these extensions and the extensions supported by [custom loaders](#loaders).\n\n### plugins\n\nType: `Array`\n\nPostCSS Plugins.\n\n### inject\n\nType: `boolean` `object` `function(cssVariableName, fileId): string`\n\nDefault: `true`\n\nInject CSS into `\u003chead\u003e`, it's always `false` when `extract: true`.\n\nYou can also use it as options for [`style-inject`](https://github.com/egoist/style-inject#options).\n\nIt can also be a `function` , returning a `string` which is js code.\n\n### extract\n\nType: `boolean` `string`\u003cbr\u003e\nDefault: `false`\n\nExtract CSS to the same location where JS file is generated but with `.css` extension.\n\nYou can also set it to an absolute path.\n\n### modules\n\nType: `boolean` `object`\u003cbr\u003e\nDefault: `false`\n\nEnable CSS modules or set options for `postcss-modules`.\n\n### autoModules\n\nType: `boolean`\u003cbr\u003e\nDefault: `true`\n\nAutomatically enable CSS modules for `.module.css` `.module.sss` `.module.scss` `.module.sass` `.module.styl` `.module.stylus` `.module.less` files.\n\n### namedExports\n\nType: `boolean` `function`\u003cbr\u003e\nDefault: `false`\n\nUse named exports alongside default export.\n\nYou can supply a function to control how exported named is generated:\n\n```js\nnamedExports(name) {\n  // Maybe you simply want to convert dash to underscore\n  return name.replace(/-/g, '_')\n}\n```\n\nIf you set it to `true`, the following will happen when importing specific classNames:\n\n- dashed class names will be transformed by replacing all the dashes to `$` sign wrapped underlines, eg. `--` =\u003e `$__$`\n- js protected names used as your style class names, will be transformed by wrapping the names between `$` signs, eg. `switch` =\u003e `$switch$`\n\nAll transformed names will be logged in your terminal like:\n\n```bash\nExported \"new\" as \"$new$\" in test/fixtures/named-exports/style.css\n```\n\nThe original will not be removed, it's still available on `default` export:\n\n```js\nimport style, { class$_$name, class$__$name, $switch$ } from './style.css'\nconsole.log(style['class-name'] === class$_$name) // true\nconsole.log(style['class--name'] === class$__$name) // true\nconsole.log(style['switch'] === $switch$) // true\n```\n\n### minimize\n\nType: `boolean` `object`\u003cbr\u003e\nDefault: `false`\n\nMinimize CSS, `boolean` or options for `cssnano`.\n\n### sourceMap\n\nType: `boolean` `\"inline\"`\n\nEnable sourceMap.\n\n### parser\n\nType: `string` `function`\n\nPostCSS parser, like `sugarss`.\n\n### stringifier\n\nType: `string` `function`\n\nPostCSS Stringifier.\n\n### syntax\n\nType: `string` `function`\n\nPostCSS Syntax.\n\n### exec\n\nType: `boolean`\n\nEnable PostCSS Parser support in `CSS-in-JS`.\n\n### config\n\nType: `boolean` `object`\u003cbr\u003e\nDefault: `true`\n\nLoad PostCSS config file.\n\n#### config.path\n\nType: `string`\n\nThe path to config file, so that we can skip searching.\n\n#### config.ctx\n\nType: `object`\n\n[`ctx`](https://github.com/michael-ciniawsky/postcss-load-config#context) argument for PostCSS config file.\n\nNote: Every key you pass to `config.ctx` will be available under `options` inside\nthe postcss config.\n\n```js\n// rollup.config.js\npostcss({\n  config: {\n    ctx: {\n      foo: 'bar'\n    }\n  }\n})\n\n// postcss.config.js\nmodule.exports = context =\u003e {\n  console.log(context.options.foo) // 'bar'\n\n  return {}\n}\n```\n\n### to\n\nType: `string`\n\nDestination CSS filename hint that could be used by PostCSS plugins, for example, \nto properly resolve path, rebase and copy assets.\n\n### use\n\nType: `name[]` `[name, options][]` `{ sass: options, stylus: options, less: options }`\n\nDefault: `['sass', 'stylus', 'less']`\n\nUse a loader, currently built-in loaders are:\n\n- `sass` (Support `.scss` and `.sass`)\n- `stylus` (Support `.styl` and `.stylus`)\n- `less` (Support `.less`)\n\nThey are executed from right to left.\n\nIf you pass the `object`, then its property `sass`, `stylus` and `less` will\nbe pass in the corresponding loader.\n\n### loaders\n\nType: `Loader[]`\n\nAn array of custom loaders, check out our [sass-loader](./src/sass-loader.js) as example.\n\n```js\ninterface Loader {\n  name: string,\n  test: RegExp,\n  process: (this: Context, input: Payload) =\u003e Promise\u003cPayload\u003e | Payload\n}\n\ninterface Context {\n  /** Loader options */\n  options: any\n  /** Sourcemap */\n  sourceMap: any\n  /** Resource path */\n  id: string\n  /** Files to watch */\n  dependencies: Set\u003cstring\u003e\n  /** Emit a waring */\n  warn: PluginContext.warn\n  /** https://rollupjs.org/guide/en#plugin-context */\n  plugin: PluginContext\n}\n\ninterface Payload {\n  /** File content */\n  code: string\n  /** Sourcemap */\n  map?: string | SourceMap\n}\n```\n\n### onImport\n\nType: `id =\u003e void`\n\nA function to be invoked when an import for CSS file is detected.\n\n## License\n\nMIT \u0026copy; [EGOIST](https://github.com/egoist)\n","funding_links":["https://github.com/sponsors/egoist"],"categories":["Additional Help","Plugins","JavaScript"],"sub_categories":["Using CSS Preprocessors","CSS"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fegoist%2Frollup-plugin-postcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fegoist%2Frollup-plugin-postcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fegoist%2Frollup-plugin-postcss/lists"}