🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
DemoInstallSign in
Socket
DemoInstallSign in

rollup-plugin-postcss-lit

Package Overview
Dependencies
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rollup-plugin-postcss-lit - npm Package Compare versions

Comparing version

1.1.1
to
2.0.0

13

dist/index.d.ts
import { PluginOption } from 'vite';
interface PostcssLitOptions {
/**
* A glob (or array of globs) of files to include.
* @default: '** /*.{css,sss,pcss,styl,stylus,sass,scss,less}'
*/
include?: string | string[];
/**
* A glob (or array of globs) of files to exclude.
* @default: null
*/
exclude?: string | string[];
/**
* A string denoting the name of the package from which to import the `css`
* template tag function. For lit-element this can be changed to 'lit-element'
* @default: 'lit'
*/
importPackage?: string;

@@ -6,0 +19,0 @@ }

2

dist/index.js

@@ -11,3 +11,3 @@ "use strict";

exclude: null,
importPackage: 'lit-element'
importPackage: 'lit',
};

@@ -14,0 +14,0 @@ const opts = Object.assign(Object.assign({}, defaultOptions), options);

11

package.json
{
"name": "rollup-plugin-postcss-lit",
"version": "1.1.1",
"version": "2.0.0",
"description": "Rollup plugin to load PostCSSed stylesheets in LitElement components",

@@ -9,3 +9,3 @@ "main": "dist/index.js",

"build": "tsc",
"test": "mocha test/test.spec.js --require esm",
"test": "mocha -r jsdom-global/register test/test.spec.mjs",
"prepublishOnly": "rm -rf dist && npm run build && npm run test"

@@ -38,9 +38,8 @@ },

"devDependencies": {
"@types/mocha": "^8.0.1",
"@types/mocha": "^9.0.0",
"@types/node": "^14.0.27",
"esm": "^3.2.25",
"jsdom": "^16.6.0",
"jsdom-global": "^3.0.2",
"lit-element": "^2.5.1",
"mocha": "^8.4.0",
"lit": "^2.0.0",
"mocha": "^9.1.2",
"postcss": "^8.3.0",

@@ -47,0 +46,0 @@ "rollup": "^2.50.1",

49

README.md

@@ -5,5 +5,5 @@ # Rollup plugin postcss lit

![](https://github.com/umbopepato/rollup-plugin-postcss-lit/workflows/Node.js%20CI/badge.svg)
[![](https://img.shields.io/npm/v/rollup-plugin-postcss-lit.svg)](https://npmjs.org/package/rollup-plugin-postcss-lit)
[![](https://img.shields.io/badge/license-MIT-brightgreen)](LICENSE)
![Node.js CI](https://github.com/umbopepato/rollup-plugin-postcss-lit/workflows/Node.js%20CI/badge.svg)
[![Npm release](https://img.shields.io/npm/v/rollup-plugin-postcss-lit.svg)](https://npmjs.org/package/rollup-plugin-postcss-lit)
[![MIT License](https://img.shields.io/badge/license-MIT-brightgreen)](LICENSE)

@@ -43,3 +43,4 @@ ## Install

```typescript
import {customElement, LitElement, css} from 'lit-element';
import {LitElement, css} from 'lit';
import {customElement} from 'lit/decorators.js';
import myStyles from './styles.css';

@@ -71,3 +72,3 @@ import otherStyles from './other-styles.scss';

```javascript
import {LitElement, css} from 'lit-element';
import {LitElement, css} from 'lit';
import myStyles from './styles.css';

@@ -102,6 +103,6 @@ import otherStyles from './other-styles.scss';

### Usage with Lit 2
If you're using Lit 2, set the [`importPackage` option](#options) accordingly:
### Usage with lit-element
If you're using the `lit-element` package, set the [`importPackage` option](#options) accordingly:
```javascript

@@ -122,3 +123,3 @@ // rollup.config.js

postcssLit({
importPackage: 'lit',
importPackage: 'lit-element',
}),

@@ -158,8 +159,32 @@ ],

// A string denoting the name of the package from which to import the `css`
// template tag function. For Lit 2 this can be changed to 'lit'
// Default: 'lit-element'
importPackage: '...',
// template tag function. For lit-element this can be changed to 'lit-element'
// Default: 'lit'
importPackage: ...,
}),
```
## 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](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)
-based style encapsulation in your Lit components. Unless you're using
[Light DOM](https://lit.dev/docs/components/shadow-dom/#implementing-createrenderroot),
consider disabling the `inject` option:
```javascript
// rollup.config.js
export default {
...
plugins: [
postcss({
inject: false,
}),
postcssLit(),
],
};
```
> ℹī¸ This does not apply to Vite, see [#40](https://github.com/umbopepato/rollup-plugin-postcss-lit/issues/40).
## When should I use it?

@@ -166,0 +191,0 @@ 

dist/index.js.map

Sorry, the diff of this file is not supported yet