{"id":13773993,"url":"https://github.com/elycruz/rollup-plugin-sass","last_synced_at":"2025-05-16T00:05:44.285Z","repository":{"id":6155561,"uuid":"54894981","full_name":"elycruz/rollup-plugin-sass","owner":"elycruz","description":"Rollup .sass files.","archived":false,"fork":false,"pushed_at":"2025-01-16T20:50:45.000Z","size":1015,"stargazers_count":93,"open_issues_count":5,"forks_count":34,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-07T20:03:07.709Z","etag":null,"topics":["rollup","rollup-plugin","sass","scss"],"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/elycruz.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-03-28T13:42:47.000Z","updated_at":"2025-01-16T20:49:31.000Z","dependencies_parsed_at":"2024-11-09T04:04:27.590Z","dependency_job_id":"dbd27d58-5f67-43c6-a903-29eabf3a3939","html_url":"https://github.com/elycruz/rollup-plugin-sass","commit_stats":{"total_commits":322,"total_committers":22,"mean_commits":"14.636363636363637","dds":0.639751552795031,"last_synced_commit":"ee6f5e1f851540a9563f9a5392e48dfc27950900"},"previous_names":["differui/rollup-plugin-sass"],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elycruz%2Frollup-plugin-sass","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elycruz%2Frollup-plugin-sass/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elycruz%2Frollup-plugin-sass/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elycruz%2Frollup-plugin-sass/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/elycruz","download_url":"https://codeload.github.com/elycruz/rollup-plugin-sass/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254081009,"owners_count":22011539,"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":["rollup","rollup-plugin","sass","scss"],"created_at":"2024-08-03T17:01:22.714Z","updated_at":"2025-05-16T00:05:44.252Z","avatar_url":"https://github.com/elycruz.png","language":"TypeScript","funding_links":[],"categories":["Plugins"],"sub_categories":["CSS"],"readme":"# rollup-plugin-sass [![CI](https://github.com/elycruz/rollup-plugin-sass/actions/workflows/CI.yml/badge.svg)](https://github.com/elycruz/rollup-plugin-sass/actions/workflows/CI.yml) [![issues](https://img.shields.io/github/issues/elycruz/rollup-plugin-sass.svg?style=flat-square)](https://www.npmjs.com/package/rollup-plugin-sass) [![npm](https://img.shields.io/npm/v/rollup-plugin-sass.svg?style=flat-square)](https://www.npmjs.com/package/rollup-plugin-sass) [![mit](https://img.shields.io/npm/l/rollup-plugin-sass.svg?style=flat-square)](https://opensource.org/licenses/MIT) [![Coverage Status](https://coveralls.io/repos/github/elycruz/rollup-plugin-sass/badge.svg?branch=main)](https://coveralls.io/github/elycruz/rollup-plugin-sass?branch=main)\n\n## Installation\n\n```bash\nnpm install rollup-plugin-sass -D\n```\n\n## Usage\n\n```js\n// rollup.config.js\nimport sass from 'rollup-plugin-sass';\n\nexport default {\n  input: 'index.js',\n  output: {\n    file: 'bundle.js',\n    format: 'cjs',\n  },\n  plugins: [sass()],\n};\n```\n\n### rollup.config.ts\n\nAdd `allowSyntheticDefaultImports`, or `esModuleInterop` (enables `allowSyntheticDefaultImports`), to tsconfig.json:\n\n```json\n{\n  \"compilerOptions\": {\n    \"esModuleInterOp\": true\n  }\n}\n```\n\n[`esModuleInterop` reference](https://www.typescriptlang.org/tsconfig#esModuleInterop)\n\nWrite rollup.config.ts:\n\n```typescript\n// rollup.config.ts\nimport sass from 'rollup-plugin-sass';\n\n// ...\n```\n\nProfit.\n\n## Options\n\n### `output`\n\n- Type: `Boolean|String|Function`\n- Default: `false`\n\n```js\nsass({\n  // Default behavior disable output\n  output: false,\n\n  // Write all styles to the bundle destination where .js is replaced by .css\n  output: true,\n\n  // Filename to write all styles\n  output: 'bundle.css',\n\n  // Callback that will be called on generate bundle with two arguments:\n  // - styles: the concatenated styles in order of imported\n  // - styleNodes: an array of style objects:\n  //  [\n  //    { id: './style1.scss', content: 'body { color: red };' },\n  //    { id: './style2.scss', content: 'body { color: green };' }\n  //  ]\n  output(styles, styleNodes) {\n    writeFileSync('bundle.css', styles);\n  },\n});\n```\n\n### `insert`\n\n- Type: `Boolean`\n- Default: `false`\n\nIf you specify `true`, the plugin will insert compiled CSS into `\u003chead/\u003e` tag, via utility function that it will output\nin your build bundle.\n\n```js\nsass({\n  insert: true,\n});\n```\n\n### `processor`\n\n- Type: `Function`\n\nIf you specify a function as processor which will be called with compiled css before generate phase.\n\n```js\nimport autoprefixer from 'autoprefixer';\nimport postcss from 'postcss';\n\nsass({\n  // Processor will be called with two arguments:\n  // - style: the compiled css\n  // - id: import id\n  processor: (css) =\u003e\n    postcss([autoprefixer])\n      .process(css)\n      .then((result) =\u003e result.css),\n});\n```\n\nThe `processor` also support object result. Reverse `css` filled for stylesheet, the rest of the properties can be customized.\n\n```js\nsass({\n  processor(code) {\n    return {\n      css: '.body {}',\n      foo: 'foo',\n      bar: 'bar',\n    };\n  },\n});\n```\n\nOtherwise, you could do:\n\n```js\nimport style, { foo, bar } from 'stylesheet';\n```\n\n#### Create CSS modules using processor `cssModules` output\n\nWhen returning a `cssModules` property inside a processor's output,\nthe plugin will change the module's default export to the value\nof `cssModules` instead of the compiled CSS code.\n\nThe following example uses [`postcss-modules`](https://www.npmjs.com/package/postcss-modules) to create css modules:\n\n```js\nimport postcss from 'postcss';\nimport postcssModules from 'postcss-modules';\n\nsass({\n  async processor(css, id) {\n    let cssModules = {};\n    const postcssProcessResult = await postcss([\n      postcssModules({\n        getJSON: (_, json) =\u003e {\n          if (json) cssModules = json;\n        },\n      }),\n    ]).process(css, { from: id });\n\n    return { css: postcssProcessResult.css, cssModules };\n  },\n});\n```\n\nWhich allows you to write something like:\n\n```js\nimport style from 'stylesheet';\n\nstyle['some-classes'];\n```\n\n#### Exporting sass variable to \\*.js\n\nExample showing how to use [`icss-utils`](https://www.npmjs.com/package/icss-utils) to extract resulting sass vars to your \\*.js bundle:\n\n```js\nconst config = {\n  input: 'test/fixtures/processor-promise/with-icss-exports.js',\n  plugins: [\n    sass({\n      processor: (css) =\u003e {\n        const pcssRootNodeRslt = postcss.parse(css);\n        const extractedIcss = extractICSS(pcssRootNodeRslt, true);\n        const cleanedCss = pcssRootNodeRslt.toString();\n        const out = { css: cleanedCss, ...extractedIcss.icssExports };\n        // console.table(extractedIcss);\n        // console.log(out);\n        return out;\n      },\n    }),\n  ],\n};\n```\n\nSee the [Input file](test/fixtures/processor-promise/with-icss-exports.js) for example on how to access\nthe exported vars.\n\n### `runtime`\n\n- Type: `Object`\n- Default: `sass`\n\nIf you specify an object, it will be used instead of [sass](https://github.com/sass/dart-sass). You can use this to pass a different sass compiler (for example the `node-sass` npm package).\n\n### `api`\n\n- Type: `'legacy'|'modern'`\n- Default: `'legacy'`\n\n```js\nsass(); // default to legacy\n\nsass({ api: 'modern' });\n\nsass({\n  api: 'modern',\n  options: {\n    style: 'compressed',\n  },\n});\n```\n\n### `options`\n\n- Type: `Object`\n\n\u003e [!NOTE]\n\u003e The content of `options` is sensible to the value specified in `api` option\n\nOptions for [sass](https://github.com/sass/dart-sass) or your own runtime sass compiler.\n\nIf you specify `data`, the plugin will treat as prepend sass string.\nSince you can inject variables during sass compilation with node.\n\n```js\nsass({\n  options: {\n    data: '$color: #000;',\n  },\n});\n```\n\n---\n\n\u003e [!TIP]\n\u003e If your are working with npm packages, consider to use\n\u003e [NodePackageImporter](https://sass-lang.com/documentation/js-api/classes/nodepackageimporter/)\n\u003e\n\u003e ```js\n\u003e import * as sass from 'sass';\n\u003e\n\u003e sass({\n\u003e   options: {\n\u003e     importers: [new sass.NodePackageImporter()],\n\u003e   },\n\u003e });\n\u003e ```\n\n### `include`\n\n- Type: `string | string[]`\n- Default: `['**/*.sass', '**/*.scss']`\n\nGlob of sass/css files to be targeted.\n\n```ts\nsass({\n  include: ['**/*.css', '**/*.sass', '**/*.scss'],\n});\n```\n\n### `exclude`\n\n- Type: `string | string[]`;\n- Default: `'node_modules/**'`\n\nGlobs to exclude from processing.\n\n```ts\nsass({\n  exclude: 'node_modules/**',\n});\n```\n\n## License\n\n[MIT](./LICENSE) [elycruz](https://github.com/elycruz),\n[BinRui.Guan](mailto:differui@gmail.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felycruz%2Frollup-plugin-sass","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felycruz%2Frollup-plugin-sass","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felycruz%2Frollup-plugin-sass/lists"}