feat(gatsby-plugin-styled-components): Add ability to disable vendor prefixes

packages/gatsby-plugin-styled-components/README.md

@@ -38,3 +38,13 @@ options: {
 ```
 
 Note: The `ssr` option will be ignored. Gatsby will apply it automatically when needed.
+
+### Disabling vendor prefixing
+
+If you don't require vendor prefixes for adding legacy CSS properties then this can be disabled by supplying the `disableVendorPrefixes` option:
+
+```js
+options: {
+  disableVendorPrefixes: true
+}
+```

packages/gatsby-plugin-styled-components/src/gatsby-browser.js

@@ -0,0 +1,11 @@
+import React from "react"
+import { StyleSheetManager } from "styled-components"
+
+// eslint-disable-next-line react/prop-types,react/display-name
+exports.wrapRootElement = ({ element }, pluginOptions) => (
+  <StyleSheetManager
+    disableVendorPrefixes={pluginOptions?.disableVendorPrefixes === true}
+  >
+    {element}
+  </StyleSheetManager>
+)

packages/gatsby-plugin-styled-components/src/gatsby-node.js

@@ -37,14 +37,18 @@ exports.pluginOptionsSchema = ({ Joi }) =>
       .description(
         `By default minifiers cannot properly perform dead code elimination on styled components because they are assumed to have side effects. This enables "pure annotations" to tell the compiler that they do not have side effects.`
       ),
+    disableVendorPrefixes: Joi.boolean()
+      .default(false)
+      .description(`Disables vendor prefixing`),
   })
 
 exports.onCreateBabelConfig = ({ stage, actions }, pluginOptions) => {
   const ssr = stage === `build-html` || stage === `build-javascript`
+  const { disableVendorPrefixes: _, ...babelOptions } = pluginOptions
 
   actions.setBabelPlugin({
     name: `babel-plugin-styled-components`,
     stage,
-    options: { ...pluginOptions, ssr },
+    options: { ...babelOptions, ssr },
   })
 }

packages/gatsby-plugin-styled-components/src/gatsby-ssr.js

@@ -4,10 +4,17 @@ import { ServerStyleSheet, StyleSheetManager } from "styled-components"
 const sheetByPathname = new Map()
 
 // eslint-disable-next-line react/prop-types,react/display-name
-exports.wrapRootElement = ({ element, pathname }) => {
+exports.wrapRootElement = ({ element, pathname }, pluginOptions) => {
   const sheet = new ServerStyleSheet()
   sheetByPathname.set(pathname, sheet)
-  return <StyleSheetManager sheet={sheet.instance}>{element}</StyleSheetManager>
+  return (
+    <StyleSheetManager
+      sheet={sheet.instance}
+      disableVendorPrefixes={pluginOptions?.disableVendorPrefixes}
+    >
+      {element}
+    </StyleSheetManager>
+  )
 }
 
 exports.onRenderBody = ({ setHeadComponents, pathname }) => {