autoprefixer not working when using lang="scss"

[tanc]

Description

When using scss, Autoprefixer does not prefix on gridsome build but does work on gridsome develop.

Steps to reproduce

Create a new gridsome project:
gridsome create gridsome_test_autoprefixer
Add the Sass packages needed:
npm install -D sass-loader node-sass
Edit the src/pages/Index.vue file and change the <style> section to look like:

<style lang="scss">    
/* autoprefixer grid: on */     
.home-links {                               
  display: grid;                                      
}                                                     
.home-links a {                          
  margin-right: 1rem;                    
}    
</style>

Run gridsome develop
Visit http://localhost:8080/
Inspect the home-links element and confirm you can see the prefixed display: -ms-grid item:

.home-links {
    display: -ms-grid;
    display: grid;
}

Expected result

Now run gridsome build
Edit the css file in dist/assets/css
Search for .home-links
Expected result is that display: -ms-grid item is there.

Actual result

Actual result is display: -ms-grid is not in the css file.

Environment

  System:
    OS: Linux 5.4 Manjaro Linux undefined
    CPU: (4) x64 Intel(R) Core(TM) i5-6500T CPU @ 2.50GHz
  Binaries:
    Node: 10.17.0 - ~/.nvm/versions/node/v10.17.0/bin/node
    Yarn: 1.21.1 - /bin/yarn
    npm: 6.11.3 - ~/.nvm/versions/node/v10.17.0/bin/npm
  Browsers:
    Firefox: 71.0
  npmPackages:
    gridsome: ^0.7.0 => 0.7.12

[tanc]

Removing lang="scss" from the style tag does allow autoprefixer to run properly and the -ms-grid prefix is in the css output.

[tanc]

I tried reverting various things (Gridsome 0.6.9) to try to see where this regression crept in. It looks like its the sass-loader package that has the problem. I had an earlier working commit on a project which used sass-loader at version 7.1.0 and that was producing the correct prefixed output. I can now fix the problem with the above steps plus changing sass-loader in package.json to:

  "devDependencies": {
    "node-sass": "^4.13.0",
    "sass-loader": "7.1.0"
  }

So for anyone else coming across the issue, the problem is an incompatibility with sass-loader version 8. Use version 7.1.0 instead for now.

[tanc]

So while this fixes my local issue, we should try to fix this in one of two ways:

1. Find out whether we can configure Gridsome differently to work with sass-loader:^8.0.0
2. Update the Gridsome docs to specify sass-loader:^7.1.0

[marcvangend]

Any news on this? I'm seeing the same behavior. More specifically, when I install sass-loader@7.1.0 or sass-loader@7.2.0 it works as expected, but version 7.3.0 does not.

I think we are experiencing the same issue as is reported here: symfony/webpack-encore#638. It seems that sass-loader strips out comments, thus disabling the autoprefixer rule.

[marcvangend]

Thinking about this some more, I guess it would be much nicer if we could just set autoprefixer options in gridsome.config.js. As far as I know, this is not possible at the moment.

After some more poking around, I found that autoprefixer is required in gridsome/lib/webpack/createBaseConfig.js on line 298 (using gridsome@0.7.13). When you change that line from this:

          plugins: (postcss.plugins || []).concat(require('autoprefixer'))

... to this:

          plugins: (postcss.plugins || []).concat(require('autoprefixer')({ grid: true }))

... it works great, also with the latest sass-loader version (8.0.2 at the moment of writing).

I'm new to contributing to gridsome, so I have no idea how I could help realize the idea of global autoprefixer options.

[danfwdmotion]

This appears to be resolved now, with the following versions:

"dependencies": {
    ...
    "gridsome": "^0.7.0",
    ...
}

"devDependencies": {
    ...
    "node-sass": "^4.14.1",
    "sass-loader": "^8.0.2"
   ...
}

[borisdiakur]

Upgrading to sass-loader 8.0.2 results in the following error for me:

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'indentedSyntax'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (xxxxx/node_modules/sass-loader/node_modules/schema-utils/dist/validate.js:96:11)
    at Object.loader (xxxxx/node_modules/sass-loader/dist/index.js:36:28)

I’m using intended syntax with <style lang="sass">.

This seems to be the result of breaking changes in sass-loader v8.0.0:

move all sass (includePaths, importer, functions) options to the sassOptions option. The functions option can't be used as Function, you should use sassOption as Function to achieve this.

[marcvangend]

@borisdiakur Is that related to autoprefixer in any way? It sounds like a separate problem to me. I suggest that you create a new issue for this.

[borisdiakur]

@marcvangend Actually there already is an issue for that: #750

It is somehow related as @danfwdmotion pointed out in his comment that upgrading to sass-loader 8 would resolve the autoprefixer issue.

[danfwdmotion]

@borisdiakur Have you tried writing SCSS with <style lang="scss">? As opposed to SASS?

Mine was a fresh project, with those versions, and using SCSS.

Do all of your versions match these?

"dependencies": {
    ...
    "gridsome": "^0.7.0",
    ...
}

"devDependencies": {
    ...
    "node-sass": "^4.14.1",
    "sass-loader": "^8.0.2"
   ...
}

[borisdiakur]

@danfwdmotion I prefer Sass over SCSS. It’s a matter of preference and I prefer Sass.

SCSS works for you because SCSS is used with the default options of sass-loader. As soon as I choose Sass with <style lang="sass"> and sass-loader 8, custom options are provided to sass-loader in an incorrect way (see linked issue).

[marcvangend]

Can we please keep this issue focused on the original topic, and avoid derailing it into a discussion about Sass dialects? Thank you.

[kelvinz]

Is autoprefixer automatically included in Gridsome or must be installed separately?