CODEWITHSUNDEEP
source-mapspostcssnode-sassnpm-scriptsautoprefixer
Robert_QSS
Robert_QSS

Reputation: 213

autoprefixer breaks trying to parse node-sass sourcemap

Here's my directory structure:

_build/
  |- postcss.config.js
_src/
  |- sass/
        |-main.scss
css/
  |-main.css
  |-main.css.map
package.json

I'm trying to rewrite my workflow using NPM scripts. I want to:

convert all .scss files > css > autoprefix > minify > output to the css/ folder with sourcemaps.

I'm stuck on the autoprefix stage now.

Here's my package.json

{
  "name": "workflow",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:css": "node-sass --source-map true ./_src/sass/ -o ./css",
    "build:autoprefix-css": "postcss --config ./_build/ -m -r ./css"
  },
  "license": "ISC",
  "browserslist": [
    "IE 11",
    "last 3 versions",
    "not IE < 11"
  ],
  "devDependencies": {
    "autoprefixer": "^9.3.1",
    "node-sass": "^4.10.0",
    "postcss": "^7.0.5",
    "postcss-cli": "^6.0.1"
  }
}

And here's postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

node-sass is correctly outputting main.css and main.css.map. But autoprefixer is giving the error:

CssSyntaxError: D:\workflow\css\main.css.map:3:20: Missed semicolon

  1 | {
  2 |   "version": 3,
> 3 |   "file": "main.css",
    |                     ^
  4 |   "sources": [
  5 |           "../_src/sass/main.scss",

I've tried using the --no-map option for autoprefixer but it doesn't have any effect. It seems as though autoprefixer is treating the .map file as if it were .css?

One important requirement is that the script work with multiple separate .scss files. Some projects specify separate stylesheets, so I can't hardcode a single main.scss > main.css pipeline. I need to automatically take all the .scss files in _src/sass/ and output a .css file with sourcemap for each one.

Any ideas?

Upvotes: 0

Views: 1065

Answers (1)

Robert_QSS
Robert_QSS

Reputation: 213

Thanks to RyanZim at postcss-cli for finding the problem. When passing a directory to postcss you need to glob specifically for just .css files, not the entire directory. The order you pass the input/output to postcss seems to make a difference too.

Adding the glob and moving the directory option to the front of command, ie changing:

"build:autoprefix-css": "postcss --config ./_build/ -m -r ./css"

to

"build:autoprefix-css": "postcss -r ./css/*.css --config ./_build/ -m"

fixes the issue.

Upvotes: 1

Related Questions