Feature Request: Tilde Importer Capability

[futurethang]

wc-sass-render is doing an excellent job formatting styles, but I'm running into a common scenario when using it to compile from an already existing SASS library that is built heavily upon imports that use the ~ character to shorten path references.

On one hand it would be a great help in pulling styles from node-modules, reducing the work of typing out relative paths precisely. More critically though, when the dependency itself compiles its own sass modules using tilde importers I have little control over he wc-sass-render's failure.

I've used the node-sass-tilde-importer package with success in other areas, and wonder if it is possible (or smart) to incorporate it into wc-sass-render as well?

As of now I am hamstrung by errors such as this:

Error: File to import not found or unreadable: ~@momentum-ui/icons/scss/mixins.
    at options.error (/Users/kehyde/Desktop/wc-sass-render/node_modules/node-sass/lib/index.js:291:26) {
  status: 1,
  file: '/Users/kehyde/Desktop/agentx-base-components/node_modules/@momentum-ui/core/scss/components/avatar/module.scss',
  line: 4,
  column: 1,
  message: 'File to import not found or unreadable: ~@momentum-ui/icons/scss/mixins.',
  formatted: 'Error: File to import not found or unreadable: ~@momentum-ui/icons/scss/mixins.\n' +
    '        on line 4 of node_modules/@momentum-ui/core/scss/components/avatar/module.scss\n' +
    '        from line 1 of src/components/avatar/styles/avatar.scss\n' +
    ">> @import '~@momentum-ui/icons/scss/mixins';\n" +
    '\n' +
    '   ^\n'
}

[tristanMatthias]

Hey @futurethang , thanks for filing the issue.

Does the -i flag not resolve this for you. I included that flag to handle library imports. If it's not working, we can look further into it.

[futurethang]

Ah, thanks for pointing that out @tristanMatthias . I'm experimenting with that now, but I'm confused as to how to word that flag to replace a ~ with the nearest parent 'node-modules' whenever encountered. something like -i 'node_modules/@momentum-ui' does not do the trick.

[tristanMatthias]

Hmm, sounds like it could be an issue with node-sass. Your experimentation with node-sass-tilde-importer sounds promising. I don't have too much time at the moment, but I'd be most happy to accept PRs for this.

Otherwise, if it's not urgent, I'll put it on my backlog.

[futurethang]

I think the -i flag takes care of part of my question, reducing the relative paths where used in my own project.

The tougher part is that the sass module within the library import uses the tilde to reference another section of the library.

So to clarify the scenario, say I import @import "node_modules/@momentum-ui/core/scss/components/activity-button/module";, which works as expected. But within that module it refers to @import '~@momentum-ui/icons/scss/variables';, which is using the tilde to effectively just back our of the core library to the nearest node-modules parent, then come back into the icons library.

Anyway, I'll keep cracking at it and see if I can incorporate something that helps. Thanks for having a look, I appreciate it!

[tristanMatthias]

Yeah, the above sounds like it could be fixed with that importer. Have a crack and see if it works, then we can merge it in :)

[lkraav]

I read through this issue, but couldn't immediately grasp what the driving problem here is. Regardless, I'd like to take this opportunity to voice support for integrating node-sass-tilde-importer here, has I recently had to add it to my stack as well https://github.com/conversionxl/aybolit/blob/master/packages/sass-render/index.js

[tristanMatthias]

Sounds like that's the way to go @lkraav. If no-one submits a PR for this, I'll get around to it later on.

[lkraav]

I'm just not sure whether it's only about adding the package, that's the trivial part. But could it use any out of the box configuration?

[tristanMatthias]

Sure. The use case is not that complex

[futurethang]

I incorporated node-sass-tilde importer on this branch for review: https://github.com/futurethang/wc-sass-render/tree/add-tilde-importer. It eliminates the error and outputs successful console feedback like so:

Rendering ./src/components/avatar/styles/avatar.scss...
Complete!

But, for sass that has any tildes occurring in the @import chain it fails to insert any actual output, and I just get export const styles = css``; Otherwise, it renders as expected (no tildes encountered => all the styles).

This might just fall on the sass resources I need for my particular case, but I wanted to share the changes so far and see if this sparks any other thoughts.

[tristanMatthias]

Nice to see some "console.log("fart")"s in there haha. So if that's outputting nothing, I'd say that's an issue with the tilde plugin.