cssinjs / cssinjs/jss

Masterplan for ISTF support

Open
#679 2 comments 4 reactions 0 assignees View on GitHub
complexity:high important
Dominant language
JavaScript
Stars
7.1k
Forks
386
PR merge metrics
No merged PRs in 30d

Description

We have been working on [ISTF](https://github.com/cssinjs/istf-spec) 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.
1. JSS can render ISTF styles produced by any other library, given they add support.
1. 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)
1. Make a plugin that accepts ISTF array as input and returns JSS Rules. Now core can handle ISTF.
1. 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)
1. Write a babel plugin which uses that converter and replaces JSS Objects with ISTF at build time

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.