primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-23 14:13:14 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #672 from primer/reorg-build

Browse Source 
Refactor build scripts w/postcss
This commit is contained in:
Shawn Allen 2019-02-12 11:38:22 -08:00 committed by GitHub
commit 5b8e729c54
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 492 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.browserslistrc Normal file
View File

@ -0,0 +1,6 @@
> 5%
last 2 firefox versions
last 2 chrome versions
last 2 safari versions
last 2 edge versions
ie 11

1
.npmignore
View File

@ -1,6 +1,5 @@
*.log
.github/
.postcss.json
.next/
.storybook/
next.config.js

1
docs-test/urls.js
View File

@ -24,6 +24,7 @@ const exceptions = {
'/components/tables': deprecated,
'/getting_started': moved('/getting-started/contributing'),
'/getting_started/contributing': moved('/getting-started/contributing'),
'/packages': removed,
'/packages/primer': removed,
'/packages/primer-core': removed,
'/packages/primer-marketing': removed,

48
docs/landing/index.js
View File

@ -111,16 +111,15 @@ function Image(props) {
}
}
export function PrimerPackageBox({data = {}, count, ...rest}) {
export function PrimerPackageBox({count, ...rest}) {
return (
<Flex justifyContent="space-around" {...rest}>
<BorderBox bg="gray.1" width="auto" px={6} py={3} my={4}>
<Flex alignItems="center" justifyContent="space-around">
<Text fontSize={3} fontWeight="bold" mb={2} textAlign="center">
<Link href={packageSourceURL('primer')} color="inherit">
<Link href={bundleSourceURL('primer')} color="inherit">
Primer
</Link>{' '}
<Link href={packageURL('primer')}>{data.version}</Link>
</Link>
</Text>
<Link href="https://travis-ci.org/primer/primer" mt={-1}>
<img alt="Build Status" src="https://travis-ci.org/primer/primer.svg?branch=master" />
@ -136,27 +135,32 @@ export function PrimerPackageBox({data = {}, count, ...rest}) {
)
}
export function MetaPackageBox({children, data = {}, title, ...rest}) {
const deps = data.dependencies || []
PrimerPackageBox.propTypes = {
count: PropTypes.number
}
export function MetaPackageBox({children, meta = {}, title, ...rest}) {
const {name, imports = []} = meta
const bundles = imports.filter(bundle => !/support/.test(bundle))
return (
<Flex.Item is={BorderBox} bg="white" maxWidth={220} {...rest}>
<BorderBox bg="gray.1" border={0} borderBottom={1} borderRadius={0} px={3} py={2}>
<Heading is="div" fontSize={2}>
<Link href={packageSourceURL(data.name)} color="inherit">
<Link href={bundleSourceURL(name)} color="inherit">
{title}
</Link>{' '}
<Link href={packageURL(data.name)}>{data.version}</Link>
</Link>
</Heading>
</BorderBox>
<Text is="div" fontSize={1} p={3}>
{children}
<Text is="div" fontWeight="bold" mt={4} mb={2}>
{deps.length} packages:
{bundles.length} bundles:
</Text>
<ul className="list-style-none pl-0">
{deps.map(dep => (
<li key={dep}>
<Link href={packageURL(dep)}>{dep}</Link>
{bundles.map(bundle => (
<li key={bundle}>
{/* TODO: link to the actual page! */}
<Link href={bundleURL(bundle)}>{bundle}</Link>
</li>
))}
</ul>
@ -165,11 +169,19 @@ export function MetaPackageBox({children, data = {}, title, ...rest}) {
)
}
function packageURL(name) {
return `https://www.npmjs.com/package/${name}`
MetaPackageBox.propTypes = {
meta: PropTypes.shape({
name: PropTypes.string,
imports: PropTypes.arrayOf(PropTypes.string)
}),
title: PropTypes.node
}
function packageSourceURL(name, branch = 'master') {
// TODO get this from Metalsmith or page metadata???
return `https://github.com/primer/primer/blob/${branch}/modules/${name}`
function bundleURL(name) {
return `/css/bundle?name=${name}`
}
function bundleSourceURL(name, branch = 'master') {
// TODO get this from Metalsmith or page metadata???
return `https://github.com/primer/css/blob/${branch}/src/${name}`
}

38
lib/add-bundle-meta.js Normal file
View File

@ -0,0 +1,38 @@
const {existsSync} = require('fs')
const {dirname, join, resolve} = require('path')
const cache = {}
module.exports = function addBundleMeta(options = {}) {
const {namespace = 'data', log = noop} = options
return (files, metal, done) => {
const root = metal.source()
for (const [path, file] of Object.entries(files)) {
const bundle = getBundleRelativeTo(path, root)
log(`[meta] ${path} bundle: "${bundle}"`)
file[namespace].bundle = bundle
}
done()
}
}
function getBundleRelativeTo(file, root) {
let dir = join(root, dirname(file))
if (dir in cache) {
return cache[dir]
}
while (dir !== root) {
const indexPath = join(dir, 'index.scss')
if (existsSync(indexPath)) {
return (cache[dir] = getPathName(indexPath.substr(root.length + 1)))
}
dir = resolve(dir, '..')
}
return false
}
function getPathName(path) {
return dirname(path).replace(/\//g, '-')
}
function noop() {}

44
lib/add-package-meta.js
View File

@ -1,44 +0,0 @@
const {existsSync} = require('fs')
const {dirname, join, resolve} = require('path')
const cache = {}
module.exports = function addPackageMeta(options = {}) {
const {fields, namespace = 'data', log = noop} = options
return (files, metal, done) => {
const root = metal.source()
for (const [path, file] of Object.entries(files)) {
const pkg = getPackageRelativeTo(path, root)
if (pkg) {
file[namespace].package = fields ? pluck(pkg, fields) : pkg
} else {
log('no package.json found relative to', path)
}
}
done()
}
}
function getPackageRelativeTo(file, root) {
let dir = join(root, dirname(file))
if (dir in cache) {
return cache[dir]
}
while (dir !== root) {
const pkgPath = join(dir, 'package.json')
if (existsSync(pkgPath)) {
return (cache[dir] = require(pkgPath))
}
dir = resolve(dir, '..')
}
return false
}
function pluck(data, fields) {
return fields.reduce((out, field) => {
out[field] = data[field]
return out
}, {})
}
function noop() {}

11
lib/sync.js
View File

@ -4,7 +4,7 @@ const frontmatter = require('metalsmith-matters')
const watch = require('metalsmith-watch')
const {repository} = require('../package.json')
const addPackageMeta = require('./add-package-meta')
const addBundleMeta = require('./add-bundle-meta')
const addSource = require('./add-source')
const filterBy = require('./filter-by')
const parseDocComments = require('./parse-doc-comments')
@ -45,13 +45,8 @@ module.exports = function sync(options = {}) {
log
})
)
// copy a subset of fields from the nearest package.json
.use(
addPackageMeta({
fields: ['name', 'description', 'version'],
namespace: ns
})
)
// add the "bundle" metadata so that we can redirect to those pages
.use(addBundleMeta({namespace: ns}))
// rename files with their "path" frontmatter key
.use(rename(file => (file[ns] ? `${file[ns].path}.md` : true)), {log})
.use((_files, metal, done) => {

1
now.json
View File

@ -8,6 +8,7 @@
"next.config.js",
"package.json",
"package-lock.json",
"postcss.config.js",
"pages",
"script",
"src"

299
package-lock.json generated
View File

@ -1548,6 +1548,30 @@
}
}
},
"autoprefixer": {
"version": "7.2.6",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-7.2.6.tgz",
"integrity": "sha512-Iq8TRIB+/9eQ8rbGhcP7ct5cYb/3qjNYAR2SnzLCEcwF6rvVOax8+9+fccgXk4bEhQGjOZd5TLhsksmAdsbGqQ==",
"dev": true,
"requires": {
"browserslist": "^2.11.3",
"caniuse-lite": "^1.0.30000805",
"normalize-range": "^0.1.2",
"num2fraction": "^1.2.2",
"postcss": "^6.0.17",
"postcss-value-parser": "^3.2.3"
}
},
"browserslist": {
"version": "2.11.3",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.11.3.tgz",
"integrity": "sha512-yWu5cXT7Av6mVwzWc8lMsJMHWn4xyjSuGYi4IozbVTLUOEYPSagUB8kiMDUHA1fS3zjr8nkxkn9jdvug4BBRmA==",
"dev": true,
"requires": {
"caniuse-lite": "^1.0.30000792",
"electron-to-chromium": "^1.3.30"
}
},
"enhanced-resolve": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-3.4.1.tgz",
@ -1566,6 +1590,40 @@
"integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=",
"dev": true
},
"postcss": {
"version": "6.0.23",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
"integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
"dev": true,
"requires": {
"chalk": "^2.4.1",
"source-map": "^0.6.1",
"supports-color": "^5.4.0"
},
"dependencies": {
"has-flag": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
"dev": true
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true
},
"supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
"dev": true,
"requires": {
"has-flag": "^3.0.0"
}
}
}
},
"source-map": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@ -2314,6 +2372,28 @@
"postcss-modules-values": "^1.3.0",
"postcss-value-parser": "^3.3.0",
"source-list-map": "^2.0.0"
},
"dependencies": {
"postcss": {
"version": "6.0.23",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
"integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
"dev": true,
"requires": {
"chalk": "^2.4.1",
"source-map": "^0.6.1",
"supports-color": "^5.4.0"
}
},
"supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
"dev": true,
"requires": {
"has-flag": "^3.0.0"
}
}
}
},
"postcss-loader": {
@ -3270,17 +3350,17 @@
}
},
"autoprefixer": {
"version": "7.2.6",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-7.2.6.tgz",
"integrity": "sha512-Iq8TRIB+/9eQ8rbGhcP7ct5cYb/3qjNYAR2SnzLCEcwF6rvVOax8+9+fccgXk4bEhQGjOZd5TLhsksmAdsbGqQ==",
"version": "9.4.7",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.4.7.tgz",
"integrity": "sha512-qS5wW6aXHkm53Y4z73tFGsUhmZu4aMPV9iHXYlF0c/wxjknXNHuj/1cIQb+6YH692DbJGGWcckAXX+VxKvahMA==",
"dev": true,
"requires": {
"browserslist": "^2.11.3",
"caniuse-lite": "^1.0.30000805",
"browserslist": "^4.4.1",
"caniuse-lite": "^1.0.30000932",
"normalize-range": "^0.1.2",
"num2fraction": "^1.2.2",
"postcss": "^6.0.17",
"postcss-value-parser": "^3.2.3"
"postcss": "^7.0.14",
"postcss-value-parser": "^3.3.1"
}
},
"ava": {
@ -5761,13 +5841,14 @@
}
},
"browserslist": {
"version": "2.11.3",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.11.3.tgz",
"integrity": "sha512-yWu5cXT7Av6mVwzWc8lMsJMHWn4xyjSuGYi4IozbVTLUOEYPSagUB8kiMDUHA1fS3zjr8nkxkn9jdvug4BBRmA==",
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.4.1.tgz",
"integrity": "sha512-pEBxEXg7JwaakBXjATYw/D1YZh4QUSCX/Mnd/wnqSRPPSi1U39iDhDoKGoBUcraKdxDlrYqJxSI5nNvD+dWP2A==",
"dev": true,
"requires": {
"caniuse-lite": "^1.0.30000792",
"electron-to-chromium": "^1.3.30"
"caniuse-lite": "^1.0.30000929",
"electron-to-chromium": "^1.3.103",
"node-releases": "^1.1.3"
}
},
"bser": {
@ -7878,18 +7959,6 @@
}
}
},
"cssstats-cli": {
"version": "1.0.0-beta.2",
"resolved": "https://registry.npmjs.org/cssstats-cli/-/cssstats-cli-1.0.0-beta.2.tgz",
"integrity": "sha1-w5OyoUFMbfJ62IShwhk+SlfkeXc=",
"dev": true,
"requires": {
"cssstats": "^3.0.0-beta.1",
"meow": "^3.7.0",
"read-file-stdin": "^0.2.1",
"write-file-stdout": "0.0.2"
}
},
"cssstyle": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-1.1.1.tgz",
@ -12689,6 +12758,19 @@
"dev": true,
"requires": {
"postcss": "^6.0.1"
},
"dependencies": {
"postcss": {
"version": "6.0.23",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
"integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
"dev": true,
"requires": {
"chalk": "^2.4.1",
"source-map": "^0.6.1",
"supports-color": "^5.4.0"
}
}
}
},
"ieee754": {
@ -15982,6 +16064,15 @@
"integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=",
"dev": true
},
"merge-source-map": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/merge-source-map/-/merge-source-map-1.1.0.tgz",
"integrity": "sha512-Qkcp7P2ygktpMPh2mCQZaf3jhN6D3Z/qVZHSdWvQ+2Ef5HgRAPBO57A77+ENm0CPx2+1Ce/MYKi3ymqdfuqibw==",
"dev": true,
"requires": {
"source-map": "^0.6.1"
}
},
"merge-stream": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-1.0.1.tgz",
@ -18299,14 +18390,25 @@
"dev": true
},
"postcss": {
"version": "6.0.23",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
"integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
"version": "7.0.14",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.14.tgz",
"integrity": "sha512-NsbD6XUUMZvBxtQAJuWDJeeC4QFsmWsfozWxCJPWf3M55K9iu2iMDaKqyoOdTJ1R4usBXuxlVFAIo8rZPQD4Bg==",
"dev": true,
"requires": {
"chalk": "^2.4.1",
"chalk": "^2.4.2",
"source-map": "^0.6.1",
"supports-color": "^5.4.0"
"supports-color": "^6.1.0"
},
"dependencies": {
"supports-color": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
"integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
"dev": true,
"requires": {
"has-flag": "^3.0.0"
}
}
}
},
"postcss-calc": {
@ -18961,6 +19063,19 @@
"dev": true,
"requires": {
"postcss": "^6.0.1"
},
"dependencies": {
"postcss": {
"version": "6.0.23",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
"integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
"dev": true,
"requires": {
"chalk": "^2.4.1",
"source-map": "^0.6.1",
"supports-color": "^5.4.0"
}
}
}
},
"postcss-html": {
@ -19068,6 +19183,19 @@
"postcss": "^6.0.0",
"postcss-load-config": "^2.0.0",
"schema-utils": "^0.4.0"
},
"dependencies": {
"postcss": {
"version": "6.0.23",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
"integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
"dev": true,
"requires": {
"chalk": "^2.4.1",
"source-map": "^0.6.1",
"supports-color": "^5.4.0"
}
}
}
},
"postcss-markdown": {
@ -19656,6 +19784,19 @@
"dev": true,
"requires": {
"postcss": "^6.0.1"
},
"dependencies": {
"postcss": {
"version": "6.0.23",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
"integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
"dev": true,
"requires": {
"chalk": "^2.4.1",
"source-map": "^0.6.1",
"supports-color": "^5.4.0"
}
}
}
},
"postcss-modules-local-by-default": {
@ -19666,6 +19807,19 @@
"requires": {
"css-selector-tokenizer": "^0.7.0",
"postcss": "^6.0.1"
},
"dependencies": {
"postcss": {
"version": "6.0.23",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
"integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
"dev": true,
"requires": {
"chalk": "^2.4.1",
"source-map": "^0.6.1",
"supports-color": "^5.4.0"
}
}
}
},
"postcss-modules-scope": {
@ -19676,6 +19830,19 @@
"requires": {
"css-selector-tokenizer": "^0.7.0",
"postcss": "^6.0.1"
},
"dependencies": {
"postcss": {
"version": "6.0.23",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
"integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
"dev": true,
"requires": {
"chalk": "^2.4.1",
"source-map": "^0.6.1",
"supports-color": "^5.4.0"
}
}
}
},
"postcss-modules-values": {
@ -19686,6 +19853,30 @@
"requires": {
"icss-replace-symbols": "^1.1.0",
"postcss": "^6.0.1"
},
"dependencies": {
"postcss": {
"version": "6.0.23",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
"integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
"dev": true,
"requires": {
"chalk": "^2.4.1",
"source-map": "^0.6.1",
"supports-color": "^5.4.0"
}
}
}
},
"postcss-node-sass": {
"version": "2.1.8",
"resolved": "https://registry.npmjs.org/postcss-node-sass/-/postcss-node-sass-2.1.8.tgz",
"integrity": "sha512-CvulKg+z+fTwzLPsTk+d+YtiU5KWpcJki8U4WU017CnT5D6T38y+peWhS8X4aTI68ln0lIzRX7/ltGPgU6ha8g==",
"dev": true,
"requires": {
"merge-source-map": "^1.1.0",
"node-sass": "^4.10.0",
"postcss": "^7.0.6"
}
},
"postcss-normalize-charset": {
@ -20231,28 +20422,6 @@
"dev": true,
"requires": {
"postcss": "^7.0.0"
},
"dependencies": {
"postcss": {
"version": "7.0.14",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.14.tgz",
"integrity": "sha512-NsbD6XUUMZvBxtQAJuWDJeeC4QFsmWsfozWxCJPWf3M55K9iu2iMDaKqyoOdTJ1R4usBXuxlVFAIo8rZPQD4Bg==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
"source-map": "^0.6.1",
"supports-color": "^6.1.0"
}
},
"supports-color": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
"integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
"dev": true,
"requires": {
"has-flag": "^3.0.0"
}
}
}
},
"postcss-selector-parser": {
@ -24696,6 +24865,34 @@
"integrity": "sha512-hMp0onDKIajHfIkdRk3P4CdCmErkYAxxDtP3Wx/4nZ3aGlau2VKh3mZpcuFkH27WQkL/3WBCPOktzA9ZOAnMQQ==",
"dev": true
},
"postcss": {
"version": "6.0.23",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
"integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
"dev": true,
"requires": {
"chalk": "^2.4.1",
"source-map": "^0.6.1",
"supports-color": "^5.4.0"
},
"dependencies": {
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true
},
"supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
"dev": true,
"requires": {
"has-flag": "^3.0.0"
}
}
}
},
"pump": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",

