Skip to content

Commit d27e0ef

Browse files
bennypowersbennypowers
authored
feat(parcel): add Parcel support (#71)
* feat(parcel): add Parcel support Closes #44 * style: lint * chore: update browserslist * fix(parcel): pass tests * style: lint * test: try to avoid flakiness * test: try to avoid flakiness * style: lint
1 parent 7422cd4 commit d27e0ef

31 files changed

Lines changed: 11528 additions & 3077 deletions

‎.changeset/sad-boats-tan.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
"parcel-transformer-lit-css": minor
3+
---
4+
5+
Add Parcel transformer for importing CSS files as Lit tagged template literals
6+
7+
This new package provides a Parcel transformer that converts CSS imports into Lit's `css` tagged template literals, enabling seamless CSS-in-JS workflow for Lit components in Parcel projects.
8+
9+
Features:
10+
- Transforms CSS files into Lit `css` tagged templates during Parcel builds
11+
- Supports configuration via package.json
12+
- Compatible with CSS preprocessors through custom transform functions
13+
- Leverages the core `@pwrs/lit-css` transform library
14+
- Works with Parcel 2.x

‎.eslintignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
packages/*/test/expected/**/*.js
22
packages/*/test/TSPC_OUTPUT/**/*.js
3+
packages/*/integration-test/**/*.js
34
packages/*/*.js
45
packages/*/*.cjs
56
packages/*/*.js.map

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,3 +112,4 @@ packages/*/*.cjs
112112
packages/*/*.js.map
113113
packages/*/*.cjs.map
114114
packages/*/*.d.ts
115+
.parcel-cache

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,5 @@ In the mean time, enjoy importing your CSS into your component files.
2727
- [esbuild](./packages/esbuild-plugin-lit-css)
2828
- [Webpack](./packages/lit-css-loader)
2929
- [Rollup](./packages/rollup-plugin-lit-css)
30+
- [Parcel](./packages/parcel-transformer-lit-css)
3031
- [TypeScript](./packages/typescript-transform-lit-css)

‎package-lock.json‎

Lines changed: 6758 additions & 3037 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@
2222
"lint": "eslint .",
2323
"test": "npm run build && tape 'packages/*/test/*.test.js' | tap-spec",
2424
"release": "npm run build && npm run test && npx changeset publish",
25-
"clean": "rimraf 'packages/*/*.{cjs,js,d.ts,js.map,cjs.map}'"
25+
"clean": "rimraf 'packages/*/*.{cjs,js,d.ts,js.map,cjs.map}'",
26+
"postinstall": "node scripts/setup-mock-packages.js"
2627
},
2728
"workspaces": [
2829
"packages/*",
@@ -33,6 +34,10 @@
3334
"@babel/preset-env": "^7.27.2",
3435
"@changesets/cli": "^2.29.4",
3536
"@microsoft/fast-element": "^2.3.0",
37+
"@parcel/config-default": "^2.16.0",
38+
"@parcel/core": "^2.16.0",
39+
"@parcel/plugin": "^2.16.0",
40+
"@parcel/transformer-sass": "^2.16.0",
3641
"@pwrs/eslint-config": "^0.0.26",
3742
"@rollup/plugin-alias": "^5.1.1",
3843
"@types/node": "^22.15.18",

‎packages/parcel-transformer-lit-css/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
*.tgz

‎packages/parcel-transformer-lit-css/README.md‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
# parcel-transformer-lit-css
2+
3+
Parcel transformer to import CSS files as Lit tagged template literals.
4+
5+
## Installation
6+
7+
```bash
8+
npm install --save-dev parcel-transformer-lit-css
9+
```
10+
11+
## Usage
12+
13+
Add the transformer to your `.parcelrc`:
14+
15+
```json
16+
{
17+
"extends": "@parcel/config-default",
18+
"transformers": {
19+
"*.css": ["parcel-transformer-lit-css"]
20+
}
21+
}
22+
```
23+
24+
Then import CSS files in your JavaScript/TypeScript code:
25+
26+
```javascript
27+
import { LitElement, html } from 'lit';
28+
import styles from './my-element.css';
29+
30+
export class MyElement extends LitElement {
31+
static styles = styles;
32+
33+
render() {
34+
return html`<h1>Hello World</h1>`;
35+
}
36+
}
37+
```
38+
39+
## Configuration
40+
41+
Options can be configured in your `package.json`:
42+
43+
```json
44+
{
45+
"lit-css": {
46+
"specifier": "@microsoft/fast-element",
47+
"tag": "css",
48+
"cssnano": true
49+
}
50+
}
51+
```
52+
53+
### Options
54+
55+
- `specifier` (string): The module to import the CSS tag from. Defaults to `'lit'`.
56+
- `tag` (string): The name of the CSS tag function. Defaults to `'css'`.
57+
- `cssnano` (boolean): Enable CSS minification. Defaults to `false`.
58+
59+
## Example
60+
61+
### Input (`styles.css`)
62+
63+
```css
64+
:host {
65+
display: block;
66+
padding: 16px;
67+
}
68+
69+
h1 {
70+
color: hotpink;
71+
}
72+
```
73+
74+
### Output (JavaScript)
75+
76+
```javascript
77+
import { css } from "lit";
78+
const styles = css`:host {
79+
display: block;
80+
padding: 16px;
81+
}
82+
83+
h1 {
84+
color: hotpink;
85+
}
86+
`;
87+
export {
88+
styles as default,
89+
styles
90+
};
91+
```
92+
93+
## Preprocessors
94+
95+
You can use CSS preprocessors by chaining Parcel's preprocessor transformers before this transformer in your `.parcelrc`:
96+
97+
```json
98+
{
99+
"extends": "@parcel/config-default",
100+
"transformers": {
101+
"*.scss": ["@parcel/transformer-sass", "parcel-transformer-lit-css"]
102+
}
103+
}
104+
```
105+
106+
Make sure to install the preprocessor transformer:
107+
108+
```bash
109+
npm install --save-dev @parcel/transformer-sass
110+
```
111+
112+
This works with any Parcel transformer, including PostCSS, Less, and Stylus.
113+
114+
## License
115+
116+
ISC

‎packages/parcel-transformer-lit-css/integration-test/.parcelrc‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"extends": "@parcel/config-default",
3+
"transformers": {
4+
"*.css": ["parcel-transformer-lit-css"]
5+
}
6+
}

