Skip to content

Conversation

@sissbruecker
Copy link
Contributor

Adds the "Importing Resources from npm Packages" article for the new styling docs.

This is an exact copy of the existing article. It still recommends using @CssImport for loading stylesheets due to vaadin/flow#22713.

Note

The PR targets a base branch for the new styling docs. That branch has the old styling docs removed and new articles are added gradually until the new section is ready. Cross-references between new articles will be filled in later, respective sections have been marked with TODOs.

@github-actions
Copy link

AI Language Review

The file titled "Importing Resources from npm Packages" is new, so let's review the content for any issues:

  1. In the example under "== Importing Stylesheets from npm Packages", the class AppShell is annotated with both @NpmPackage and @CssImport. Make it clear that these annotations are meant for declaring dependencies and importing styles.

  2. In the sentence, "The assets field syntax looks like this in general:", consider clarifying by restructuring the sentence for better readability. For example, "The general syntax for the assets field is: "asset/glob/pattern:local/target/path".

  3. The context information within the annotations in the code blocks (e.g., "// tag::package[]") seems to serve as markers for code snippets but may not be necessary for some readers. Consider explaining their purpose or removing them for clarity.

  4. Clarify the explanation of how assets are copied and how paths are defined. The sentence, "The assets field in the @NpmPackage annotation allows you to copy assets from npm packages into the static resource folder," could be simplified for clarity, particularly for readers who may not be familiar with the term "assets".

  5. In the section "== Using Static Resources from npm Packages," consider providing a brief explanation or example of a "glob" pattern for readers who may not know what it is.

Addressing these readability and clarity issues will enhance the document's effectiveness in communicating the relevant information.

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

Successfully merging this pull request may close these issues.

2 participants