{"id":22423313,"url":"https://github.com/prantlf/rollup-plugin-css-lit","last_synced_at":"2025-08-01T07:32:11.412Z","repository":{"id":39586361,"uuid":"492729640","full_name":"prantlf/rollup-plugin-css-lit","owner":"prantlf","description":"Rollup plugin for importing CSS 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:40:59.000Z","size":213,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-21T02:08:52.228Z","etag":null,"topics":["css","fast-element","lit","lit-css","lit-element","lit-html","plugin","rollup","rollup-plugin"],"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:35:39.000Z","updated_at":"2024-08-07T11:41:02.000Z","dependencies_parsed_at":"2024-08-06T11:48:41.776Z","dependency_job_id":null,"html_url":"https://github.com/prantlf/rollup-plugin-css-lit","commit_stats":{"total_commits":13,"total_committers":2,"mean_commits":6.5,"dds":0.3846153846153846,"last_synced_commit":"1d03d3eb1fbf5186a38c5be52992b41d6f779e34"},"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-css-lit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prantlf%2Frollup-plugin-css-lit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prantlf%2Frollup-plugin-css-lit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prantlf%2Frollup-plugin-css-lit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/prantlf","download_url":"https://codeload.github.com/prantlf/rollup-plugin-css-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","plugin","rollup","rollup-plugin"],"created_at":"2024-12-05T18:09:58.531Z","updated_at":"2024-12-05T18:09:59.317Z","avatar_url":"https://github.com/prantlf.png","language":"JavaScript","readme":"# rollup-plugin-css-lit\n\n[![Latest version](https://img.shields.io/npm/v/rollup-plugin-css-lit)\n ![Dependency status](https://img.shields.io/librariesio/release/npm/rollup-plugin-css-lit)\n](https://www.npmjs.com/package/rollup-plugin-css-lit)\n[![Coverage](https://codecov.io/gh/prantlf/rollup-plugin-css-lit/branch/master/graph/badge.svg)](https://codecov.io/gh/prantlf/rollup-plugin-css-lit)\n\n[Rollup] plugin for importing CSS 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]. Supports minifying by [cssnano], inlining by [postcss-import] and [postcss-ulrl] or fully customisable transformations of the CSS input by [PostCSS].\n\n## Synopsis\n\nCustom element:\n\n```js\nimport { LitElement } from 'lit';\nimport styles from './styles.css'\n\nclass MyElement extends LitElement {\n  static styles = styles\n  // the rest of the implementation\n}\n```\n\nBuild configuration:\n\n```js\nimport { litCss } from 'rollup-plugin-css-lit'\n\nexport default {\n  plugins: [\n    litCss({ 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-css-lit\npnpm i -D rollup-plugin-css-lit\nyarn add -D rollup-plugin-css-lit\n```\n\n## Usage\n\nCreate a `rollup.config.js` [configuration file] and import the plugin:\n\n```js\nimport { litCss } from 'rollup-plugin-css-lit'\n\nexport default {\n  input: 'src/index.js',\n  output: { file: 'dist/main.js', format: 'iife', sourcemap: true },\n  plugins: [\n    litCss({\n      minify: process.env.NODE_ENV === 'production',\n      inline: { assets: {} }\n    })\n  ]\n}\n```\n\nThen call `rollup` either via the [command-line] or [programmatically].\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: `['**/*.css']`\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 transformed 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### `inline`\n\nType: `Boolean | Object`\u003cbr\u003e\nDefault: `false`\n\nEnables inlining of stylesheets and other assets. If an object is specified, it will have to include two properties pointing to objects: `{ stylesheets, assets }`. The `stylesheets` objects will be passed to the [postcss-import] plugin. The `assets` objects will be passed to the [postcss-url] 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 CSS input.\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.css`:\n\n```css\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.css'\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. Inlining of other stylesheets imported by the `@import` directives is performed by the [postcss-import] plugin. Inlining of other assets like pictures referred to by absolute or relative URLs is performed by the [postcss-url] plugin. If an error occurs during the transformation, the whole bundling operation will fail, using the [postcss-fail-on-warn] plugin.\n\nPassing a booleans to the `litCss` plugin - `{ minify: true, inline: true }` - will use the defaults. You can override them by passing an object instead of `true`:\n\n```js\n{\n  minify: {\n    preset: ['default', { discardComments: { removeAll: true } }]\n  },\n  inline: {\n    stylesheets: {},\n    assets: { url: 'inline' }\n  }\n}\n```\n\nPass [options for cssnano] to `minify`, [options for postcss-import] to `inline.stylesheets` and [options for postcss-url] to `inline.assets`.\n\nExperimental feature: if the `minify` or `inline` 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[cssnano]: https://cssnano.co/\n[esbuild]: https://esbuild.github.io/\n[postcss-import]: https://www.npmjs.com/package/postcss-import\n[postcss-url]: https://www.npmjs.com/package/postcss-url\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[options for postcss-import]: https://github.com/postcss/postcss-import#options\n[options for postcss-url]: https://github.com/postcss/postcss-url#options-combinations\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","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprantlf%2Frollup-plugin-css-lit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprantlf%2Frollup-plugin-css-lit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprantlf%2Frollup-plugin-css-lit/lists"}