-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Refactor build scripts w/postcss #672
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
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:
.browserslistrcwhich exposes our browser support matrix. (This file is picked up automatically by autoprefixer.)@primer/css/postcss.config.dist/directory is laid out:dist/{name}.cssis still the CSS build for each bundle, e.g.dist/primer.cssordist/marketing.css.dist/{name}.css.mapis the sourcemap, and references all of the source SCSS files relatively.dist/{name}.jsis the JS export for each bundle, which (still) only has acssstatskey. In other words, you canrequire('@primer/css/dist/utilities')to get the utility stats.dist/stats/{name}.jsonis the cssstats output as raw JSON, and isrequire()-d by the JS.dist/meta.jsonthat currently only has one key:bundlesis an object with keys likecore,product,marketing, andutilitiesthat 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.cssbuild/data.jsonbuild/index.js