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

[FEATURE] Add stylesheet loader to PWA-Kit SDK #1650

Draft
wants to merge 4 commits into
base: develop
Choose a base branch
from

Conversation

bendvc
Copy link
Collaborator

@bendvc bendvc commented Jan 30, 2024

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)

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.

None yet

1 participant