8
package.json
View File

@ -57,6 +57,7 @@
"@zeit/next-css": "^1.0.1",
"@zeit/next-sass": "^1.0.1",
"action-status": "0.1.1",
"autoprefixer": "9.4.7",
"ava": "^0.23.0",
"babel-core": "7.0.0-bridge.0",
"babel-preset-env": "^1.6.0",
@ -69,7 +70,7 @@
"code-blocks": "^1.1.0",
"colorette": "^1.0.7",
"css-loader": "^0.28.4",
"cssstats-cli": "^1.0.0-beta.2",
"cssstats": "3.2.0",
"details-dialog-element": "^1.4.0",
"eslint": "4.19.1",
"eslint-plugin-github": "1.0.0",
@ -97,11 +98,14 @@
"minimatch": "^3.0.4",
"next": "7.0.2",
"next-compose-plugins": "2.1.1",
"node-sass": "4.11.0",
"now": "^12.1.8",
"npm-run-all": "4.1.5",
"octicons": "^6.0.1",
"postcss": "7.0.14",
"postcss-load-config": "2.0.0",
"postcss-loader": "^2.0.6",
"postcss-node-sass": "2.1.8",
"postcss-scss": "2.0.0",
"primer-colors": "^1.0.1",
"prism-github": "^1.1.0",
"prop-types": "^15.6.2",

