Performance issues

[milesj]

Describe the bug

Our performance is average but could be better. Most of the time is spent in the SSS parsing -> style rendering layer. Things we can maybe do to improve it:

• [x] At the moment, we wait for the entire parser to finish and return a "block" object, which is multiple iterations on the original object. We then pass it to the renderer, which then loops it again. Perhaps we can avoid this by rendering declarations immediately on the events the parser fires.
• [x] Finding the style tags in the document over and over is too slow. Let's cache and provide a reference.
• [x] Subsequent renders are slow (how?). They should be almost instant since the initial styles are rendered and cached. Something is a miss here.
• [x] processRule/renderRule taking the most time in the renderer.
• [x] renderComponentStyles also taking a lot of time. Perhaps we can cache this harder.
• [x] toTokens/toVariables needs to be improved. Find another way to generate these variables?

Screenshots

Environment

Platform: Web

System:
    OS: macOS 10.15.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 638.70 MB / 32.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.18.2 - ~/.nvm/versions/node/v12.18.2/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v12.18.2/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v12.18.2/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.7, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 23, 28, 29
      Build Tools: 28.0.3, 29.0.2, 29.0.3
      System Images: android-29 | Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom
  Browsers:
    Chrome: 85.0.4183.102
    Safari: 13.1.2
  npmPackages:
    @aesthetic/react: ^0.2.2 => 0.2.2 
    @anansi/eslint-plugin: ^0.9.6 => 0.9.6 
    @anansi/webpack-config: ^1.0.5 => 1.0.5 
    @babel/core: ^7.10.2 => 7.10.2 
    @babel/preset-react: ^7.10.1 => 7.10.1 
    @babel/preset-typescript: ^7.10.1 => 7.10.1 
    @babel/runtime: ^7.10.2 => 7.10.2 
    @callstack/react-theme-provider: ^2.1.0 => 2.1.0 
    @emotion/babel-preset-css-prop: ^10.0.27 => 10.0.27 
    @emotion/core: ^10.0.28 => 10.0.28 
    @emotion/styled: ^10.0.27 => 10.0.27 
    @hot-loader/react-dom: ^16.0.0 => 16.13.0+4.12.20 
    @reach/router: ^1.3.3 => 1.3.3 
    @types/mathjs: ^6.0.5 => 6.0.5 
    @types/node-sass: ^4.11.1 => 4.11.1 
    @types/reach__router: ^1.3.5 => 1.3.5 
    @types/react: ^16.9.36 => 16.9.36 
    @types/react-dom: ^16.9.8 => 16.9.8 
    @types/styled-components: ^5.1.0 => 5.1.0 
    @types/styled-jsx: ^2.2.8 => 2.2.8 
    aphrodite: ^2.4.0 => 2.4.0 
    classnames: ^2.2.6 => 2.2.6 
    cli-table: ^0.3.1 => 0.3.1 
    colors: ^1.4.0 => 1.4.0 
    css-loader: ^3.6.0 => 3.6.0 
    eslint: ^7.2.0 => 7.2.0 
    file-loader: ^6.0.0 => 6.0.0 
    linaria: ^2.0.0-alpha.5 => 2.0.0-alpha.5 
    mathjs: ^7.0.2 => 7.0.2 
    mini-css-extract-plugin: ^0.9.0 => 0.9.0 
    node-sass: ^4.14.1 => 4.14.1 
    patch-package: ^6.2.2 => 6.2.2 
    postinstall-postinstall: ^2.1.0 => 2.1.0 
    react: ^16.13.1 => 16.13.1 
    react-benchmark: ^2.1.1 => 2.1.1 
    react-dom: ^16.13.1 => 16.13.1 
    react-refresh: ^0.8.0 => 0.8.3 
    scheduler: ^0.19.1 => 0.19.1 
    serve: ^11.3.2 => 11.3.2 
    styled-components: ^5.1.1 => 5.1.1 
    styled-jsx: ^3.3.0 => 3.3.0 
    thread-loader: ^2.1.3 => 2.1.3 
    ts-loader: ^7.0.5 => 7.0.5 
    typescript: ^3.9.5 => 3.9.5 
    webpack: ^4.36.0 => 4.43.0 
    webpack-cli: ^3.3.11 => 3.3.11 
    webpack-dev-server: ^3.4.0 => 3.11.0 
    yargs: ^15.3.1 => 15.3.1 

Additional context

[milesj]

Increased perf by 3-4x by injecting styles WHILE parsing, instead of after.

parseAsBlock() x 3,096 ops/sec ±13.65% (41 runs sampled)
parseAsDeclaration() x 12,670 ops/sec ±8.38% (85 runs sampled)
Fastest is parseAsDeclaration()

[milesj]

Was able to drop renderComponentStyles from 2.6ms to 1.7ms (cold) and 0.6ms (hot). The cx() method still takes about 0.10ms on average, which seems weird.

[milesj]

Rendering speeds are now on par with Emotion https://github.com/aesthetic-suite/benchmarks/#react-api