Installations
npm install rollup-plugin-postcss-litDeveloper
umbopepato
Developer Guide
Module System
CommonJS
Min. Node Version
Typescript Support
Yes
Node Version
18.16.0
NPM Version
9.5.1
Statistics
34 Stars
90 Commits
6 Forks
4 Watching
5 Branches
5 Contributors
Updated on 23 Jun 2024
Languages
TypeScript (52.12%)
JavaScript (43.93%)
Shell (2.62%)
CSS (1.33%)
Total Downloads
Cumulative downloads
Total Downloads
529,374
Last day
-12.2%
817
Compared to previous day
Last week
16.5%
5,091
Compared to previous week
Last month
4.7%
19,299
Compared to previous month
Last year
29.9%
233,779
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Dev Dependencies
25
Rollup plugin postcss lit
Rollup plugin to load PostCSSed stylesheets in LitElement components
Install
1$ npm i -D rollup-plugin-postcss-lit
Usage
Add postcssLit plugin after postcss. This wraps PostCSSed styles in Lit's css
template literal tag, so you can import them directly in your components.
1// rollup.config.js 2import postcss from 'rollup-plugin-postcss'; 3import postcssLit from 'rollup-plugin-postcss-lit'; 4 5export default { 6 input: 'entry.js', 7 output: { 8 // ... 9 }, 10 plugins: [ 11 postcss({ 12 // ... 13 }), 14 postcssLit(), 15 ], 16}
Add PostCSSed stylesheets to your LitElement components:
1import {LitElement, css} from 'lit'; 2import {customElement} from 'lit/decorators.js'; 3import myStyles from './styles.css'; 4import otherStyles from './other-styles.scss'; 5 6@customElement('my-component') 7export class MyComponent extends LitElement { 8 9 // Add a single style 10 static styles = myStyles; 11 12 // Or more! 13 static styles = [myStyles, otherStyles, css` 14 .foo { 15 color: ${...}; 16 } 17 `]; 18 19 render() { 20 // ... 21 } 22}
JS version
1import {LitElement, css} from 'lit'; 2import myStyles from './styles.css'; 3import otherStyles from './other-styles.scss'; 4 5export class MyComponent extends LitElement { 6 7 // Add a single style 8 static get styles() { 9 return myStyles; 10 } 11 12 // Or more! 13 static get styles() { 14 return [myStyles, otherStyles, css` 15 .foo { 16 color: ${...}; 17 } 18 `]; 19 } 20 21 render() { 22 // ... 23 } 24} 25 26customElements.define('my-component', MyComponent);
Usage with lit-element
If you're using the lit-element package, set the importPackage option accordingly:
1// rollup.config.js 2import postcss from 'rollup-plugin-postcss'; 3import postcssLit from 'rollup-plugin-postcss-lit'; 4 5export default { 6 input: 'entry.js', 7 output: { 8 // ... 9 }, 10 plugins: [ 11 postcss({ 12 // ... 13 }), 14 postcssLit({ 15 importPackage: 'lit-element', 16 }), 17 ], 18}
Usage with Vite
This plugin is pre-configured to work with Vite, just add it to plugins and your styles will be Lit-ified ✨
1// vite.config.js/ts 2import postcssLit from 'rollup-plugin-postcss-lit'; 3 4export default { 5 plugins: [ 6 postcssLit(), 7 ], 8}; 9 10 11// my-component.js/ts 12import myStyles from './styles.css?inline';
⚠️ Use the
?inlinesuffix to prevent Vite from adding the styles to the CSS bundle as well
Options
1postcssLit({ 2 3 /** 4 * A glob (or array of globs) of files to include 5 * 6 * @default '**/*.{css,sss,pcss,styl,stylus,sass,scss,less}?(*)' 7 */ 8 include: ..., 9 10 /** 11 * A glob (or array of globs) of files to exclude 12 * 13 * The default filter is used to prevent `<style>` HTML tags from being processed in Vite contexts 14 * @default '**/*\?direct*' 15 */ 16 exclude: ..., 17 18 /** 19 * A string denoting the name of the package from which to import the `css` 20 * template tag function. For lit-element this can be changed to 'lit-element' 21 * 22 * @default 'lit' 23 */ 24 importPackage: ..., 25}),
PostCSS plugin setup
rollup-plugin-postcss injects all the imported stylesheets in <head> by default: this causes an unnecessary style
duplication if you're using the default ShadowDOM
-based style encapsulation in your Lit components. Unless you're using
Light DOM,
consider disabling the inject option:
1// rollup.config.js 2 3export default { 4 ... 5 plugins: [ 6 postcss({ 7 inject: false, 8 }), 9 postcssLit(), 10 ], 11};
When should I use it?
This plugin is meant to be used with rollup-plugin-postcss.
If you only need to load plain css files in your LitElement components,
consider using rollup-plugin-lit-css.
Contributors
License
This project is licensed under the MIT License, see LICENSE for details.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
dependency not pinned by hash detected -- score normalized to 3
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/umbopepato/rollup-plugin-postcss-lit/nodejs.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/umbopepato/rollup-plugin-postcss-lit/nodejs.yml/main?enable=pin
- Info: 0 out of 2 GitHub-owned GitHubAction dependencies pinned
- Info: 1 out of 1 npmCommand dependencies pinned
Reason
Found 2/18 approved changesets -- score normalized to 1
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/nodejs.yml:1
- Info: no jobLevel write permissions found
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'main'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 16 are checked with a SAST tool
Reason
13 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-c24v-8rfc-w8vw
- Warn: Project is vulnerable to: GHSA-8jhw-289h-jh2g
- Warn: Project is vulnerable to: GHSA-64vr-g452-qvp3
- Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
2.8
/10
Last Scanned on 2024-11-18
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More