Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: update table of content in readme + more details about SSR #824

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

docs: update table of content in readme + more details about SSR #824

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4039485
Update table of content
Zwyx Jan 4, 2023
2529df3
Add `and over` after `Next.js 12`
Zwyx Jan 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 32 additions & 20 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,41 +8,53 @@ Code and docs are for v3 which we highly recommend you to try. Looking for style

- [Getting started](#getting-started)
- [Configuration options](#configuration-options)
- [`optimizeForSpeed`](#optimizeforspeed)
- [`sourceMaps`](#sourcemaps)
- [`styleModule`](#stylemodule)
- [`vendorPrefixes`](#vendorprefixes)
- [`optimizeForSpeed`](#optimizeforspeed)
- [`sourceMaps`](#sourcemaps)
- [`styleModule`](#stylemodule)
- [`vendorPrefixes`](#vendorprefixes)
- [Features](#features)
- [Using in Next.js](#using-in-nextjs)
- [How It Works](#how-it-works)
- [Why It Works Like This](#why-it-works-like-this)
- [Targeting The Root](#targeting-the-root)
- [Global styles](#global-styles)
- [Targeting The Root](#targeting-the-root)
- [Global styles](#global-styles)
- [One-off global selectors](#one-off-global-selectors)
- [Dynamic styles](#dynamic-styles)
- [Via interpolated dynamic props](#via-interpolated-dynamic-props)
- [Via `className` toggling](#via-classname-toggling)
- [Via inline `style`](#via-inline-style)
- [Constants](#constants)
- [Dynamic styles](#dynamic-styles)
- [Via interpolated dynamic props](#via-interpolated-dynamic-props)
- [Via `className` toggling](#via-classname-toggling)
- [Via inline `style`](#via-inline-style)
- [Constants](#constants)
- [Server-Side Rendering](#server-side-rendering)
- [External CSS and styles outside of the component](#external-css-and-styles-outside-of-the-component)
- [External styles](#external-styles)
- [Styles outside of components](#styles-outside-of-components)
- [The `resolve` tag](#the-resolve-tag)
- [Styles in regular CSS files](#styles-in-regular-css-files)
- [Content Security Policy](#content-security-policy)
- [External CSS and styles outside of the component](#external-css-and-styles-outside-of-the-component)
- [External styles](#external-styles)
- [Styles outside of components](#styles-outside-of-components)
- [The `resolve` tag](#the-resolve-tag)
- [Using `resolve` as a Babel macro](#using-resolve-as-a-babel-macro)
- [Usage with `create-react-app`](#usage-with-create-react-app)
- [Styles in regular CSS files](#styles-in-regular-css-files)
- [Next.js](#nextjs)
- [CSS Preprocessing via Plugins](#css-preprocessing-via-plugins)
- [Plugin options](#plugin-options)
- [Example plugins](#example-plugins)
- [Plugin options](#plugin-options)
- [Example plugins](#example-plugins)
- [Rendering in tests](#rendering-in-tests)
- [styled-jsx/css in tests](#styled-jsxcss-in-tests)
- [FAQ](#faq)
- [Warning: unknown `jsx` prop on <style> tag](#warning-unknown-jsx-prop-on-style-tag)
- [Can I return an array of components when using React 16?](#can-i-return-an-array-of-components-when-using-react-16)
- [Styling third parties / child components from the parent](#styling-third-parties--child-components-from-the-parent)
- [Some styles are missing in production](https://github.com/vercel/styled-jsx/issues/319#issuecomment-349239326)
- [Build a component library with styled-jsx](#build-a-component-library-with-styled-jsx)
- [Syntax Highlighting](#syntax-highlighting)
- [Atom](#atom)
- [Webstorm/Idea](#webstormidea)
- [Emmet](#emmet)
- [Syntax Highlighting Visual Studio Code Extension](#syntax-highlighting-visual-studio-code-extension)
- [Autocomplete Visual Studio Code Extension](#autocomplete-visual-studio-code-extension)
- [Vim](#vim)
- [ESLint](#eslint)
- [TypeScript](#typescript)
- [Credits](#credits)
- [Authors](#authors)

## Getting started

Expand Down Expand Up @@ -346,7 +358,7 @@ Please keep in mind that constants defined outside of the component scope are tr
- `registry.styles()` will return the array of react components for style tags.
- `registry.flush()` can clean the existing styles in the registry, it's optional for SSR when you have a standalone registry for each SSR render.

> Next.js 12 integrates with `styled-jsx` v5 and manages the registry for you.
> Next.js 12 and over integrates with `styled-jsx` v5 and manages the registry for you.
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This sentence isn't very clear to me. Does it mean that we do not have to care at all about SSR if we are using Next 12+ because it's all done automatically?


```jsx
import React from 'react'
Expand Down