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

[NO JIRA]: Update compliation of stylesheets #3707

Merged
merged 1 commit into from
Jan 10, 2025

Conversation

olliecurtis
Copy link
Member

This PR updates our transpilation process to fix an issue that when we are generating the bpk-stylesheets the imports in the specific files for styles were not being updated to .css and remained as .scss which meant that consumers would have to do further Backpack transpilation on their side when using this component through the js means

Remember to include the following changes:

  • Ensure the PR title includes the name of the component you are changing so it's clear in the release notes for consumers of the changes in the version e.g [KOA-123][BpkButton] Updating the colour
  • README.md (If you have created a new component)
  • Component README.md
  • Tests
  • Accessibility tests
    • The following checks were performed:
      • Ability to navigate using a keyboard only
      • Zoom functionality (Deque University explanation):
        • The page SHOULD be functional AND readable when only the text is magnified to 200% of its initial size
        • Pages must reflow as zoom increases up to 400% so that content continues to be presented in only one column i.e. Content MUST NOT require scrolling in two directions (both vertically and horizontally)
      • Ability to navigate using a screen reader only
  • Storybook examples created/updated
  • For breaking changes or deprecating components/properties, migration guides added to the description of the PR. If the guide has large changes, consider creating a new Markdown page inside the component's docs folder and link it here

@olliecurtis olliecurtis added the patch Patch production bug label Jan 10, 2025
@@ -19,7 +19,7 @@
"build": "run-s build:*",
"build:gulp": "gulp",
"build:unstable__bpk-mixins": "./scripts/scss/generate-unstable__bpk-mixins.sh",
"build:sass": "node scripts/scss/styles-prod.js && rm packages/bpk-stylesheets/index.css",
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We shouldn't delete this file as we need it

"transpile:copy-css": "node scripts/transpilation/copy-css.js",
"transpile:copy-utils": "node scripts/transpilation/copy-utils.js",
"transpile:imports": "node scripts/transpilation/transform-js-scss-css-imports.js",
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changing the order so that we will capture bpk-stylesheets otherwise the import change would happen before bpk-stylesheets was ready

Comment on lines +126 to +128
new MiniCssExtractPlugin({
filename: 'index.css',
}),
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This complies the code to strip out non browser understandable sass such as global()

@@ -46,7 +46,7 @@ console.log('Crunching import paths...');
// eslint-disable-next-line no-console
console.log('');

const findReplaces = [{ find: '.module.scss', replace: '.module.css' }];
const findReplaces = [{ find: '.scss', replace: '.css' }];
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changing this here rather than renaming the files in bpk-stylesheets as that would have created a breaking change folks would need to do if they were using the sass stylesheets over the js

Copy link

Visit https://backpack.github.io/storybook-prs/3707 to see this build running in a browser.

Copy link
Contributor

@xalechez xalechez left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@olliecurtis olliecurtis merged commit b39d427 into main Jan 10, 2025
10 checks passed
@olliecurtis olliecurtis deleted the no-jira-update-compliation-of-stylesheets branch January 10, 2025 12:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
patch Patch production bug
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants