Skip to content

Commit

Permalink
feat: use default tailwind separator ":"
Browse files Browse the repository at this point in the history
  • Loading branch information
mcha committed Jun 13, 2021
1 parent 42b3ae2 commit 3e0e90f
Show file tree
Hide file tree
Showing 5 changed files with 38 additions and 25 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/publish.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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' }}
Expand Down
21 changes: 12 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,41 +1,44 @@
# 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',
output: {
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`<h1 class="text-purple-400 hover_text-green-500">Hello, world!</h1>`;
return html`<h1
class="text-purple-400 md:text-red-400 md:hover:text-green-500"
>
Hello, world!
</h1>`;
}
}
```

## Todos

## Todo
- is this performant???
- tailwind separator (`_` to default one `:`)
- read tailwind config, styles.css?
- ...
22 changes: 11 additions & 11 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});
Expand All @@ -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;
},
Expand Down
12 changes: 12 additions & 0 deletions tailwind.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
// dev only
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
6 changes: 2 additions & 4 deletions test/test.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
const test = require('ava');
const rollup = require('rollup');
const { getCode } = require('../helpers');
const litTw = require('..');
const litTailwindcss = require('..');

process.chdir(__dirname);

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',
}),
Expand All @@ -18,5 +18,3 @@ test('processes lit component', async (t) => {

t.snapshot(await getCode(bundle));
});


0 comments on commit 3e0e90f

Please sign in to comment.