https://github.com/bennypowers/lit-css
Build Plugins for CSS tagged-template-literals
https://github.com/bennypowers/lit-css
css hacktoberfest lit web-components
Last synced: 3 months ago
JSON representation
Build Plugins for CSS tagged-template-literals
- Host: GitHub
- URL: https://github.com/bennypowers/lit-css
- Owner: bennypowers
- License: mit
- Created: 2021-07-02T10:58:57.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2026-03-01T13:13:30.000Z (3 months ago)
- Last Synced: 2026-03-01T16:43:11.373Z (3 months ago)
- Topics: css, hacktoberfest, lit, web-components
- Language: JavaScript
- Homepage:
- Size: 2.78 MB
- Stars: 50
- Watchers: 3
- Forks: 8
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# lit-CSS Plugins
Build plugins 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. These are optional packages whose sole purpose is to make it easier to write CSS-in-CSS. You can just as easily write your CSS in some '`styles.css.js`' modules a la:
```js
import { css } from 'lit';
export default css`:host { display: block; }`;
```
And this may actually be preferred.
Hopefully this package will become quickly obsolete when the [CSS Modules Proposal](https://github.com/w3c/webcomponents/issues/759) (or something like it) is accepted and implemented.
In the mean time, enjoy importing your CSS into your component files.
- [Shared Logic](./packages/lit-css)
- [esbuild](./packages/esbuild-plugin-lit-css)
- [TypeScript](./packages/typescript-transform-lit-css)
- [Rollup](./packages/rollup-plugin-lit-css)
- [Webpack](./packages/lit-css-loader)
- [Vite](./packages/vite-plugin-lit-css)
- [Parcel](./packages/parcel-transformer-lit-css)