angular / angular/angular-cli

respect wepack export condition for importing

Open
#27,100 4 comments 12 reactions 0 assignees View on GitHub
area: @angular-devkit/build-angular devkit/build-angular:browser feature feature: insufficient votes
Dominant language
TypeScript
Stars
27k
Forks
11.8k
Avg merge
14h 23m
Merged PRs (30d)
162

Description

### Command

build, extract-i18n, serve, test

### Description

The root problem I am trying to solve is the different import behavior of esbuild and webpack for url resources like described here ( https://github.com/angular/angular-cli/issues/24470 ).

We have a npm package shipping company fonts and scss file to import them.

I know that there are other possibilities, but I also discovered that we could have different entrypoints for webpack and esbuild
when using conditions in the package.json as described here: https://webpack.js.org/guides/package-exports/#conditions-preprocessor-and-runtimes.

This was leading me to this package.json
```json
"exports": {
"./styles/*": {
"webpack": {
"sass": "./dist/styles/webpack/*.scss",
"less": "./dist/styles/webpack/*.less",
"style": "./dist/styles/webpack/*.css"
},
"sass": "./dist/styles/*.scss",
"less": "./dist/styles/*.less",
"style": "./dist/styles/*.css"
},
"./*": "./dist/fonts/*"
}
```

The only problem here is, that this does not work. Webpack is loading the normal sass styles.

### Describe the solution you'd like

It would be really cool if the webpack condition is matched.

### Describe alternatives you've considered

We could offer a scss variable so that consumers can override the font path or just casually export the file. This still does not solve the problem when using esbuild and the karma runner but at least they could do something.

I am not sure how much effort it is fixing this, but in case you just need to add `webpack` here: https://github.com/angular/angular-cli/blob/main/packages/angular_devkit/build_angular/src/tools/webpack/configs/styles.ts#L382 it would be really cool if you could do it.

Contributor guide

Open the contributing guide

Research direction

Start at packages/angular_devkit/build_angular/src/tools/webpack/configs/styles.ts around line 382 and trace how style imports resolve package export conditions. Exercise the build, extract-i18n, serve, and test commands with the package example; done means webpack selects its condition while existing sass, less, and style resolution continues to work.

Written by the indexing model from the issue text.

Assessment

Tech stack
sass, scss, typescript, webpack
Domain
build-system, tooling
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.