global-styles plugin doesn't work well alongside the sass-plugin

Summary

I’m trying to use the gatsby-plugin-global-styles to re-order the css link tags so they come before the style tag added by gatsby-plugin-typography, but it seems they don’t play along well (or maybe I’m missing something?).

I followed the instructions but when I import the scss file, something in gatsby (I couldn’t find out what yet) just injects them to the bottom of the header tag, always. It doesn’t matter if I use this plugin or try to re-order the typography header component in gatsby-ssr.js. So, my sass styles are loaded lastly (in this case Bootstrap 4) and they end up breaking the typeface styles from Typography.js.

I also added the gatsby-plugin-global-styles configuration snippet below the one for gatsby-typography, as instructed by the docs here, and as you may see below.

Environment (if relevant)

System: OS: Linux 4.15 Linux Mint 18.3 (Sylvia) CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz Shell: 5.1.1 - /bin/zsh Binaries: Node: 10.14.1 - ~/.nvm/versions/node/v10.14.1/bin/node Yarn: 1.12.3 - /usr/bin/yarn npm: 6.4.1 - ~/.nvm/versions/node/v10.14.1/bin/npm Languages: Python: 3.6.5 - /home/myuser/.pyenv/shims/python Browsers: Chrome: 79.0.3945.88 Firefox: 72.0.1 npmGlobalPackages: gatsby-cli: 2.8.27 gatsby-plugin-typography: 2.3.21

File contents (if changed)

gatsby-config.js:

const path = require('path');

module.exports = {
  pathPrefix: "/",
  siteMetadata: {
    title: `foo`,
    description: `bar`,
    author: `me`,
  },
  plugins: [
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: path.join(__dirname, `src`, `images`),
      },
    },
   {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-react-bootstrap`,
        short_name: `react-bootstrap`,
        start_url: `/`,
        background_color: `#20232a`,
        theme_color: `#20232a`,
        display: `minimal-ui`,
      },
    },
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      }
    },
    {
      resolve: `gatsby-plugin-global-styles`,
      options: {
        pathToConfigModule: `src/utils/GlobalStyleComponent`,
        props: {} // this is required for the damn thing to compile
      },
    },
   `gatsby-plugin-sass`,
   'gatsby-plugin-favicon',
  ],
}

package.json:

{
  "name": "gatsby-starter-react-bootstrap",
  "private": true,
  "description": "A starter that includes and configures react-bootstrap and react-icons, along with SASS handling. ",
  "version": "0.1.0",
  "author": "Billy Jacoby <[e-mail]>",
  "dependencies": {
    "@nfront/global-styles": "^1.2.1",
    "bootstrap": "^4.3.1",
    "clsx": "^1.0.4",
    "gatsby": "^2.19.8",
    "gatsby-image": "^2.2.39",
    "gatsby-plugin-favicon": "^3.1.6",
    "gatsby-plugin-global-styles": "^1.0.17",
    "gatsby-plugin-google-analytics": "^2.1.34",
    "gatsby-plugin-manifest": "^2.0.29",
    "gatsby-plugin-offline": "^2.0.25",
    "gatsby-plugin-react-helmet": "^3.0.12",
    "gatsby-plugin-react-svg": "^3.0.0",
    "gatsby-plugin-sass": "^2.0.11",
    "gatsby-plugin-sharp": "^2.4.3",
    "gatsby-plugin-typography": "^2.3.21",
    "gatsby-source-filesystem": "^2.0.33",
    "gatsby-transformer-sharp": "^2.3.13",
    "node-sass": "^4.12.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-bootstrap": "^1.0.0-beta.8",
    "react-dom": "^16.8.6",
    "react-helmet": "^5.2.0",
    "react-icons": "^3.6.1",
    "react-typography": "^0.16.19",
    "typography": "^0.16.19",
    "typography-theme-fairy-gates": "^0.16.19",
    "typography-theme-funston": "^0.16.19"
  },
  "devDependencies": {
    "gh-pages": "^2.0.1",
    "prettier": "^1.17.0"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop -H 0.0.0.0 -p 8000",
    "format": "prettier --write src/**/*.{js,jsx}",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\"",
    "deploy": "gatsby build --prefix-paths && gh-pages -d public"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  },
  "homepage": "https://billyjacoby.github.io/gatsby-react-bootstrap-starter/"
}

gatsby-node.js: N/A (empty) gatsby-browser.js: N/A (empty) gatsby-ssr.js: N/A (empty)

Thanks in advance.

[Js-Brecht]

Ah, yeah, I can see that being a pain.

Just a couple more ideas:

• You could probably automate that process during the build. You can use typography.toString() to generate the css as a string (works in node), and then just dump that to a very specific .scss or .css file which can be imported at any point in your scss chain.

  • You could then use react-typography in your onPreRenderHTML to create your font links

  • Caveat: It would run on every build, unless you designed a method to only run it when things change. Maybe a problem, but maybe not a big deal, either.

• There is also the postcss plugin, postcss-typography. IIRC, Webpack (through Gatsby) will pick up the postcss configurations file in your project root, so maybe that can be used to integrate typography into your postcss processing without having to worry about writing files anywhere.

  • Not sure at what point this would inject the styles into yours, but it might be worth experimenting with at some point.

With both of these, there would be no need for gatsby-plugin-typography, but it’s entirely possible that they’re more work than they’re worth, too. Especially if your typography styles don’t change much.

[fullofcaffeine]

I ended up abandoning this approach.

The main problem is that it’s harder to configure postcss as part of the inline configuration and honestly, I was tired of so much work for so little gain. The culprit here is the Typography.js and its ìnjectStyles` method. I wish it provided a way to more easily integrate it into more traditional css pre-processing pipelines, like SASS.

The solution I found was to effectively use typography.js as a pre-generator. I choose the theme, let it generate the link to the fonts + the styles in the head, then I copy the markup and add it to my sass pipeline. I can then just easily re-order the typography rules and put them exactly where I want them, and they will be processed by the postcss rules as well. Problem solved.

I don’t find much value in tweaking the typography.js settings using its js API, the main value I get from it are the themes that help me to quickly bootstrap with pretty typeface styles.