1
pages/css/.gitignore vendored
View File

@ -20,7 +20,6 @@ components/truncate.md
objects/grid.md
objects/layout.md
objects/table-object.md
packages.json
support/breakpoints.md
support/index.md
support/marketing-variables.md

18
pages/css/bundle.js Normal file
View File

@ -0,0 +1,18 @@
import {rootPage} from '../../docs/utils'
export default class {
static getInitialProps({query: {name}, res}) {
const url = getBundleURL(name)
if (url) {
res.writeHead(303, {Location: url})
} else {
res.writeHead(404)
}
res.end()
}
}
function getBundleURL(bundle) {
const node = rootPage.first(node => node.meta.bundle === bundle)
return node ? node.path : `/_error`
}

16
pages/css/index.md
View File

@ -8,7 +8,7 @@ import {
} from '../../docs/landing'
import {CONTENT_MAX_WIDTH} from '../../docs/constants'
import {name, version} from '../../package.json'
import packages from './packages.json'
import {bundles} from '../../dist/meta.json'
export const Hero = () => (
<Box bg="black">
@ -46,17 +46,17 @@ Primer is built upon systems that form the foundation of our styles such as spac
Each component or group of styles is packaged up and distributed via npm. Primer includes 23 packages that are grouped into useful meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.
<PrimerPackageBox data={packages.primer} count={Object.keys(packages).length - 1} mb={4} />
<PrimerPackageBox meta={bundles.primer} count={Object.keys(bundles).length - 1} mb={4} />
<Flex justifyContent="space-around" mb={6}>
<MetaPackageBox title="Core" data={packages['primer-core']} width={1/3}>
The core package contains modules that are shared between GitHub product and marketing websites.
<MetaPackageBox title="Core" meta={bundles.core} width={1/3}>
The core bundle contains styles that are shared between GitHub product and marketing websites.
</MetaPackageBox>
<MetaPackageBox title="Product" data={packages['primer-product']} width={1/3}>
The product package contains modules that are used on GitHub product websites.
<MetaPackageBox title="Product" meta={bundles.product} width={1/3}>
The product bundle contains styles that are used on GitHub product websites.
</MetaPackageBox>
<MetaPackageBox title="Marketing" data={packages['primer-marketing']} width={1/3}>
The marketing package contains modules that are used on GitHub marketing websites.
<MetaPackageBox title="Marketing" meta={bundles.marketing} width={1/3}>
The marketing bundle contains styles that are used on GitHub marketing websites.
</MetaPackageBox>
</Flex>

14
postcss.config.js Normal file
View File

@ -0,0 +1,14 @@
module.exports = {
parser: 'postcss-scss',
map: {
sourcesContent: true,
annotation: true
},
plugins: {
'postcss-node-sass': {
includePaths: ['node_modules'],
outputStyle: 'compressed'
},
'autoprefixer': {}
}
}

118
script/dist
View File

@ -1,29 +1,95 @@
#!/bin/bash
set -e
#!/usr/bin/env node
const globby = require('globby')
const cssstats = require('cssstats')
const postcss = require('postcss')
const loadConfig = require('postcss-load-config')
const {remove, mkdirp, readFile, writeFile} = require('fs-extra')
const {dirname, basename, join} = require('path')
const {promisify} = require('util')
outdir=dist
rm -rf $outdir
mkdir -p src/$outdir
const inDir = 'src'
const outDir = 'dist'
const statsDir = join(outDir, 'stats')
const encoding = 'utf8'
pushd src > /dev/null
indexes=$(find . -name index.scss | perl -pe 's#^\./##')
root=$(pwd)
// Bundle paths are normalized in getPathName() using dirname() and then
// replacing any slashes with hyphens, but some bundles need to be
// special-cased. Keys in this object are the path minus the "src/" prefix,
// and values are the bundle file base name. ("primer" produces
// "dist/primer.css", etc.)
const bundleNames = {
'index.scss': 'primer'
}
for index in $indexes; do
if [[ $index = "index.scss" ]]; then
dir=.
name="primer"
else
dir=$(dirname $index)
name=${dir//\//-}
fi
file="$outdir/$name.css"
pushd $dir > /dev/null
echo "[dist] $index -> $file"
npx node-sass --include-path=$root index.scss > "$root/$file"
npx cssstats "$root/$file" > "$root/$outdir/$name.stats.json"
echo "module.exports = {cssstats: require('./$name.stats.json')}" > "$root/$outdir/$name.js"
popd > /dev/null
done
popd > /dev/null
mv src/$outdir $outdir
remove(outDir)
.then(() => mkdirp(statsDir))
.then(() => globby([`${inDir}/**/index.scss`]))
.then(files => {
return loadConfig()
.then(({plugins, options}) => {
const processor = postcss(plugins)
const bundles = {}
const inPattern = new RegExp(`^${inDir}/`)
const tasks = files.map(from => {
const path = from.replace(inPattern, '')
const name = bundleNames[path] || getPathName(dirname(path))
const to = join(outDir, `${name}.css`)
const meta = {
name,
source: from,
sass: `@primer/css/${path}`,
css: to,
map: `${to}.map`,
js: join(outDir, `${name}.js`),
stats: join(statsDir, `${name}.json`),
legacy: `primer-${name}/index.scss`
}
return readFile(from, encoding)
.then(scss => {
meta.imports = getExternalImports(scss, path).map(getPathName)
return processor.process(scss, Object.assign({from, to}, options))
})
.then(result =>
Promise.all([
writeFile(to, result.css, encoding),
writeFile(meta.stats, JSON.stringify(cssstats(result.css)), encoding),
writeFile(meta.js, `module.exports = {cssstats: require('./stats/${name}.json')}`, encoding),
result.map ? writeFile(meta.map, result.map, encoding) : null
])
)
.then(() => (bundles[name] = meta))
})
return Promise.all(tasks).then(() => bundles)
})
.then(bundles => {
const meta = {bundles}
return writeFile(join(outDir, 'meta.json'), JSON.stringify(meta, null, 2), encoding)
})
})
.catch(error => {
console.error(error)
process.exitCode = 1
})
function getExternalImports(scss, relativeTo) {
const imports = []
const dir = dirname(relativeTo)
// XXX: this might *seem* fragile, but since we enforce double quotes via
// stylelint, I think it's kosher.
scss.replace(/@import "(.+)\/index\.scss";/g, (_, dep) => {
imports.push(join(dir, dep))
})
return imports
}
function getPathName(path) {
return path.replace(/\//g, '-')
}
function unique(d, i, list) {
return list.indexOf(d) === i
}

2
script/postpublish
View File

@ -13,3 +13,5 @@ if [[ -f $file ]]; then
cat $file | xargs rm -rfv
rm $file
fi
rm -rf build/

9
script/prepublish
View File

@ -8,6 +8,15 @@ npx action-status --context="$PUBLISH_STATUS_CONTEXT" \
# generate the build directory
npm run dist
# run the selector diff report
script/selector-diff-report
# TODO: remove this in v13
mkdir -p build
cp dist/primer.css build/build.css
cp dist/stats/primer.json build/build.json
echo "module.exports = {cssstats: require('./build.json')}" > build/index.js
files=$(git ls-files src | sed -e 's#^src/##' | sed -e 's#/.*$##' | sort -u)
echo $files > publish-files.log
cd src

26
script/selector-diff-report
View File

@ -1,26 +1,30 @@
#!/bin/bash
set -e
module=${1:-@primer/css}
version=${2:-latest}
function log() {
echo "$@" 1>&2
}
log "Pulling the latest ${module}/build/data.json ..."
curl -sL "https://unpkg.com/${module}@${version}/build/data.json" > before.json
# 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
log "Building ${module}/build/data.json locally..."
npm run build
cp build/data.json after.json
if [[ ! -f dist/stats/primer.json ]]; then
log "Building the stats locally..."
npm run dist
fi
cp dist/stats/primer.json after.json
function list_selectors() {
jq -r '.cssstats.selectors.values[]' $1 | sort
}
list_selectors before.json > before.txt
list_selectors after.json > after.txt
jq -r '.cssstats.selectors.values[]' before.json > before.txt
jq -r '.selectors.values[]' after.json > after.txt
echo "[selector report] diff:"
(diff before.txt after.txt | tee selector-diff.log) || log "(no diff!)"
echo "[selector report] end"
diff before.txt after.txt && log "(no diff!)"
rm {before,after}.{json,txt}

2
src/marketing/index.scss
View File

@ -16,4 +16,4 @@
// marketing specific css modules
@import "./type/index.scss";
@import "./buttons/index.scss";
@import "./marketing/utilities/index.scss";
@import "./utilities/index.scss";