Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dthung1602/sqss
Style your HTML with some good old SQL
https://github.com/dthung1602/sqss
css parser sql transpiler
Last synced: 5 days ago
JSON representation
Style your HTML with some good old SQL
- Host: GitHub
- URL: https://github.com/dthung1602/sqss
- Owner: dthung1602
- License: wtfpl
- Created: 2022-06-12T08:11:13.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-09-06T14:22:38.000Z (about 2 years ago)
- Last Synced: 2024-11-04T04:05:21.860Z (11 days ago)
- Topics: css, parser, sql, transpiler
- Language: TypeScript
- Homepage: https://dthung1602.github.io/sqss/
- Size: 672 KB
- Stars: 31
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![WTFPL License][license-shield]][license-url]
[![NPM][npm-shield]][npm-url]
[![TypeScript][typescript-shield]][npm-url]
## What is this?
Structured Query Style Sheet
Style your HTML with some good old SQL !
Try it in your browser!
• Project homepage
•
NPM Package
## But why?
Why not?
After all [Cascading Server Sheets](https://dev.to/thormeier/dont-try-this-at-home-css-as-the-backend-what-3oih) is a
real thing, you know.
## Getting Started
- For all supported features, see [examples.md](https://github.com/dthung1602/sqss/blob/master/example.md) or the
[Online Documentation](https://dthung1602.github.io/sqss/documentation.html#supported-features)
- To try SQSS in browser visit [playground page](https://dthung1602.github.io/sqss/playground.html)
- To include the transpiler on your website, add the following line:
```html
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>`;
```
- Or you can install from `npm`:
```bash
$ npm i @dthung1602/sqss
# or yarn
$ yarn add @dthung1602/sqss
```
- To use it in your project, call the transpile function in your build script:
```js
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**
```ts
import { transpileSQSSToCSS } from "@dthung1602/sqss";
const css: string = transpileSQSSToCSS(`UPDATE styles SET color = 'blue' where id = 'target';`);
```
## License
Distributed under the WTFPL License.
**You just DO WHAT THE F*CK YOU WANT TO**
## Contributing
Any contributions you make are greatly appreciated.
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## Contact
Duong Thanh Hung - [[email protected]](mailto:[email protected])
Project Link: [https://github.com/dthung1602/sqss](https://github.com/dthung1602/sqss)
## Acknowledgements
* [Cascading Server Sheets](https://dev.to/thormeier/dont-try-this-at-home-css-as-the-backend-what-3oih)
* [IaSQL](https://iasql.com/)
* [Introduction to Compilers and Language Design](https://www3.nd.edu/~dthain/compilerbook/)
* [SMBC Comics](https://www.smbc-comics.com/comic/qc)
* [Font awesome](https://fontawesome.com/icons)
* [Color hunt](https://colorhunt.co)
* [Ace editor](https://ace.c9.io/)
* [Highlight js](https://highlightjs.org/)
* [Img Shields](https://shields.io)
* [Best README template](https://github.com/othneildrew/Best-README-Template)
[contributors-shield]: https://img.shields.io/github/contributors/dthung1602/sqss.svg?style=flat-square
[contributors-url]: https://github.com/dthung1602/sqss/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/dthung1602/sqss.svg?style=flat-square
[forks-url]: https://github.com/dthung1602/sqss/network/members
[stars-shield]: https://img.shields.io/github/stars/dthung1602/sqss.svg?style=flat-square
[stars-url]: https://github.com/dthung1602/sqss/stargazers
[issues-shield]: https://img.shields.io/github/issues/dthung1602/sqss.svg?style=flat-square
[issues-url]: https://github.com/dthung1602/sqss/issues
[license-shield]: https://img.shields.io/github/license/dthung1602/sqss.svg?style=flat-square
[license-url]: https://github.com/dthung1602/sqss/blob/master/LICENSE
[typescript-shield]: https://img.shields.io/npm/types/@dthung1602/sqss?style=flat-square
[npm-url]: https://www.npmjs.com/package/@dthung1602/sqss
[npm-shield]: https://img.shields.io/npm/v/@dthung1602/sqss?style=flat-square
