npmpackage.info

Gathering detailed insights and metrics for lit-css-loader

Other packages similar to lit-css-loader

lit-scss-loader

2.0.1

Automatically generate the style-wrapper that is required for LitElement, simply by importing the CSS/SCSS file

esbuild-sass-plugin

3.3.1

esbuild plugin for sass/scss files supporting both css loader and css result import (lit-element)

@mordech/vite-lit-loader

0.37.0

A vite plugin for loading `svg`, `html`, `css`, `scss`, and `sass` files as `lit-html` templates/styles.

@bryanwood/lit-css-loader

0.2.0

Gathering detailed insights and metrics for lit-css-loader

lit-css-loader - 3.0.1 | npmpackage.info

lit-css-loader

Build Plugins for CSS tagged-template-literals

3.0.1

MIT

JavaScript

6.66 kB

3.3

Installations

npm install lit-css-loader

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Node Version

18.20.5

NPM Version

10.8.2 Pull Requests

Open

2

Total

52

Closed

1

Merged

49

Issues

Open

5

Total

16

Closed

11

Releases

typescript-transform-lit-css@2.0.2

Updated on Mar 02, 2025

lit-css-loader@3.0.1

Updated on Jan 09, 2025

typescript-transform-lit-css@2.0.1

Updated on Jan 09, 2025

web-dev-server-plugin-lit-css@3.0.2

Updated on Jan 09, 2025

rollup-plugin-lit-css@5.0.2

Updated on Jan 09, 2025

esbuild-plugin-lit-css@3.0.2

Updated on Jan 09, 2025

View All 65 releases

Languages

JavaScript

TypeScript

CSS

SCSS

JavaScript (51.67%)

TypeScript (47.59%)

CSS (0.53%)

SCSS (0.22%)

Developer

bennypowers

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

52 Stars

96 Commits

8 Forks

3 Watchers

6 Branches

6 Contributors

Updated on Jul 05, 2025

Maintainers

View All 6 Contributors

Package Meta Information

Latest Version

3.0.1

Package Id

lit-css-loader@3.0.1

Unpacked Size

6.66 kB

Size

2.56 kB

File Count

NPM Version

10.8.2

Node Version

18.20.5

Published on

Jan 09, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

@pwrs/lit-css loader-utils

lit-css-loader

Webpack loader 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.

Do I Need This?

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:

1import { css } from 'lit-element';
2export 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.

Options

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`

Usage

npm i -D lit-css-loader

1module: {
2  rules: [
3    {
4      test: /\.css$/,
5      loader: 'lit-css-loader',
6      options: {
7        specifier: 'lit-element' // defaults to `lit`
8      }
9    }
10  ]
11}

1import { LitElement, html } from 'lit';
2import { customElement } from 'lit/decorators.js';
3
4import style from './styled-el.css';
5
6@customElement('styled-el')
7export class extends LitElement {
8  static styles = [style]
9  render() {
10    return html`<p>such style. very win</p>`;
11  }
12}

Usage with Sass, Less, PostCSS, etc.

To load scss files:

Adjust the test clause of the module rule as needed (e.g)
Pass a transform function to the loader options

1const Sass = require('sass');
2module.exports = {
3  module: {
4    rules: [
5      {
6        test: /\.scss$/,
7        loader: 'lit-css-loader',
8        options: {
9          transform: (data, { filePath }) =>
10            Sass.renderSync({ data, file: filePath })
11              .css.toString(),
12        }
13      }
14    ]
15  }
16}

Similarly, to transform sources using PostCSS, specify a transform function:

1const postcss = require('postcss');
2const postcssNesting = require('postcss-nesting');
3
4const processor = postcss(postcssNesting());
5
6module.exports = {
7  module: {
8    rules: [
9      {
10        test: /\.scss$/,
11        loader: 'lit-css-loader',
12        options: {
13          transform: (css, { filePath }) =>
14            processor.process(css, { from: filePath })
15              .css
16        }
17      }
18    ]
19  }
20}

Looking for rollup? rollup-plugin-lit-css Looking for esbuild? esbuild-plugin-lit-css Looking for typescript? typescript-transform-lit-css

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

5

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Security-Policy

Determines if the project has published a security policy.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

3.3

/10

Last Scanned on 2025-07-07

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