Skip to content

Commit ea7fbcc

Browse files
author
Matt Darveniza
committed
merge
2 parents a5058d6 + 9cc7667 commit ea7fbcc

33 files changed

+379
-182
lines changed

‎docusaurus/docs/adding-a-sass-stylesheet.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,18 @@ This will allow you to do imports like
3737
To use imports relative to a path you specify, and from `node_modules` without adding the `~` prefix, you can add a [`.env` file](https://github.com/facebook/create-react-app/blob/master/docusaurus/docs/adding-custom-environment-variables.md#adding-development-environment-variables-in-env) at the project root with the variable `SASS_PATH=node_modules:src`. To specify more directories you can add them to `SASS_PATH` separated by a `:` like `path1:path2:path3`.
3838

3939
If you set `SASS_PATH=node_modules:src`, this will allow you to do imports like
40+
4041
```scss
4142
@import 'styles/colors'; // assuming a styles directory under src/, where _colors.scss partial file exists.
4243
@import 'nprogress/nprogress'; // importing a css file from the nprogress node module
4344
```
4445

46+
> **Note:** For windows operating system, use below syntax
47+
>
48+
> ```
49+
> SASS_PATH=./node_modules;./src
50+
> ```
51+
4552
> **Tip:** You can opt into using this feature with [CSS modules](adding-a-css-modules-stylesheet.md) too!
4653
4754
> **Note:** If you're using Flow, override the [module.file_ext](https://flow.org/en/docs/config/options/#toc-module-file-ext-string) setting in your `.flowconfig` so it'll recognize `.sass` or `.scss` files. You will also need to include the `module.file_ext` default settings for `.js`, `.jsx`, `.mjs` and `.json` files.

‎docusaurus/docs/adding-css-reset.md

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
---
2+
id: adding-css-reset
3+
title: Adding a CSS Reset
4+
sidebar_label: Adding CSS Reset
5+
---
6+
7+
This project setup uses [PostCSS Normalize] for adding a [CSS Reset].
8+
9+
To start using it, add `@import-normalize;` anywhere in your CSS file(s). You only need to include it once and duplicate imports are automatically removed. Since you only need to include it once, a good place to add it is `index.css` or `App.css`.
10+
11+
## `index.css`
12+
13+
```css
14+
@import-normalize; /* bring in normalize.css styles */
15+
16+
/* rest of app styles */
17+
```
18+
19+
You can control which parts of [normalize.css] to use via your project's [browserslist].
20+
21+
Results when [browserslist] is `last 3 versions`:
22+
23+
```css
24+
/**
25+
* Add the correct display in IE 9-.
26+
*/
27+
28+
audio,
29+
video {
30+
display: inline-block;
31+
}
32+
33+
/**
34+
* Remove the border on images inside links in IE 10-.
35+
*/
36+
37+
img {
38+
border-style: none;
39+
}
40+
```
41+
42+
Results when [browserslist] is `last 2 versions`:
43+
44+
```css
45+
/**
46+
* Remove the border on images inside links in IE 10-.
47+
*/
48+
49+
img {
50+
border-style: none;
51+
}
52+
```
53+
54+
## Browser support
55+
56+
Browser support is dictated by what normalize.css [supports]. As of this writing, it includes:
57+
58+
- Chrome (last 3)
59+
- Edge (last 3)
60+
- Firefox (last 3)
61+
- Firefox ESR
62+
- Opera (last 3)
63+
- Safari (last 3)
64+
- iOS Safari (last 2)
65+
- Internet Explorer 9+
66+
67+
[browserslist]: http://browserl.ist/
68+
[css reset]: https://cssreset.com/what-is-a-css-reset/
69+
[normalize.css]: https://github.com/csstools/normalize.css
70+
[supports]: https://github.com/csstools/normalize.css#browser-support
71+
[postcss normalize]: https://github.com/csstools/postcss-normalize

‎docusaurus/docs/advanced-configuration.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,15 @@ title: Advanced Configuration
55

66
You can adjust various development and production settings by setting environment variables in your shell or with [.env](adding-custom-environment-variables.md#adding-development-environment-variables-in-env).
77

8+
> Note: You do not need to declare `REACT_APP_` before the below variables as you would with custom environment variables.
9+
810
| Variable | Development | Production | Usage |
911
| :------------------- | :---------: | :--------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
1012
| BROWSER | ✅ Used | 🚫 Ignored | By default, Create React App will open the default system browser, favoring Chrome on macOS. Specify a [browser](https://github.com/sindresorhus/opn#app) to override this behavior, or set it to `none` to disable it completely. If you need to customize the way the browser is launched, you can specify a node script instead. Any arguments passed to `npm start` will also be passed to this script, and the url where your app is served will be the last argument. Your script's file name must have the `.js` extension. |
1113
| HOST | ✅ Used | 🚫 Ignored | By default, the development web server binds to `localhost`. You may use this variable to specify a different host. |
1214
| PORT | ✅ Used | 🚫 Ignored | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port. |
1315
| HTTPS | ✅ Used | 🚫 Ignored | When set to `true`, Create React App will run the development server in `https` mode. |
14-
| PUBLIC_URL | 🚫 Ignored | ✅ Used | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in [`package.json` (`homepage`)](deployment#building-for-relative-paths). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application. |
16+
| PUBLIC_URL | 🚫 Ignored | ✅ Used | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in [`package.json` (`homepage`)](deployment#building-for-relative-paths). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application. |
1517
| CI | ✅ Used | ✅ Used | When set to `true`, Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default. |
1618
| REACT_EDITOR | ✅ Used | 🚫 Ignored | When an app crashes in development, you will see an error overlay with clickable stack trace. When you click on it, Create React App will try to determine the editor you are using based on currently running processes, and open the relevant source file. You can [send a pull request to detect your editor of choice](https://github.com/facebook/create-react-app/issues/2636). Setting this environment variable overrides the automatic detection. If you do it, make sure your systems [PATH](<https://en.wikipedia.org/wiki/PATH_(variable)>) environment variable points to your editor’s bin folder. You can also set it to `none` to disable it completely. |
1719
| CHOKIDAR_USEPOLLING | ✅ Used | 🚫 Ignored | When set to `true`, the watcher runs in polling mode, as necessary inside a VM. Use this option if `npm start` isn't detecting changes. |

‎docusaurus/docs/available-scripts.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,10 @@ Your app is ready to be deployed! See the section about [deployment](deployment.
3030

3131
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
3232

33-
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
33+
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc.) into your project as dependencies in `package.json`. Technically, the distinction between dependencies and development dependencies is pretty arbitrary for front-end apps that produce static bundles.
34+
35+
In addition, it used to cause problems with some hosting platforms that didn't install development dependencies (and thus weren't able to build the project on the server or test it right before deployment). You are free to rearrange your dependencies in `package.json` as you see fit.
36+
37+
All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
3438

3539
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

‎docusaurus/docs/loading-graphql-files.md

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
---
2+
id: loading-graphql-files
3+
title: Loading .graphql Files
4+
sidebar_label: Loading .graphql Files
5+
---
6+
7+
To load `.gql` and `.graphql` files, first install the [`graphql.macro`](https://www.npmjs.com/package/graphql.macro) package by running:
8+
9+
```sh
10+
npm install --save graphql.macro
11+
```
12+
13+
Alternatively you may use `yarn`:
14+
15+
```sh
16+
yarn add graphql.macro
17+
```
18+
19+
Then, whenever you want to load `.gql` or `.graphql` files, import the `loader` from the macro package:
20+
21+
```js
22+
import { loader } from 'graphql.macro';
23+
24+
const query = loader('./foo.graphql');
25+
```
26+
27+
And your results get automatically inlined! This means that if the file above, `foo.graphql`, contains the following:
28+
29+
```graphql
30+
gql`
31+
query {
32+
hello {
33+
world
34+
}
35+
}
36+
`;
37+
```
38+
39+
The previous example turns into:
40+
41+
```javascript
42+
const query = {
43+
'kind': 'Document',
44+
'definitions': [{
45+
...
46+
}],
47+
'loc': {
48+
...
49+
'source': {
50+
'body': '\\\\n query {\\\\n hello {\\\\n world\\\\n }\\\\n }\\\\n',
51+
'name': 'GraphQL request',
52+
...
53+
}
54+
}
55+
};
56+
```
57+
58+
You can also use the `gql` template tag the same way you would use the non-macro version from `graphql-tag` package with the added benefit of inlined parsing results.
59+
60+
```js
61+
import { gql } from 'graphql.macro';
62+
63+
const query = gql`
64+
query User {
65+
user(id: 5) {
66+
lastName
67+
...UserEntry1
68+
}
69+
}
70+
`;
71+
```

‎docusaurus/website/i18n/en.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,10 @@
9494
"title": "Integrating with an API Backend",
9595
"sidebar_label": "Integrating with an API"
9696
},
97+
"loading-graphql-files": {
98+
"title": "Loading .graphql Files",
99+
"sidebar_label": "Loading .graphql Files"
100+
},
97101
"making-a-progressive-web-app": {
98102
"title": "Making a Progressive Web App"
99103
},

‎docusaurus/website/sidebars.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,10 @@
1818
"adding-a-stylesheet",
1919
"adding-a-css-modules-stylesheet",
2020
"adding-a-sass-stylesheet",
21+
"adding-css-reset",
2122
"post-processing-css",
2223
"adding-images-fonts-and-files",
24+
"loading-graphql-files",
2325
"using-the-public-folder",
2426
"code-splitting"
2527
],

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
"get-port": "^4.2.0",
2626
"globby": "^9.1.0",
2727
"husky": "^1.3.1",
28-
"jest": "^24.5.0",
28+
"jest": "24.7.1",
2929
"lerna": "2.9.1",
3030
"lerna-changelog": "~0.8.2",
3131
"lint-staged": "^8.0.4",

‎packages/babel-plugin-named-asset-import/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
"@babel/core": "^7.1.0"
1616
},
1717
"devDependencies": {
18-
"babel-plugin-tester": "^5.5.1",
19-
"jest": "^24.5.0"
18+
"babel-plugin-tester": "^6.0.1",
19+
"jest": "24.7.1"
2020
},
2121
"scripts": {
2222
"test": "jest"

‎packages/confusing-browser-globals/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,6 @@
1616
"index.js"
1717
],
1818
"devDependencies": {
19-
"jest": "24.5.0"
19+
"jest": "24.7.1"
2020
}
2121
}

‎packages/create-react-app/createReactApp.js

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -254,11 +254,13 @@ function createApp(
254254
const yarnInfo = checkYarnVersion();
255255
if (!yarnInfo.hasMinYarnPnp) {
256256
if (yarnInfo.yarnVersion) {
257-
chalk.yellow(
258-
`You are using Yarn ${
259-
yarnInfo.yarnVersion
260-
} together with the --use-pnp flag, but Plug'n'Play is only supported starting from the 1.12 release.\n\n` +
261-
`Please update to Yarn 1.12 or higher for a better, fully supported experience.\n`
257+
console.log(
258+
chalk.yellow(
259+
`You are using Yarn ${
260+
yarnInfo.yarnVersion
261+
} together with the --use-pnp flag, but Plug'n'Play is only supported starting from the 1.12 release.\n\n` +
262+
`Please update to Yarn 1.12 or higher for a better, fully supported experience.\n`
263+
)
262264
);
263265
}
264266
// 1.11 had an issue with webpack-dev-middleware, so better not use PnP with it (never reached stable, but still)

‎packages/eslint-config-react-app/index.js

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,6 @@
2323
// To use them, explicitly reference them, e.g. `window.name` or `window.status`.
2424
const restrictedGlobals = require('confusing-browser-globals');
2525

26-
// The following is copied from `react-scripts/config/paths.js`.
27-
const path = require('path');
28-
const fs = require('fs');
29-
// Make sure any symlinks in the project folder are resolved:
30-
// https://github.com/facebook/create-react-app/issues/637
31-
const appDirectory = fs.realpathSync(process.cwd());
32-
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
33-
const projectRootPath = resolveApp('.');
34-
const tsConfigPath = resolveApp('tsconfig.json');
35-
3626
module.exports = {
3727
root: true,
3828

@@ -74,8 +64,6 @@ module.exports = {
7464
},
7565

7666
// typescript-eslint specific options
77-
project: tsConfigPath,
78-
tsconfigRootDir: projectRootPath,
7967
warnOnUnsupportedTypeScriptVersion: true,
8068
},
8169
plugins: ['@typescript-eslint'],

‎packages/react-dev-utils/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
},
7575
"devDependencies": {
7676
"cross-env": "^5.2.0",
77-
"jest": "^24.5.0"
77+
"jest": "24.7.1"
7878
},
7979
"scripts": {
8080
"test": "cross-env FORCE_COLOR=true jest"

‎packages/react-error-overlay/package.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,8 @@
3333
"@babel/code-frame": "7.0.0",
3434
"@babel/core": "7.3.4",
3535
"anser": "1.4.8",
36-
"babel-core": "7.0.0-bridge.0",
3736
"babel-eslint": "10.0.1",
38-
"babel-jest": "24.5.0",
37+
"babel-jest": "24.7.1",
3938
"babel-loader": "8.0.5",
4039
"babel-preset-react-app": "^7.0.2",
4140
"chalk": "^2.4.2",
@@ -49,7 +48,7 @@
4948
"eslint-plugin-react": "7.12.4",
5049
"flow-bin": "^0.63.1",
5150
"html-entities": "1.2.1",
52-
"jest": "24.5.0",
51+
"jest": "24.7.1",
5352
"jest-fetch-mock": "2.1.1",
5453
"object-assign": "4.1.1",
5554
"promise": "8.0.2",

‎packages/react-scripts/config/webpack.config.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
'use strict';
1010

1111
const fs = require('fs');
12+
const isWsl = require('is-wsl');
1213
const path = require('path');
1314
const webpack = require('webpack');
1415
const resolve = require('resolve');
@@ -34,6 +35,7 @@ const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
3435
// @remove-on-eject-begin
3536
const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');
3637
// @remove-on-eject-end
38+
const postcssNormalize = require('postcss-normalize');
3739

3840
// Source maps are resource heavy and can cause out of memory issue for large source files.
3941
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
@@ -107,6 +109,10 @@ module.exports = function(webpackEnv) {
107109
},
108110
stage: 3,
109111
}),
112+
// Adds PostCSS Normalize as the reset css with default options,
113+
// so that it honors browserslist config in package.json
114+
// which in turn let's users customize the target behavior as per their needs.
115+
postcssNormalize(),
110116
],
111117
sourceMap: isEnvProduction && shouldUseSourceMap,
112118
},
@@ -163,6 +169,8 @@ module.exports = function(webpackEnv) {
163169
filename: isEnvProduction
164170
? 'static/js/[name].[contenthash:8].js'
165171
: isEnvDevelopment && 'static/js/bundle.js',
172+
// TODO: remove this when upgrading to webpack 5
173+
futureEmitAssets: true,
166174
// There are also additional JS chunk files if you use code splitting.
167175
chunkFilename: isEnvProduction
168176
? 'static/js/[name].[contenthash:8].chunk.js'
@@ -221,7 +229,9 @@ module.exports = function(webpackEnv) {
221229
},
222230
// Use multi-process parallel running to improve the build speed
223231
// Default number of concurrent runs: os.cpus().length - 1
224-
parallel: true,
232+
// Disabled on WSL (Windows Subsystem for Linux) due to an issue with Terser
233+
// https://github.com/webpack-contrib/terser-webpack-plugin/issues/21
234+
parallel: !isWsl,
225235
// Enable file caching
226236
cache: true,
227237
sourceMap: shouldUseSourceMap,

0 commit comments

Comments
 (0)