[gatsby-plugin-sass] prefix missing in css

[mathiasha]

Summary

When using css grid the necessary -ms prefix is not added in my css, thus not rendering correctly in IE. Is there a setting i am missing?

Environment

System: OS: macOS 10.14.5 CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz Shell: 3.2.57 - /bin/bash Binaries: Node: 10.15.0 - ~/.nvm/versions/node/v10.15.0/bin/node Yarn: 1.13.0 - /usr/local/bin/yarn npm: 6.9.0 - ~/.nvm/versions/node/v10.15.0/bin/npm Languages: Python: 2.7.10 - /usr/bin/python Browsers: Chrome: 75.0.3770.100 Firefox: 65.0.1 Safari: 12.1.1 npmPackages: gatsby: ^2.9.4 => 2.9.4 gatsby-plugin-eslint: ^2.0.4 => 2.0.4 gatsby-plugin-sass: ^2.0.10 => 2.0.10 gatsby-source-prismic: ^2.3.0-alpha.3 => 2.3.0-alpha.3 npmGlobalPackages: gatsby-cli: 2.4.17

File contents

gatsby-config.js:

require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`
});

module.exports = {
  siteMetadata: {
    title: 'XXXXXXX',
    siteUrl: 'XXXXXXX',
    description:
      'XXXXXXXX'
  },
  plugins: [
    {
      resolve: `gatsby-source-prismic`,
      options: {
        repositoryName: `XXXXXX`,
        accessToken: `${process.env.API_KEY}`
      }
    },
    'gatsby-plugin-eslint',
    'gatsby-plugin-sass'
  ]
};

package.json:

{
  "name": "XXXXX",
  "private": true,
  "description": "XXXXXXX",
  "version": "0.1.0",
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop -H 0.0.0.0",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "test": "echo \"Write tests! -> https://gatsby.app/unit-testing\""
  },
  "dependencies": {
    "gatsby": "^2.9.4",
    "gatsby-plugin-sass": "^2.0.10",
    "gatsby-source-prismic": "^2.3.0-alpha.3",
    "node-sass": "^4.11.0",
    "react": "^16.8.0",
    "react-dom": "^16.8.0"
  },
  "repository": {
    "type": "git",
    "url": "XXXXXX"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.1",
    "classnames": "^2.2.6",
    "dotenv": "^8.0.0",
    "eslint": "^5.13.0",
    "eslint-loader": "^2.1.2",
    "eslint-plugin-import": "^2.16.0",
    "gatsby-plugin-eslint": "^2.0.4",
    "prop-types": "^15.7.2"
  }
}

gatsby-node.js: N/A gatsby-browser.js: N/A gatsby-ssr.js: N/A

[missmatsuko]

You'll need to add autoprefixer and turn set the grid option (it's false by default): https://github.com/postcss/autoprefixer#options

The gatsby-plugin-sass package says autoprefixer is included, but I'm not sure if it is. I don't see autoprefixer in its dependencies.

[pieh]

We have autoprefixer in gatsby core (which gatsby-plugin-sass uses as we pass some prebundled rules to plugins) - https://github.com/gatsbyjs/gatsby/blob/e2ccb34aebbbd12cce465c863ec106649652c3ba/packages/gatsby/src/utils/webpack-utils.js#L226

By default we use ['>0.25%', 'not dead'] as browserslist that we target which includes IE11.

And testing that in https://autoprefixer.github.io/ shows that -ms- prefixes are being applied.

This is all theory, but in practice I just tried with vanilla css, and those prefixes are defenitely not applied - not sure yet what's the problem

[missmatsuko]

@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

[tremby]

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

[pieh]

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.

[missmatsuko]

I found this related issue which makes it sound like it's not possible at the moment: https://github.com/gatsbyjs/gatsby/issues/11984

[pieh]

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

[pieh]

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]

But also, if you want to use -ms- prefixes for Grid - be sure to read link from @missmatsuko ( https://github.com/postcss/autoprefixer#does-autoprefixer-polyfill-grid-layout-for-ie ). There's reason why this is disabled by default.

[missmatsuko]

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

/* autoprefixer grid: autoplace */

[pieh]

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)

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contributefor more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[claygiffin]

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.

[LekoArts]

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

[op1127]

/* 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"
      }
    }
  }
};

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[arinker]

Thank you for your hack around! Adding .scss to the target files did the trick for me.

const targetFiles = ['.module.css`, `.css`, `.scss`]

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

[jmdmacapagal]

Guys I've been following the documentation regarding the set up for autoprefixer but I cant seem to make it work, any body can help?

this is my gatsby-config

and this is in package.json

[JodiWarren]

@jmdmacapagal I'd recommend using the hacky fix posted by @pieh in https://github.com/gatsbyjs/gatsby/issues/15509#issuecomment-512574593

FWIW, I had to add some additional rules for some modules which relied on the window object, so I added them on like so:

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

  let newConfig = {
    ...config,
    module: {
      ...config.module,
      rules: config.module.rules.map(processRule),
    },
  }

  if (stage === "build-html") {
    const newRules = [
      {
        test: /smoothscroll-polyfill/,
        use: loaders.null(),
      },
      {
        test: /flickity-fade/,
        use: loaders.null(),
      },
    ]
    newConfig = {
      ...newConfig,
      module: {
        ...config.module,
        rules: newConfig.module.rules.concat(newRules),
      },
    }
  }

  actions.replaceWebpackConfig(newConfig)
}

Hope it's useful to someone!

[shakalvv]

Hey, I faced with the same issue as @claygiffin and @op1127 that autoprefixer does not work in the production build. I assume it works this way because of https://github.com/gatsbyjs/gatsby/blame/master/packages/gatsby-plugin-sass/src/gatsby-node.js#L29. I just wonder why it's needed to use the null loader in SSR mode? And why for sass modules it's different? As I can see it was introduced in https://github.com/gatsbyjs/gatsby/pull/5954/commits/19d5439de409c4d93da2ae0987c61eb2a615a139. @pieh Can you help me please?