From a9c387a85579e60da30153b20c7b2063760a103c Mon Sep 17 00:00:00 2001 From: Gurpreet Singh Hanjra Date: Thu, 31 Jan 2019 17:01:35 +0100 Subject: [PATCH 1/3] Rewording for clear installation of styling libs, complies with emotion --- docs/docs/glamor.md | 2 +- docs/docs/styled-components.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/docs/glamor.md b/docs/docs/glamor.md index 9c08963b965a8..377696f17f193 100644 --- a/docs/docs/glamor.md +++ b/docs/docs/glamor.md @@ -19,7 +19,7 @@ First, open a new terminal window and run the following to create a new site: gatsby new glamor-tutorial https://github.com/gatsbyjs/gatsby-starter-hello-world ``` -Second, install the Gatsby plugin for Glamor. +Second, we’ll install the necessary dependencies for Glamor and Gatsby. ```shell npm install --save gatsby-plugin-glamor glamor diff --git a/docs/docs/styled-components.md b/docs/docs/styled-components.md index cdd9dfb731470..fde3fdbc22105 100644 --- a/docs/docs/styled-components.md +++ b/docs/docs/styled-components.md @@ -20,7 +20,7 @@ First, open a new terminal window and run the following to create a new site: gatsby new styled-components-tutorial https://github.com/gatsbyjs/gatsby-starter-hello-world ``` -Next, we'll install the necessary dependencies for `styled-components`, including the Gatsby plugin. +Second, we'll install the necessary dependencies for `styled-components`, including the Gatsby plugin. ```shell npm install --save gatsby-plugin-styled-components styled-components babel-plugin-styled-components From 565da93689c2183eff60bdd3360584472da452d0 Mon Sep 17 00:00:00 2001 From: Gurpreet Singh Hanjra Date: Thu, 31 Jan 2019 21:30:14 +0100 Subject: [PATCH 2/3] Fixed review comments --- docs/docs/emotion.md | 6 +++--- docs/docs/glamor.md | 4 ++-- docs/docs/styled-components.md | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/docs/emotion.md b/docs/docs/emotion.md index 810d07089d708..f3a85d0ec8bb6 100644 --- a/docs/docs/emotion.md +++ b/docs/docs/emotion.md @@ -2,11 +2,11 @@ title: Emotion --- -In this guide, we'll walk through setting up a site with the CSS-in-JS library [Emotion](https://emotion.sh). +In this guide, you will learn setting up a site with the CSS-in-JS library [Emotion](https://emotion.sh). Emotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS. With source maps and labels, Emotion has a great developer experience and great performance with heavy caching in production. -[Server side rendering](https://emotion.sh/docs/ssr) works out of the box in Emotion. We can use React’s `renderToString` or `renderToNodeStream` methods directly without any extra configuration. `extractCritical` feature removes unused rules that were created with emotion and helps loading pages faster. +[Server side rendering](https://emotion.sh/docs/ssr) works out of the box in Emotion. You can use React’s `renderToString` or `renderToNodeStream` methods directly without any extra configuration. `extractCritical` feature removes unused rules that were created with emotion and helps loading pages faster. First, open a new terminal window and run the following to create a new site: @@ -14,7 +14,7 @@ First, open a new terminal window and run the following to create a new site: npx gatsby new emotion-tutorial https://github.com/gatsbyjs/gatsby-starter-hello-world ``` -Second, we'll install the necessary dependencies for Emotion and Gatsby. +Second, install the necessary dependencies for Emotion and Gatsby. ```shell npm install --save gatsby-plugin-emotion @emotion/core @emotion/styled diff --git a/docs/docs/glamor.md b/docs/docs/glamor.md index 377696f17f193..5f311cc986d55 100644 --- a/docs/docs/glamor.md +++ b/docs/docs/glamor.md @@ -2,7 +2,7 @@ title: Glamor --- -In this guide, we'll walk through setting up a site with the CSS-in-JS library [Glamor](https://github.com/threepointone/glamor). +In this guide, you will learn setting up a site with the CSS-in-JS library [Glamor](https://github.com/threepointone/glamor). Glamor is not actively maintained, the maintainer recommends using [Emotion](/docs/emotion). @@ -19,7 +19,7 @@ First, open a new terminal window and run the following to create a new site: gatsby new glamor-tutorial https://github.com/gatsbyjs/gatsby-starter-hello-world ``` -Second, we’ll install the necessary dependencies for Glamor and Gatsby. +Second, install the necessary dependencies for Glamor and Gatsby. ```shell npm install --save gatsby-plugin-glamor glamor diff --git a/docs/docs/styled-components.md b/docs/docs/styled-components.md index fde3fdbc22105..f1f83f9a9227e 100644 --- a/docs/docs/styled-components.md +++ b/docs/docs/styled-components.md @@ -2,7 +2,7 @@ title: Styled Components --- -In this guide, we'll walk through setting up a site with the CSS-in-JS library [Styled Components](https://www.styled-components.com/). +In this guide, you will learn setting up a site with the CSS-in-JS library [Styled Components](https://www.styled-components.com/). Styled Components lets you use actual CSS syntax inside your components. Styled Components is a variant on "CSS-in-JS"—which solves many of the problems with traditional CSS. @@ -20,7 +20,7 @@ First, open a new terminal window and run the following to create a new site: gatsby new styled-components-tutorial https://github.com/gatsbyjs/gatsby-starter-hello-world ``` -Second, we'll install the necessary dependencies for `styled-components`, including the Gatsby plugin. +Second, install the necessary dependencies for `styled-components`, including the Gatsby plugin. ```shell npm install --save gatsby-plugin-styled-components styled-components babel-plugin-styled-components From 178cd71add28f761c5f738f129abd0cc7079182f Mon Sep 17 00:00:00 2001 From: Dustin Schau Date: Wed, 13 Feb 2019 10:06:27 -0600 Subject: [PATCH 3/3] Update emotion.md --- docs/docs/emotion.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/emotion.md b/docs/docs/emotion.md index f3a85d0ec8bb6..615431d1b047e 100644 --- a/docs/docs/emotion.md +++ b/docs/docs/emotion.md @@ -2,7 +2,7 @@ title: Emotion --- -In this guide, you will learn setting up a site with the CSS-in-JS library [Emotion](https://emotion.sh). +In this guide, you will learn how to set up a site with the CSS-in-JS library [Emotion](https://emotion.sh). Emotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS. With source maps and labels, Emotion has a great developer experience and great performance with heavy caching in production.