CSS Warnings when embedding the Sign-In Widget in an Angular 13 app #76
Description
I'm submitting a:
- Bug report
- Feature request
- Other (Describe below)
Current behavior
This might be more of a Sign-In Widget issue, but it happens in an Angular 13 project, so I'm entering it here.
If you embed the Sign-In Widget in an Angular 13 project, it spits out warnings when you run npm run build. It also causes a pretty large bundle.
> [email protected] build
> ng build
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.
Initial Chunk Files | Names | Size
main.36c55e8f567dd603.js | main | 1.79 MB
styles.c2f49f58d74e7399.css | styles | 717.15 kB
polyfills.257e36d24bd2b605.js | polyfills | 571.92 kB
runtime.f651d863d2a2dfe3.js | runtime | 1.07 kB
| Initial Total | 3.05 MB
Build at: 2021-11-08T17:51:49.169Z - Hash: 90e481c4d77d5d53 - Time: 43728ms
Warning: > styles.c8241a4c6e2914aa.css:4:0: warning: "@charset" must be the first rule in the file
4 │ @charset "UTF-8";
╵ ~~~~~~~~
styles.c8241a4c6e2914aa.css:1:0: note: This rule cannot come before a "@charset" rule
1 │ @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400i...
╵ ^
Warning: > styles.c8241a4c6e2914aa.css:557:102: warning: Expected identifier but found "*"
557 │ ...play:block;vertical-align:middle;float:left;zoom:1;*display:inline}
╵ ^
Warning: > styles.c8241a4c6e2914aa.css:1416:88: warning: Expected identifier but found "*"
1416 │ ...lay:block;vertical-align:middle;float:left;zoom:1;*display:inline}
╵ ^
Warning: bundle initial exceeded maximum budget. Budget 3.00 MB was not met by 55.23 kB with a total of 3.05 MB.
Found when upgrading the Okta CLI's Angular sample to v13.
Expected behavior
No warnings about CSS. A non-minified version might help too. Yes, I could include the CSS in the HTML page instead of using it from node_modules, but then it's more difficult to upgrade. @dependabot makes it easy when it's an npm module.
Minimal reproduction of the problem with instructions
Install the Okta CLI and run okta start angular.
Extra information about the use case/user story you are trying to implement
Environment
"@okta/okta-angular": "^4.1.1",
"@okta/okta-auth-js": "^5.8.0",
"@okta/okta-signin-widget": "^5.13.0",$ node --version
v14.18.1
Configuration
- Okta application type: SPA