Skip to content

Commit d7ecab7

Browse files
author
Emily
authored
Merge pull request #283 from primer/q3-wildflower
Q3 Wildflower Tracking PR
2 parents d944e3c + 027b377 commit d7ecab7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

91 files changed

+4055
-6067
lines changed

‎.babelrc

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"next/babel"
44
],
55
"plugins": [
6+
"macros",
67
"add-react-displayname"
78
],
89
"env": {

‎README.md

+13-58
Original file line numberDiff line numberDiff line change
@@ -33,73 +33,28 @@ import {
3333

3434
### Styling
3535

36-
This project uses [emotion] to generate static CSS for most component styles, but still relies on [Primer CSS] for some classname-based styles that haven't yet been ported over.
36+
This project uses [emotion] to generate static CSS for most component styles, but still relies on [Primer CSS] for some classname-based styles that haven't yet been ported over. Components that haven't yet been ported over rely on [a subset of Primer CSS](https://github.com/primer/components/blob/master/src/primer-components.scss) that's globally injected at import time.
3737

38-
To ensure proper styling of all Primer components, you'll need to include some static CSS that's distributed with the `@primer/components` npm package in `dist/primer-components.css`.
38+
#### Base styles
3939

40-
#### JavaScript bundlers
41-
If you're using a JavaScript bundler that supports CSS imports, you can import it in your bundles directly:
42-
43-
```js
44-
import '@primer/components/dist/css/build.css'
45-
```
46-
47-
If you're using webpack, you will need to install [style-loader](https://github.com/webpack-contrib/style-loader) and configure webpack to use it for imports ending in '.css', e.g.
48-
49-
```js
50-
{
51-
module: {
52-
rules: [
53-
{
54-
test: /\.css$/,
55-
use: 'style-loader'
56-
}
57-
]
58-
}
59-
}
60-
```
61-
62-
#### Server inlining
63-
If you run a Node server, you can read the file from disk at startup:
40+
You can establish base Primer styles for your app by wrapping all of your Primer components in `<BaseStyles>`:
6441

6542
```jsx
66-
const {readFileSync} = require('fs')
67-
const cssPath = require.resolve('@primer/components/dist/primer-components.css')
68-
const css = readFileSync(cssPath, 'utf8')
69-
```
70-
71-
Then, inline it into the `<head>` of your HTML template(s) or render it server-side in React like so:
72-
73-
```jsx
74-
// assuming the `css` variable is set as above
43+
import {BaseStyles, Box, Heading} from '@primer/components'
44+
7545
export default () => (
76-
<html>
77-
<head>
78-
<style>{css}</style>
79-
</head>
80-
<body>
81-
...
82-
</body>
83-
</html>
46+
<BaseStyles>
47+
<Box m={4}>
48+
<Heading mb={2}>Hello, world!</Heading>
49+
<p>This will get Primer text styles.</p>
50+
</Box>
51+
</BaseStyles>
8452
)
8553
```
8654

87-
#### Static apps
88-
For fully static or statically generated (Jekyll, Hugo, etc.) apps, you may need to manually copy `node_modules/@primer/components/dist/css/build.css` (after `npm install --save @primer/components`) to one of your site's public directories, i.e. `/assets`:
89-
90-
```sh
91-
cp node_modules/@primer/components/dist/css/build.css assets/primer-components.css
92-
```
93-
94-
Then link to it in the `<head>` of your HTML document(s):
95-
96-
```html
97-
<link rel="stylesheet" href="/assets/primer-components.css">
98-
```
99-
100-
### Static CSS rendering
55+
This will set the `color`, `font-family`, and `line-height` CSS properties to the same ones used in [primer-base](https://github.com/primer/primer/blob/master/modules/primer-base/lib/base.scss#L15).
10156

102-
Some Primer components rendered client-side may produce a [flash of unstyled content]. You can avoid most jarring flashes by ensuring that `primer-components.css` is either inlined or linked in the `<head>` of your document with one of the techniques described above.
57+
#### Static CSS rendering
10358

10459
If you're rendering React components both server-side _and_ client-side, we suggest following [Emotion's server-side rendering instructions](https://emotion.sh/docs/ssr) to avoid the flash of unstyled content for server-rendered components. This repo's [documentation template component](https://github.com/primer/components/blob/master/pages/_document.js) demonstrates how to do this in [Next.js].
10560

‎css.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = require('./dist/css')

‎next.config.js

+34-13
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,53 @@
1+
const {join} = require('path')
12
const withPlugins = require('next-compose-plugins')
23
const mdx = require('@zeit/next-mdx')
34

45
module.exports = withPlugins([
56
mdx({extension: /\.mdx?$/})
67
], {
7-
/*
8-
* Note: Prefixing assets with the fully qualified deployment URL
9-
* makes them available even when the site is served from a path alias, as in
10-
* <https://primer.style/components>
11-
*/
12-
assetPrefix: process.env.NOW_URL,
138
pageExtensions: ['js', 'jsx', 'md', 'mdx'],
14-
sassLoaderOptions: {
15-
includePaths: ['node_modules']
9+
10+
publicRuntimeConfig: {
11+
assetPrefix: process.env.NOW_URL
1612
},
1713

18-
webpack(config) {
19-
// load primer-components.css as raw string
14+
webpack(config, {dev}) {
2015
config.module.rules.push({
21-
test: /\.css$/,
22-
use: 'raw-loader'
16+
test: /\.svg$/,
17+
use: {loader: '@svgr/webpack'}
2318
})
2419

20+
if (dev) {
21+
/*
22+
* In development mode, we want to alias the project-root
23+
* imports to the source files so that this:
24+
*
25+
* ```js
26+
* import {Box} from '..'
27+
* ```
28+
*
29+
* becomes:
30+
*
31+
* ```js
32+
* import {Box} from '../src'
33+
* ```
34+
*
35+
* Note: the '$' at the end of these tells webpack to match
36+
* the end of the import path. Without it, the first alias
37+
* applies to *every* import because the resolved path for
38+
* every one begins with `__dirname`.
39+
*/
40+
config.resolve.alias = {
41+
[__dirname + '$']: join(__dirname, 'src/index.js'),
42+
[join(__dirname, 'css$')]: join(__dirname, 'src/css.js')
43+
}
44+
}
45+
2546
const {optimization} = config
2647
if (optimization && Array.isArray(optimization.minimizer)) {
2748
const terserPlugin = optimization.minimizer[0]
2849
/* eslint-disable camelcase, no-console */
29-
console.warn('*** disabling function mangling in Terser plugin ***')
50+
console.warn('*** disabling mangling in Terser plugin ***')
3051
terserPlugin.options.terserOptions = {
3152
keep_fnames: true
3253
}

‎now.json

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
11
{
22
"name": "primer-components",
3+
"engines": {
4+
"node": ">=10"
5+
},
36
"files": [
7+
".babelrc",
8+
"css.js",
49
"next.config.js",
10+
"package-lock.json",
511
"pages",
12+
"rollup.config.js",
613
"src",
7-
"static/assets"
14+
"static"
815
]
916
}

0 commit comments

Comments
 (0)