okta / okta-angular

Angular SDK for Okta's OIDC flow
https://github.com/okta/okta-angular
Other
45 stars 31 forks source link

CSS Warnings when embedding the Sign-In Widget in an Angular 13 app #76

Open mraible opened 2 years ago

mraible commented 2 years ago

I'm submitting a:

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.

> okta-angular-sample@0.0.0 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

monde commented 2 years ago

@mraible I've filed a bug with the client SDKs team to triage for work. Thanks for all of the details.

Okta internal reference: https://oktainc.atlassian.net/browse/OKTA-444949