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

chore: updating package.json css path #622

Merged
merged 2 commits into from
Feb 9, 2024

Conversation

georgewrmarshall
Copy link
Collaborator

@georgewrmarshall georgewrmarshall commented Feb 9, 2024

Description

This PR addresses an issue where the CSS stylesheet exports were not functioning correctly due to a misconfiguration in the package.json file. Specifically, the files field in package.json was not correctly configured to include the CSS file, causing the exports to fail. The previous failed attempts were because I was testing using npm pack instead of yarn pack which render different results.

After this update we should be able to import the style sheet like

import '@metamask/design-tokens/design-tokens.css'

or

import '../../node_modules/@metamask/design-tokens/src/css/design-tokens';

Related issues

Fixes: #608
Attempted previous fixes:

Screenshots/Recordings

Before

before.mov

After

after.mov

Manual testing steps

  • Pull this branch
  • Run yarn pack
  • Unzip the tar build
  • See that the stylesheet is exported in the tar build src/css/design-tokens.css

Pre-merge author checklist

  • I’ve followed MetaMask Coding Standards.
  • I've clearly explained what problem this PR is solving and how it is solved.
  • I've linked related issues
  • I've included manual testing steps
  • I've included screenshots/recordings if applicable
  • I’ve included tests if applicable
  • I’ve documented my code using JSDoc format if applicable
  • I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.
  • I’ve properly set the pull request status:
    • In case it's not yet "ready for review", I've set it to "draft".
    • In case it's "ready for review", I've changed it from "draft" to "non-draft".

Pre-merge reviewer checklist

  • I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
  • I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

@metamaskbot
Copy link
Collaborator

Builds ready [e0df49d]

Storybook: Storybook

@georgewrmarshall georgewrmarshall self-assigned this Feb 9, 2024
@georgewrmarshall georgewrmarshall added the team-design-system All issues relating to design system label Feb 9, 2024
@georgewrmarshall georgewrmarshall marked this pull request as ready for review February 9, 2024 00:57
@georgewrmarshall georgewrmarshall requested a review from a team as a code owner February 9, 2024 00:57
@metamaskbot
Copy link
Collaborator

Builds ready [7e0a75e]

Storybook: Storybook

@georgewrmarshall georgewrmarshall merged commit ba91efd into main Feb 9, 2024
17 checks passed
@georgewrmarshall georgewrmarshall deleted the fix/608/css-exports-again branch February 9, 2024 16:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
team-design-system All issues relating to design system
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Fix Broken CSS Export in Design Tokens Package
3 participants