New Feature: Automatic Sass @import resolution via importer function

[ryanelian]

https://jaketrent.com/post/package-json-style-attribute/

Apparently nowadays there is a style field in package.json pointing to CSS file to be imported, just like main field for JS file:

https://github.com/twbs/bootstrap/blob/v4-dev/package.json

"style": "dist/css/bootstrap.css",
"sass": "scss/bootstrap.scss",

https://github.com/Semantic-Org/Semantic-UI/blob/master/package.json

"style": "dist/semantic.css",

https://github.com/uikit/uikit/blob/develop/package.json

"style": "dist/css/uikit.css",

https://github.com/FortAwesome/Font-Awesome/blob/fa-4/package.json

"style": "css/font-awesome.css",

We have the technology to redirect package imports using node-sass importer function: https://github.com/sass/node-sass

Specifications

For example, from /client/css/index.scss

@import '@ryan/something';

1. Disable the existing node_modules folder resolution first.

2. Default behavior: Check whether the file exists when imported relative to original file. If yes, use this file. For example: /client/css/@ryan/something.scss

3. Default behavior: Sass happened to have something called partial files: if you @import "something", it also resolves to _something.scss. Therefore we need to look up whether partial files exist during relative import... For example: /client/css/@ryan/_something.scss

4. Default behavior: Sass also import normal CSS file when import does NOT end with .scss extension. Look it up relatively. For example: /client/css/@ryan/something.css

5. Custom instapack behavior: Check whether the file exists when imported relative to original file, but as index.scss in a folder. Disable this behavior when the import ends with .scss extension. For example: /client/css/@ryan/something/index.scss

6. Custom instapack behavior: Check whether the file exists when imported relative to original file, but as index.css in a folder. Disable this behavior when the import ends with .scss extension. For example: /client/css/@ryan/something/index.css

7. Legacy instapack behavior: Check whether the file exists when imported relative to node_modules as SCSS file. If yes, use this file. For example: /node_modules/@ryan/something.scss

8. Legacy instapack behavior: Check whether the file exists when imported relative to node_modules as partial file. If yes, use this file. For example: /node_modules/@ryan/_something.scss

9. Legacy instapack behavior: Check whether the file exists when imported relative to node_modules as CSS file. If yes, use this file. For example: /node_modules/@ryan/something.css

10. Custom instapack behavior: Check whether package.json exists in the imported node_modules package folder. If yes, try to parse the sass and style fields. Disable this behavior when the import ends with .scss extension. For example: /node_modules/@ryan/something/package.json

    • If sass field exists and the file actually exists (when resolved relative to the package.json), use this file.

    • Else, if the style field exists and the file actually exists (when resolved relative to the package.json), use this file instead.

11. If no result so far, then the imported file is not found. Should probably throw an error.

EDIT: Partial import from node_modules (8) will be disabled to prevent questionable / janky AF resolution. Explicit is good in this one case...

EDIT 2: node_modules imports are evaluated after normal imports to prevent unwanted behaviors unlike the default Sass behaviors.

[ryanelian]

Recommend using enhanced-resolve for this job.

While at it, remove the ancient Browserify's resolve library.