pwa-kit icon indicating copy to clipboard operation
pwa-kit copied to clipboard

[FEATURE] Add stylesheet loader to PWA-Kit SDK

Open bendvc opened this issue 1 year ago • 0 comments

Description

This PR is the result of multiple requests to add CSS file loader support to the PWA-Kit platform. The issue in question specifically was when a developer was following Chakra documentation on how to use custom font, but was not able to successfully follow the steps as our code sdks don't support css loading.

Being that the template-retail-react-app is the biggest and most used template we provide, I think it's reasonable to consider it a bug that our template, which uses chakra, can't add custom fonts (via css) as prescribed.

In this PR we add css loaders to the SDKs and update the rendering-pipeline to ensure things still work for server-side rendering.

Known Issues

  1. The resource location in the url value for the font is sometimes not right, I believe this is do to the publicPath setting.. (Definitely not correct for production builds)
  2. There is still a flash of fonts when there shouldn't be one because the style is inlined.

TODO:

  1. Need to figure out a post-processing step for moving around the style.css and font files in our assets folder so it all makes sense.
  2. Documentation needs to be added.

Types of Changes

  • [ ] Bug fix (non-breaking change that fixes an issue)
  • [ ] New feature (non-breaking change that adds functionality)
  • [ ] Documentation update
  • [ ] Breaking change (could cause existing functionality to not work as expected)
  • [ ] Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

  • Removing a public function or component or prop
  • Adding a required argument to a function
  • Changing the data type of a function parameter or return value
  • Adding a new peer dependency to package.json

Changes

  • (change1)

How to Test-Drive This PR

  • (step1)

Checklists

General

  • [ ] Changes are covered by test cases
  • [ ] CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

  • [ ] There are no changes to UI

or...

Localization

  • [ ] Changes include a UI text update in the Retail React App (which requires translation)

bendvc avatar Jan 30 '24 21:01 bendvc