Skip to content

Instantly share code, notes, and snippets.

@sarsamurmu
Created November 5, 2020 10:00
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save sarsamurmu/b394574236d27079e5f8f0369b614248 to your computer and use it in GitHub Desktop.
Save sarsamurmu/b394574236d27079e5f8f0369b614248 to your computer and use it in GitHub Desktop.
Lit CSS Plugin Snippet for Reboost JS
<html>
<head>
<script type="module" src="./build.js"></script>
</head>
<body>
<my-element></my-element>
</body>
</html>
import { LitElement, customElement, css, html } from 'lit-element';
import style from './styles.lit.css';
@customElement('my-element')
export class MyElement extends LitElement {
static get styles() {
return [style];
}
render() {
return html`
<span class="main">Lit Element</span>
`
}
}
module.exports = () => /** @type import('reboost').ReboostPlugin */ ({
name: 'lit-css-plugin',
transformContent({ code, type }) {
if (type === 'css') {
return {
code: `
import { css } from 'lit-element';
const cssString = ${JSON.stringify(code)};
export default css\`${code.replace(/(`|\\|\${)/g, '\\$1')}\`;
export { cssString as css }
`,
type: 'js'
}
}
}
});
const { start, builtInPlugins: { UsePlugin } } = require('reboost');
const LitCSSPlugin = require('./lit-css-plugin');
start({
entries: [['./index.js', './build.js']],
contentServer: { root: './public' },
plugins: [
UsePlugin({
include: '**/*.lit.css',
use: LitCSSPlugin()
})
]
});
.main {
font-family: sans-serif;
font-size: x-large;
background-color: rgb(248, 33, 115);
color: white;
padding: 10px;
display: inline-block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment