Clear and concise description of the problem

Given a package with the following exports:

{
  "name": "@example/my-pkg",
  "type": "module",
  "exports": {
    ".": {
      "import": "./dist/my-library.js",
      "require": "./dist/my-library.js",
      "sass": "./index.scss",
      "style": "./dist/my-library.css"
    },
    "./package.json": "./package.json"
}

Developers should be able to write a Sass stylesheet for their application like this:

@use '@example/my-pkg'; // resolves to node_modules/@example/my-pkg/index.scss

Suggested solution

The CSS plugin should create resolvers which copy the mainFields option to conditions. Additionally, to match webpack's capabilities, the resolve plugin needs to pass unsafe: true to resolve.exports since we want to ignore import and require conditions when a stylesheet is making a request.

This should be doable with a new internal resolve option. Within Vite, import should only be assumed when JS modules and scripts are the importer. So in addition to the isFromTsImporter option, we should also track isFromJsImporter. Then, when the importer is JS or TS, we disable unsafe and allow resolve.exports to use import/require and node/browser conditions.

Alternative

Once CSS resolvers are passing their conditions, instead of checking for a JS importer, we ask library authors to order their style/less/sass conditions before the import/require/browser/node conditions in the exports map. I'm not in favor of this though because I believe bundlers should be opting out of these ESM/CJS conditions when when the resolver exits a JS context.

Additional context

Docs for resolve.exports's unsafe option:
https://github.com/lukeed/resolve.exports#optionsunsafe

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.