https://github.com/kitten/sweetsour

A CSS-in-JS parser and pipeline adhering to the ISTF spec 🍭
https://github.com/kitten/sweetsour

Last synced: 2 months ago
JSON representation

A CSS-in-JS parser and pipeline adhering to the ISTF spec 🍭

• Host: GitHub
• URL: https://github.com/kitten/sweetsour
• Owner: kitten
• License: mit
• Archived: true
• Created: 2017-10-17T19:58:04.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2020-09-04T18:21:25.000Z (over 4 years ago)
• Last Synced: 2024-07-31T07:18:35.321Z (5 months ago)
• Language: OCaml
• Homepage:
• Size: 1.5 MB
• Stars: 223
• Watchers: 10
• Forks: 4
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome - sweetsour - A CSS-in-JS parser and pipeline adhering to the ISTF spec 🍭 (OCaml)
• awesome-list - sweetsour - in-JS parser and pipeline adhering to the ISTF spec 🍭 | kitten | 222 | (OCaml)

README

        


  



Sweetsour



  A template string CSS parser and pipeline adhering to the ISTF spec 🍭






This is a reference implementation of a CSS (-in-JS) parser, accepting both CSS

strings and interpolations, and outputting ISTF, according to the

[ISTF specification](https://github.com/cssinjs/istf-spec).

## Status

**Work in Progress: Not ready for any use!**

- [x] Parser

- [ ] Transform tool with plugin support

- [ ] Reference Babel plugin

- [ ] Flattener for nested CSS (plugin)

- [ ] Static prefixer (plugin)

An up-to-date snapshot of the [ISTF specification](./docs/istf-spec-snapshot.md) is

committed to this repo to avoid confusion while the spec is still being tweaked and expanded.

More information on the progress of the parser can be found [here](./docs/STATUS.md).

## Motivation

The project aims to build a common and reusuable pipeline for processing CSS, including

interleaved interpolations, for CSS-in-JS libraries; This involves processing CSS-in-JS code,

turning it into ISTF, and to provide a pipeline to then transform this code during either

the build time (preprocessing), or runtime (postprocessing).

This will enable a couple of things. First of all, ISTF is easy to parse and can be targeted

by plugins, which means that language-level features can easily be implemented while not breaking

interpolations.

Second, all CSS is parsed, which means that the parser will raise an error, if something's wrong

with the code that's been written.

And lastly, ISTF is built to be very efficient and is, unlike ASTs, supposed to be processed during

the runtime, which basically means it's supposed to be fast and can be stringified very efficiently

back to CSS.

This makes CSS (-in-JS) more accessible for transformations and new features, and should make

the runtime a lot faster, since stringification is optimised and all transformations only have

to be run once.

[**More details about the motivation behind the project can be found in the Motivation doc**](./docs/motivation.md)

## Goals

The goals of Sweetsour include:

- Providing a common CSS-in-JS pipeline

- Enabling stable and fast preprocessing of CSS during buildtime

- Creating a parser able to parse CSS including interpolations

- Allowing optional runtime-only support i.e. using Sweetsour in the browser

As opposed to other projects which are fairly similar, like for instance PostCSS,

ISTF allows the parser to leave markers for interpolations (typically JS / Babel AST)

right inside of the rest of the CSS nodes.

The format also breaks CSS down even further than PostCSS, providing tokens for each

language feature like at rules, functions, values, attribute selectors, and more.

This is achieved by splitting the input up into individual characters and interleaving

them with the interpolation input.

The project will provide a few core parts:

- Parser

- Transform tool accepting plugins

- Static Prefixer (plugin)

- Flattener for nested CSS (plugin)

- Stringifier turning ISTF back into CSS