sqss-loader

A webpack loader for Structured Query Style Sheets. Because who doesn't want to use SQL to style their websites?

Getting Started

npm install --save style-loader css-loader @dthung1602/sqss @sarahisweird/sqss-loader

Please refer to the SQSS documentation on how to use SQSS.

You also need to add the loader to your webpack config:

module.exports = {
    module: {
        rules: [
            {
                test: /\.sql$/i,
                use: [ 'style-loader', 'css-loader', '@sarahisweird/sqss-loader' ],
            },
        ],
    },
};

Example

-- style.sql

UPDATE styles
    SET "background" = 'blue',
        "color" = 'white'
    WHERE id = 'root';

// index.js

import './style.sql';

const root = () => {
    const element = document.createElement('div');
    
    element.id = 'root';
    element.innerText = 'I <3 SQL';
    
    return element;
};

document.body.appendChild(root());

License

Distributed under the WTFPL license. See http://wtfpl.net/about/ for more details.