‎packages/parcel-transformer-lit-css/integration-test/README.md‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
# Parcel Transformer Integration Test
2+
3+
This directory contains an integration test that verifies the parcel-transformer-lit-css works correctly with real Parcel builds.
4+
5+
## Purpose
6+
7+
This integration test serves as proof that the transformer:
8+
- Correctly transforms CSS imports into Lit's `css` tagged template literals
9+
- Works with Parcel's build process
10+
- Produces valid bundled output
11+
- Handles the transformation properly in both dev and build modes
12+
13+
## Running the Integration Test
14+
15+
### Prerequisites
16+
17+
Before running the integration test, you need to pack the transformer package:
18+
19+
```bash
20+
cd .. # Go to parcel-transformer-lit-css directory
21+
npm pack
22+
cd integration-test
23+
```
24+
25+
This creates a `.tgz` file that the integration test can install (avoiding TypeScript source file issues).
26+
27+
### Build Mode
28+
29+
```bash
30+
npm install
31+
npm run build
32+
```
33+
34+
This will build the test application and output to `dist/`.
35+
36+
### Dev Server Mode
37+
38+
```bash
39+
npm install
40+
npm run dev
41+
```
42+
43+
This will start the Parcel dev server at `http://localhost:1234/`. Open the URL in your browser to see the component rendered with the transformed CSS.
44+
45+
## Verification
46+
47+
After building, check that:
48+
1. The build completes without errors
49+
2. The output file `dist/integration-test.*.js` contains the CSS imported from `styles.css` as a `css` tagged template literal
50+
3. The styles are properly assigned to the component's `static styles` property
51+
4. The hotpink color is applied to the h1 element
52+
53+
You can verify the transformation by searching for the CSS in the bundle:
54+
55+
```bash
56+
grep "color.*hotpink" dist/*.js
57+
```
58+
59+
## Why an Integration Test?
60+
61+
The transformer works by converting CSS files into JavaScript modules during Parcel's transform phase. An integration test with actual Parcel builds provides confidence that the transformer works in real-world scenarios.
62+
63+
Unlike unit tests that expect plain ES module output, Parcel bundles everything with its module runtime. This integration test verifies that despite Parcel's bundling, the CSS transformation works correctly and the styles are properly applied to Lit components.

0 commit comments

Comments
 (0)