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: 2 days 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 (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-09-19T08:20:59.000Z (about 2 months ago)
• Last Synced: 2024-10-30T06:56:23.725Z (16 days ago)
• Topics: css, hacktoberfest, lit, web-components
• Language: JavaScript
• Homepage:
• Size: 2.12 MB
• Stars: 47
• Watchers: 4
• Forks: 7
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
![Am Yisrael Chai - עם ישראל חי](https://bennypowers.dev/assets/flag.am.yisrael.chai.png)

# 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)

- [Webpack](./packages/lit-css-loader)

- [Rollup](./packages/rollup-plugin-lit-css)

- [TypeScript](./packages/typescript-transform-lit-css)