Add Angular sample #847
Add Angular sample #847
Conversation
|
Add MiniCssExtractPlugin
Thanks Matt 🙏 sorry I wasn't sure whether I should update the root lock, as Angular often doesn't play well with others in this scenario (in my experience), and then I forgot to do anything about it. I've updated to remove the |
michaeltaranto
added
the
documentation
There was a problem hiding this comment.
Do we need this file when we already have global.css.ts?
There was a problem hiding this comment.
Can the comments in this file be removed?
| @@ -0,0 +1,22 @@ | |||
| import { Attribute, Component, HostBinding } from '@angular/core'; | |||
| import { style } from '@vanilla-extract/css'; | |||
| import { sprinkles } from '../sprinkles.css'; | |||
There was a problem hiding this comment.
sprinkles isn't used anywhere in this file. I think it would be a good idea to use sprinkles at runtime somewhere though, as the webpack example uses it both at buildtime and runtime, but this example currently only uses it within app.css.ts.
| .angular { | ||
| font-style: italic; | ||
| } |
There was a problem hiding this comment.
This could be moved to global.css.ts.
There was a problem hiding this comment.
This could probably be trimmed down to just /dist and /.angular/cache. The rest of the stuff isn't really relevant and/or is handled by the repo-root gitignore.
| node_modules | ||
| dist | ||
| .angular | ||
| .vscode | ||
| README.md |
There was a problem hiding this comment.
Again, probably only .angular needs to be here`.
|
@sebtoombs Are you still interested in getting this PR through? |
What
This PR adds a simple Angular app to the examples directory. The example closely copies the webpack-react example. The implementation should probably be considered as a reasonably robust proof of concept - it has not yet been used in production and has only been "tested" by one author (me).
Why
For better or worse, some of us need to use Angular. Most existing Angular component libraries are poor quality. We are building an Angular component library for internal use, and I wanted to explore if it was possible to use a best-in-class styling solution such as vanilla-extract.
How
The readme & webpack config cover most of the how, but tl;dr - follow the vanilla-extract install instructions for webpack, but make a slight modification to the Angular webpack config to avoid letting the angular webpack loader load
.css.tsfiles. It's possible this could be done by modifying the Angular webpack loader to add an "emitter" for these files (if one knew how...).