pwa-kit
pwa-kit copied to clipboard
[FEATURE] Add stylesheet loader to PWA-Kit SDK
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
- 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) - There is still a flash of fonts when there shouldn't be one because the style is inlined.
TODO:
- 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.
- 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...
- [ ] Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
- [ ] Changes comply with WCAG 2.0 guidelines levels A and AA
- [ ] Changes to common UI patterns and interactions comply with WAI-ARIA best practices
Localization
- [ ] Changes include a UI text update in the Retail React App (which requires translation)