Repository: styleguidist/react-styleguidist
Pull request #1248 (2019-01-13 00:38:03)

Chore: Update dependencies
Hey there,

As discussed with @sapegin, here are a few updates to the dependency tree. In many cases, it was a simple find & replace. I also took care of the annoying deprecation message 😉 

Feel free to pick-n-choose and/or reject as desired. I'm happy with whatever~!

The only lingering TODOs are regarding the flow-types for classnames & minimist. I don't use that ecosystem, so I'm not sure where those come from, especially given that they look to be official definitions. I did, however, update the `qss` definition as that one was pretty straight forward.

Thanks!

codecov-io: # [Codecov](https://codecov.io/gh/styleguidist/react-styleguidist/pull/1248?src=pr&el=h1) Report
> Merging [#1248](https://codecov.io/gh/styleguidist/react-styleguidist/pull/1248?src=pr&el=desc) into [master](https://codecov.io/gh/styleguidist/react-styleguidist/commit/d52a42ed8e6791da5a9d1bb3c1ee54c5c7da8f95?src=pr&el=desc) will **not change** coverage.
> The diff coverage is `100%`.

| [Impacted Files](https://codecov.io/gh/styleguidist/react-styleguidist/pull/1248?src=pr&el=tree) | Coverage Δ | |
|---|---|---|
| [...mponents/Markdown/Blockquote/BlockquoteRenderer.js](https://codecov.io/gh/styleguidist/react-styleguidist/pull/1248/diff?src=pr&el=tree#diff-c3JjL2NsaWVudC9yc2ctY29tcG9uZW50cy9NYXJrZG93bi9CbG9ja3F1b3RlL0Jsb2NrcXVvdGVSZW5kZXJlci5qcw==) | `100% <ø> (ø)` | :arrow_up: |
| [.../client/rsg-components/Markdown/Pre/PreRenderer.js](https://codecov.io/gh/styleguidist/react-styleguidist/pull/1248/diff?src=pr&el=tree#diff-c3JjL2NsaWVudC9yc2ctY29tcG9uZW50cy9NYXJrZG93bi9QcmUvUHJlUmVuZGVyZXIuanM=) | `100% <ø> (ø)` | :arrow_up: |
| [src/client/rsg-components/Name/NameRenderer.js](https://codecov.io/gh/styleguidist/react-styleguidist/pull/1248/diff?src=pr&el=tree#diff-c3JjL2NsaWVudC9yc2ctY29tcG9uZW50cy9OYW1lL05hbWVSZW5kZXJlci5qcw==) | `100% <ø> (ø)` | :arrow_up: |
| [src/client/rsg-components/Link/LinkRenderer.js](https://codecov.io/gh/styleguidist/react-styleguidist/pull/1248/diff?src=pr&el=tree#diff-c3JjL2NsaWVudC9yc2ctY29tcG9uZW50cy9MaW5rL0xpbmtSZW5kZXJlci5qcw==) | `100% <ø> (ø)` | :arrow_up: |
| [...ient/rsg-components/TabButton/TabButtonRenderer.js](https://codecov.io/gh/styleguidist/react-styleguidist/pull/1248/diff?src=pr&el=tree#diff-c3JjL2NsaWVudC9yc2ctY29tcG9uZW50cy9UYWJCdXR0b24vVGFiQnV0dG9uUmVuZGVyZXIuanM=) | `100% <ø> (ø)` | :arrow_up: |
| [...c/client/rsg-components/Heading/HeadingRenderer.js](https://codecov.io/gh/styleguidist/react-styleguidist/pull/1248/diff?src=pr&el=tree#diff-c3JjL2NsaWVudC9yc2ctY29tcG9uZW50cy9IZWFkaW5nL0hlYWRpbmdSZW5kZXJlci5qcw==) | `100% <ø> (ø)` | :arrow_up: |
| [...omponents/ComponentsList/ComponentsListRenderer.js](https://codecov.io/gh/styleguidist/react-styleguidist/pull/1248/diff?src=pr&el=tree#diff-c3JjL2NsaWVudC9yc2ctY29tcG9uZW50cy9Db21wb25lbnRzTGlzdC9Db21wb25lbnRzTGlzdFJlbmRlcmVyLmpz) | `100% <ø> (ø)` | :arrow_up: |
| [...nt/rsg-components/Playground/PlaygroundRenderer.js](https://codecov.io/gh/styleguidist/react-styleguidist/pull/1248/diff?src=pr&el=tree#diff-c3JjL2NsaWVudC9yc2ctY29tcG9uZW50cy9QbGF5Z3JvdW5kL1BsYXlncm91bmRSZW5kZXJlci5qcw==) | `100% <ø> (ø)` | :arrow_up: |
| [...lient/rsg-components/Markdown/List/ListRenderer.js](https://codecov.io/gh/styleguidist/react-styleguidist/pull/1248/diff?src=pr&el=tree#diff-c3JjL2NsaWVudC9yc2ctY29tcG9uZW50cy9NYXJrZG93bi9MaXN0L0xpc3RSZW5kZXJlci5qcw==) | `100% <ø> (ø)` | :arrow_up: |
| [src/client/rsg-components/Text/TextRenderer.js](https://codecov.io/gh/styleguidist/react-styleguidist/pull/1248/diff?src=pr&el=tree#diff-c3JjL2NsaWVudC9yc2ctY29tcG9uZW50cy9UZXh0L1RleHRSZW5kZXJlci5qcw==) | `100% <ø> (ø)` | :arrow_up: |
| ... and [4 more](https://codecov.io/gh/styleguidist/react-styleguidist/pull/1248/diff?src=pr&el=tree-more) | |


Patch:
diff --git a/docs/Development.md b/docs/Development.md
index 8a490370..52850833 100644
--- a/docs/Development.md
+++ b/docs/Development.md
@@ -76,7 +76,7 @@ Each component folder usually has several files:
 
 For styles we use [JSS](http://cssinjs.org/), it allows users to customize their style guide and allows us to ensure styles isolations (thanks to [jss-isolate](http://cssinjs.org/jss-isolate/)). No user styles should affect Styleguidist UI and no Styleguidist styles should affect user components.
 
-Use [classnames](https://github.com/JedWatson/classnames) to merge several class names or for conditional class names, import it as `cx` (`import cx from 'classnames'`).
+Use [clsx](https://github.com/lukeed/clsx) to merge several class names or for conditional class names, import it as `cx` (`import cx from 'clsx'`).
 
 We use `Styled` higher-order component to allow theming (see [theme](Configuration.md#theme) and [style](Configuration.md#style) style guide config options). Use it like this:
 
diff --git a/docs/Webpack.md b/docs/Webpack.md
index 10bdf786..85ac4255 100644
--- a/docs/Webpack.md
+++ b/docs/Webpack.md
@@ -69,7 +69,7 @@ module.exports = {
         // Other loaders that are needed for your components
         {
           test: /\.css$/,
-          loader: 'style-loader!css-loader?modules'
+          use: ['style-loader', 'css-loader']
         }
       ]
     }
diff --git a/flow-typed/qss.js.flow b/flow-typed/qss.js.flow
new file mode 100644
index 00000000..9471ce85
--- /dev/null
+++ b/flow-typed/qss.js.flow
@@ -0,0 +1,5 @@
+declare module 'qss' {
+	declare type Params = { [key: string]: any };
+	declare function decode(query: string): Params;
+	declare function encode(obj: Params, prefix?: string): string;
+}
diff --git a/flow-typed/querystringify.js.flow b/flow-typed/querystringify.js.flow
deleted file mode 100644
index 349ee28b..00000000
--- a/flow-typed/querystringify.js.flow
+++ /dev/null
@@ -1,5 +0,0 @@
-declare module 'querystringify' {
-	declare type Params = { [key: string]: any };
-	declare function parse(query: string): Params;
-	declare function stringify(obj: Params): string;
-}
diff --git a/package-lock.json b/package-lock.json
index e41b4630..d7345b53 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2751,11 +2751,6 @@
         }
       }
     },
-    "classnames": {
-      "version": "2.2.6",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
-      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
-    },
     "clean-webpack-plugin": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/clean-webpack-plugin/-/clean-webpack-plugin-1.0.0.tgz",
@@ -2866,6 +2861,11 @@
       "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
       "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4="
     },
+    "clsx": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.0.1.tgz",
+      "integrity": "sha512-PtvbklBG/M2NVzwaYqTGcD+EqMXLNrec1lpgNkz07CoOsYnXsCBjde24Tki8wBKi9jrWX2rJnmKoMJoYUc3zhQ=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -8204,9 +8204,9 @@
       "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA=="
     },
     "kleur": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/kleur/-/kleur-2.0.2.tgz",
-      "integrity": "sha512-77XF9iTllATmG9lSlIv0qdQ2BQ/h9t0bJllHlbvsQ0zUWfU7Yi0S8L5JXzPZgkefIiajLmBJJ4BsMJmqcf7oxQ=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.1.tgz",
+      "integrity": "sha512-P3kRv+B+Ra070ng2VKQqW4qW7gd/v3iD8sy/zOdcYRsfiD+QBokQNOps/AfP6Hr48cBhIIBFWckB9aO+IZhrWg=="
     },
     "lcid": {
       "version": "2.0.0",
@@ -8987,6 +8987,11 @@
         "run-queue": "^1.0.3"
       }
     },
+    "mri": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/mri/-/mri-1.1.4.tgz",
+      "integrity": "sha512-6y7IjGPm8AzlvoUrwAaw1tLnUBudaS3752vcd8JtrpGGQn+rXIe63LFVHm/YMwtqAuh+LJPCFdlLYPWM1nYn6w=="
+    },
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -9926,6 +9931,14 @@
       "requires": {
         "kleur": "^2.0.1",
         "sisteransi": "^0.1.1"
+      },
+      "dependencies": {
+        "kleur": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/kleur/-/kleur-2.0.2.tgz",
+          "integrity": "sha512-77XF9iTllATmG9lSlIv0qdQ2BQ/h9t0bJllHlbvsQ0zUWfU7Yi0S8L5JXzPZgkefIiajLmBJJ4BsMJmqcf7oxQ==",
+          "dev": true
+        }
       }
     },
     "prop-types": {
@@ -10015,6 +10028,11 @@
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
       "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
     },
+    "qss": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/qss/-/qss-2.0.0.tgz",
+      "integrity": "sha512-PAL/YML73QElTxlc2vL2GbjwgBo4rHksbgq8tA50Nd9Xu0W57FIDXjPTFRI11y551yUbRiFrRWE77gx/QFGsNQ=="
+    },
     "querystring": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
diff --git a/package.json b/package.json
index 2f4507a7..cafefe44 100644
--- a/package.json
+++ b/package.json
@@ -32,9 +32,9 @@
     "acorn-jsx": "^5.0.1",
     "ast-types": "^0.11.7",
     "buble": "0.19.4",
-    "classnames": "^2.2.6",
     "clean-webpack-plugin": "^1.0.0",
     "clipboard-copy": "^2.0.1",
+    "clsx": "^1.0.1",
     "common-dir": "^2.0.2",
     "copy-webpack-plugin": "^4.6.0",
     "core-js": "^2.6.0",
@@ -56,7 +56,7 @@
     "jss-global": "^3.0.0",
     "jss-isolate": "^5.1.0",
     "jss-nested": "^6.0.1",
-    "kleur": "^2.0.2",
+    "kleur": "^3.0.1",
     "leven": "^2.1.0",
     "listify": "^1.0.0",
     "loader-utils": "^1.1.0",
@@ -64,12 +64,12 @@
     "lowercase-keys": "^1.0.1",
     "markdown-to-jsx": "^6.9.0",
     "mini-html-webpack-plugin": "^0.2.3",
-    "minimist": "^1.2.0",
+    "mri": "^1.1.4",
     "ora": "^3.0.0",
     "prismjs": "^1.15.0",
     "prop-types": "^15.6.2",
     "q-i": "^2.0.1",
-    "querystringify": "^2.1.0",
+    "qss": "^2.0.0",
     "react-dev-utils": "^6.1.1",
     "react-docgen": "3.0.0-rc.2",
     "react-docgen-annotation-resolver": "^1.0.0",
diff --git a/src/bin/styleguidist.js b/src/bin/styleguidist.js
index 0a74c438..063d28db 100755
--- a/src/bin/styleguidist.js
+++ b/src/bin/styleguidist.js
@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 /* eslint-disable no-console */
-const minimist = require('minimist');
+const mri = require('mri');
 const kleur = require('kleur');
 const ora = require('ora');
 const stringify = require('q-i').stringify;
@@ -13,7 +13,7 @@ const setupLogger = require('../scripts/logger');
 const consts = require('../scripts/consts');
 const StyleguidistError = require('../scripts/utils/error');
 
-const argv = minimist(process.argv.slice(2));
+const argv = mri(process.argv.slice(2));
 const command = argv._[0];
 
 // Do not show nasty stack traces for Styleguidist errors
@@ -27,7 +27,11 @@ process.on('uncaughtException', err => {
 			consts.DOCS_CONFIG
 		);
 	} else if (err instanceof StyleguidistError) {
-		console.error(kleur.bold.red(err.message));
+		console.error(
+			kleur()
+				.bold()
+				.red(err.message)
+		);
 		logger.debug(err.stack);
 	} else {
 		console.error(err.toString());
@@ -219,7 +223,11 @@ function printBuildInstructions(config) {
  * @param {string} linkUrl
  */
 function printErrorWithLink(message, linkTitle, linkUrl) {
-	console.error(`${kleur.bold.red(message)}\n\n${linkTitle}\n${kleur.underline(linkUrl)}\n`);
+	console.error(
+		`${kleur()
+			.bold()
+			.red(message)}\n\n${linkTitle}\n${kleur.underline(linkUrl)}\n`
+	);
 }
 
 /**
@@ -243,11 +251,32 @@ function printErrors(header, errors, originalErrors, type) {
  */
 function printStatus(text, type) {
 	if (type === 'success') {
-		console.log(kleur.inverse.bold.green(' DONE ') + ' ' + text);
+		console.log(
+			kleur
+				.inverse()
+				.bold()
+				.green(' DONE ') +
+				' ' +
+				text
+		);
 	} else if (type === 'error') {
-		console.error(kleur.inverse.bold.red(' FAIL ') + ' ' + kleur.red(text));
+		console.error(
+			kleur
+				.inverse()
+				.bold()
+				.red(' FAIL ') +
+				' ' +
+				kleur.red(text)
+		);
 	} else {
-		console.error(kleur.inverse.bold.yellow(' WARN ') + ' ' + kleur.yellow(text));
+		console.error(
+			kleur
+				.inverse()
+				.bold()
+				.yellow(' WARN ') +
+				' ' +
+				kleur.yellow(text)
+		);
 	}
 }
 
diff --git a/src/client/rsg-components/ComponentsList/ComponentsListRenderer.js b/src/client/rsg-components/ComponentsList/ComponentsListRenderer.js
index 799d9cb4..3eae4728 100644
--- a/src/client/rsg-components/ComponentsList/ComponentsListRenderer.js
+++ b/src/client/rsg-components/ComponentsList/ComponentsListRenderer.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import cx from 'clsx';
 import Link from 'rsg-components/Link';
 import Styled from 'rsg-components/Styled';
 import { getHash } from '../../utils/handleHash';
diff --git a/src/client/rsg-components/Heading/HeadingRenderer.js b/src/client/rsg-components/Heading/HeadingRenderer.js
index 27af53e2..6227a1a3 100644
--- a/src/client/rsg-components/Heading/HeadingRenderer.js
+++ b/src/client/rsg-components/Heading/HeadingRenderer.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import cx from 'clsx';
 import Styled from 'rsg-components/Styled';
 
 const styles = ({ color, fontFamily, fontSize }) => ({
diff --git a/src/client/rsg-components/Link/LinkRenderer.js b/src/client/rsg-components/Link/LinkRenderer.js
index f230e99e..2baaf846 100644
--- a/src/client/rsg-components/Link/LinkRenderer.js
+++ b/src/client/rsg-components/Link/LinkRenderer.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import cx from 'clsx';
 import Styled from 'rsg-components/Styled';
 
 const styles = ({ color }) => ({
diff --git a/src/client/rsg-components/Markdown/Blockquote/BlockquoteRenderer.js b/src/client/rsg-components/Markdown/Blockquote/BlockquoteRenderer.js
index 164bcc9c..0a14b068 100644
--- a/src/client/rsg-components/Markdown/Blockquote/BlockquoteRenderer.js
+++ b/src/client/rsg-components/Markdown/Blockquote/BlockquoteRenderer.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import cx from 'clsx';
 
 import Styled from 'rsg-components/Styled';
 
diff --git a/src/client/rsg-components/Markdown/List/ListRenderer.js b/src/client/rsg-components/Markdown/List/ListRenderer.js
index d0c9b711..6a1028c9 100644
--- a/src/client/rsg-components/Markdown/List/ListRenderer.js
+++ b/src/client/rsg-components/Markdown/List/ListRenderer.js
@@ -1,6 +1,6 @@
 import React, { Children, cloneElement } from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import cx from 'clsx';
 import Styled from 'rsg-components/Styled';
 
 const styles = ({ space, color, fontFamily }) => ({
diff --git a/src/client/rsg-components/Markdown/Pre/PreRenderer.js b/src/client/rsg-components/Markdown/Pre/PreRenderer.js
index 370c7b5c..6bcc5687 100644
--- a/src/client/rsg-components/Markdown/Pre/PreRenderer.js
+++ b/src/client/rsg-components/Markdown/Pre/PreRenderer.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import cx from 'clsx';
 import Styled from 'rsg-components/Styled';
 import prismTheme from '../../../styles/prismTheme';
 
diff --git a/src/client/rsg-components/Name/NameRenderer.js b/src/client/rsg-components/Name/NameRenderer.js
index ded07819..266a4865 100644
--- a/src/client/rsg-components/Name/NameRenderer.js
+++ b/src/client/rsg-components/Name/NameRenderer.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Styled from 'rsg-components/Styled';
-import cx from 'classnames';
+import cx from 'clsx';
 
 export const styles = ({ fontFamily, fontSize, color }) => ({
 	name: {
diff --git a/src/client/rsg-components/Playground/PlaygroundRenderer.js b/src/client/rsg-components/Playground/PlaygroundRenderer.js
index 042d395e..cd668ab8 100644
--- a/src/client/rsg-components/Playground/PlaygroundRenderer.js
+++ b/src/client/rsg-components/Playground/PlaygroundRenderer.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import cx from 'clsx';
 import Styled from 'rsg-components/Styled';
 
 export const styles = ({ space, color, borderRadius }) => ({
diff --git a/src/client/rsg-components/SectionHeading/SectionHeadingRenderer.js b/src/client/rsg-components/SectionHeading/SectionHeadingRenderer.js
index 4e4cd848..b03f3b6b 100644
--- a/src/client/rsg-components/SectionHeading/SectionHeadingRenderer.js
+++ b/src/client/rsg-components/SectionHeading/SectionHeadingRenderer.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import cx from 'clsx';
 import Heading from 'rsg-components/Heading';
 import Styled from 'rsg-components/Styled';
 
diff --git a/src/client/rsg-components/StyleGuide/StyleGuideRenderer.js b/src/client/rsg-components/StyleGuide/StyleGuideRenderer.js
index e1847828..817ecc28 100644
--- a/src/client/rsg-components/StyleGuide/StyleGuideRenderer.js
+++ b/src/client/rsg-components/StyleGuide/StyleGuideRenderer.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import Logo from 'rsg-components/Logo';
 import Markdown from 'rsg-components/Markdown';
 import Styled from 'rsg-components/Styled';
-import cx from 'classnames';
+import cx from 'clsx';
 import Ribbon from 'rsg-components/Ribbon';
 import Version from 'rsg-components/Version';
 
diff --git a/src/client/rsg-components/TabButton/TabButtonRenderer.js b/src/client/rsg-components/TabButton/TabButtonRenderer.js
index afffb355..4871b3e1 100644
--- a/src/client/rsg-components/TabButton/TabButtonRenderer.js
+++ b/src/client/rsg-components/TabButton/TabButtonRenderer.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Styled from 'rsg-components/Styled';
-import cx from 'classnames';
+import cx from 'clsx';
 
 export const styles = ({ space, color, fontFamily, fontSize, buttonTextTransform }) => ({
 	button: {
diff --git a/src/client/rsg-components/Text/TextRenderer.js b/src/client/rsg-components/Text/TextRenderer.js
index 7a181553..739be0bb 100644
--- a/src/client/rsg-components/Text/TextRenderer.js
+++ b/src/client/rsg-components/Text/TextRenderer.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Styled from 'rsg-components/Styled';
-import cx from 'classnames';
+import cx from 'clsx';
 
 export const styles = ({ fontFamily, fontSize, color }) => ({
 	text: {
diff --git a/src/client/rsg-components/ToolbarButton/ToolbarButtonRenderer.js b/src/client/rsg-components/ToolbarButton/ToolbarButtonRenderer.js
index 34e94618..c8839274 100644
--- a/src/client/rsg-components/ToolbarButton/ToolbarButtonRenderer.js
+++ b/src/client/rsg-components/ToolbarButton/ToolbarButtonRenderer.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Styled from 'rsg-components/Styled';
-import cx from 'classnames';
+import cx from 'clsx';
 
 export const styles = ({ space, color }) => ({
 	button: {
diff --git a/src/loaders/utils/getExamples.js b/src/loaders/utils/getExamples.js
index e82faf35..8ba0b151 100644
--- a/src/loaders/utils/getExamples.js
+++ b/src/loaders/utils/getExamples.js
@@ -1,6 +1,6 @@
 // @flow
 import path from 'path';
-import qs from 'querystringify';
+import { encode } from 'qss';
 import requireIt from './requireIt';
 
 const examplesLoader = path.resolve(__dirname, '../examples-loader.js');
@@ -26,5 +26,5 @@ module.exports = function getExamples(
 		file: relativePath,
 		shouldShowDefaultExample: !examplesFile && !!defaultExample,
 	};
-	return requireIt(`!!${examplesLoader}?${qs.stringify(query)}!${examplesFileToLoad}`);
+	return requireIt(`!!${examplesLoader}?${encode(query)}!${examplesFileToLoad}`);
 };
diff --git a/src/scripts/utils/findUserWebpackConfig.js b/src/scripts/utils/findUserWebpackConfig.js
index a64ec7c1..5a3e2373 100644
--- a/src/scripts/utils/findUserWebpackConfig.js
+++ b/src/scripts/utils/findUserWebpackConfig.js
@@ -1,7 +1,10 @@
 const fs = require('fs');
 const path = require('path');
 
-const CREATE_REACT_APP_WEBPACK_CONFIG = 'react-scripts/config/webpack.config.dev';
+// react-scripts <= 2.1.1
+const CREATE_REACT_APP_WEBPACK_CONFIG_OLD = 'react-scripts/config/webpack.config.dev';
+// react-scripts > 2.1.1
+const CREATE_REACT_APP_WEBPACK_CONFIG = 'react-scripts/config/webpack.config';
 const USER_WEBPACK_CONFIG_NAMES = ['webpack.config.js', 'webpackfile.js'];
 
 const absolutize = filePath => path.resolve(process.cwd(), filePath);
@@ -17,14 +20,19 @@ const absolutize = filePath => path.resolve(process.cwd(), filePath);
 module.exports = function findUserWebpackConfig(resolve) {
 	resolve = resolve || require.resolve;
 	try {
-		// Create React App
-		return resolve(CREATE_REACT_APP_WEBPACK_CONFIG);
+		// Create React App <= 2.1.1
+		return resolve(CREATE_REACT_APP_WEBPACK_CONFIG_OLD);
 	} catch (err) {
-		// Check in the root folder
-		for (const configFile of USER_WEBPACK_CONFIG_NAMES) {
-			const absoluteConfigFile = absolutize(configFile);
-			if (fs.existsSync(absoluteConfigFile)) {
-				return absoluteConfigFile;
+		try {
+			// Create React App > 2.1.1
+			return resolve(CREATE_REACT_APP_WEBPACK_CONFIG);
+		} catch (err) {
+			// Check in the root folder
+			for (const configFile of USER_WEBPACK_CONFIG_NAMES) {
+				const absoluteConfigFile = absolutize(configFile);
+				if (fs.existsSync(absoluteConfigFile)) {
+					return absoluteConfigFile;
+				}
 			}
 		}
 	}


Test patch:
diff --git a/src/loaders/__tests__/examples-loader.spec.js b/src/loaders/__tests__/examples-loader.spec.js
index 22fbc40e..b98324d1 100644
--- a/src/loaders/__tests__/examples-loader.spec.js
+++ b/src/loaders/__tests__/examples-loader.spec.js
@@ -1,4 +1,4 @@
-import qs from 'querystringify';
+import { encode } from 'qss';
 import examplesLoader from '../examples-loader';
 
 /* eslint-disable no-new-func */
@@ -9,7 +9,7 @@ const query = {
 	shouldShowDefaultExample: false,
 };
 
-const getQuery = (options = {}) => `?${qs.stringify({ ...query, ...options })}`;
+const getQuery = (options = {}) => encode({ ...query, ...options }, '?');
 
 it('should return valid, parsable JS', () => {
 	const exampleMarkdown = `
diff --git a/src/scripts/utils/__tests__/findUserWebpackConfig.spec.js b/src/scripts/utils/__tests__/findUserWebpackConfig.spec.js
index 576b584c..66a65840 100644
--- a/src/scripts/utils/__tests__/findUserWebpackConfig.spec.js
+++ b/src/scripts/utils/__tests__/findUserWebpackConfig.spec.js
@@ -3,9 +3,20 @@ import findUserWebpackConfig from '../findUserWebpackConfig';
 const cwd = process.cwd();
 afterEach(() => process.chdir(cwd));
 
-it('should return path to Create React App Webpack config', () => {
+it('should return path to Create React App Webpack old config (react-scripts <= 2.1.1)', () => {
 	const result = findUserWebpackConfig(a => a);
-	expect(result).toMatch(/^react-scripts\//);
+	expect(result).toMatchInlineSnapshot(`"react-scripts/config/webpack.config.dev"`);
+});
+
+it('should return path to Create React App Webpack config (react-scripts > 2.1.1)', () => {
+	const result = findUserWebpackConfig(a => {
+		if (/webpack\.config\.dev/.test(a)) {
+			// Simulate an error. For example, if the file doesn't exist.
+			throw new Error();
+		}
+		return a;
+	});
+	expect(result).toMatchInlineSnapshot(`"react-scripts/config/webpack.config"`);
 });
 
 it('should return an absolute path to user Webpack config located in project root folder', () => {