diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index cbe8d5e..7e806c3 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -29,7 +29,7 @@ jobs:
node-version: ${{ matrix.node-version }}
- run: npm ci
- run: npm run build --if-present
-# - run: npm test
+ - run: npm test
publish:
if: ${{ github.ref == 'refs/heads/main' }}
diff --git a/README.md b/README.md
index 2f9250d..32cafb6 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
# rollup-plugin-lit-tailwindcss
```js
-import litTw from 'rollup-plugin-lit-tailwindcss';
+import litTailwind from 'rollup-plugin-lit-tailwindcss';
export default {
input: 'src/index.ts',
@@ -9,33 +9,36 @@ export default {
dir: 'dist',
},
plugins: [
- litTw({
+ litTailwind({
include: 'src/components/**/*.ts',
placeholder: 'tw_placeholder',
+ placeholder: undefined,
}),
],
};
```
-lit component
+Then in `lit` component file:
```ts
import { html, css, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
-@customElement('simple-component')
+@customElement('simple-footer')
export class SimpleComponent extends LitElement {
- static styles = css`tw_placeholder`;
+ static styles = css`tw_placeholder`; // 👈 classes will be injected here
render() {
- return html`
Hello, world!
`;
+ return html`
+ Hello, world!
+
`;
}
}
```
-## Todos
-
+## Todo
- is this performant???
-- tailwind separator (`_` to default one `:`)
- read tailwind config, styles.css?
- ...
diff --git a/src/index.js b/src/index.js
index 7cbf724..3717c7e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,13 +4,13 @@ import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';
function postcssTw(purgeFile) {
- const processors = [
+ const plugins = [
tailwindcss({
config: { mode: 'jit', purge: [purgeFile], separator: ':' },
}),
autoprefixer,
];
- return postcss(processors).process('@tailwind utilities;', {
+ return postcss(plugins).process('@tailwind utilities;', {
from: undefined,
to: undefined,
});
@@ -33,16 +33,16 @@ export default function litTailwindcss(options = defaultOptions) {
transform(code, id) {
if (!filter(id)) return;
-
if (code.includes(options.placeholder)) {
- return postcssTw(id).then((result) =>
- result.css
- ? code.replace(
- options.placeholder,
- result.css.replaceAll(':', '\\:'),
- )
- : null,
- );
+ return postcssTw(id).then((result) => {
+ if (result.css) {
+ return code.replace(
+ options.placeholder,
+ result.css.replaceAll(':', '\\:'),
+ );
+ }
+ return null;
+ });
}
return null;
},
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..7b4c637
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,12 @@
+// dev only
+module.exports = {
+ purge: [],
+ darkMode: false, // or 'media' or 'class'
+ theme: {
+ extend: {},
+ },
+ variants: {
+ extend: {},
+ },
+ plugins: [],
+}
diff --git a/test/test.js b/test/test.js
index 35e327d..c33c25a 100644
--- a/test/test.js
+++ b/test/test.js
@@ -1,7 +1,7 @@
const test = require('ava');
const rollup = require('rollup');
const { getCode } = require('../helpers');
-const litTw = require('..');
+const litTailwindcss = require('..');
process.chdir(__dirname);
@@ -9,7 +9,7 @@ test('processes lit component', async (t) => {
const bundle = await rollup.rollup({
input: 'fixtures/component.js',
plugins: [
- litTw({
+ litTailwindcss({
include: 'fixtures/component.js',
placeholder: 'tw_placeholder',
}),
@@ -18,5 +18,3 @@ test('processes lit component', async (t) => {
t.snapshot(await getCode(bundle));
});
-
-