docs: rename server rendering docs to critical css

README.md

@@ -13,7 +13,6 @@ Zero-runtime CSS in JS library.
 [![Version][version-badge]][package]
 [![MIT License][license-badge]][license]
 
-
 [![All Contributors][all-contributors-badge]](#contributors)
 [![PRs Welcome][prs-welcome-badge]][prs-welcome]
 [![Chat][chat-badge]][chat]
@@ -23,11 +22,11 @@ Zero-runtime CSS in JS library.
 
 ## Features
 
-* Write CSS in JS, but with **zero runtime**, CSS is extracted to CSS files during build
-* Familiar **CSS syntax** with Sass like nesting
-* Use **dynamic prop based styles** with the React bindings, uses CSS variables behind the scenes
-* Easily find where the style was defined with **CSS sourcemaps**
-* **Lint your CSS** in JS with [stylelint](https://github.com/stylelint/stylelint)
+- Write CSS in JS, but with **zero runtime**, CSS is extracted to CSS files during build
+- Familiar **CSS syntax** with Sass like nesting
+- Use **dynamic prop based styles** with the React bindings, uses CSS variables behind the scenes
+- Easily find where the style was defined with **CSS sourcemaps**
+- **Lint your CSS** in JS with [stylelint](https://github.com/stylelint/stylelint)
 
 **[Why use Linaria](/docs/BENEFITS.md)**
 
@@ -43,7 +42,7 @@ or
 yarn add linaria
 ```
 
-## Usage
+## Setup
 
 Linaria requires you to use a babel plugin along with a webpack loader.
 
@@ -76,7 +75,10 @@ module: {
           },
         },
         {
-          loader: 'babel-loader'
+          loader: 'babel-loader',
+          options: {
+            cacheDirectory: false,
+          }
         }
       ],
     },
@@ -109,13 +111,12 @@ Linaria integrates with your CSS pipeline, so you can always perform additional
 
 ## Syntax
 
-Linaria can be used with any framework, with additional helpers for `react`. The basic syntax looks like this:
+Linaria can be used with any framework, with additional helpers for React. The basic syntax looks like this:
 
 ```js
 import { css } from 'linaria';
 import { modularScale, hiDPI } from 'polished';
 import fonts from './fonts';
-import colors from './colors';
 
 // Write your styles in `css` tag
 const header = css`
@@ -124,34 +125,30 @@ const header = css`
   font-size: ${modularScale(2)};
 
   ${hiDPI(1.5)} {
-    font-size: ${modularScale(2.5)}
+    font-size: ${modularScale(2.5)};
   }
 `;
 
 // Then use it as a class name
-<h1 class={header}>Hello world</h1>
+<h1 class={header}>Hello world</h1>;
 ```
 
 You can use imported variables and functions for logic inside the CSS code. They will be evaluated at build time.
 
-If you're using React, you can use the `styled` helper, which makes it easy to write React components with dynamic styles with a styled-component like syntax:
+If you're using [React](https://reactjs.org/), you can use the `styled` helper, which makes it easy to write React components with dynamic styles with a styled-component like syntax:
 
 ```js
 import { styled } from 'linaria/react';
 import { families, sizes } from './fonts';
 
-const background = 'yellow';
-
 // Write your styles in `styled` tag
 const Title = styled.h1`
   font-family: ${families.serif};
 `;
 
 const Container = styled.div`
   font-size: ${sizes.medium}px;
-  background-color: ${background};
   color: ${props => props.color};
-  width: ${100 / 3}%;
   border: 1px solid red;
 
   &:hover {
@@ -166,31 +163,31 @@ const Container = styled.div`
 // Then use the resulting component
 <Container color="#333">
   <Title>Hello world</Title>
-</Container>
+</Container>;
 ```
 
 Dynamic styles will be applied using CSS custom properties (aka CSS variables) and don't require any runtime.
 
 ## Documentation
 
-* [API and usage](/docs/API.md)
-  * [Client APIs](/docs/API.md#client-apis)
-  * [Server APIs](/docs/API.md#server-apis)
-* [Configuring Babel](/docs/BABEL_PRESET.md)
-* [Dynamic styles with `css` tag](/docs/DYNAMIC_STYLES.md)
-* [Theming](/docs/THEMING.md)
-* [Server rendering](/docs/SERVER_RENDERING.md)
-* [Bundlers integration](/docs/BUNDLERS_INTEGRATION.md)
-  * [Webpack](/docs/BUNDLERS_INTEGRATION.md#webpack)
-* [Linting](/docs/LINTING.md)
-* [How it works](/docs/HOW_IT_WORKS.md)
-* [Example](/website)
+- [API and usage](/docs/API.md)
+  - [Client APIs](/docs/API.md#client-apis)
+  - [Server APIs](/docs/API.md#server-apis)
+- [Configuring Babel](/docs/BABEL_PRESET.md)
+- [Dynamic styles with `css` tag](/docs/DYNAMIC_STYLES.md)
+- [Theming](/docs/THEMING.md)
+- [Critical CSS extraction](/docs/CRITICAL_CSS.md)
+- [Bundlers integration](/docs/BUNDLERS_INTEGRATION.md)
+  - [Webpack](/docs/BUNDLERS_INTEGRATION.md#webpack)
+- [Linting](/docs/LINTING.md)
+- [How it works](/docs/HOW_IT_WORKS.md)
+- [Example](/website)
 
 ## Trade-offs
 
-* No IE11 support when using dynamic styles components since it uses CSS custom properties
-* Dynamic styles are not supported with `css` tag. See [Dynamic Styles](/docs/DYNAMIC_STYLES.md) for alternative approaches.
-* Modules used in the CSS rules cannot have side-effects.
+- No IE11 support when using dynamic styles in components with `styled`, since it uses CSS custom properties
+- Dynamic styles are not supported with `css` tag. See [Dynamic styles with `css` tag](/docs/DYNAMIC_STYLES.md) for alternative approaches.
+- Modules used in the CSS rules cannot have side-effects.
   For example:
 
   ```js
@@ -208,31 +205,32 @@ Dynamic styles will be applied using CSS custom properties (aka CSS variables) a
 
 ### VSCode
 
-* Syntax Highlighting - [Styled Components Plugin](https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components)
-* Autocompletion - [Styled Components Plugin](https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components)
+- Syntax Highlighting and autocompletion - [styled-components plugin](https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components)
+- Linting - [stylelint plugin](https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint)
 
 ### Atom
 
-* Syntax Highlighting - [Babel Grammar](https://atom.io/packages/language-babel)
+- Syntax Highlighting and autocompletion - [babel grammar](https://atom.io/packages/language-babel)
 
 ## Recommended Libraries
 
-* [linaria-jest](https://github.com/thymikee/linaria-jest) – Jest testing utilities for Linaria.
-* [babel-plugin-object-styles-to-template](https://github.com/satya164/babel-plugin-object-styles-to-template) - Babel plugin to write styles in object syntax with linaria
-* [polished.js](https://polished.js.org/) - A lightweight toolset for writing styles in JavaScript.
+- [linaria-jest](https://github.com/thymikee/linaria-jest) – Jest testing utilities for Linaria.
+- [babel-plugin-object-styles-to-template](https://github.com/satya164/babel-plugin-object-styles-to-template) - Babel plugin to write styles in object syntax with linaria
+- [babel-plugin-css-prop](https://github.com/satya164/babel-plugin-css-prop/) - Babel plugin to use a `css` prop ala [`emotion`](https://emotion.sh) in linaria
+- [polished.js](https://polished.js.org/) - A lightweight toolset for writing styles in JavaScript.
 
 ## Inspiration
 
-* [glam](https://github.com/threepointone/glam)
-* [styled-components](https://github.com/styled-components/styled-components)
-* [css-literal-loader](https://github.com/4Catalyzer/css-literal-loader)
+- [glam](https://github.com/threepointone/glam)
+- [styled-components](https://github.com/styled-components/styled-components)
+- [css-literal-loader](https://github.com/4Catalyzer/css-literal-loader)
 
 ## Acknowledgements
 
 This project wouldn't have been possible without the following libraries or the people behind them.
 
-* [babel](https://babeljs.io/)
-* [stylis.js](https://github.com/thysultan/stylis.js)
+- [babel](https://babeljs.io/)
+- [stylis.js](https://github.com/thysultan/stylis.js)
 
 Special thanks to [@kentcdodds](https://github.com/kentcdodds) for his babel plugin and [@threepointone](https://github.com/threepointone) for his suggestions and encouragement.
 

docs/BUNDLERS_INTEGRATION.md

@@ -23,6 +23,9 @@ module: {
         },
         {
           loader: 'babel-loader'
+          options: {
+            cacheDirectory: false,
+          },
         }
       ],
     },
@@ -32,7 +35,13 @@ module: {
 
 Make sure that `linaria/loader` is included before `babel-loader`. Setting the `sourceMap` option to `true` will include source maps for the generated CSS so that you can see where source of the class name in devtools. We recommend to enable this only in development mode because the sourcemap is inlined into the CSS files.
 
-In order to have your styles extracted, you'll also need to use **MiniCssExtractPlugin**. To do that, you can add the following snippet in your webpack config:
+In order to have your styles extracted, you'll also need to use **css-loader** and **MiniCssExtractPlugin**. First, install them:
+
+```sh
+yarn add --dev css-loader mini-css-extract-plugin
+```
+
+To do that, you can add the following snippet in your webpack config:
 
 ```js
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');

docs/SERVER_RENDERING.md → docs/CRITICAL_CSS.md

@@ -1,8 +1,10 @@
-# Server rendering
+# Critical CSS extraction
 
-Since Linaria exracts the CSS statically at build time, you don't need to worry about server rendering your CSS. However, we provide the `collect` method to extract critical CSS for server rendered pages, so that you can ship the minimal amount of CSS used in the page to the browser.
+Since Linaria extracts the CSS statically at build time, you don't need to setup a server rendering. Usually, critical CSS extraction will be automatic if you are code splitting your code and using something like [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) for webpack to generate your CSS files.
 
-The `collect` method takes some HTML and CSS and gives you the critical CSS.
+If you're not code splitting, or the initial CSS chunk is not representative of initally rendered content, you might want to extract critical CSS using the `collect` helper we provide to ship the minimal amount of CSS used in the page to the browser. To be able to use the `collect` helper, you need to provide the initial HTML, which usually means that you need to have SSR setup for your web app.
+
+The `collect` method takes some HTML and CSS and gives you the critical CSS:
 
 ```js
 import { collect } from 'linaria/server';
@@ -56,4 +58,4 @@ app.get('/styles/:slug', (req, res) => {
 app.listen(3242);
 ```
 
-By placing the non-critical CSS at the end of `body`, you can make sure that page rendering is not blocked untill the CSS is loaded. You can also load the non-critical CSS lazily with JavaScript once the page has loaded for a more efficient strategy.
+By placing the non-critical CSS at the end of `body`, you can make sure that page rendering is not blocked untill the CSS is loaded. You can also load the non-critical CSS lazily with JavaScript once the page has loaded for a more efficient strategy. However, it's highly recommended that you take advantage of code splitting in webpack which gives you automatic CSS chunks in addition to critical CSS.

docs/DYNAMIC_STYLES.md

@@ -1,6 +1,6 @@
 # Dynamic styles with `css` tag
 
-Sometimes we have some styles based on component's props or state, or dynamic in some way. If you use the `styled` helper with React, this is automatically handled using CSS custom properties. For `css` tags, we can use various approaches to tackle this. Each with their own limitations.
+Sometimes we have some styles based on component's props or state, or dynamic in some way. If you use the `styled` helper with React, this is automatically handled using CSS custom properties. But we cannot do the same for `css` tags since they aren't linked to any component, and so we don't have access to state and props. However, there are some approaches to tackle this, each with their own limitations.
 
 ## Inline styles