Error recovery from Sass errors

[razvanandreib]

🐛 bug report

As I start typing in the scss file , I immediately get this error and it happens everytime:

🚨 Build failed.

@parcel/transformer-sass: expected "{".
╷
289 │ .
│  ^

And parcel stops to function, i need to close it and npm start all over again.

🎛 Configuration (.babelrc, package.json, cli command)

{
  "name": "ime-cadastru",
  "version": "1.0.0",
  "source": "./src/pages/cadastru.html",
  "description": "",
  "scripts": {
    "start": "parcel ./src/index.html",
    "build": "parcel build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@parcel/transformer-sass": "^2.0.1",
    "parcel": "^2.0.1",
    "sass": "^1.43.4",
    "sharp": "^0.29.3"
  }
}

🔦 Context

I try to write css in the scss files and immediatly after i start typing i get this error.

💻 Code Sample

🌍 Your Environment

Software	Version(s)
Parcel "@parcel/transformer-sass": "^2.0.1",

"parcel": "^2.0.1",
"sass": "^1.43.4",
"sharp": "^0.29.3"          |

| Node v17.1.0 |
| npm/Yarn 8.1.2 |
| Operating System Windows 10 |

[bensanlau]

+1. I'm also running into same issue. It happens when I'm watching and make a syntax mistake. After rectifying it + save, the bundler does not automatically bundle. I had to close and re-watch.
Strangely, I find that saving another file in your project somehow triggers the build.
But working on the same file that had the mistake does not trigger anything.

[folknor]

This is probably a duplicate of #6685 or one of the 10+ linked issues from that ticket, like #5660.

[mischnic]

Can someone post a reproduction with instructions on how to trigger this bug?

[razvanandreib]

Sure. will come back with a screenshot.

[bensanlau]

Hey @mischnic,

It's my first time logging a bug, but I'll try to be concise:

Set up

1. I create a new project following the webapp starterkit, including adding an index.html inside the src folder.
2. Instead of calling styles.css, I'm using SCSS and changed the extension. This installs the transformer-sass plugin.
3. In styles.scss, I @import another .scss file (let's call it header.scss).

Reproducing bug:

1. If I'm to make a syntax error in header.scss, parcel encounters an error.
2. After fixing that error and save, parcel does not re-build even when watching. I'll have to ^C close and re-run the npx script.
3. I discovered saving the entry point file (styles.scss) will trigger the re-build.

I also discovered this set up works with normal .css files. It's Sass (maybe transformer-sass?) that is the problem.

I'm not sure if it's similar to what @razvanandreib is facing. If it's not, I can create a new issue.

[razvanandreib]

I attached a screenshot with the bug. Immediately after I select an element in the scss file this error appear as in the screenshot

u

[Goodosky]

I have exactly the same problem as @bensanlau.

The issue also occurs with pug files.

In my example:

When I make a mistake in a file in "partials" directory, parcel encounters the error (like on @razvanandreib's screenshot) and I have to re-run the script or save not-imported/not-included* file (e.g. index.pug or bootstrap.scss).

*not-imported by @import in scss and not-included by include,extends in pug.

My script: parcel pug/*.pug

[mischnic]

@bensanlau Thanks! I can reproduce that.

This might also be happening for Elm: #6124

[mischnic]

Actually, the problem seems to be that Sass, Elm and Pug all throw an error on a parser error and don't return the list of additionally included files (header.scss). So Parcel doesn't know that these other files also need to be watched.

parcel/packages/transformers/sass/src/SassTransformer.js

Lines 76 to 80 in 13649c3

	for (let included of result.stats.includedFiles) {
	if (included !== asset.filePath) {
	asset.invalidateOnFileChange(included);
	}
	}

parcel/packages/transformers/sass/src/SassTransformer.js

Line 87 in 13649c3

} catch (err) {

[mischnic]

sass/sass#2950 (comment)

[hrynevychroman]

Any updates here how to fix it? i don't want to relaunch dev every time i slowly typed {} 😁

[albinbrengesjo]

Also experience this problem. Any updates?

[sjors-bootmine]

Watching with interest for this bugfix. Thanks for the efforts fixing this!