Add ~ (tilde) as shortcut for {}/node_modules?

[ghybs]

Webpack Sass loader provides the ~ (tilde) prefix as a way to tell the compiler that it should resolve the path using a configured array of module directories (typically <projectRoot>/node_modules, but can be anything specific to the project).

Some IDE's (e.g. WebStorm) provide path resolution analysis and highlighting based on the assumption that the ~ means <projectRoot>/node_modules.

Some libs provide similar functional extension, e.g. https://github.com/matthewdavidson/node-sass-tilde-importer

We could do the same in this package by checking if ~ is the first character in the path, and replace it with {}/node_modules, or anything configured in scss-config.json for example.

Note: the ~ syntax (or some kind of special syntax) is needed by contrast with ES6 import because in Sass, "./style" and "style" are the same.

[sebakerckhof]

Do you know if that is sass specific, or if it is also used in the same way for less and other alternatives?
If so, we should maybe coordinate with authors of those Meteor packages (e.g. MDG) so we get similar behavior across packages.

Edit: see #246

[ghybs]

Thank you for quick feedback and action!

I like the idea of trying to coordinate the behaviour, hence the syntax!

I am not sure the exact extent of that ~ syntax, but it seems to be pretty common practice for webpack now:

• webpack CSS loader => applies also to CSS compilers, not only pre-processors.
• webpack Less loader
• webpack stylus loader
• Plugin to allow omitting the ~: omit-tilde-webpack-plugin

Besides the webpack Sass loader previously mentioned, as well as the node Sass tilde importer (not webpack).

[sebakerckhof]

@ghybs I kinda lost track of this. But if you're willing to work on this, I'd be happy to merge a PR.

[ghybs]

Hi @sebakerckhof,

Thank you for the heads up!

I must admit I forgot about it as well, thinking we were waiting for some input in meteor/meteor#8601.

I will see when I have time to send you a PR for this simple feature.
Ideally I would like to include some tests as well.

[sebakerckhof]

That was the idea, but since we haven't heard any feedback in the meteor issue, I'd say it's safe to move forward.

[voodooattack]

Any news on this?

[tonysamperi]

Ups?

[sattes-faction]

Is there any progress going on here?

[tonysamperi]

Actually I don't use this stuff ahahaha

[elliottregan]

Webpack uses the main property in package.json to decide which file to import. This allows you to import .css or .scss files, whichever is deemed the main file by the package maintainers.

I came across this issue looking for another solution, so I'm not familiar with how Meteor handles packages, but I'm sure you could emulate something similar in package.js.

[sebakerckhof]

Fixed per 4.14.1