Skip to content
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

Bundled library causes warning about css-syntax-error #283

Open
blcham opened this issue Mar 15, 2024 · 3 comments
Open

Bundled library causes warning about css-syntax-error #283

blcham opened this issue Mar 15, 2024 · 3 comments

Comments

@blcham
Copy link
Collaborator

blcham commented Mar 15, 2024

Reported by https://github.com/shellyear.

When SForms is used in Vite-based projects (such as https://github.com/kbss-cvut/record-manager-ui). It generates warning when npm run build:

[WARNING] Expected identifier but found "*" [css-syntax-error]

More detailed output:
Screenshot 2024-03-06 at 19 23 17

Related issues:
evanw/esbuild#3016
https://stackoverflow.com/questions/1690642/purpose-of-asterisk-before-a-css-property
kbss-cvut/record-manager-ui#113

@blcham
Copy link
Collaborator Author

blcham commented Mar 15, 2024

When using in Record Manager UI, following was identified:
It seems that the error is related to datatables.net package

Screenshot 2024-03-14 at 18 37 44 %
Screenshot 2024-03-14 at 18 41 57

  • The package comes with its prebuild minified css, which is then add to the final minified css file. The purpose of asterisk (*) is hack for IE . So basically it is not an actual error, but workaround by datatables.net, but since Vite aims to support moderns browsers, and does not support IE by default, this warning is being thrown.
  • *property: value_ applies the property value in IE 7 and below. It may or may not work in future versions. Warning: this uses invalid CSS.
  • datatables.net also relies on JQuery, and using packages for jquery with react is discouraged

To avoid this warning, we should avoid direct or indirect use of this package. Or I can try to modify that minified css coming from that package separately via postcss, and emit it either as a part of single minified file or as a separate minified css file

@blcham
Copy link
Collaborator Author

blcham commented Mar 15, 2024

Currently, @triply/yasgui@4.2.28 is the last version on npmjs.com, so the solution could be one of the alternatives:

  • find another fork that solves the issue (or solve it in our fork)
  • put questions depending on yasgui functionality into a separate SForms components project (as it is natural anyway)
  • ignore it because we want to support IE 7 anyway ?
  • upgrade package datatables.net

@blcham blcham changed the title Bundled library causes CSS warning Bundled library causes warning about css-syntax-errror Mar 15, 2024
@blcham blcham changed the title Bundled library causes warning about css-syntax-errror Bundled library causes warning about css-syntax-error Mar 15, 2024
@blcham
Copy link
Collaborator Author

blcham commented Mar 15, 2024

@shellyear suggests to run some kind of post-css plugin to remove problematic "*" character as described in hack for IE .

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant