Merge pull request #98 from storybookjs/tech/upgrades

UPGRADES

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2
 jobs:
   build:
     docker:
-      - image: circleci/node:8.10.0
+      - image: circleci/node:10
 
     working_directory: ~/repo
 

package.json

@@ -32,39 +32,37 @@
     }
   },
   "lint-staged": {
-    "linters": {
-      "*.js": [
-        "yarn lint:js --fix",
-        "git add"
-      ],
-      "*.html": [
-        "yarn lint:js --fix",
-        "git add"
-      ],
-      "package.json": [
-        "yarn lint:package",
-        "git add"
-      ]
-    }
+    "*.html": [
+      "yarn lint:js --fix",
+      "git add"
+    ],
+    "*.js": [
+      "yarn lint:js --fix",
+      "git add"
+    ],
+    "package.json": [
+      "yarn lint:package",
+      "git add"
+    ]
   },
   "dependencies": {
     "keycode": "^2.2.0",
-    "polished": "^3.3.0",
-    "prismjs": "1.13.0",
-    "react-modal": "^3.8.1",
-    "react-popper-tooltip": "^2.8.2",
+    "polished": "^3.4.1",
+    "prismjs": "1.17.1",
+    "react-modal": "^3.10.1",
+    "react-popper-tooltip": "^2.9.1",
     "recompose": "^0.30.0",
-    "styled-components": "^4.1.2",
-    "uuid": "^3.3.2"
+    "styled-components": "^4.4.0",
+    "uuid": "^3.3.3"
   },
   "devDependencies": {
-    "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.2.2",
-    "@babel/node": "^7.2.2",
-    "@babel/plugin-proposal-object-rest-spread": "^7.3.2",
-    "@babel/plugin-transform-runtime": "^7.2.0",
-    "@babel/preset-env": "^7.3.1",
-    "@babel/preset-react": "^7.0.0",
+    "@babel/cli": "^7.6.4",
+    "@babel/core": "^7.6.4",
+    "@babel/node": "^7.6.3",
+    "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
+    "@babel/plugin-transform-runtime": "^7.6.2",
+    "@babel/preset-env": "^7.6.3",
+    "@babel/preset-react": "^7.6.3",
     "@storybook/addon-a11y": "^5.2.4",
     "@storybook/addon-actions": "^5.2.4",
     "@storybook/addon-docs": "^5.2.4",
@@ -74,11 +72,11 @@
     "@storybook/react": "^5.2.4",
     "@storybook/source-loader": "^5.2.4",
     "auto": "^4.14.0",
-    "babel-eslint": "^10.0.1",
-    "babel-loader": "^8.0.0",
+    "babel-eslint": "^10.0.3",
+    "babel-loader": "^8.0.6",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "babel-plugin-styled-components": "^1.9.4",
-    "cross-env": "^5.1.4",
+    "babel-plugin-styled-components": "^1.10.6",
+    "cross-env": "^6.0.3",
     "eslint": "^5.0.1",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-config-prettier": "^4.0.0",
@@ -90,14 +88,14 @@
     "eslint-plugin-prettier": "^3.0.1",
     "eslint-plugin-react": "^7.11.1",
     "eslint-plugin-react-hooks": "^1.6.1",
-    "husky": "^1.3.1",
-    "lint-staged": "^8.1.4",
-    "prettier": "^1.16.4",
-    "prettier-eslint": "^8.8.2",
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1",
+    "husky": "^3.0.9",
+    "lint-staged": "^9.4.2",
+    "prettier": "^1.18.2",
+    "prettier-eslint": "^9.0.0",
+    "react": "^16.10.2",
+    "react-dom": "^16.10.2",
     "sort-package-json": "^1.21.0",
-    "storybook-chromatic": "^1.3.3"
+    "storybook-chromatic": "^3.0.3"
   },
   "peerDependencies": {
     "prop-types": "^15.5.4",

src/components/Highlight.js

@@ -3,12 +3,19 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import styled from 'styled-components';
 import Prism from 'prismjs';
-import loadLanguages from 'prismjs/components/index';
 import PropTypes from 'prop-types';
 import { color } from './shared/styles';
 
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-yaml';
+
+global.Prism = Prism;
+
 const languages = ['bash', 'javascript', 'typescript', 'json', 'css', 'yaml'];
-loadLanguages(languages);
 
 // Prism theme copied from 'prismjs/themes/prism.css.' -- without Webpack, the CSS
 // cannot be imported easily and any app which pulls in the design system will
@@ -39,7 +46,8 @@ const HighlightBlock = styled.div`
   }
 
   .language-bash .token.operator,
-  .language-bash .token.function {
+  .language-bash .token.function,
+  .language-bash .token.builtin {
     color: ${color.darkest};
     background: none;
   }