gatsby: [gatsby-plugin-sass] prefix missing in css

The question for this thread may be, then: “how do I change autoprefixer configuration in Gatsby?”

Ok - this is very hacky and might need to be iterated on or turned into plugin to make it easier to use - but if you use this in your gatsby-node.js:

const postCssLoaderRe = /\/postcss-loader\//
const targetFiles = [`.module.css`, `.css`]

const processRule = rule => {
  if (rule.oneOf) {
    return {
      ...rule,
      oneOf: rule.oneOf.map(processRule),
    }
  }

  // if rule doesn't target one of targetFiles - leave rule untouched
  if (
    !targetFiles.some(targetFile => {
      if (rule.test instanceof RegExp) {
        return rule.test.test(targetFile)
      } else {
        return false
      }
    })
  ) {
    return rule
  }

  if (Array.isArray(rule.use)) {
    return {
      ...rule,
      use: rule.use.map(use => {
        if (!postCssLoaderRe.test(use.loader)) {
          // if it's not postcss loader - leave loader untouched
          return use
        }

        return {
          ...use,
          options: {
            ...use.options,
            plugins: loader => {
              const result = use.options.plugins(loader)

              return result.map(postCssPlugin => {
                if (postCssPlugin.postcssPlugin === `autoprefixer`) {
                  // modify `postCssPlugin.options` here
                  postCssPlugin.options.grid = `autoplace`
                }

                return postCssPlugin
              })
            },
          },
        }
      }),
    }
  }

  return rule
}

exports.onCreateWebpackConfig = ({ getConfig, actions }) => {
  const config = getConfig()

  const newConfig = {
    ...config,
    module: {
      ...config.module,
      rules: config.module.rules.map(processRule),
    },
  }
  actions.replaceWebpackConfig(newConfig)
}

you can modify autoprefixer options (only important line here for modification is one containing postCssPlugin.options.grid = `autoplace`

–edit: also if you want to target sass files - edit targetFiles in the beginning of the snippet to add .scss/.module.scss

@pieh That page has grid prefixing turned on, which is false by default:

Options The IE grid layout polyfill is enabled, which is not by default in autoprefixer.

Here’s some info about why it’s not enabled by default: https://github.com/postcss/autoprefixer#does-autoprefixer-polyfill-grid-layout-for-ie

/* autoprefixer grid: on */ only adds prefixes in development mode. This is more than likely a bug with Gatsby. No matter what config I try, nothing seems to work. For example, this postcss.config.js works perfectly fine with Next.js and create-react-app but for whatever reason, it doesn’t work with Gatsby.

module.exports = {
  plugins: {
    "postcss-preset-env": {
      autoprefixer: {
        grid: "no-autoplace"
      }
    }
  }
};

Have you followed @pieh hacky solution? https://github.com/gatsbyjs/gatsby/issues/15509#issuecomment-512574593

Is there any update to this? I am currently having issues trying to get -ms prefixes for my grid.

I am able to use /* autoprefixer grid: on */ and get the prefixes using Gatsby’s development mode, but then they disappear on build.

Thanks @missmatsuko - I was chasing it down the rabbit hole and doing some breakpoint debbuging and I definitely missed that note there. You just saved me a lot of time and frustration 🙏

The question for this thread may be, then: “how do I change autoprefixer configuration in Gatsby?”

Yeah, I think this makes a lot of sense here. Also probably dedicated note specifically for grid layout and IE linking to docs that @missmatsuko pasted.

I’ll take a look if it’s possible right now to hook into autoprefixer options or we need to provide some new API to do that.

The control comments will work as well, but you will need to remember to use them in every file as they have local scope (it might be something you actually want)

Oh yeah, looks like it may be possible to enable grid prefixing through a control comment in the CSS:

/* autoprefixer grid: autoplace */

We can modify webpack config via plugins (and gatsby APIs in general), so it’s technically possible (but certainly will be messy). There is defenitely demand to make it configurable (based on linked issue and this one). I’ll try to come up with code snippet to do this