Gatsby: [gatsby-plugin-postcss-sass] Autoprefixer not prefixing CSS

[dustinhorton]

Description

When using gatsby-plugin-postcss-sass, ~any plugin added to the postCssPlugins array in options will evaluate to null~ and adding Autoprefixer, nothing ends up being prefixed.

Steps to reproduce

1. Add gatsby-plugin-postcss-sass
2. Add gatsby-plugin-postcss-sass config to gatsby-config.js
3. Add browserslist config for Autoprefixer
4. Add display: grid (or anything that needs to be prefixed by Autoprefixer) to a stylesheet.

Or, clone my repro: https://github.com/dustinhorton/gatsby-issue

Expected result

CSS is processed by ~PostCSS~ Autoprefixer (see https://autoprefixer.github.io for how display: grid should be processed.).

Actual result

~An HMR line with show in the console that shows all items in the the postCssPlugins array as null. CSS is not processed by PostCSS.~ Other PostCSS plugins will modify the CSS, but Autoprefixer will not.

Environment

• Gatsby version: 1.9.232 (npm list gatsby):
• gatsby-cli version: 1.1.45
• Node.js version: 8.6.0
• Operating System: MacOS 10.13.3 (17D102)

File contents (if changed):

gatsby-config.js:

const autoprefixer = require('autoprefixer');
const browserslist = require('browserslist');
const postCssFocus = require('postcss-focus');

module.exports = {
  siteMetadata: {
    title: 'Gatsby Default Starter',
  },
  plugins: [
    {
      resolve: 'gatsby-plugin-postcss-sass',
      options: {
        postCssPlugins: [
          postCssFocus(),
          autoprefixer({ browsers: browserslist() }),
        ],
      },
    },
    'gatsby-plugin-react-helmet',
  ],
};

package.json:

{
  "name": "gatsby-starter-default",
  "description": "Gatsby default starter",
  "version": "1.0.0",
  "author": "Kyle Mathews <[email protected]>",
  "dependencies": {
    "autoprefixer": "^8.1.0",
    "browserslist": "^3.1.2",
    "gatsby": "^1.9.232",
    "gatsby-link": "^1.6.39",
    "gatsby-plugin-postcss-sass": "^1.0.18",
    "gatsby-plugin-react-helmet": "^2.0.7",
    "postcss-focus": "^3.0.0",
    "react-helmet": "^5.2.0"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write 'src/**/*.js'",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "prettier": "^1.11.1"
  }
}

[m-allanson]

Thanks for the repro repo. Using that I can confirm that autoprefixer's changes are not being applied.
However, if I add:

body:hover {
  border: 10px solid hotpink;
}

to src/layouts/index.scss, it gets rewritten to:

body:focus,
body:hover {
  border: 10px solid hotpink;
}

which means postCssFocus() is being applied. I'm wondering if this is just an autoprefixer issue? Maybe related to https://github.com/gatsbyjs/gatsby/issues/1347 ?

[dustinhorton]

@m-allanson Thanks for checking it out. You're absolutely right—the other plugins _are_ working as expected. I've updated to post to reflect that.

[anantoghosh]

I want to mention that using the browserlist config in package.json works.
Maybe this is related to https://github.com/postcss/autoprefixer#no-prefixes-in-production

[dustinhorton]

Good theory, but I'm not seeing a change when going between the config locations.

[Juan-Rios]

Hey, I am using autoprefixer without browserslist and It's working fine. Check my gatsby-config.js file:

module.exports = {
    plugins: [
        {
            resolve: `gatsby-plugin-postcss-sass`,
            options: {
                postCssPlugins: [require('autoprefixer')()]
            }
        },
        {
            resolve: `gatsby-plugin-typography`,
            options: {
                pathToConfigModule: `src/utils/typography.js`,
            },
        },
    ],
};

[kakadiadarpan]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub issues, we have to clean some of the old issues as many of them have already been resolved with the latest updates.

Please make sure to update to the latest Gatsby version and check if that solves the issue. Let us know if that works for you by adding a comment 👍

[kakadiadarpan]

This issue is being closed because there hasn't been any activity for at least 30 days. Feel free to open a new one if you still experience this problem 👍

[dylanpinn]

@dustinhorton I am experiencing the same issue on Gatsby V2 using gatsby-plugin-sass. Did you resolve this and it is running on Gatsby V2?

[dustinhorton]

@dylanpinn Working as expected for me.

"gatsby": "^2.0.59",
"gatsby-plugin-sass": "^2.0.5",

Maybe post your gatsby-config?

[dylanpinn]

@dustinhorton thanks, here is our gatsby-config

const autoprefixer = require('autoprefixer');
const browserslist = require('browserslist');
const postCssDiscardDuplicates = require('postcss-discard-duplicates');
const postCssFlexbugsFixes = require('postcss-flexbugs-fixes');
const postCssFocus = require('postcss-focus');

const CMS_URL = process.env.CMS_URL;
const CMS_PROTOCOL = process.env.CMS_PROTOCOL;

module.exports = {
  siteMetadata: {
    siteUrl: `SITE_URL`,
    title: 'CPPC',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-flow',
    'gatsby-plugin-sitemap',
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: 'SITE_NAME',
        short_name: 'SITE_NAME',
        start_url: '/',
        background_color: '#1e398d',
        theme_color: '#1e398d',
        display: 'minimal-ui',
        icon: 'src/assets/images/favicon.svg',
      },
    },
    'gatsby-plugin-offline',
    {
      resolve: 'gatsby-source-wordpress',
      options: {
        baseUrl: CMS_URL,
        protocol: CMS_PROTOCOL,
        hostingWPCOM: false,
        useACF: true,
        verboseOutput: true,
      },
    },
    {
      resolve: 'gatsby-plugin-accessibilityjs',
      options: {
        injectStyles: false,
        errorClassName: false,
      },
    },
    {
      resolve: 'gatsby-plugin-sass',
      options: {
        postCssPlugins: [
          postCssDiscardDuplicates(),
          postCssFlexbugsFixes(),
          postCssFocus(),
          autoprefixer({ browsers: browserslist() }),
        ],
      },
    },
    {
      resolve: `gatsby-plugin-polyfill-io`,
      options: {
        features: [`Array.prototype.map`, `fetch`, `Array.prototype.find`],
      },
    },
    {
      resolve: `@gatsby-contrib/gatsby-plugin-elasticlunr-search`,
      options: {
        fields: ['title', 'content'],
        resolvers: {
          wordpress__POST: {
            title: node => node.title,
            link: node => node.link,
            filter: () => 'page-content',
          },
          wordpress__PAGE: {
            title: node => node.title,
            content: node => {
              return node;
            },
            link: node => node.link,
            filter: () => 'page-content',
          },
          wordpress__wp_document: {
            title: node => node.title,
            link: node => node.link,
            filter: () => 'document',
          },
        },
      },
    },
    `gatsby-plugin-catch-links`,
    {
      resolve: `gatsby-plugin-compile-es6-packages`,
      options: {
        modules: [`query-string`],
      },
    },
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: 'UA-XXXXXX-X',
      },
    },
    {
      resolve: `gatsby-plugin-google-tagmanager`,
      options: {
        id: 'GTM-XXXXXX',
      },
    },
  ],
};

