Skip to content

Support NodePackageImporter for SCSS files by default #280

Open
@juzerzarif

Description

@juzerzarif

Is your feature request related to a problem? Please describe.
I'm trying to import an SCSS package via a pkg: URL (https://sass-lang.com/documentation/at-rules/use/#pkg-ur-ls):

@use 'pkg:@my-package/scss';

Currently this plugin doesn't include any importer that can support imports like that and it's not possible to include NodePackageImporter support without implementing a whole customRenderer (since there's no way to provide an importers list for sass in rendererOptions via JSON) which would also include duplicating the very helpful alias importer that this plugin includes by default.

Describe the solution you'd like
Dart sass includes an importer - NodePackageImporter - which implements Node.js resolution behavior (so it correctly respects the package.json exports field which is my specific use case).

I think it might be reasonable for this plugin to include it in the importers list by default in addition to the importer for webpack style tilde prefixed imports:

const importers = [aliasImporter, sassTildeImporter];
.

This plugin depends on sass@^1.70.0 and NodePackageImporter is supported starting sass@1.71.0 so I think only including it when it's available makes sense to avoid this being a breaking change.

One thing to note is that Sass doesn't include NodePackageImporter by default so if this plugin doesn't want to do it either, I can think of 2 decent options for supplying custom importers that are merged with the default importers that this plugin provides:

  1. rendererOptions.sass.importers (or maybe a different key) should allow you to supply file paths for JS modules that export sass importers
  2. Allowing the plugin to be configured by a config file (a la typescript-plugin-css-modules.config.js) in addition to the configuration options provided in the tsconfig.json.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions