Structured Query Style Sheet
Style your HTML with some good old SQL !
Try it in your browser!• Project homepage • NPM Package
![](/dthung1602/sqss/raw/master/docs/img/demo.png)
Why not?
After all Cascading Server Sheets is a real thing, you know.
-
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';`);
Distributed under the WTFPL License.
You just DO WHAT THE F*CK YOU WANT TO
Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (
git commit -m 'Add some AmazingFeature'
) - Push to the Branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
Duong Thanh Hung - [email protected]
Project Link: https://github.com/dthung1602/sqss