DP-18263: Creates new npm package for assets. #1032
Conversation
| Some reccomended fonts you can use can be found under `00-base/fonts`. | ||
| ## Example Compilation of Styles | ||
|
|
||
| The following example uses gulp to compile all .scss files under src (with exceptions to those .scss files under `00-base/`). The script will place the compiled files under `dist/` within the same directories they originated. |
There was a problem hiding this comment.
I threw this example into gulpfile.js and it's throwing error of variable undefined
Message:
src/scss/00-base/mixins/_ma-button.scss
Error: Undefined variable.
╷```
There was a problem hiding this comment.
let's follow in documentation improvement
|
|
||
| ## Setup and Usage (fonts/images) |
There was a problem hiding this comment.
So I think there are three use cases for this package:
- fonts images and colors variables
- SCSS
- compiled CSS (create an index.scss and compile that file using example gulp setup)
I think you have most of the things documented. Can we organize the documentation to support these use cases?
There was a problem hiding this comment.
follow up in documentation improvement
assets/src/scss/00-base/_global.scss
Outdated
|
|
||
| @forward "color-tokens"; | ||
|
|
||
| @forward "bourbon" show tint, clearfix; |
There was a problem hiding this comment.
this means we are only using tint and clearfix from bourbon?
| return stream | ||
|
|
||
| .pipe(sass({ | ||
| includePaths: [ |
There was a problem hiding this comment.
In this example, maybe we can use assets/index.js that you showed me?
Also, I don't think index.js is in the dist/folder, only fonts images and scss are being moved.
|
We also talked about in slack maybe removing the src/ and dist/ folder just to keep the assets directly at the package root. Just want to make sure the hot reload in storybook and patternlab still work for local development |
| "description": "Mayflower design tokens — it includes color token SCSS variables, fonts, icons and other imagery", | ||
| "main": "dist/scss/index", | ||
| "style": "dist/scss/index", | ||
| "name": "@massds/assets", |
There was a problem hiding this comment.
| "name": "@massds/assets", | |
| "name": "@massds/mayflower-assets", |
There was a problem hiding this comment.
Can you also fix the steps in circleci config? I think just change mayflower-assets to mayflower-tokens and remove the build step?
…ng elements and fonts-styles files to 00-base.
| // Let all your scss files have access to colors without having to remember that. | ||
| @forward "00-base/colors"; | ||
| // Grab the fonts from this package for inclusion: | ||
| @forward "00-base/fonts"; |
There was a problem hiding this comment.
fonts and other scss that refenrece $assets-path will need to config the var
@use "~@massds/assets/dist/scss/00-base/_fonts.scss" as * with (
$assets-path: "~@massds/assets/dist"
);
There was a problem hiding this comment.
follow up in documentation improvement
|
See #1037 |
Any PRs being created needs a changelog.txt file before being merged into dev. See: Change Log Instructions
Description
This changes the assets directory to support being added as the massds scoped NPM package
@massds/assets.Notable Changes:
00-base/mixins/box-sizing. This file isn't really a mixin at all, but almost all patterns expect and require the rules from that file to exist somewhere in the stylesheet before they're used. Having each pattern include it causes that same box-sizing rule to be repeated every single time you include additional patterns.! default. Now users have the ability to override them as needed.Next Steps:
Once this is approved, this should NOT be merged. We should publish the package to NPM first and ensure that packages that use our assets switch over to that first.
Related Issue / Ticket
Steps to Test
npm packin the assets directory to create an example of what will be downloaded when a user installs the published package withnpm install. That file can then be installed by runningnpm install path/to/file.tgz.Screenshots
Additional Notes:
Anything else to add?
Impacted Areas in Application
@todo
@massds/assetsscope/name.@massds/assetsin Github.Today I learned...