CSS Warnings in Angular Build Due to Deprecated Syntax in yasgui.min.css

[yoavnash]

When using @triply/yasgui in an Angular project, the build process generates multiple warnings due to deprecated or invalid CSS syntax in yasgui.min.css. These warnings stem from the use of outdated browser hacks like *cursor and *zoom, which are incompatible with modern CSS processors used in Angular's build pipeline (e.g., PostCSS or Dart Sass).

Warnings Example:

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

node_modules/@triply/yasgui/build/yasgui.min.css:1:7404:
  1 │ ...ng_desc_disabled{cursor:pointer;*cursor:hand;background-repeat:n...
          ╵                                    ^

Steps to Reproduce:

1. Create a new Angular project with the CLI.
2. Install @triply/yasgui using npm install.
3. Add yasgui.min.css to the angular.json styles array or import it directly in a component.
4. Build or serve the project using ng serve or ng build.
5. Observe the warnings in the console.

Expected Behavior:
Angular builds should process the library's CSS without generating warnings. The CSS should adhere to modern standards.

Actual Behavior:
The Angular build process emits multiple warnings related to invalid CSS syntax, disrupting the developer experience.

Environment:

• @triply/yasgui version: 4.2.28
• Angular CLI version: 19.0.6
• Build tool: Webpack (via Angular CLI)
• CSS Processor: PostCSS/Dart Sass
• Node.js version: 18.19
• Operating system: Linux

Proposed Solution:
Update the yasgui.min.css file to remove outdated syntax (e.g., *cursor, *zoom) that is no longer supported by modern CSS processors. This will ensure compatibility with Angular projects and other frameworks that use strict CSS validation.

Additional Context:
Angular projects enforce strict CSS standards, and the inclusion of invalid syntax in third-party libraries causes unnecessary build-time warnings. Resolving this issue will enhance compatibility and improve developer experience for Angular users.