Skip to content

Commit f079352

Browse files
prantlfprantlf
committed
Initial commit
0 parents  commit f079352

20 files changed

+2062
-0
lines changed

‎.denolint.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"rules": {
3+
"tags": ["recommended"]
4+
}
5+
}

‎.editorconfig

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# editorconfig.org
2+
root = true
3+
4+
[*]
5+
indent_style = space
6+
indent_size = 2
7+
end_of_line = lf
8+
charset = utf-8
9+
trim_trailing_whitespace = true
10+
insert_final_newline = true

‎.github/workflows/ci.yml

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
name: Test or Release
2+
3+
on:
4+
- push
5+
- pull_request
6+
7+
jobs:
8+
test-or-release:
9+
runs-on: ubuntu-latest
10+
steps:
11+
- name: Checkout Sources
12+
uses: actions/checkout@v2
13+
- name: Install Node
14+
uses: actions/setup-node@v2
15+
with:
16+
node-version: 'lts/*'
17+
registry-url: 'https://registry.npmjs.org'
18+
- name: Install PNPM
19+
uses: pnpm/action-setup@v2
20+
with:
21+
version: '>=6'
22+
run_install: |
23+
- args: [--frozen-lockfile, --no-verify-store-integrity]
24+
- name: Test
25+
run: npm test
26+
- name: Coverage
27+
uses: codecov/codecov-action@v2
28+
- name: Publish
29+
uses: cycjimmy/semantic-release-action@v2
30+
with:
31+
semantic_version: 18
32+
branches: master
33+
env:
34+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
35+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

‎.gitignore

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.DS_Store
2+
*.log
3+
*.map
4+
coverage
5+
/lib/index.cjs
6+
node_modules

‎.vscode/launch.json

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
// Pro informace o možných atributech použijte technologii IntelliSense.
3+
// Umístěním ukazatele myši zobrazíte popisy existujících atributů.
4+
// Další informace najdete tady: https://go.microsoft.com/fwlink/?linkid=830387
5+
"version": "0.2.0",
6+
"configurations": [
7+
{
8+
"name": "test",
9+
"type": "pwa-node",
10+
"request": "launch",
11+
"program": "${workspaceFolder}/test/index.js",
12+
"skipFiles": [
13+
"<node_internals>/**"
14+
]
15+
}
16+
]
17+
}

‎.vscode/settings.json

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"files.exclude": {
3+
"**/.git": true,
4+
"**/.DS_Store": true,
5+
"**/*.map": true,
6+
"**/coverage": true
7+
},
8+
"search.exclude": {
9+
"**/*.log": true,
10+
"**/node_modules": true,
11+
"pnpm-lock.yaml": true
12+
}
13+
}

‎CHANGELOG.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# 1.0.0 (2022-05-16)
2+
3+
Initial release

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2022 Ferdinand Prantl
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

