update readme

Author: theKashey

README.md

@@ -31,7 +31,7 @@
   <br/>
 </div>
 
-👉 [Usage](#usage)  |  [API](#api)  | [SSR](#ssr)  |  [Concurrent loading](#concurrent-loading)  |  [Webpack/Parcel](#bundler-integration) 
+👉 [Usage](#usage)  |  [API](#api) | [Setup](#setup) | [SSR](#ssr)  | [CCS](#css) [Concurrent loading](#concurrent-loading)  |  [Webpack/Parcel](#bundler-integration) 
 
 
 Key features:
@@ -158,6 +158,8 @@ What you could load using `useImported`? Everything - `imported` itself is using
 
 > `useImported` is an excellent example for loading translations, which are usually a simple json, in a _trackable_ way.
 
+> 💡 did you know that there is another hook based solution to load _"something might might need"_? The [use-sidecar](https://github.com/theKashey/use-sidecar) pattern.
+
 <a name="api"/>
 
 # API
@@ -199,6 +201,8 @@ What you could load using `useImported`? Everything - `imported` itself is using
 - `rehydrateMarks([marks]):Promise`, loads _marked_ async chunks.
 - `injectLoadableTracker` - helper factory for the stream transformer
 
+<a name="setup"/>   
+   
 # Setup
 
 ## In short
@@ -238,6 +242,8 @@ If you need to search inside more that one top-level directory - just define mor
 
 > The current implementation will discover and use all `imports`, even // commented ones
 
+> 💡 Feel free to __.gitignore__ these autogenerated files
+
 ## 3. Start using `imported`, `lazy` or `useImported`
 Without you using API provided nothing would work.
 
@@ -305,7 +311,7 @@ thus all scripts, used to render something on the Server would be loaded in a pa
 Literally - they are defined in the HTML.
 `React-imported-component` is different, it starts "working" when the bundle is loaded, thus
 __the loading of chunks is deferred__. 
-> In the normals conditions `react-imported-component` would be "slower" than a "webpack" library.
+> 💡 In the normals conditions `react-imported-component` would be "slower" than a "webpack" library. Refer to bundle integration section.
 
 However, it is not a problem, as long as (for now), script execution is single threaded, and even you if can __load__ multiple scripts
 simultaneously - you can't __run__ them in parallel*.
@@ -374,7 +380,7 @@ const reactRenderStream = ReactDOM.renderToNodeStream(...).pipe(importedTracker)
 This "hack", will first introduce all possible `imports` to the `imported-component`, then gave it a "tick"
 to start loading required once, and only then execute the rest of the bundle.
 While the rest(99%) of the bundle would make CPU busy - chunks would be loaded over the network.
-> This is utilizing the differences between `parse`(unenviable) phase of script, and execute one.  
+> 💡This is utilizing the differences between `parse`(unenviable) phase of script, and execute(more expensive) one.  
 
 # Cooking receipts
 
@@ -405,30 +411,7 @@ const AsyncComponent = imported(() => import('./myComponent.js'));
   <AsyncComponent/>
 </PrerenderedComponent>
 ```
-React-prerendered-component is another way to work with code splitting, which makes everything far better.
-
-
-## CSS Support
-### CSS-in-JS Support
-First class. Literally CSS-in-JS library, like `styled-component` will do it by themselves, and there is nothing
-to be managed by this library
-
-### Static CSS Support
-This library __does not__ support CSS as CSS, as long it's bundler independent. However, there is 
-a bundler independent way to support CSS:
-1. Configure you bundler, and server side rendering to emit the right `classNames` (just remove `style-loader` from webpack configuration)
-2. Use `used-styles` to inject used __css files__ to the resulting HTML.
-
-In short (streamed example is NOT short)
-```js
-  const markup = ReactDOM.renderToString(<App />)
-  const usedStyles = getUsedStyles(markup, lookup);
-```
-
-If you need _stream render_ example with __reduced TTFB__, or critical style extraction - 
-please refer to [used-styles](https://github.com/theKashey/used-styles) documentation, or our [parcel-bundler stream server example](https://github.com/theKashey/react-imported-component/tree/master/examples/SSR/parcel-react-ssr/stream-server).
-
-> everything is possible
+`React-prerendered-component` is another way to work with code splitting, which makes everything far better.
 
 ## Timeout to display "spinners"   
 There is no build in timeouts to display Error or Loading states. You could control everything by yourself
@@ -454,6 +437,40 @@ const MyPage = () => (
 );
 ```
 
+<a name="css"/>
+
+## CSS Support
+### CSS-in-JS Support
+Out-of-the-box. Literally. CSS-in-JS library, like `styled-component` will do it by themselves, and there is nothing
+to be managed by this library.
+
+### Static CSS Files Support
+> `imported` could knew only about JS you've used, not the CSS that js've used...
+
+This library __does not__ support CSS as CSS, as long it's bundler independent and such deep integration is not possible.
+Even if [deep bundler integration](#bundler) is next following this section - the recomended solution is to skip `css` part of it, and use
+a more _bundler independent_ way to support CSS:
+
+1. Configure you bundler, and server side rendering to emit the right `classNames` (just remove `style-loader` from webpack configuration)
+2. Use `used-styles` to inject used __css files__ to the resulting HTML.
+
+In short (streamed example is NOT short)
+```js
+  const lookup = discoverProjectStyles('./dist');
+  // ....
+  const markup = ReactDOM.renderToString(<App />)
+  const usedStylesAsCSSFiles = getUsedStyles(markup, lookup);
+  // generate `link` (better rel='preload') to load CSS files
+  
+  const usedStylesAsStyles = getCriticalStyles(markup, lookup);
+  // extract critical CSS and inline in to the server response 
+```
+
+If you need _stream render_ example with __reduced TTFB__ - 
+please refer to [used-styles](https://github.com/theKashey/used-styles) documentation, or our [parcel-bundler stream server example](https://github.com/theKashey/react-imported-component/tree/master/examples/SSR/parcel-react-ssr/stream-server).
+
+<a name="bundler-integration"/>
+
 ## Bundler integration
 Keep in mind - you dont "need" this. It will just make integration slightly better in terms of prefetching (which affects network recourse priority) and thus startup time.
 
@@ -571,7 +588,9 @@ Another loaders exists, and the only difference is in API, and how they manage (
 * (webpack only) With [react-loadable](https://github.com/thejameskyle/react-loadable)
 * (not compatible with hooks) [react-async-component](https://github.com/ctrlplusb/react-async-component)   
 * (webpack only) [loadable-components](https://github.com/smooth-code/loadable-components)
-* (webpack only) [react-universal-component](https://github.com/faceyspacey/react-universal-component)  
+* (webpack only) [react-universal-component](https://github.com/faceyspacey/react-universal-component)
+
+* (not a component loader) [use-sidecar](https://github.com/theKashey/use-sidecar)  
 
 ## Licence
 MIT