diff --git a/readme.md b/readme.md index 226420ed..e4dc9339 100644 --- a/readme.md +++ b/readme.md @@ -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 @@ -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. ```jsx import React from 'react'