gatsbyjs · gatsbybot · Dec 6, 2022 · Dec 7, 2022 · Dec 7, 2022 · Dec 8, 2022
diff --git a/e2e-tests/development-runtime/.yarnrc b/e2e-tests/development-runtime/.yarnrc
@@ -0,0 +1 @@
+ignore-engines true
diff --git a/e2e-tests/gatsby-image/.yarnrc b/e2e-tests/gatsby-image/.yarnrc
@@ -0,0 +1 @@
+ignore-engines true
diff --git a/e2e-tests/gatsby-image/cypress/integration/traced.js b/e2e-tests/gatsby-image/cypress/integration/traced.js
@@ -5,14 +5,10 @@ describe(`fixed`, () => {
     cy.visit(`/traced`).waitForRouteChange()
   })
 
-  it(`renders a traced svg`, () => {
+  it(`renders a traced svg (fallsback to base64)`, () => {
     cy.getTestElement(tracedTestId)
       .find(`.gatsby-image-wrapper > img`)
       .should(`have.attr`, `src`)
-      .and(src => {
-        ;[`data:image/svg+xml`, `fill='white'`].forEach(part =>
-          expect(src).to.include(part)
-        )
-      })
+      .and(`contains`, `base64`)
   })
 })
diff --git a/e2e-tests/gatsby-static-image/.yarnrc b/e2e-tests/gatsby-static-image/.yarnrc
@@ -0,0 +1 @@
+ignore-engines true
diff --git a/e2e-tests/gatsby-static-image/cypress/integration/traced.js b/e2e-tests/gatsby-static-image/cypress/integration/traced.js
@@ -5,12 +5,14 @@ describe(`fixed`, () => {
     cy.visit(`/traced`).waitForRouteChange()
   })
 
