Skip to content
This repository has been archived by the owner on Jul 4, 2021. It is now read-only.

Commit

Permalink
Update README.md (#24)
Browse files Browse the repository at this point in the history
* Update README.md

* Delete tsconfig.json

* Delete package.json

* Delete package-lock.json

* Delete .vscode directory

* Delete src directory

* Delete test directory

* Delete .gitignore
  • Loading branch information
bennypowers authored Jul 3, 2021
1 parent 3476005 commit 971e954
Show file tree
Hide file tree
Showing 13 changed files with 2 additions and 9,907 deletions.
4 changes: 0 additions & 4 deletions .gitignore

This file was deleted.

13 changes: 0 additions & 13 deletions .vscode/tasks.json

This file was deleted.

95 changes: 2 additions & 93 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,94 +1,3 @@
# rollup-plugin-lit-css
Rollup plugin to import css files as JavaScript tagged-template literal objects.
# Package Moved

> _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:

```js
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](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.

## Usage

```js
import config from './rollup.config.rest.js'
import litcss from 'rollup-plugin-lit-css';

export default {
...config,
plugins: [
litcss({ include, exclude, uglify })
]
}
```

Then import your CSS:

```css
:host {
display: block;
}

h1 {
color: hotpink;
}
```

```ts
import { LitElement, customElement, html } from 'lit-element';

import style from './css-in-css.css';

@customElement('css-in-css')
class CSSInCSS extends LitElement {
static get styles() {
return [style];
}

render() {
return html`<h1>It's Lit!</h1>`;
}
}
```


### Usage with FAST

```js
plugins: [
litcss({ import: '@microsoft/fast-element' })
]
```

```ts
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 {}
```

## Options

|Name|Accepts|Default|
|-----|-----|-----|
|`include`|Array of glob of files to include.|`['**/*.css']`|
|`exclude`|Array of glob of files to exclude. |`undefined`|
|`uglify`|Boolean or Object of [uglifycss](https://www.npmjs.com/package/uglifycss#api) options.|`false`|
|`import`|Package to import `css` from|`lit-element`|
|`tag`|Name of the template-tag function|`css`|
Please see [bennypowers/lit-css](https://github.com/bennypowers/lit-css/tree/main/packages/rollup-plugin-lit-css)
Loading

0 comments on commit 971e954

Please sign in to comment.