live-cssedit

Live CSS Edit

Simple nodejs based development tool for instant css updates to browser on file save, for live reloads on css/sass/less changes.

Chrome Dev Workspace is great, but when you want to compile css from sass it gets complicated and much less useful.

This will set up server side events, where a tiny nodejs server will ping the browser once per css/sass/etc file change. Live-CSSEdit is designed to embed a small chunk of javascript into HTML files.

Much more efficient than the browser blindly reloading css files every second.

Importantly, this also handles Web Components and Shadow DOM, looking for linked css from however deeply nested custom elements.

Getting Started

live-cssedit is built to be used within a nodeJS server (regardless of framework).

Download the package:

npm i --save live-cssedit

Now, require it within your nodeJs based server. Then, however you handle your html files, simply call it with the html string before sending the response back.

const liveCSSEdit = require('live-cssedit')();

app.get(/index.html$/, (req, res) => {
	fs.readFile(__dirname + '/index.html', 'utf8', (err, htmlStr) => {
		res.setHeader('Content-Type', 'text/html');
		res.send(liveCSSEdit(htmlStr));
	});
});

Options

Options are set on call to liveCSSEdit's initialize function

Port

By default the server side events nodejs server will run on 3000. Set it to whatever you would like.

Watch Glob

By default watch (using chokidar) will use glob: ['./**/*.css']. You can set this to whatever you choose.

Below is a bit more extensive example that sets both port and glob. Also, it shows a basic rewrite directing all non file url requests to index.html (for single page apps, etc).

const LiveCSSEdit = require('live-cssedit');

var liveCSSEdit = LiveCSSEdit('3001', ['./dev/components/**/*.css']);

app.get(/^\/[^.]*$/, (req, res) => { 
	fs.readFile(__dirname + '/index.html', 'utf8', (err, htmlStr) => {
		res.setHeader('Content-Type', 'text/html');
		res.send(liveCSSEdit(htmlStr));
	});
});