I have tried removing most of the plugins and that doesn't fix anything, also have tried removing the other PostCSS plugins. The other PostCSS plugins are working just not autoprefixer.

Any suggestions you have would be appreciated.

Thanks

[dustinhorton]

Hm…yeah our setups look very similar. I've confirmed again mine is looking as expected, though I know Gatsby itself does autoprefixing as well, so I guess I'm not certain it's the one in gatsby-plugin-sass doing it. Maybe post your browserslist config too.

[julienben]

I'm also having this issue.

I thought I'd somehow broken the setup by adding more and more plugins to gatsby-config.js so I decided to go back through my commit history until I could find the point at which autoprefixing stopped working.

I went all the way back to my first commit (no plugins at all, just a single-page Gatsby site) and autoprefixing wasn't working there either (using npm i && gatsby build && gatsby serve).

I'm thoroughly confused and happy to hear anyone's thoughts on this. Thanks!!

[dustinhorton]

@julienben can you confirm the property you expect to be prefixed, does so @ https://autoprefixer.github.io/ with the filter set appropriately?

[julienben]

Yup. I tried flex and grid.

[dylanpinn]

@julienben One thing to note is that the autoprefixer online adds in the ms-grid property, however, checking in the README for the project it states that doesn't polyfill grid layout for MS.

https://github.com/postcss/autoprefixer#does-autoprefixer-polyfill-grid-layout-for-ie

This is what confused me.

[dustinhorton]

Yes grid is opt-in, but the flex stuff should be prefixed : /

[khades]

I figured out the issue, gatsby-plugin-sass uses loaders.postcss() to define postcss loader with predefined autoprefixer that configured to use browserlist out of package.json and flex no-2009 settings, it doesnt matter if you pass autoprefixer to plugin, loaders.postcss() will use its internal autoprefixer settings. So when i copied contents of plugin, but added autoprefixer settings to function params - it worked as intended.

I do want loader.postcss to get autoprefixer options.

[julienben]

@khades Awesome!

What do you mean by "copied the contents of the plugin" though? You mean you made your own version of gatsby-plugin-sass with a new postcss config?

[mdarche]

So when i copied contents of plugin, but added autoprefixer settings to function params - it worked as intended.

@khades having the same issue with gatsby-plugin-sass. Can you elaborate on this solution?

[leonardolouie]

Hey @khades what do you mean by "copied the contents of the plugin" ?