{"id":22423384,"url":"https://github.com/prantlf/rollup-plugin-scss-lit","last_synced_at":"2025-08-01T07:32:21.760Z","repository":{"id":50730397,"uuid":"492728989","full_name":"prantlf/rollup-plugin-scss-lit","owner":"prantlf","description":"Rollup plugin for importing Sass sources as constructable stylesheets to projects using lit (lit-html and lit-element) or fast-element.","archived":false,"fork":false,"pushed_at":"2024-08-07T11:49:21.000Z","size":240,"stargazers_count":7,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-08T01:22:29.024Z","etag":null,"topics":["css","fast-element","lit","lit-css","lit-element","lit-html","lit-scss","pluugin","rollup","rollup-plugin","sass","scss"],"latest_commit_sha":null,"homepage":"","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/prantlf.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":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-16T07:33:33.000Z","updated_at":"2024-08-07T11:49:24.000Z","dependencies_parsed_at":"2024-06-19T06:16:30.765Z","dependency_job_id":"2018b222-4951-4873-b10d-d74b0aacaebf","html_url":"https://github.com/prantlf/rollup-plugin-scss-lit","commit_stats":{"total_commits":17,"total_committers":2,"mean_commits":8.5,"dds":0.4117647058823529,"last_synced_commit":"198e70094445e41d0c71ab505a041f62cd00313c"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prantlf%2Frollup-plugin-scss-lit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prantlf%2Frollup-plugin-scss-lit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prantlf%2Frollup-plugin-scss-lit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prantlf%2Frollup-plugin-scss-lit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/prantlf","download_url":"https://codeload.github.com/prantlf/rollup-plugin-scss-lit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228348371,"owners_count":17905899,"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","fast-element","lit","lit-css","lit-element","lit-html","lit-scss","pluugin","rollup","rollup-plugin","sass","scss"],"created_at":"2024-12-05T18:10:57.154Z","updated_at":"2024-12-05T18:10:59.609Z","avatar_url":"https://github.com/prantlf.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# rollup-plugin-scss-lit\n\n[![Latest version](https://img.shields.io/npm/v/rollup-plugin-scss-lit)\n ![Dependency status](https://img.shields.io/librariesio/release/npm/rollup-plugin-scss-lit)\n](https://www.npmjs.com/package/rollup-plugin-scss-lit)\n[![Coverage](https://codecov.io/gh/prantlf/rollup-plugin-scss-lit/branch/master/graph/badge.svg)](https://codecov.io/gh/prantlf/rollup-plugin-scss-lit)\n\n[Rollup] plugin for importing [Sass] sources as constructable stylesheets to projects using [lit] ([lit-html] and [lit-element]) or [fast-element].\n\nFaster than the combination of [rollup-plugin-styles] and [rollup-plugin-lit-css]. Uses the standard [options] of the Sass compiler. Supports minifying by [cssnano] or fully customisable transformations of the CSS output by [PostCSS].\n\n## Synopsis\n\nCustom element:\n\n```js\nimport { LitElement } from 'lit';\nimport styles from './styles.scss'\n\nclass MyElement extends LitElement {\n  static styles = styles\n  // the rest of the implementation\n}\n```\n\nBuild configuration:\n\n```js\nimport { litScss } from 'rollup-plugin-scss-lit'\n\nexport default {\n  plugins: [\n    litScss({ minify: process.env.NODE_ENV === 'production' })\n  ]\n  // the rest of the configuration\n}\n```\n\n## Installation\n\nMake sure that you use [Node.js] 14 or newer and [Rollup] 2 or newer. Use your favourite package manager - [NPM], [PNPM] or [Yarn]:\n\n```sh\nnpm i -D rollup-plugin-scss-lit\npnpm i -D rollup-plugin-scss-lit\nyarn add -D rollup-plugin-scss-lit\n```\n\n## Usage\n\nCreate a `rollup.config.js` [configuration file] and import the plugin:\n\n```js\nimport { litScss } from 'rollup-plugin-scss-lit'\n\nexport default {\n  input: 'src/index.js',\n  output: { file: 'dist/main.js', format: 'iife', sourcemap: true },\n  plugins: [\n    litScss({\n      minify: process.env.NODE_ENV === 'production',\n      options: { loadPaths: ['node_modules'] }\n    })\n  ]\n}\n```\n\nThen call `rollup` either via the [command-line] or [programmatically].\n\n### Using with TypeScript\n\nIf you are using TypeScript, you may need to create a declaration file to allow TypeScript to import the SCSS files (otherwise you will see error messages like `Cannot find module './styles.scss' or its corresponding type declarations.`).\n\nCreate a file `src/styles.d.ts` with the following content:\n\n```ts\ndeclare module '*.scss' {\n  import { CSSResultGroup } from 'lit';\n  const styles: CSSResultGroup;\n  export default styles;\n}\n```\n\nIf you have configured typescript to use a different `outDir` than the default of `./`, you will also need to copy your SCSS files into that directory. You can use [rollup-plugin-copy] for this, by adding the following to your Rollup configuration file:\n\n```js\nimport copy from \"rollup-plugin-copy\";\n\nexport default {\n  plugins: [\n    copy({\n      targets: [{ src: \"src/**/*.scss\", dest: \"build\" }], // build is configured as outDir in tsconfig.json\n      flatten: false, // important - preserves folder structure\n      hook: \"buildStart\", // important - needs to run before other plugins\n    }),\n    // ...\n  ]\n}\n```\n\n## Options\n\nThe following options can be passed in an object to the plugin function to change the default values.\n\n### `include`\n\nType: `Array\u003cString\u003e`\u003cbr\u003e\nDefault: `['**/*.scss']`\n\n[Pattern] to match files which will be processed by the plugin.\n\n### `exclude`\n\nType: `Array\u003cString\u003e`\u003cbr\u003e\nDefault: `[]`\n\n[Pattern] to match files which will be ignored by the plugin.\n\n### `options`\n\nType: `Object`\u003cbr\u003e\nDefault: `undefined`\n\nOptions for the Sass compiler. Use any [options] supported by the [compileString] method from the Sass package.\n\n### `minify`\n\nType: `Boolean | Object`\u003cbr\u003e\nDefault: `false`\n\nEnables minifying of the compiled CSS output. If an object is specified, it will be passed to the [cssnano] plugin.\n\nExperimental feature: if the object is set to `{ fast: true }`, [esbuild] will be used instead of [postcss].\n\n### `plugins`\n\nType: `Array\u003cObject\u003e`\u003cbr\u003e\nDefault: `undefined`\n\nAn array of [PostCSS] plugins to fully customise the transformation of the compiled CSS output.\n\n### `tag`\n\nType: `String`\u003cbr\u003e\nDefault: `'css'`\n\nThe tag used for the tagged template literal exported from the generated module. Use `'css'` (default) with both `lit-html` and `fast-element`.\n\n```js\nexport default css`...`\n```\n\n### `specifier`\n\nType: `String`\u003cbr\u003e\nDefault: `'lit'`\n\nThe import specifier used in the imnport declaration of the tag above. Use `'lit'` (default) with `lit-html` and `'@microsoft/fast-element'` with `fast-element`.\n\n```js\nimport { css } from 'lit'\n```\n\n```js\nimport { css } from '@microsoft/fast-element'\n```\n\n## How It Works\n\nLet us have a stylesheet called `src/styles.scss`:\n\n```scss\n:host { display: block }\n```\n\nAnd import it for a custom element in `src/index.js`:\n\n```js\nimport { LitElement } from 'lit';\nimport styles from './styles.scss'\n\nclass MyElement extends LitElement {\n  static styles = styles\n  // the rest of the implementation\n}\n```\n\nThe stylesheet will be converted to the following script on-the-fly during the build and bundled into `dist/browser.js`:\n\n```js\nimport { css } from 'lit'\nexport default css`:host { display: block }`\n```\n\n### Optimisation\n\nBefore converting to the tagged template literal, the CSS output can be optimised by [PostCSS]. The minifying is performed by the [cssnano] plugin. If an error occurs during the transformation, the whole bundling operation will fail, using the [postcss-fail-on-warn] plugin.\n\nPassing a boolean to the `litScss` plugin - `{ minify: true }` - will use the defaults. You can override them by passing an object with [options for cssnano] to `minify` instead of `true`:\n\n```js\n{\n  minify: {\n    preset: ['default', { discardComments: { removeAll: true } }]\n  }\n}\n```\n\nExperimental feature: if the `minify` object is set to `{ fast: true }`, [esbuild] will be used instead of [postcss].\n\n## Contributing\n\nIn lieu of a formal styleguide, take care to maintain the existing coding style. Lint and test your code.\n\n## License\n\nCopyright (C) 2022-2024 Ferdinand Prantl\n\nLicensed under the [MIT License].\n\n[MIT License]: http://en.wikipedia.org/wiki/MIT_License\n[Rollup]: https://rollupjs.org/\n[Node.js]: https://nodejs.org/\n[NPM]: https://www.npmjs.com/\n[PNPM]: https://pnpm.io/\n[Yarn]: https://yarnpkg.com/\n[configuration file]: https://www.rollupjs.org/guide/en/#configuration-files\n[command-line]: https://www.rollupjs.org/guide/en/#command-line-reference\n[programmatically]: https://www.rollupjs.org/guide/en/#javascript-api\n[Pattern]: https://www.linuxjournal.com/content/bash-extended-globbing\n[PostCSS]: https://postcss.org/\n[Sass]: https://sass-lang.com/documentation/js-api\n[cssnano]: https://cssnano.co/\n[esbuild]: https://esbuild.github.io/\n[postcss-fail-on-warn]: https://www.npmjs.com/package/postcss-fail-on-warn\n[options supported by PostCSS for source maps]: https://postcss.org/api/#sourcemapoptions\n[options for cssnano]: https://cssnano.co/docs/config-file/\n[compileString]: https://sass-lang.com/documentation/js-api/modules#compileString\n[options]: https://sass-lang.com/documentation/js-api/modules#StringOptions\n[lit]: https://lit.dev/\n[lit-html]: https://lit.dev/docs/components/styles/\n[lit-element]: https://lit.dev/docs/api/LitElement/\n[fast-element]: https://www.fast.design/docs/fast-element/leveraging-css/\n[rollup-plugin-styles]: https://www.npmjs.com/package/rollup-plugin-styles\n[rollup-plugin-lit-css]: https://www.npmjs.com/package/rollup-plugin-lit-css\n[rollup-plugin-copy]: https://www.npmjs.com/package/rollup-plugin-copy\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprantlf%2Frollup-plugin-scss-lit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprantlf%2Frollup-plugin-scss-lit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprantlf%2Frollup-plugin-scss-lit/lists"}