gulp-csslit

Writes CSS contents into a JavaScript file ready to be imported by a LitElement component.

Install

$ npm i -D gulp-csslit

Usage

Note: use gulp-rename or a similar plugin to change the file name or extension.

const gulp = require('gulp');
const csslit = require('gulp-csslit');
const rename = require('gulp-rename');

gulp.task('styles', () => {
  return gulp.src('styles.css')
    .pipe(csslit())
    .pipe(rename({
      extname: '.js'
    }))
    .pipe(gulp.dest('dist'));
});

Output

The generated file exports a styles property.

import {css} from 'lit-element';
export const styles = css`
  /* your styles */
`;

Import and use it

import {html, css, LitElement} from 'lit-element';
import {styles} from './styles.js';

class MyComponent extends LitElement {
  static get styles() {
    return css`${styles}`;
  }
}

License

MIT License