scoobie 12.1.1 → 13.0.3

package/README.md

@@ -96,6 +96,15 @@ const skuRender: Render<RenderContext> = {
 };
 ```
 
+If you manually manage the [Content Security Policy] of your site,
+you can specify the following sources along with the script hashes from [typography.ts](typography.ts):
+
+```http
+Content-Security-Policy: font-src https://fonts.gstatic.com; script-src 'sha256-...' 'sha256-...'; style-src https://fonts.googleapis.com
+```
+
+[content security policy]: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
+
 ### `src/scoobie.d.ts`
 
 Import TypeScript definitions for `MDX`, `*.md` and `*.mdx`:
@@ -168,7 +177,8 @@ export const App = () => (
 
 Scoobie optionally supports simple, source-controlled diagrams via [mermaid].
 
-This requires the `mermaid` configuration option to be set on [ScoobieWebpackPlugin](#scoobiewebpackplugin).
+This requires the `mermaid` configuration option to be set on [ScoobieWebpackPlugin](#scoobiewebpackplugin),
+and `@mermaid-js/mermaid-cli` to be installed as a peer dependency.
 From there, the easiest way to get started is to check out the [mermaid live editor].
 
 You can use a named code block in Markdown files:
@@ -607,6 +617,7 @@ module.exports = {
       plugins: [
         new ScoobieWebpackPlugin({
           // Optional configuration option to enable mermaid support.
+          // `@mermaid-js/mermaid-cli` must be installed as a peer dependency.
           // Temporary files are written to `${rootDir}/mermaid`.
           mermaid: {
             rootDir: __dirname,

package/package.json

@@ -4,22 +4,22 @@
   "license": "MIT",
   "main": "src/index.ts",
   "sideEffects": false,
-  "version": "12.1.1",
+  "version": "13.0.3",
   "dependencies": {
+    "@capsizecss/core": "^3.0.0",
     "@mdx-js/loader": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "@mermaid-js/mermaid-cli": "^8.11.4",
     "@types/mdx-js__react": "^1.5.4",
     "@types/react-router-hash-link": "^2.4.1",
     "@vanilla-extract/css": "^1.2.3",
     "@vanilla-extract/css-utils": "^0.1.1",
-    "capsize": "^2.0.0",
+    "babel-loader": "^8.2.3",
     "clsx": "^1.1.1",
     "find-up": "^5.0.0",
     "fs-extra": "^10.0.0",
     "jsonc-parser": "^3.0.0",
     "polished": "^4.1.3",
-    "prism-react-renderer": "1.2.1",
+    "prism-react-renderer": "1.3.1",
     "react-keyed-flatten-children": "^1.3.0",
     "react-router-hash-link": "^2.4.3",
     "refractor": "^3.4.0",
@@ -31,19 +31,21 @@
     "which": "^2.0.2"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "6.4.8",
+    "@mermaid-js/mermaid-cli": "8.14.0",
+    "@storybook/addon-essentials": "6.4.19",
     "@storybook/storybook-deployer": "2.8.10",
-    "@types/react": "17.0.37",
+    "@types/react": "17.0.39",
     "@types/react-dom": "17.0.11",
-    "@types/react-helmet": "6.1.4",
-    "braid-design-system": "31.2.3",
+    "@types/react-helmet": "6.1.5",
+    "braid-design-system": "31.5.0",
     "loki": "0.28.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-helmet": "6.1.0",
-    "react-router-dom": "6.0.2",
-    "semantic-release": "18.0.1",
-    "sku": "11.2.5"
+    "react-router-dom": "6.2.1",
+    "semantic-release": "19.0.2",
+    "sku": "11.2.6",
+    "webpack": "5.69.0"
   },
   "files": [
     "src",
@@ -54,11 +56,17 @@
     "typography.ts"
   ],
   "peerDependencies": {
+    "@mermaid-js/mermaid-cli": ">= 8.13.7 < 9",
     "braid-design-system": ">= 31.0.0",
     "react": ">= 17 < 18",
     "react-router-dom": ">= 5.3.0",
     "sku": ">= 10.13.4 < 12"
   },
+  "peerDependenciesMeta": {
+    "@mermaid-js/mermaid-cli": {
+      "optional": true
+    }
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/seek-oss/scoobie.git"

package/styles/code.css.ts

@@ -1,6 +1,6 @@
+import { createStyleObject, getCapHeight } from '@capsizecss/core';
 import { styleVariants } from '@vanilla-extract/css';
 import { responsiveStyle } from 'braid-design-system/css';
-import capsize, { getCapHeight } from 'capsize';
 
 import { Size } from '../src/private/size';
 
@@ -56,7 +56,7 @@ const monospaceFontStylesForTarget = (
   size: Size,
   target: 'mobile' | 'tablet',
 ) =>
-  capsize({
+  createStyleObject({
     capHeight: getCapHeight({
       fontSize: tokens.typography.code[size][target].fontSize,
       fontMetrics: monospaceFontMetrics,

package/typography.ts

@@ -4,12 +4,22 @@ export const robotoHref =
 export const robotoMonoHref =
   'https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap';
 
+// Content Security Policy script hashes
+// 'sha256-8fG3vVy4SKf2xd79rQ5AKI0uBpwM9Wc8SMYCcGNyuPw='
+// 'sha384-moCT7/5f3Yr4vo0n3BZCjn7j0gT8qzKn7rpQqBnle0R2oLW/RqGTJ4jldVCTbOjx'
+// 'sha512-4v+nFnUdafQ6pPIO42k6ziIvnqW4c8l+hYir10XE6SuIm3jfcQTK7tmqQttfYbFXZdk1X7QzPEMtshyX53o6Ug=='
 export const robotoHtml = `
-<link rel="preload" href="${robotoHref}" as="style" onload="this.onload=null;this.rel='stylesheet'">
+<link rel="preload" href="${robotoHref}" id="robotoStyle" as="style">
 <noscript><link rel="stylesheet" href="${robotoHref}"></noscript>
+<script>robotoStyle.addEventListener('load',function(){this.rel='stylesheet'})</script>
 `.trim();
 
+// Content Security Policy script hashes
+// 'sha256-bMQhmqqj8Sjmn6rk/siu6CPHm54TL349InovHDPXATw='
+// 'sha384-03NpwxMolxf0FN4adYZfdpBY0sEYXM5vOh+mE++L9pSIoEiVLSYQfaZo1pTNuiRN'
+// 'sha512-lbwBboh2OwaD10JAkMLuD8OHBlmBpOgeyMssLlb2nZUBpWqrjJKBMtAkt9rlAS/tXxpmCeBz71oTkYBoLRZBsA=='
 export const robotoMonoHtml = `
-<link rel="preload" href="${robotoMonoHref}" as="style" onload="this.onload=null;this.rel='stylesheet'">
+<link rel="preload" href="${robotoMonoHref}" id="robotoMonoStyle" as="style">
 <noscript><link rel="stylesheet" href="${robotoMonoHref}"></noscript>
+<script>robotoMonoStyle.addEventListener('load',function(){this.rel='stylesheet'})</script>
 `.trim();