-  it(`renders a traced svg`, () => {
+  it(`traced svg (falls back to DOMINANT_COLOR)`, () => {
     cy.getTestElement(tracedTestId)
-      .find(`.gatsby-image-wrapper > img`)
-      .should(`have.attr`, `src`)
-      .and(src => {
-        ;[`data:image/svg+xml`].forEach(part => expect(src).to.include(part))
+      .find(`.gatsby-image-wrapper > [data-placeholder-image]`)
+      .first()
+      .should($el => {
+        // traced falls
+        expect($el.prop("tagName")).to.be.equal("DIV")
+        expect($el).to.be.empty
       })
   })
 

diff --git a/e2e-tests/mdx-less-babel/.yarnrc b/e2e-tests/mdx-less-babel/.yarnrc
@@ -0,0 +1 @@
+ignore-engines true
diff --git a/e2e-tests/mdx/.yarnrc b/e2e-tests/mdx/.yarnrc
@@ -0,0 +1 @@
+ignore-engines true
diff --git a/e2e-tests/path-prefix/.yarnrc b/e2e-tests/path-prefix/.yarnrc
@@ -0,0 +1 @@
+ignore-engines true
diff --git a/e2e-tests/production-runtime/.yarnrc b/e2e-tests/production-runtime/.yarnrc
@@ -0,0 +1 @@
+ignore-engines true
diff --git a/e2e-tests/themes/.yarnrc b/e2e-tests/themes/.yarnrc
@@ -0,0 +1 @@
+ignore-engines true
diff --git a/e2e-tests/visual-regression/.yarnrc b/e2e-tests/visual-regression/.yarnrc
@@ -0,0 +1 @@
+ignore-engines true
diff --git a/examples/using-contentful/package.json b/examples/using-contentful/package.json
@@ -32,6 +32,7 @@
   "scripts": {
     "develop": "gatsby develop",
     "build": "gatsby build",
+    "clean": "gatsby clean",
     "start": "gatsby serve"
   }
 }
diff --git a/integration-tests/artifacts/.yarnrc b/integration-tests/artifacts/.yarnrc
@@ -0,0 +1 @@
+ignore-engines true
diff --git a/integration-tests/cache-resilience/.yarnrc b/integration-tests/cache-resilience/.yarnrc
@@ -0,0 +1 @@
+ignore-engines true
diff --git a/integration-tests/gatsby-cli/__tests__/new.js b/integration-tests/gatsby-cli/__tests__/new.js
@@ -29,7 +29,11 @@ describe(`gatsby new`, () => {
   })
 
   it(`creates a gatsby site with the default starter`, () => {
-    const [code, logs] = GatsbyCLI.from(cwd).invoke([`new`, `gatsby-default`])
+    const [code, logs] = GatsbyCLI.from(cwd).invoke([
+      `new`,
+      `gatsby-default`,
+      `gatsbyjs/gatsby-starter-default#v2`,
+    ])
 
     logs.should.contain(
       `info Creating new site from git: https://github.com/gatsbyjs/gatsby-starter-default.git`
@@ -48,7 +52,7 @@ describe(`gatsby new`, () => {
     const [code, logs] = GatsbyCLI.from(cwd).invoke([
       `new`,
       `gatsby-blog`,
-      `gatsbyjs/gatsby-starter-blog`,
+      `gatsbyjs/gatsby-starter-blog#v2`,
     ])
 
     logs.should.contain(

diff --git a/integration-tests/gatsby-pipeline/.yarnrc b/integration-tests/gatsby-pipeline/.yarnrc
@@ -0,0 +1 @@
+ignore-engines true
diff --git a/integration-tests/images/.yarnrc b/integration-tests/images/.yarnrc
@@ -0,0 +1 @@
+ignore-engines true
diff --git a/integration-tests/long-term-caching/.yarnrc b/integration-tests/long-term-caching/.yarnrc
@@ -0,0 +1 @@
+ignore-engines true
diff --git a/integration-tests/ssr/.yarnrc b/integration-tests/ssr/.yarnrc
@@ -0,0 +1 @@
+ignore-engines true
diff --git a/integration-tests/structured-logging/.yarnrc b/integration-tests/structured-logging/.yarnrc
@@ -0,0 +1 @@
+ignore-engines true
diff --git a/packages/gatsby-cli/src/structured-errors/error-schema.ts b/packages/gatsby-cli/src/structured-errors/error-schema.ts
@@ -1,10 +1,12 @@
 import Joi from "@hapi/joi"
 import { ILocationPosition, IStructuredError } from "./types"
 
-export const Position: Joi.ObjectSchema<ILocationPosition> = Joi.object().keys({
-  line: Joi.number(),
-  column: Joi.number(),
-})
+export const Position: Joi.ObjectSchema<ILocationPosition> = Joi.object()
+  .keys({
+    line: Joi.number(),
+    column: Joi.number(),
+  })
+  .unknown()
 
 export const errorSchema: Joi.ObjectSchema<IStructuredError> = Joi.object().keys(
   {
@@ -27,7 +29,7 @@ export const errorSchema: Joi.ObjectSchema<IStructuredError> = Joi.object().keys
     location: Joi.object({
       start: Position.required(),
       end: Position,
-    }),
+    }).unknown(),
     docsUrl: Joi.string().uri({
       allowRelative: false,
       relativeOnly: false,

diff --git a/packages/gatsby-plugin-image/src/resolver-utils.ts b/packages/gatsby-plugin-image/src/resolver-utils.ts
@@ -77,11 +77,11 @@ export function getGatsbyImageFieldConfig<TSource, TContext>(
         type: ImagePlaceholderType,
         defaultValue: `blurred`,
         description: stripIndent`
-            Format of generated placeholder image, displayed while the main image loads. 
-            BLURRED: a blurred, low resolution image, encoded as a base64 data URI (default)
-            DOMINANT_COLOR: a solid color, calculated from the dominant color of the image. 
-            TRACED_SVG: a low-resolution traced SVG of the image.
-            NONE: no placeholder. Set "background" to use a fixed background color.`,
+            Format of generated placeholder image, displayed while the main image loads.
+            BLURRED: a blurred, low resolution image, encoded as a base64 data URI.
+            DOMINANT_COLOR: a solid color, calculated from the dominant color of the image (default).
+            TRACED_SVG: deprecated. Will use DOMINANT_COLOR.
+            NONE: no placeholder. Set the argument "backgroundColor" to use a fixed background color.`,
       },
       formats: {
         type: GraphQLList(ImageFormatType),

diff --git a/packages/gatsby-plugin-sharp/package.json b/packages/gatsby-plugin-sharp/package.json
@@ -19,13 +19,10 @@
     "imagemin-mozjpeg": "^9.0.0",
     "imagemin-pngquant": "^9.0.1",
     "lodash": "^4.17.20",
-    "mini-svg-data-uri": "^1.2.3",
-    "potrace": "^2.1.8",
     "probe-image-size": "^6.0.0",
     "progress": "^2.0.3",
     "semver": "^7.3.4",
     "sharp": "^0.27.0",
-    "svgo": "1.3.2",
     "uuid": "3.4.0"
   },
   "devDependencies": {

diff --git a/packages/gatsby-plugin-sharp/src/__tests__/__snapshots__/index.js.snap b/packages/gatsby-plugin-sharp/src/__tests__/__snapshots__/index.js.snap
@@ -1604,20 +1604,20 @@ Object {
 }
 `;
 
-exports[`gatsby-plugin-sharp tracedSVG runs on demand 1`] = `
+exports[`gatsby-plugin-sharp tracedSVG runs on demand (and falls back to blurred): fixed 1`] = `
 Object {
   "aspectRatio": 1,
   "base64": undefined,
   "height": 100,
   "originalName": "test.png",
   "src": "/static/1234/7e516/test.png",
   "srcSet": "/static/1234/7e516/test.png 1x",
-  "tracedSVG": "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3e%3cpath%20d='M41%2024c-18%207-24%2029-11%2043%2015%2017%2044%208%2046-15%201-19-17-34-35-28'%20fill='red'%20fill-rule='evenodd'/%3e%3c/svg%3e",
+  "tracedSVG": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAABOklEQVQ4y2P4r8ZANmKgvuZ/agy/VaHojyopmv+CNf/XQCCoCEHNf1VBqv+oM5yVY1giwbBakuG2AkjknzoW/eh2AtWdkWMwZ2cAAkYQwcDCwBDOw/BCGWwELs1wnfxMUJ1MMBIIjNkY3gH1o9qPCCGIfisOkFI2iKUMUFPYwdxcfrCPVDE0/wFbe0QGpIiJAR1AjJJlYXiPajlMMzicpouBFDEz4AQX5KCBj0XzXHECmi/JY9MMCa1zciAXMmLogXhEiYXhqwoigFBCGyLkzQVSBwwhuM+ZYeHXKIQjwKCWqzM8UGRQYUUJNgjDl4vhlxqKtdgSiTrDYyWGGF4GXphucWaGOiGG76rokYw9eQJTItB5L5QYTsqBEulHoD81sSdv7FkK4gRoxlAnOmMgewGSJf/StTAgEgEA1PJk9+Vu8VgAAAAASUVORK5CYII=",
   "width": 100,
 }
 `;
 
-exports[`gatsby-plugin-sharp tracedSVG runs on demand 2`] = `
+exports[`gatsby-plugin-sharp tracedSVG runs on demand (and falls back to blurred): fluid 1`] = `
 Object {
   "aspectRatio": 1,
   "base64": undefined,
@@ -1632,6 +1632,6 @@ Object {
 /static/1234/a1812/test.png 50w,
 /static/1234/7e516/test.png 100w",
   "srcSetType": "image/png",
-  "tracedSVG": "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3e%3cpath%20d='M41%2024c-18%207-24%2029-11%2043%2015%2017%2044%208%2046-15%201-19-17-34-35-28'%20fill='red'%20fill-rule='evenodd'/%3e%3c/svg%3e",
+  "tracedSVG": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAABOklEQVQ4y2P4r8ZANmKgvuZ/agy/VaHojyopmv+CNf/XQCCoCEHNf1VBqv+oM5yVY1giwbBakuG2AkjknzoW/eh2AtWdkWMwZ2cAAkYQwcDCwBDOw/BCGWwELs1wnfxMUJ1MMBIIjNkY3gH1o9qPCCGIfisOkFI2iKUMUFPYwdxcfrCPVDE0/wFbe0QGpIiJAR1AjJJlYXiPajlMMzicpouBFDEz4AQX5KCBj0XzXHECmi/JY9MMCa1zciAXMmLogXhEiYXhqwoigFBCGyLkzQVSBwwhuM+ZYeHXKIQjwKCWqzM8UGRQYUUJNgjDl4vhlxqKtdgSiTrDYyWGGF4GXphucWaGOiGG76rokYw9eQJTItB5L5QYTsqBEulHoD81sSdv7FkK4gRoxlAnOmMgewGSJf/StTAgEgEA1PJk9+Vu8VgAAAAASUVORK5CYII=",
 }
 `;
diff --git a/packages/gatsby-plugin-sharp/src/__tests__/index.js b/packages/gatsby-plugin-sharp/src/__tests__/index.js
@@ -657,7 +657,7 @@ describe(`gatsby-plugin-sharp`, () => {
       expect(result.tracedSVG).toBeUndefined()
     })
 
-    it(`runs on demand`, async () => {
+    it(`runs on demand (and falls back to blurred)`, async () => {
       const args = {
         maxWidth: 100,
         width: 100,
@@ -671,14 +671,20 @@ describe(`gatsby-plugin-sharp`, () => {
         args,
       })
 
-      expect(fixedSvg).toMatchSnapshot()
+      expect(fixedSvg).toMatchSnapshot(`fixed`)
+
+      expect(fixedSvg.tracedSVG).toMatch(`data:image/png;base64`)
+      expect(fixedSvg.tracedSVG).not.toMatch(`data:image/svg+xml`)
 
       const fluidSvg = await fluid({
         file,
         args,
       })
 
-      expect(fluidSvg).toMatchSnapshot()
+      expect(fluidSvg).toMatchSnapshot(`fluid`)
+
+      expect(fluidSvg.tracedSVG).toMatch(`data:image/png;base64`)
+      expect(fluidSvg.tracedSVG).not.toMatch(`data:image/svg+xml`)
     })
   })