@dthung1602/sqss NPM

What is this?

But why?

Why not?

After all Cascading Server Sheets is a real thing, you know.

Getting Started

For all supported features, see examples.md or the Online Documentation
To try SQSS in browser visit playground page
To include the transpiler on your website, add the following line:

<!-- To use the latest version-->
<script src="https://unpkg.com/@dthung1602/sqss/dist/bundle/index.js"></script>

<!-- Or to specify a version -->
<script src="https://unpkg.com/@dthung1602/sqss@<version go here>/dist/bundle/index.js"></script>

<!-- `transpileSQSSToCSS` is now available in your global scope!-->
<!-- To add style to your website, use the following snippet-->
<script>
   const sqlString = `
        -- All of your styles go here
        UPDATE styles
        SET "background" = 'blue'
        WHERE class = 'target';
   `;
   
   const cssString = transpileSQSSToCSS(sqlString);
   document.head.innerHTML += `<style>${cssString}</style>`;
</script>

Or you can install from npm:

$ npm i @dthung1602/sqss
# or yarn
$ yarn add @dthung1602/sqss

To use it in your project, call the transpile function in your build script:

const sqss = require("@dthung1602/sqss");
const fs = require("fs");

const sqlString = fs.readFileSync("path/to/your/stylesheet.sql", "utf-8");
const cssString = sqss.transpileSQSSToCSS(sqlString);

fs.writeFileSync("path/to/your/build/folder/output.css", cssString);

TypeScript is supported

import { transpileSQSSToCSS } from "@dthung1602/sqss";
const css: string = transpileSQSSToCSS(`UPDATE styles SET color = 'blue' where id = 'target';`);