-
Notifications
You must be signed in to change notification settings - Fork 1.2k
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
Refactor build scripts w/postcss #672
Conversation
27c6205
to
08baeb2
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Changes look mostly good. Left a question and an opinion. Ship when you're ready.
# TODO: update this to pull from @primer/css | ||
old_path="primer/build/data.json" | ||
log "Pulling the old $old_path ..." | ||
curl -sL "https://unpkg.com/$old_path" > before.json |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not to be down on unpkg, but some future version I'd love to see stuff pulled from github tags (or releases)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I hear you, but we need the published files in this case, which are not part of the GitHub release. (Though we might consider that a bug, because maybe they should be!) I'm mostly being lazy here because unpkg is just the easiest way to get at a single file; if we're not down with unpkg, we should consider grabbing the tarball from npm directly and pulling out the file we want.
Refactor build scripts w/postcss
This refactors our CSS build script and reworks how we talk about "packages" internally so that (I think) it's clearer.
TL;DR: "packages" are now known as "bundles" — at least internally, for now. The word "package" tends to refer specifically to npm packages (or "modules"), and the word "bundle" aligns more closely with how we talk about JS and CSS builds that include specific things.
Here's what's in the tin:
.browserslistrc
which exposes our browser support matrix. (This file is picked up automatically by autoprefixer.)@primer/css/postcss.config
.dist/
directory is laid out:dist/{name}.css
is still the CSS build for each bundle, e.g.dist/primer.css
ordist/marketing.css
.dist/{name}.css.map
is the sourcemap, and references all of the source SCSS files relatively.dist/{name}.js
is the JS export for each bundle, which (still) only has acssstats
key. In other words, you canrequire('@primer/css/dist/utilities')
to get the utility stats.dist/stats/{name}.json
is the cssstats output as raw JSON, and isrequire()
-d by the JS.dist/meta.json
that currently only has one key:bundles
is an object with keys likecore
,product
,marketing
, andutilities
that each contain information about the bundle (all paths are relative to the root, notdist/
):@primer/css/blankslate/index.scss
)primer-blankslate/index.scss
)build/build.css
build/data.json
build/index.js