Fix: Change some dependencies to smaller alternatives (styleguidist#1248)

Author: lukeed

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:
 

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;
+}

flow-typed/querystringify.js.flow

@@ -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,20 +56,20 @@
     "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",
     "lodash": "^4.17.11",
     "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",

package-lock.json

@@ -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)
+		);
 	}
 }
 

package.json

@@ -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';

src/bin/styleguidist.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 }) => ({

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 Styled from 'rsg-components/Styled';
 
 const styles = ({ color }) => ({

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';
 

src/client/rsg-components/Link/LinkRenderer.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 }) => ({

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';
 import prismTheme from '../../../styles/prismTheme';
 

src/client/rsg-components/Markdown/List/ListRenderer.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: {

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';
 
 export const styles = ({ space, color, borderRadius }) => ({

src/client/rsg-components/Name/NameRenderer.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';
 

src/client/rsg-components/Playground/PlaygroundRenderer.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';
 

src/client/rsg-components/SectionHeading/SectionHeadingRenderer.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: {

src/client/rsg-components/StyleGuide/StyleGuideRenderer.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: {

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 }) => ({
 	button: {

src/client/rsg-components/Text/TextRenderer.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 = `

src/client/rsg-components/ToolbarButton/ToolbarButtonRenderer.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}`);
 };