
Product
Introducing Socket Fix for Safe, Automated Dependency Upgrades
Automatically fix and test dependency updates with socket fix—a new CLI tool that turns CVE alerts into safe, automated upgrades.
rollup-plugin-lit-css
Advanced tools
Rollup plugin to import css files as JavaScript tagged-template literal objects.
The "Lit" stands for "Literal"
You can use it to import CSS for various libraries like lit-element
, @microsoft/fast-element
, or others.
No. This is an optional package who's sole purpose is to make it easier to write CSS-in-CSS while working on lit-element projects. You can just as easily write your CSS in some 'styles.css.js
' modules a la:
import { css } from 'lit-element';
export default css`:host { display: block; }`;
And this may actually be preferred.
Hopefully this package will become quickly obsolete when the CSS Modules Proposal (or something like it) is accepted and implemented.
In the mean time, enjoy importing your CSS into your component files.
Name | Accepts | Default |
---|---|---|
include | Array of glob of files to include. | ['**/*.css'] |
exclude | Array of glob of files to exclude. | undefined |
cssnano | Boolean or Object of cssnano options. | false |
specifier | Package to import css from | lit |
tag | Name of the template-tag function | css |
transform | Optional function (sync or async) which transforms css sources (e.g. postcss) | x => x |
import config from './rollup.config.rest.js'
import litcss from 'rollup-plugin-lit-css';
export default {
...config,
plugins: [
litcss({ include, exclude, cssnano: true })
]
}
Then import your CSS:
:host {
display: block;
}
h1 {
color: hotpink;
}
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import style from './css-in-css.css';
@customElement('css-in-css')
class CSSInCSS extends LitElement {
static readonly styles = [style];
render() {
return html`<h1>It's Lit!</h1>`;
}
}
plugins: [
litcss({ specifier: '@microsoft/fast-element' })
]
import { FASTElement, customElement, html } from '@microsoft/fast-element';
import styles from './css-in-css.css';
const template = html<CSSinCSS>`<h1>It's Lit!</h1>`;
@customElement({ name: 'css-in-css', template, styles })
class CSSinCSS extends FASTElement {}
Looking for webpack? lit-css-loader Looking for esbuild? esbuild-plugin-lit-css
To load scss files:
include
option which includes scss files (i.e. a glob or regexp)transform
function in the plugin options.// rollup.config.js
import litcss from 'rollup-plugin-lit-css';
import Sass from 'sass';
export default {
plugins: [
litcss({
include: '/**/*.scss',
transform: (data, { filePath }) =>
Sass.renderSync({ data, file: filePath })
.css.toString(),
}),
]
}
Similarly, to transform sources using PostCSS, specify a transform
function:
// rollup.config.js
import litcss from 'rollup-plugin-lit-css';
import postcss from 'postcss';
import postcssNesting from 'postcss-nesting';
const processor = postcss(postcssNesting());
export default {
plugins: [
litcss({
transform: (css, { filePath }) =>
processor.process(css, { from: filePath })
.css,
}),
]
}
rollup-plugin-styles does all the CSS-loading and -transformations in one single plugin (including Sass, PostCss, and so on). It works very well together with rollup-plugin-lit-css
.
// rollup.config.js
import litcss from "rollup-plugin-lit-css";
import styles from "rollup-plugin-styles";
export default {
plugins: [
styles({
mode: "emit" // emit pure CSS, so that litcss can consume it.
}),
// Make sure to list litcss *after* the styles-plugin.
litcss(),
]
};
2.x
Starting with version 3.x
, the default import used when transforming the CSS files is lit
(see specifier
option above) which is LitElement 3.x. If you need this package to work with LitElement 2.x, you have to set the specifier to lit-element
like so:
import config from './rollup.config.rest.js'
import litcss from 'rollup-plugin-lit-css';
export default {
...config,
plugins: [
litcss({ specifier: 'lit-element' })
]
}
Looking for webpack? lit-css-loader Looking for esbuild? esbuild-plugin-lit-css Looking for typescript? typescript-transform-lit-css
FAQs
Import CSS files as tagged template literals
The npm package rollup-plugin-lit-css receives a total of 6,899 weekly downloads. As such, rollup-plugin-lit-css popularity was classified as popular.
We found that rollup-plugin-lit-css demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Automatically fix and test dependency updates with socket fix—a new CLI tool that turns CVE alerts into safe, automated upgrades.
Security News
CISA denies CVE funding issues amid backlash over a new CVE foundation formed by board members, raising concerns about transparency and program governance.
Product
We’re excited to announce a powerful new capability in Socket: historical data and enhanced analytics.