-
Notifications
You must be signed in to change notification settings - Fork 297
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add Angular sample #847
base: master
Are you sure you want to change the base?
Add Angular sample #847
Conversation
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hey Bud, Thanks for the PR. This repo uses is pnpm for package management. Could we drop the package-lock.json
file?
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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just some small comments, primarily to do with trimming down the boilerplate/generated code to keep the example as small as possible.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we need this file when we already have global.css.ts
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This could be moved to global.css.ts
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.ts
files. It's possible this could be done by modifying the Angular webpack loader to add an "emitter" for these files (if one knew how...).