gatsbyjs · Dec 9, 2020 · Dec 9, 2020 · Dec 9, 2020 · Dec 9, 2020 · Dec 9, 2020
diff --git a/packages/gatsby-admin/CHANGELOG.md b/packages/gatsby-admin/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.4.2](https://github.com/gatsbyjs/gatsby/compare/gatsby-admin@0.4.1...gatsby-admin@0.4.2) (2020-12-10)
+
+**Note:** Version bump only for package gatsby-admin
+
 ## [0.4.1](https://github.com/gatsbyjs/gatsby/compare/gatsby-admin@0.4.0...gatsby-admin@0.4.1) (2020-12-07)
 
 **Note:** Version bump only for package gatsby-admin

diff --git a/packages/gatsby-admin/package.json b/packages/gatsby-admin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gatsby-admin",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "main": "index.js",
   "author": "Max Stoiber",
   "license": "MIT",
@@ -20,7 +20,7 @@
     "@typescript-eslint/parser": "^2.34.0",
     "csstype": "^2.6.13",
     "formik": "^2.2.5",
-    "gatsby": "^2.28.1",
+    "gatsby": "^2.28.2",
     "gatsby-interface": "^0.0.225",
     "gatsby-plugin-typescript": "^2.8.0",
     "gatsby-plugin-webfonts": "^1.1.3",

diff --git a/packages/gatsby-cli/CHANGELOG.md b/packages/gatsby-cli/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.15.1](https://github.com/gatsbyjs/gatsby/compare/gatsby-cli@2.15.0...gatsby-cli@2.15.1) (2020-12-10)
+
+**Note:** Version bump only for package gatsby-cli
+
 # [2.15.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-cli@2.15.0-next.2...gatsby-cli@2.15.0) (2020-12-02)
 
 ### Bug Fixes

diff --git a/packages/gatsby-cli/package.json b/packages/gatsby-cli/package.json
@@ -1,7 +1,7 @@
 {
   "name": "gatsby-cli",
   "description": "Gatsby command-line interface for creating new sites and running Gatsby commands",
-  "version": "2.15.0",
+  "version": "2.15.1",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "bin": {
     "gatsby": "cli.js"
@@ -25,7 +25,7 @@
     "fs-exists-cached": "^1.0.0",
     "fs-extra": "^8.1.0",
     "gatsby-core-utils": "^1.6.0",
-    "gatsby-recipes": "^0.5.0",
+    "gatsby-recipes": "^0.5.1",
     "gatsby-telemetry": "^1.6.0",
     "hosted-git-info": "^3.0.6",
     "is-valid-path": "^0.1.1",

diff --git a/packages/gatsby-recipes/CHANGELOG.md b/packages/gatsby-recipes/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.5.1](https://github.com/gatsbyjs/gatsby/compare/gatsby-recipes@0.5.0...gatsby-recipes@0.5.1) (2020-12-10)
+
+### Bug Fixes
+
+- **gatsby-recipes:** Add postcss as a dependency ([#28556](https://github.com/gatsbyjs/gatsby/issues/28556)) ([#28559](https://github.com/gatsbyjs/gatsby/issues/28559)) ([4f50275](https://github.com/gatsbyjs/gatsby/commit/4f5027532b85130a0179b14142c4a40142a62380))
+
 # [0.5.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-recipes@0.5.0-next.2...gatsby-recipes@0.5.0) (2020-12-02)
 
 ### Bug Fixes

diff --git a/packages/gatsby-recipes/package.json b/packages/gatsby-recipes/package.json
@@ -1,7 +1,7 @@
 {
   "name": "gatsby-recipes",
   "description": "Core functionality for Gatsby Recipes",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "bugs": {
     "url": "https://github.com/gatsbyjs/gatsby/issues"

diff --git a/packages/gatsby-recipes/recipes/tailwindcss.mdx b/packages/gatsby-recipes/recipes/tailwindcss.mdx
@@ -9,13 +9,14 @@ This recipe:
 Installs necessary NPM packages.
 
 <NPMPackage name="tailwindcss" />
+<NPMPackage name="postcss" />
 <NPMPackage name="gatsby-plugin-postcss" />
 
 ---
 
 Installs necessary Gatsby plugins.
 
-<GatsbyPlugin name="gatsby-plugin-postcss"/>
+<GatsbyPlugin name="gatsby-plugin-postcss" />
 
 ---
 

diff --git a/packages/gatsby-remark-images/CHANGELOG.md b/packages/gatsby-remark-images/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.7.1](https://github.com/gatsbyjs/gatsby/compare/gatsby-remark-images@3.7.0...gatsby-remark-images@3.7.1) (2020-12-10)
+
+### Bug Fixes
+
+- **gatsby-remark-images:** allow tracedSVG to accept object with settings ([#28242](https://github.com/gatsbyjs/gatsby/issues/28242)) ([#28552](https://github.com/gatsbyjs/gatsby/issues/28552)) ([9752489](https://github.com/gatsbyjs/gatsby/commit/97524891202985fb1c6ac57b7822742980ff54cd))
+
 # [3.7.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-remark-images@3.7.0-next.0...gatsby-remark-images@3.7.0) (2020-12-02)
 
 **Note:** Version bump only for package gatsby-remark-images

diff --git a/packages/gatsby-remark-images/package.json b/packages/gatsby-remark-images/package.json
@@ -1,7 +1,7 @@
 {
   "name": "gatsby-remark-images",
   "description": "Processes images in markdown so they can be used in the production build.",
-  "version": "3.7.0",
+  "version": "3.7.1",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "bugs": {
     "url": "https://github.com/gatsbyjs/gatsby/issues"

diff --git a/packages/gatsby-remark-images/src/__tests__/gatsby-node.js b/packages/gatsby-remark-images/src/__tests__/gatsby-node.js
@@ -1,5 +1,6 @@
 import { testPluginOptionsSchema } from "gatsby-plugin-utils"
 import { pluginOptionsSchema } from "../gatsby-node"
+import { Potrace } from "potrace"
 
 describe(`pluginOptionsSchema`, () => {
   it(`should provide meaningful errors when fields are invalid`, async () => {
@@ -13,7 +14,7 @@ describe(`pluginOptionsSchema`, () => {
       `"backgroundColor" must be a string`,
       `"quality" must be a number`,
       `"withWebp" must be one of [object, boolean]`,
-      `"tracedSVG" must be a boolean`,
+      `"tracedSVG" must be one of [boolean, object]`,
       `"loading" must be one of [lazy, eager, auto]`,
       `"disableBgImageOnAlpha" must be a boolean`,
       `"disableBgImage" must be a boolean`,
@@ -102,4 +103,210 @@ describe(`pluginOptionsSchema`, () => {
       expect(isValid).toBe(false)
     })
   })
+
+  describe(`allow different variants of "tracedSVG" option`, () => {
+    describe(`supports boolean variant`, () => {
+      it.each([
+        [`true`, true],
+        [`false`, false],
+      ])(`%s`, async (_title, booleanValue) => {
+        const { isValid } = await testPluginOptionsSchema(pluginOptionsSchema, {
+          tracedSVG: booleanValue,
+        })
+
+        expect(isValid).toBe(true)
+      })
+    })
+
+    describe(`supports object notation`, () => {
+      it(`should validate when all fields are set`, async () => {
+        const { isValid } = await testPluginOptionsSchema(pluginOptionsSchema, {
+          tracedSVG: {
+            turnPolicy: Potrace.TURNPOLICY_RIGHT,
+            turdSize: 50,
+            alphaMax: 0.5,
+            optCurve: false,
+            optTolerance: 0.9,
+            threshold: 230,
+            blackOnWhite: false,
+            color: `red`,
+            background: `green`,
+          },
+        })
+
+        expect(isValid).toBe(true)
+      })
+
+      it(`should validate when some fields are set`, async () => {
+        const { isValid } = await testPluginOptionsSchema(pluginOptionsSchema, {
+          tracedSVG: {
+            turnPolicy: Potrace.TURNPOLICY_RIGHT,
+            turdSize: 50,
+            // alphaMax: 0.5,
+            // optCurve: 0.2,
+            // optTolerance: 0.9,
+            // threshold: 230,
+            // blackOnWhite: false,
+            color: `red`,
+            background: `green`,
+          },
+        })
+
+        expect(isValid).toBe(true)
+      })
+
+      it(`should fail validation when unknown fields are set`, async () => {
+        const { isValid, errors } = await testPluginOptionsSchema(
+          pluginOptionsSchema,
+          {
+            tracedSVG: {
+              foo: `bar`,
+            },
+          }
+        )
+
+        expect(isValid).toBe(false)
+        expect(errors).toMatchInlineSnapshot(`
+          Array [
+            "\\"tracedSVG.foo\\" is not allowed",
+          ]
+        `)
+      })
+
+      describe(`turnPolicy variants`, () => {
+        it.each([
+          `TURNPOLICY_BLACK`,
+          `TURNPOLICY_WHITE`,
+          `TURNPOLICY_LEFT`,
+          `TURNPOLICY_RIGHT`,
+          `TURNPOLICY_MINORITY`,
+          `TURNPOLICY_MAJORITY`,
+        ])(`supports setting by policy name (%s)`, async name => {
+          const { isValid } = await testPluginOptionsSchema(
+            pluginOptionsSchema,
+            {
+              tracedSVG: { turnPolicy: name },
+            }
+          )
+
+          expect(isValid).toBe(true)
+        })
+
+        it.each([
+          Potrace.TURNPOLICY_BLACK,
+          Potrace.TURNPOLICY_WHITE,
+          Potrace.TURNPOLICY_LEFT,
+          Potrace.TURNPOLICY_RIGHT,
+          Potrace.TURNPOLICY_MINORITY,
+          Potrace.TURNPOLICY_MAJORITY,
+        ])(`supports setting by policy value (%s)`, async value => {
+          const { isValid } = await testPluginOptionsSchema(
+            pluginOptionsSchema,
+            {
+              tracedSVG: { turnPolicy: value },
+            }
+          )
+
+          expect(isValid).toBe(true)
+        })
+
+        it(`Doesn't support arbitrary string values`, async () => {
+          const { isValid, errors } = await testPluginOptionsSchema(
+            pluginOptionsSchema,
+            {
+              tracedSVG: { turnPolicy: `foo` },
+            }
+          )
+
+          expect(isValid).toBe(false)
+          expect(errors).toMatchInlineSnapshot(`
+            Array [
+              "\\"tracedSVG.turnPolicy\\" must be one of [TURNPOLICY_BLACK, TURNPOLICY_WHITE, TURNPOLICY_LEFT, TURNPOLICY_RIGHT, TURNPOLICY_MINORITY, TURNPOLICY_MAJORITY, black, white, left, right, minority, majority]",
+            ]
+          `)
+        })
+      })
+
+      describe(`threshold`, () => {
+        // valid settings
+        it.each([
+          [
+            `THRESHOLD_AUTO`,
+            {
+              value: Potrace.THRESHOLD_AUTO,
+              expectedIsValid: true,
+            },
+          ],
+          [
+            0,
+            {
+              expectedIsValid: true,
+            },
+          ],
+          [
+            128,
+            {
+              expectedIsValid: true,
+            },
+          ],
+          [
+            255,
+            {
+              expectedIsValid: true,
+            },
+          ],
+        ])(`Allow setting %s`, async (titleAndMaybeValue, { value }) => {
+          if (typeof value === `undefined`) {
+            // if value wasn't explicitly set use title
+            value = titleAndMaybeValue
+          }
+
+          const { isValid } = await testPluginOptionsSchema(
+            pluginOptionsSchema,
+            {
+              tracedSVG: { threshold: value },
+            }
+          )
+
+          expect(isValid).toBe(true)
+        })
+
+        // invalid settings
+        it.each([
+          [
+            -5,
+            {
+              expectedIsValid: false,
+              errorMessage: `"tracedSVG.threshold" must be greater than or equal to 0`,
+            },
+          ],
+          [
+            256,
+            {
+              expectedIsValid: false,
+              errorMessage: `"tracedSVG.threshold" must be less than or equal to 255`,
+            },
+          ],
+        ])(
+          `Doesn't allow setting %s`,
+          async (titleAndMaybeValue, { value, errorMessage }) => {
+            if (typeof value === `undefined`) {
+              // if value wasn't explicitly set use title
+              value = titleAndMaybeValue
+            }
+
+            const { isValid, errors } = await testPluginOptionsSchema(
+              pluginOptionsSchema,
+              {
+                tracedSVG: { threshold: value },
+              }
+            )
+
+            expect(isValid).toBe(false)
+            expect(errors[0]).toEqual(errorMessage)
+          }
+        )
+      })
+    })
+  })
 })
diff --git a/packages/gatsby-remark-images/src/gatsby-node.js b/packages/gatsby-remark-images/src/gatsby-node.js
@@ -1,3 +1,5 @@
+const { Potrace } = require(`potrace`)
+
 exports.pluginOptionsSchema = function ({ Joi }) {
   return Joi.object({
     maxWidth: Joi.number()
@@ -52,7 +54,43 @@ exports.pluginOptionsSchema = function ({ Joi }) {
       .description(
         `Additionally generate WebP versions alongside your chosen file format. They are added as a srcset with the appropriate mimetype and will be loaded in browsers that support the format. Pass true for default support, or an object of options to specifically override those for the WebP files. For example, pass { quality: 80 } to have the WebP images be at quality level 80.`
       ),
-    tracedSVG: Joi.boolean()
+    tracedSVG: Joi.alternatives()
+      .try(
+        Joi.boolean(),
+        Joi.object({
+          turnPolicy: Joi.string()
+            .valid(
+              // this plugin also allow to use key names and not exact values
+              `TURNPOLICY_BLACK`,
+              `TURNPOLICY_WHITE`,
+              `TURNPOLICY_LEFT`,
+              `TURNPOLICY_RIGHT`,
+              `TURNPOLICY_MINORITY`,
+              `TURNPOLICY_MAJORITY`,
+              // it also allow using actual policy values
+              Potrace.TURNPOLICY_BLACK,
+              Potrace.TURNPOLICY_WHITE,
+              Potrace.TURNPOLICY_LEFT,
+              Potrace.TURNPOLICY_RIGHT,
+              Potrace.TURNPOLICY_MINORITY,
+              Potrace.TURNPOLICY_MAJORITY
+            )
+            .default(Potrace.TURNPOLICY_MAJORITY),
+          turdSize: Joi.number().default(100),
+          alphaMax: Joi.number(),
+          optCurve: Joi.boolean().default(true),
+          optTolerance: Joi.number().default(0.4),
+          threshold: Joi.alternatives()
+            .try(
+              Joi.number().min(0).max(255),
+              Joi.number().valid(Potrace.THRESHOLD_AUTO)
+            )
+            .default(Potrace.THRESHOLD_AUTO),
+          blackOnWhite: Joi.boolean().default(true),
+          color: Joi.string().default(`lightgray`),
+          background: Joi.string().default(`transparent`),
+        })
+      )
       .default(false)
       .description(
         `Use traced SVGs for placeholder images instead of the “blur up” effect. Pass true for traced SVGs with the default settings (seen here), or an object of options to override the default. For example, pass { color: "#F00", turnPolicy: "TURNPOLICY_MAJORITY" } to change the color of the trace to red and the turn policy to TURNPOLICY_MAJORITY. See node-potrace parameter documentation for a full listing and explanation of the available options.`