Remove node-sass dependency

[michaelwayman]

I propose we should find another way of handling [css|sass|scss] until node-sass switches from using Gaze as their file watcher.

I love Docker, I love Mac, I love react-scripts, but they don't work together.

I re-fitted my app to look like "out of the box" create-react-app only to find out that Gaze on node-sass causes my com.docker.hyperkit to burn my CPU at 350%..

node-sass --watch doesn't work in docker/for-mac without burning the CPU.

For node-sass there has been a PR to switch to chokidar but I don't think the maintainers are interested as the PR has been open for a little over 2 years.

Thoughts?

[gaearon]

I'm open to any other solutions that don't involve react-scripts adding dependencies on anything related to Sass.

[Timer]

I'm sure the community as a whole would appreciate someone who might write a package which acts as a thin layer on top of node-sass.
Said package simply uses chokidar for watching and compiling via one-offs with node-sass.

[michaelwayman]

Let me see what I can come up with. A very thin layer for our use-case shouldn't be bad.
Let me know if there are any requests or requirements. I am more of a Python person but know js relatively well. I'll report back with something if someone wouldn't mind offering feedback then.

[michaelwayman]

https://github.com/michaelwayman/node-sass-chokidar

I switched my watch css scripts to

"scripts": {
  ...
  "build-css": "node-sass-chokidar src/ -o src/",
  "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive"
}

1. it fixed a recursive compile issue that was forcing me to restart sometimes.
2. Second, it fixes "Note that node-sass seems to have an issue recognizing newly created files on some systems so you might need to restart the watcher when you create a file until it’s resolved."
3. it brought my CPU usage down from "idling" at 150% to a nice quite 6%.

I'm gunna write some tests tomorrow, do some cleaning, and throw it on NPM tomorrow.

Think it would be possible to switch to switch to this instead of node-sass? That would be awesome, I'd really like to be the one to open the PR for it if possible :)

[Timer]

Looking good!
And of course, if all is working well we will happily accept a PR updating our documentation to suggest your package instead. :)

[eashish93]

Until node-sass solved the issue of newly created files, we can use chokidar cli tool instead of using watch option of node-sass. I did this and it's working correctly.

scripts": {
    "build:css": "node-sass src/ -o src/",
    "watch:css": "chokidar 'src/**/*.scss' -c 'node-sass src/ -o src/ --recursive'",
    "start:js": "react-scripts start",
    "build:js": "react-scripts build",
    "start": "npm-run-all -p build:css watch:css start:js",
    "build": "npm-run-all -p build:css build:js",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }

[michaelwayman]

that's not bad @eashish93 but it isn't suited for larger projects with a lot scss files (especially when those files are mounted in shared volumes)

One of the benefits of using chokidar directly is that you only need to re-compile the files that need it (the changed file and its ancestors importing it).

You're approach definitely works but it will take just a little-too-long in my particular project.

Edit Edit: nvm I misread your post lol

[eashish93]

@michaelwayman. I am using chokidar cli tool directly in the script. See the second npm script watch:css. By the way, I got the idea after this issue.

[michaelwayman]

I see what you are doing and it definitely works, it probably works like a charm for a good number of projects.
I don't want to get too off-topic but,

node-sass does something slightly clever with its --watch option. It creates a dependency graph from the watched files and only re-compiles the changed scss file and its dependents.

node-sass src/ -o src/ --recursive will re-compile all the files whether they need it or not.

when you have a lot of scss files in a shared volume recompiling every scss file on save takes a long time. The dependency graph is the difference between compiling 200+ files vs compiling 1-2.

[viankakrisna]

Also this #1939 (comment) the proposed solution should only watch *.scss files to avoid infinite recompiling.

[michaelwayman]

https://www.npmjs.com/package/node-sass-chokidar

All the original node-sass cli tests are passing with node-sass-chokidar on travis-ci.

The workarounds I've seen so far has been to run docker inside a vagrant box to "disguise" the problem, or to replace node-sass with a ruby package.

I would like to open a PR to the README to let people know about this option if it's alright?

In the meantime you can probably close this issue, I may reference it in my PR though if everything is still kosher.

[Timer]

@michaelwayman I like your module because it's simple to consume and understand what's going on. Are you going to open that PR? 😄

[michaelwayman]

Opened the PR.

#1987

I am a native english speaker but terrible technical writer, let me know if my verbiage is off.
Thanks for the opportunity to contribute ;)