cssinjs / jss

JSS is an authoring tool for CSS which uses JavaScript as a host language.
https://cssinjs.org
MIT License
7.08k stars 399 forks source link

Masterplan for ISTF support #679

Open kof opened 6 years ago

kof commented 6 years ago

We have been working on ISTF for quite some time. Now it is time to start using it in the core.

Note, that internal data structure and the way JSS works are still the same, we are just moving towards optional build-time preprocessing through ISTF pipeline and accepting universal ISTF format for cross-library compatibility.

Benefits (with babel plugin)

  1. User can remove following plugins from JSS setup at runtime: jss-camel-case, jss-nested, jss-props-sort, jss-compose, jss-global, jss-template. They are still needed for build time preprocessing, we just avoid overhead on the client at runtime and during server-side rendering.
  2. JSS can render ISTF styles produced by any other library, given they add support.
  3. Vendor prefixer (css-vendor) at runtime will become more robust and more feature complete.

Plan

Stage 1

  1. Write an ISTF transformation pipeline (separate package, takes ISTF, allows to hook in transformer functions, should work server and client -side)
  2. Make a plugin that accepts ISTF array as input and returns JSS Rules. Now core can handle ISTF.
  3. Generate some data, benchmark

Stage 2

  1. Write a converter from JSS Objects to ISTF (JSS can be used as a converter, instead of toString it needs toISTF)
  2. Write a babel plugin which uses that converter and replaces JSS Objects with ISTF at build time
kof commented 6 years ago

cc @kitten

oliviertassinari commented 6 years ago

This is going to be huge!