The current build process for CSS in the design tokens repository requires optimization to align with the MetaMask module template conventions and to simplify the import path for better developer experience. The goal is to update the build process so that the CSS is exported from the dist folder, streamlining the integration of design tokens across projects. Additionally, we aim to improve the import path from @import '@metamask/design-tokens/src/css/design-tokens'; to a more concise @import '@metamask/design-tokens/styles';, making it easier and cleaner for developers to include design tokens in their projects.
Technical Details
Objective: Refine the CSS build and export process in the design tokens repository to enhance alignment with MetaMask module template conventions and improve the CSS import path.
Implementation Steps:
Review and update the build configuration to ensure CSS files are compiled and exported to the dist folder.
Adjust the package's export settings to facilitate the new import path, ensuring backward compatibility where possible.
Update documentation and examples within the repository to reflect the new import path.
Test the updated build process and import paths in a sample project to ensure compatibility and ease of use.
Dependencies: Familiarity with the repository's current build setup, CSS pre-processing, and the MetaMask module template conventions.
Acceptance Criteria
CSS files from the design tokens repository are successfully built and exported to the dist folder.
The import path for CSS design tokens is simplified to @import '@metamask/design-tokens/css';.
Documentation within the repository is updated to guide developers on using the new import path.
The updated build process and import path are tested and confirmed to work seamlessly in sample projects, with no regressions in functionality.
Feedback from developers indicates that the new import path improves the developer experience and integration process.
Additional Notes
This update is a critical step towards standardizing our build processes across MetaMask repositories and enhancing the usability of our design tokens. By aligning with the MetaMask module template and simplifying the import path, we make it easier for developers to adopt and apply our design system consistently across projects.
This issue template provides a structured approach to proposing updates to the CSS build process in the design tokens repository, detailing the purpose, technical approach, acceptance criteria, and additional context for the task.
Description
The current build process for CSS in the design tokens repository requires optimization to align with the MetaMask module template conventions and to simplify the import path for better developer experience. The goal is to update the build process so that the CSS is exported from the
distfolder, streamlining the integration of design tokens across projects. Additionally, we aim to improve the import path from@import '@metamask/design-tokens/src/css/design-tokens';to a more concise@import '@metamask/design-tokens/styles';, making it easier and cleaner for developers to include design tokens in their projects.Technical Details
distfolder.Acceptance Criteria
distfolder.@import '@metamask/design-tokens/css';.Additional Notes
This update is a critical step towards standardizing our build processes across MetaMask repositories and enhancing the usability of our design tokens. By aligning with the MetaMask module template and simplifying the import path, we make it easier for developers to adopt and apply our design system consistently across projects.
This issue template provides a structured approach to proposing updates to the CSS build process in the design tokens repository, detailing the purpose, technical approach, acceptance criteria, and additional context for the task.