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)); }); - -