Hover and focus class definitions get missplaced. #26
Description
An element which uses a tailwind focus or hover selector, will get it's css definition missplaced outside the css template literal.
e.g.
Input
export class MyElement extends LitElement {
static styles = css`
@tailwind base;
@tailwind components;
@tailwind utilities;
`;
render() {
return html`
<button class="hover:bg-gray-700" type="submit">
Submit
</button>
`;
}
}
customElements.define('my-element', MyElement);
Output
export class MyElement extends LitElement {
static styles = css`
/* ! tailwindcss v3.0.16 | MIT License | https://tailwindcss.com */
*,
::before,
::after{
box-sizing:border-box;
border-width:0;
border-style:solid;
border-color:#e5e7eb;
}
.
.
.
*, ::before, ::after{
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
.static{
position:static;
}
`;
render() {
return html`
<button class="hover:bg-gray-700" type="submit">
Submit
</button>
`;
}
}
customElements.define('my-element', MyElement);.hover\:bg-gray-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity))
}
postcss.config.js
module.exports = {
syntax: 'postcss-lit',
plugins: {
tailwindcss: {}
}
}
Error
Hover definition appears outside the css template literal.
customElements.define('my-element', MyElement);.hover\:bg-gray-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity))
}