gulp-csslit

1.0.1 • Public • Published

gulp-csslit Build Status Version

NPM

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

Package Sidebar

Install

npm i gulp-csslit

Weekly Downloads

0

Version

1.0.1

License

MIT

Unpacked Size

3.99 kB

Total Files

4

Last publish

Collaborators

  • kuscamara