node-sass-glob-importer: watching sass partial files not working when glob in import is applied

CONTEXT, PACKAGES AND ARCHITECTURE

I have

node v8.11.2
npm v5.8.0

and I am using a create-react-app-typescript app with following relevant packages installed:

"dependencies": {
    "@types/reactstrap": "^6.0.2",
    "bootstrap": "^4.1.3",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-scripts-ts": "2.17.0",
    "reactstrap": "^6.3.1",
    ...
  },
...
"devDependencies": {
     ...
    "@types/node": "^10.5.6",
    "@types/react": "^16.4.7",
    "@types/react-dom": "^16.0.6",
    "concurrently": "^4.0.1",
    "node-sass-chokidar": "^1.3.3",
    "node-sass-glob-importer": "^5.2.0",
    "typescript": "^3.0.1"
     ...    
  }.

My relevant scripts in package.json are:

"start": "concurrently \"npm:watch-css\" \"react-scripts-ts start\"",
"build-css": "node-sass-chokidar --importer node_modules/node-sass-glob-importer/dist/cli.js src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar --watch --recursive --importer node_modules/node-sass-glob-importer/dist/cli.js src/ -o src/"

I have implemented a 7-1 pattern architecture for my sass files (inside each folder I only have partial files):

My main.scss file looks like this:

@charset 'UTF-8';

@import 'abstracts/*';
@import 'vendors/*';
@import 'base/*';
@import 'layout/*';
@import 'components/*';
@import 'pages/*';
@import 'themes/*';
@import '_shame';

NOTE: I have also tried this when globbing:

@charset 'UTF-8';

@import 'abstracts/**/*.scss';
@import 'vendors/**/*.scss';
@import 'base/**/*.scss';
@import 'layout/**/*.scss';
@import 'components/**/*.scss';
@import 'pages/**/*.scss';
@import 'themes/**/*.scss';
@import '_shame';

THE ISSUE:

Script "watch-css" works perfectly fine with the importer:

If I comment the first line of my main.scss file to get:

@charset 'UTF-8';

// @import 'abstracts/*';
@import 'vendors/*';
@import 'base/*';
@import 'layout/*';
@import 'components/*';
@import 'pages/*';
@import 'themes/*';
@import '_shame';

and save it, I get a perfect response in the cli:

The real problem comes when I try to modify some of the partials. For instance, inside the vendors folder I have the following:

When I comment that unique line inside partial file _bootstrap.scss, I am expecting my scss file to be recompiled again, but it is not the case and the CLI stays the same.

Why do I think the problem comes from the importer and not from node-sass or node-sass-chokidar? because if I change my import statements in main.scss like this (check the vendors folder import):

@charset 'UTF-8';

@import 'abstracts/*';
@import 'vendors/_bootstrap';
@import 'base/*';
@import 'layout/*';
@import 'components/*';
@import 'pages/*';
@import 'themes/*';
@import '_shame';

in order to import the _bootstrap.scss file without implementing globbing and then I try, again, to comment that single line in my _bootstrap.scss file, I get that file recompiled again.

ACTUAL RESULT

When applying globbing with node-sass-glob-importer, watching sass partial files matching a glob pattern in an import statement is not working, even using --recursive.

EXPECTED RESULT

When applying globbing with node-sass-glob-importer, I want sass partial files matching the glob pattern to be watched and recompiled when any of them are modified.

Any idea if this is a bug or if I am doing something wrong?

I really appreciate your time! Thanks in advance!

Hey @GHMT!

Thank you very much for this very detailed issue description! I really appreciate the work you put into reporting this issue.

The more I'm sorry to say, that I don't think I can help you with that. It seems that node-sass-chokidar can't handle glob imports. Because it uses the sass-graph (https://github.com/michaelwayman/node-sass-chokidar/blob/master/bin/node-sass-chokidar#L13) package to determine which files to watch. sass-graph can't resolve glob imports, so those files are not watched.

Although I'm not quite sure why this line https://github.com/michaelwayman/node-sass-chokidar/blob/master/bin/node-sass-chokidar#L269 is not adding all your files to the list of watched files? 🤔

Furthermore the --recursive option was removed from the package, see https://github.com/michaelwayman/node-sass-chokidar/blob/master/bin/node-sass-chokidar#L184 and https://github.com/michaelwayman/node-sass-chokidar/issues/66

I'd recommend you to use chokidar and node-sass separately instead of the node-sass-chokidar package.

Hi @maoberlehner!

Thanks for that super fast answer! I am taking a look to it, trying to debug node-sass-chokidar. At first glance, I do not think it is an issue with the watcher, it is more an issue related to how the library sass-graph parses the imports.

Your recommendation makes sense. Thing is that node-sass is using version 2.2.4 of sass-graph and node-sass-chokidar is using version 2.1.1.

[Off-topic] I am a bit confused here, though, since I checked my sass-graph library and apparently I have version 2.2.4 installed, the package.json looks like:

Is it because what I mentioned above and the latest needed version was installed?

Anyway. So, when a new Graph is created at line 257, all scss files are parsed. Sass / CSS imports are parsed using script parse-imports.js, at line 69. When parsing my main.scss file I get the following:

NOTE: Please, ignore the "vendors/_bootstrap" string, I was testing to import some files without implementing glob patterns. Pay attention to how the *'s are not resolved by sass-graph.

Next, there is a critical method when resolving the paths. Take a look at line 75 in the previous image. That method, resolveSassPath, is responsible for resolving the paths ( 👍 ), but it is doing an exception swallowing:

There, in line 20 is where it breaks. Then, the method will return false for each path with a glob pattern and then in line 76, the import with a glob pattern is skipped and is not added as an import in line 80.

Graph classes have following structure:

{
...
"index": {
   "~/_shame.scss":{
          "imports": [], // import statements in this file (shame.scss)
          "importedBy": ["~/main.scss"], // who are the files that import this file (shame.scss)
          "modified": --> timestamp
   }
}
...
}

If you remember this:

the only files that are imported in main.scss without using a glob pattern are "_shame.scss" and "vendor/_bootstrap.scss". For those files, I get the "importedBy" property in the Graph object filled with "main.scss", for the rest of my partial files, nothing. In the same way, the "imports" property of the file "main.scss" are filled only with "_shame.scss" and "vendors/_bootstrap.scss". That is why I suspect here is the issue.

BIG QUESTION:

First, what is your opinion? do you also think the issue is there? Second, since you have already worked with the importer for node-sass, do you think is there a way we can together collaborate with the people from sass-graph to solve this? I could commit to fix this, but it would be great to know if there is some shortcut using what you know with your node-sass importer implementation.

Thanks in advance!

Best, Max.

I think working with the sass-graph team is not the way to go. I guess they don't (and in my opinion the shouldn't) care for some third party package. sass-graph is supposed to match the SASS specification.

I'd recommend you to use node-sass and chokidar-cli separately.

chokidar "**/*.scss" -c "npm run build-scss"

Closing this because of inactivity.

maoberlehner / node-sass-magic-importer