colingourlay / duet-csjs

Use CSJS with duet by passing CSS Modules-enabled stylesheets from the worker thread to the main thread which are injected into the document's head.

Home Page:https://www.npmjs.com/package/duet-csjs

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

duet-csjs

Use CSJS with duet by passing CSS Modules-enabled stylesheets from the worker thread to the main thread which are injected into the document's head.

$ npm install duet-csjs

Usage

var duet    = require('duet');
var channel = require('duet-csjs/channel');
var csjs    = require('duet-csjs');

var GREY = '#ccc';
var GREEN = '#3c3';

var styles = csjs`
    .button {
        display: inline-block;
        border-radius: 5px;
        background-color: ${GREY};
    }

    .sucess-button extends .button {
        background-color: ${GREEN};
    }
`;

duet([channel], function () {
    // styles were queued and sent once duet connected the channel
});

API

Please refer to the CSJS documentation. This plugin transparently wraps the existing API with a function that sends compiled styles from the worker thread to the main thread, where insert-css is used to insert them into the document's <head> as a <style> element.

Example

An example can be seen in the duet example app.

About

Use CSJS with duet by passing CSS Modules-enabled stylesheets from the worker thread to the main thread which are injected into the document's head.

https://www.npmjs.com/package/duet-csjs


Languages

Language:JavaScript 100.0%