{"id":22113,"library":"rollup-plugin-lit-html-style","title":"rollup-plugin-lit-html-style","description":"Rollup plugin that extracts SCSS/SASS styles and embeds them as CSSResult for lit-html/lit-element components. Currently at version 0.3.3. This plugin replaces node-sass with sass in v3, and changed the default template export from TemplateResult to CSSResult in v2. It supports custom compilers and processors, but note that the active version (0.3.3) is old and the author recommends using newer alternatives like @chialab/postcss-lit. The plugin is in maintenance mode with infrequent releases.","status":"maintenance","version":"0.3.3","language":"javascript","source_language":"en","source_url":"https://github.com/odinr/rollup/tree/master/packages/plugin-lit-html-style","tags":["javascript","rollup-plugin","webcomponent","lit-html","lit-element","scss","sass","template","postcss"],"install":[{"cmd":"npm install rollup-plugin-lit-html-style","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-lit-html-style","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-lit-html-style","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency, needed as Rollup plugin","package":"rollup","optional":true}],"imports":[{"note":"SCSS files import the CSSResult as a default export.","wrong":"import { style } from './test.scss'","symbol":"default","correct":"import style from './test.scss'"},{"note":"The plugin is a default export function, not a named export.","wrong":"const stylePlugin = require('rollup-plugin-lit-html-style')","symbol":"style (function)","correct":"import stylePlugin from 'rollup-plugin-lit-html-style'"},{"note":"Common mistake is destructuring named export, but only a default export exists.","wrong":"import { style } from 'rollup-plugin-lit-html-style'","symbol":"Plugin function","correct":"import stylePlugin from 'rollup-plugin-lit-html-style';\nplugins: [ stylePlugin({ compress: false }) ]"}],"quickstart":{"code":"// rollup.config.js\nimport litHtmlStyle from 'rollup-plugin-lit-html-style';\n\nexport default {\n  input: 'src/index.js',\n  output: {\n    dir: 'dist',\n    format: 'esm'\n  },\n  plugins: [\n    litHtmlStyle({\n      esmodules: true,\n      compress: true,\n      include: ['**/*.scss']\n    })\n  ]\n};","lang":"javascript","description":"Configure Rollup to process .scss files and embed them as CSSResult in lit-html components."},"warnings":[{"fix":"If you need inline style in template, use unsafeHTML or custom template function.","message":"v2 changed export from TemplateResult to CSSResult; existing templates break.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Install sass as a peer dependency: npm install sass.","message":"v3 replaced node-sass with sass package.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Use './_partial.scss' instead of '_partial.scss'.","message":"Local SCSS imports must start with relative path or they resolve to node_modules.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Consider using @chialab/postcss-lit or rollup-plugin-webcomponent-style.","message":"This plugin is no longer actively maintained; newer alternatives exist.","severity":"deprecated","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"npm install sass --save-dev","cause":"v3 uses 'sass' but it's not installed.","error":"Error: Cannot find module 'sass'"},{"fix":"Change 'import { style } from './style.scss' to 'import style from './style.scss'","cause":"Using named import instead of default import for .scss files.","error":"Unexpected token: punc (.)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}