fix(gatsby-plugin-typography): sort typography style tag first to avo…

…id overwriting issues (#12295)

Fixes #12295
Fixes #6302
Fixes #9911
Fixes #1994

packages/gatsby-plugin-typography/src/__tests__/gatsby-ssr.js

@@ -0,0 +1,103 @@
+jest.mock(
+ `../.cache/typography`,
+ () => {
+ return {}
+ },
+ { virtual: true }
+)
+
+import { onPreRenderHTML, onRenderBody } from "../gatsby-ssr"
+
+const clone = arr => arr.reduce((merged, item) => merged.concat(item), [])
+
+describe(`onRenderBody`, () => {
+ const setup = (options = {}, env = `build-html`) => {
+ process.env.BUILD_STAGE = env
+ const api = {
+ setHeadComponents: jest.fn(),
+ }
+ onRenderBody(api, options)
+ return api
+ }
+
+ afterAll(() => {
+ delete process.env.BUILD_STAGE
+ })
+
+ it(`invokes setHeadComponents with array of typography components`, () => {
+ const api = setup()
+
+ expect(api.setHeadComponents).toHaveBeenCalledWith([
+ expect.objectContaining({ key: `TypographyStyle` }),
+ expect.objectContaining({ key: `GoogleFont` }),
+ ])
+ })
+
+ it(`only invokes setHeadComponents if BUILD_STAGE is build-html`, () => {
+ const api = setup({}, `develop`)
+
+ expect(api.setHeadComponents).not.toHaveBeenCalled()
+ })
+
+ it(`does not add google font if omitGoogleFont is passed`, () => {
+ const api = setup({
+ omitGoogleFont: true,
+ })
+
+ expect(api.setHeadComponents).toHaveBeenCalledWith([
+ expect.objectContaining({ key: `TypographyStyle` }),
+ ])
+ })
+})
+
+describe(`onPreRenderHTML`, () => {
+ const setup = (components = []) => {
+ const api = {
+ getHeadComponents: jest.fn(() => components),
+ replaceHeadComponents: jest.fn(),
+ }
+ onPreRenderHTML(api)
+ return api
+ }
+
+ it(`reorders typography-js first`, () => {
+ const spies = setup([
+ {
+ key: `link-1234`,
+ },
+ {
+ key: `link-preload`,
+ },
+ {
+ key: `TypographyStyle`,
+ },
+ ])
+
+ expect(spies.replaceHeadComponents).toHaveBeenCalledTimes(1)
+ expect(spies.replaceHeadComponents).toHaveBeenCalledWith(
+ expect.arrayContaining([
+ {
+ key: `TypographyStyle`,
+ },
+ ])
+ )
+ })
+
+ it(`leaves non-typography head components as-is`, () => {
+ const components = [
+ {
+ key: `link-1234`,
+ },
+ {
+ key: `link-preload`,
+ },
+ {
+ key: `_____01234_____`,
+ },
+ ]
+
+ const spies = setup(clone(components))
+
+ expect(spies.replaceHeadComponents).toHaveBeenCalledWith(components)
+ })
+})

packages/gatsby-plugin-typography/src/gatsby-ssr.js

@@ -3,15 +3,33 @@ import { TypographyStyle, GoogleFont } from "react-typography"
 import typography from "./.cache/typography"
 
 exports.onRenderBody = ({ setHeadComponents }, pluginOptions) => {
- const googleFont = pluginOptions.omitGoogleFont ? (
- []
- ) : (
- <GoogleFont key={`GoogleFont`} typography={typography} />
- )
  if (process.env.BUILD_STAGE === `build-html`) {
+ const googleFont = [].concat(
+ pluginOptions.omitGoogleFont ? (
+ []
+ ) : (
+ <GoogleFont key={`GoogleFont`} typography={typography} />
+ )
+ )
  setHeadComponents([
  <TypographyStyle key={`TypographyStyle`} typography={typography} />,
  ...googleFont,
  ])
  }
 }
+
+// Move Typography.js styles to the top of the head section so they're loaded first
+// and don't accidentally overwrite other styles. Typography.js is meant to
+// be a configurable CSS reset so should always load first.
+exports.onPreRenderHTML = ({ getHeadComponents, replaceHeadComponents }) => {
+ const headComponents = getHeadComponents()
+ headComponents.sort((x, y) => {
+ if (x.key === `TypographyStyle`) {
+ return -1
+ } else if (y.key === `TypographyStyle`) {
+ return 1
+ }
+ return 0
+ })
+ replaceHeadComponents(headComponents)
+}