Lines changed: 225 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
# rollup-plugin-css-lit
2+
3+
[![Latest version](https://img.shields.io/npm/v/rollup-plugin-css-lit)
4+
![Dependency status](https://img.shields.io/librariesio/release/npm/rollup-plugin-css-lit)
5+
](https://www.npmjs.com/package/rollup-plugin-css-lit)
6+
[![Coverage](https://codecov.io/gh/prantlf/rollup-plugin-css-lit/branch/master/graph/badge.svg)](https://codecov.io/gh/prantlf/rollup-plugin-css-lit)
7+
8+
[Rollup] plugin for importing CSS sources as constructable stylesheets to projects using [lit] ([lit-html] and [lit-element]) or [fast-element].
9+
10+
Faster than the combination of [rollup-plugin-styles] and [rollup-plugin-lit-css]. Supports minifying by [cssnano], inlining by [postcss-import] and [postcss-ulrl] or fully customisable transformations of the CSS input by [PostCSS].
11+
12+
## Synopsis
13+
14+
Custom element:
15+
16+
```js
17+
import { LitElement } from 'lit';
18+
import styles from './styles.css'
19+
20+
class MyElement extends LitElement {
21+
static styles = styles
22+
// the rest of the implementation
23+
}
24+
```
25+
26+
Build configuration:
27+
28+
```js
29+
import { litCss } from 'rollup-plugin-css-lit'
30+
31+
export default {
32+
plugins: [
33+
litCss({ minify: process.env.NODE_ENV === 'production' }),
34+
]
35+
// the rest of the configuration
36+
}
37+
```
38+
39+
Make sure that you use [Node.js] 14 or newer and [Rollup] 2 or newer. Use your favourite package manager - [NPM], [PNPM] or [Yarn]:
40+
41+
## Installation
42+
43+
Make sure that you use [Node.js] 14 or newer and [Rollup] 2 or newer. Use your favourite package manager - [NPM], [PNPM] or [Yarn]:
44+
45+
```sh
46+
npm i -D rollup-plugin-css-lit
47+
pnpm i -D rollup-plugin-css-lit
48+
yarn add -D rollup-plugin-css-lit
49+
```
50+
51+
## Usage
52+
53+
Create a `rollup.config.js` [configuration file] and import the plugin:
54+
55+
```js
56+
import { litCss } from 'rollup-plugin-css-lit'
57+
58+
export default {
59+
input: 'src/index.js',
60+
output: { file: 'dist/main.js', format: 'iife', sourcemap: true },
61+
plugins: [
62+
litCss({
63+
minify: process.env.NODE_ENV === 'production',
64+
inline: { assets: {} }
65+
})
66+
]
67+
}
68+
```
69+
70+
Then call `rollup` either via the [command-line] or [programmatically].
71+
72+
## Options
73+
74+
The following options can be passed in an object to the plugin function to change the default values.
75+
76+
### `include`
77+
78+
Type: `Array<String>`<br>
79+
Default: `['**/*.css']`
80+
81+
[Pattern] to match files which will be processed by the plugin.
82+
83+
### `exclude`
84+
85+
Type: `Array<String>`<br>
86+
Default: `[]`
87+
88+
[Pattern] to match files which will be ignored by the plugin.
89+
90+
### `options`
91+
92+
Type: `Object`<br>
93+
Default: `undefined`
94+
95+
Options for the Sass compiler. Use any [options] supported by the [compileString] method from the Sass package.
96+
97+
### `minify`
98+
99+
Type: `Boolean | Object`<br>
100+
Default: `false`
101+
102+
Enables minifying of the transformed CSS output. If an object is specified, it will be passed to the [cssnano] plugin.
103+
104+
### `inline`
105+
106+
Type: `Boolean | Object`<br>
107+
Default: `false`
108+
109+
Enables inlining of stylesheets and other assets. If an object is specified, it will have to include two properties pointing to objects: `{ stylesheets, assets }`. The `stylesheets` objects will be passed to the [postcss-import] plugin. The `assets` objects will be passed to the [postcss-url] plugin.
110+
111+
### `plugins`
112+
113+
Type: `Array<Object>`<br>
114+
Default: `undefined`
115+
116+
An array of [PostCSS] plugins to fully customise the transformation of the CSS input.
117+
118+
### `tag`
119+
120+
Type: `String`<br>
121+
Default: `'css'`
122+
123+
The tag used for the tagged template literal exported from the generated module. Use `'css'` (default) with both `lit-html` and `fast-element`.
124+
125+
```js
126+
export default css`...`
127+
```
128+
129+
### `specifier`
130+
131+
Type: `String`<br>
132+
Default: `'lit'`
133+
134+
The import specifier used in the imnport declaration of the tag above. Use `'lit'` (default) with `lit-html` and `'@microsoft/fast-element'` with `fast-element`.
135+
136+
```js
137+
import { css } from 'lit'
138+
```
139+
140+
```js
141+
import { css } from '@microsoft/fast-element'
142+
```
143+
144+
## How It Works
145+
146+
Let us have a stylesheet called `src/styles.css`:
147+
148+
```css
149+
:host { display: block }
150+
```
151+
152+
And import it for a custom element in `src/index.js`:
153+
154+
```js
155+
import { LitElement } from 'lit';
156+
import styles from './styles.css'
157+
158+
class MyElement extends LitElement {
159+
static styles = styles
160+
// the rest of the implementation
161+
}
162+
```
163+
164+
The stylesheet will be converted to the following script on-the-fly during the build and bundled into `dist/browser.js`:
165+
166+
```js
167+
import { css } from 'lit'
168+
export default css`:host { display: block }`
169+
```
170+
171+
### Optimisation
172+
173+
Before converting to the tagged template literal, the CSS output can be optimised by [PostCSS]. The minifying is performed by the [cssnano] plugin. Inlining of other stylesheets imported by the `@import` directives is performed by the [postcss-import] plugin. Inlining of other assets like pictures referred to by absolute or relative URLs is performed by the [postcss-url] plugin. If an error occurs during the transformation, the whole bundling operation will fail, using the [postcss-fail-on-warn] plugin.
174+
175+
Passing a booleans to the `litCss` plugin - `{ minify: true, inline: true }` - will use the defaults. You can override them by passing an object instead of `true`:
176+
177+
```js
178+
{
179+
minify: {
180+
preset: ['default', { discardComments: { removeAll: true } }]
181+
},
182+
inline: {
183+
stylesheets: {},
184+
assets: { url: 'inline' }
185+
}
186+
}
187+
```
188+
189+
Pass [options for cssnano] to `minify`, [options for postcss-import] to `inline.stylesheets` and [options for postcss-url] to `inline.assets`.
190+
191+
## Contributing
192+
193+
In lieu of a formal styleguide, take care to maintain the existing coding style. Lint and test your code.
194+
195+
## License
196+
197+
Copyright (C) 2022 Ferdinand Prantl
198+
199+
Licensed under the [MIT License].
200+
201+
[MIT License]: http://en.wikipedia.org/wiki/MIT_License
202+
[Rollup]: https://rollupjs.org/
203+
[Node.js]: https://nodejs.org/
204+
[NPM]: https://www.npmjs.com/
205+
[PNPM]: https://pnpm.io/
206+
[Yarn]: https://yarnpkg.com/
207+
[configuration file]: https://www.rollupjs.org/guide/en/#configuration-files
208+
[command-line]: https://www.rollupjs.org/guide/en/#command-line-reference
209+
[programmatically]: https://www.rollupjs.org/guide/en/#javascript-api
210+
[Pattern]: https://www.linuxjournal.com/content/bash-extended-globbing
211+
[PostCSS]: https://postcss.org/
212+
[cssnano]: https://cssnano.co/
213+
[postcss-import]: https://www.npmjs.com/package/postcss-import
214+
[postcss-url]: https://www.npmjs.com/package/postcss-url
215+
[postcss-fail-on-warn]: https://www.npmjs.com/package/postcss-fail-on-warn
216+
[options supported by PostCSS for source maps]: https://postcss.org/api/#sourcemapoptions
217+
[options for cssnano]: https://cssnano.co/docs/config-file/
218+
[options for postcss-import]: https://github.com/postcss/postcss-import#options
219+
[options for postcss-url]: https://github.com/postcss/postcss-url#options-combinations
220+
[lit]: https://lit.dev/
221+
[lit-html]: https://lit.dev/docs/components/styles/
222+
[lit-element]: https://lit.dev/docs/api/LitElement/
223+
[fast-element]: https://www.fast.design/docs/fast-element/leveraging-css/
224+
[rollup-plugin-styles]: https://www.npmjs.com/package/rollup-plugin-styles
225+
[rollup-plugin-lit-css]: https://www.npmjs.com/package/rollup-plugin-lit-css

‎lib/css-to-module.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import escapeTaggedTemplate from './escape-tag-template.js'
2+
3+
export default function cssToModule(css, tag, specifier) {
4+
return `import { ${tag} } from '${specifier}';
5+
export default ${tag}\`${escapeTaggedTemplate(css)}\`;`
6+
}

‎lib/error.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export default function handleError({ message, reason, column, line }) {
2+
if (reason) {
3+
this.error(reason,{ column, line })
4+
/* c8 ignore next 3 */
5+
} else {
6+
this.error(message)
7+
}
8+
}

‎lib/escape-tag-template.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default function escapeTaggedTemplate(source) {
2+
return source
3+
.replaceAll('\\', '\\\\')
4+
.replaceAll('`', '\\`')
5+
.replaceAll('$', '\\$')
6+
}

0 commit comments

Comments
 (0)