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

…prefixes (#33147) Co-authored-by: Ward Peeters <ward@coding-tech.com>
gatsbyjs · Sep 11, 2021 · 3d05986 · 3d05986
1 parent 323920d
commit 3d05986
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 3 deletions.
diff --git a/packages/gatsby-plugin-styled-components/README.md b/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
+}
+```
diff --git a/packages/gatsby-plugin-styled-components/src/gatsby-browser.js b/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>
+)
diff --git a/packages/gatsby-plugin-styled-components/src/gatsby-node.js b/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 },
   })
 }
diff --git a/packages/gatsby-plugin-styled-components/src/gatsby-ssr.js b/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 }) => {