├── .babelrc
├── .gitignore
├── .travis.yml
├── README.md
├── components
    ├── __tests__
    │   ├── __snapshots__
    │   │   └── toggle-button.js.snap
    │   └── toggle-button.js
    └── toggle-button.js
├── jest.config.js
├── next.config.js
├── package.json
└── pages
    ├── _document.js
    └── index.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["next/babel", "env"],
3 |   "plugins": ["glamorous-displayname"]
4 | }
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .next
3 | out
4 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | sudo: false
 2 | language: node_js
 3 | cache:
 4 |   directories:
 5 |     - node_modules
 6 | notifications:
 7 |   email: false
 8 | node_js:
 9 |   - '8'
10 | script:
11 |   - npm run validate
12 | branches:
13 |   only:
14 |     - master
15 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <h1 align="center">
 2 |   glamorous-with-next
 3 |   <br>
 4 |   <img src="https://github.com/paypal/glamorous/raw/master/other/logo/full.png" alt="glamorous" title="glamorous" width="200">
 5 |   <br>
 6 | </h1>
 7 | <p align="center" style="font-size: 1.2rem;">
 8 | How to use <a href="https://glamorous.rocks">glamorous</a> with
 9 | <a href="https://github.com/zeit/next.js">Next.js</a>
10 | </p>
11 | 
12 | <hr />
13 | 
14 | [![Build Status][build-badge]][build]
15 | 
16 | <a href="https://app.codesponsor.io/link/PKGFLnhDiFvsUA5P4kAXfiPs/kentcdodds/glamorous-with-next" rel="nofollow"><img src="https://app.codesponsor.io/embed/PKGFLnhDiFvsUA5P4kAXfiPs/kentcdodds/glamorous-with-next.svg" style="width: 888px; height: 68px;" alt="Sponsor" /></a>
17 | 
18 | ## The problem
19 | 
20 | I'm making a course about glamorous for Egghead.io and I wanted to demonstrate
21 | a few things about glamorous that I can't demonstrate in CodeSandbox (like
22 | testing, the babel plugin, and server rendering).
23 | 
24 | ## This solution
25 | 
26 | This is a bare-bones application that demonstrates those things.
27 | 
28 | ## LICENSE
29 | 
30 | MIT
31 | 
32 | [build-badge]: https://img.shields.io/travis/paypal/downshift.svg?style=flat-square
33 | [build]: https://travis-ci.org/paypal/downshift
34 | 


--------------------------------------------------------------------------------
/components/__tests__/__snapshots__/toggle-button.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`has different styles when on: true 1`] = `
 4 | Snapshot Diff:
 5 | - First value
 6 | + Second value
 7 | 
 8 | @@ -8,22 +8,22 @@
 9 |    line-height: 1.4;
10 |    text-align: center;
11 |    cursor: pointer;
12 |    border-radius: 4px;
13 |    color: #fff;
14 | -  background-color: #337ab7;
15 | -  border-color: #285f8f;
16 | +  background-color: #22527b;
17 | +  border-color: #173853;
18 |  }
19 |  
20 |  .glamor-0:hover,
21 |  [data-glamor-0]:hover,
22 |  .glamor-0:active,
23 |  [data-glamor-0]:active,
24 |  .glamor-0:focus,
25 |  [data-glamor-0]:focus {
26 | -  background-color: #285f8f;
27 | -  border-color: #1d4567;
28 | +  background-color: #1d4567;
29 | +  border-color: #122a3f;
30 |  }
31 |  
32 |  <button
33 |    className="glamor-0"
34 |  />
35 | `;
36 | 
37 | exports[`has off styles applied by default 1`] = `
38 | .glamor-0,
39 | [data-glamor-0] {
40 |   display: inline-block;
41 |   padding: 6px 12px;
42 |   margin-bottom: 0px;
43 |   font-size: 14px;
44 |   font-weight: 400;
45 |   line-height: 1.4;
46 |   text-align: center;
47 |   cursor: pointer;
48 |   border-radius: 4px;
49 |   color: #fff;
50 |   background-color: #337ab7;
51 |   border-color: #285f8f;
52 | }
53 | 
54 | .glamor-0:hover,
55 | [data-glamor-0]:hover,
56 | .glamor-0:active,
57 | [data-glamor-0]:active,
58 | .glamor-0:focus,
59 | [data-glamor-0]:focus {
60 |   background-color: #285f8f;
61 |   border-color: #1d4567;
62 | }
63 | 
64 | <button
65 |   class="glamor-0"
66 | />
67 | `;
68 | 


--------------------------------------------------------------------------------
/components/__tests__/toggle-button.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import renderer from 'react-test-renderer'
 3 | import {render} from 'enzyme'
 4 | import snapshotDiff from 'snapshot-diff'
 5 | import glamorSerializer from 'jest-glamor-react'
 6 | import prettyFormat from 'pretty-format'
 7 | import ToggleButton from '../toggle-button'
 8 | 
 9 | test('has off styles applied by default', () => {
10 |   const wrapper = render(<ToggleButton />)
11 |   expect(wrapper).toMatchSnapshot()
12 | })
13 | 
14 | test('has different styles when on: true', () => {
15 |   expect(
16 |     snapshotDiff(serialize(<ToggleButton />), serialize(<ToggleButton on />))
17 |   ).toMatchSnapshot()
18 | })
19 | 
20 | function serialize(ui) {
21 |   return glamorSerializer
22 |     .print(renderer.create(ui).toJSON(), val =>
23 |       prettyFormat(val, {
24 |         plugins: [prettyFormat.plugins.ReactTestComponent],
25 |       })
26 |     )
27 |     .trim()
28 | }
29 | 


--------------------------------------------------------------------------------
/components/toggle-button.js:
--------------------------------------------------------------------------------
 1 | import glamorous from 'glamorous'
 2 | import {darken} from 'polished'
 3 | 
 4 | // imagine this is in a "components" file
 5 | const primaryColor = '#337ab7'
 6 | const toggledOnStyles = {
 7 |   backgroundColor: darken(0.15, primaryColor),
 8 |   borderColor: darken(0.25, primaryColor),
 9 |   '&:hover,&:active,&:focus': {
10 |     backgroundColor: darken(0.2, primaryColor),
11 |     borderColor: darken(0.3, primaryColor),
12 |   },
13 | }
14 | const toggledOffStyles = {
15 |   backgroundColor: primaryColor,
16 |   borderColor: darken(0.1, primaryColor),
17 |   '&:hover,&:active,&:focus': {
18 |     backgroundColor: darken(0.1, primaryColor),
19 |     borderColor: darken(0.2, primaryColor),
20 |   },
21 | }
22 | const ToggleButton = glamorous.button(
23 |   {
24 |     display: 'inline-block',
25 |     padding: '6px 12px',
26 |     marginBottom: '0',
27 |     fontSize: '14px',
28 |     fontWeight: '400',
29 |     lineHeight: '1.4',
30 |     textAlign: 'center',
31 |     cursor: 'pointer',
32 |     borderRadius: '4px',
33 |     color: '#fff',
34 |   },
35 |   props => (props.on ? toggledOnStyles : toggledOffStyles)
36 | )
37 | 
38 | export default ToggleButton
39 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   testEnvironment: 'jsdom',
3 |   snapshotSerializers: [
4 |     'enzyme-to-json/serializer',
5 |     'jest-glamor-react',
6 |     'snapshot-diff/serializer',
7 |   ],
8 | }
9 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   exportPathMap: () => ({
3 |     '/': {page: '/'},
4 |   }),
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "glamorous-with-next",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "jest",
 8 |     "dev": "next",
 9 |     "build": "next build",
10 |     "validate": "jest && next build && next export",
11 |     "start": "next start"
12 |   },
13 |   "keywords": [],
14 |   "author": "Kent C. Dodds <kent@doddsfamily.us> (http://kentcdodds.com/)",
15 |   "license": "MIT",
16 |   "dependencies": {
17 |     "glamor": "^2.20.40",
18 |     "glamorous": "^4.5.0",
19 |     "next": "^3.2.1",
20 |     "react": "^15.6.1",
21 |     "react-dom": "^15.6.1",
22 |     "react-toggled": "^1.0.2"
23 |   },
24 |   "devDependencies": {
25 |     "babel-jest": "^20.0.3",
26 |     "babel-plugin-glamorous-displayname": "^2.1.0",
27 |     "babel-preset-env": "^1.6.0",
28 |     "enzyme": "^2.9.1",
29 |     "enzyme-to-json": "^1.5.1",
30 |     "jest": "^20.0.4",
31 |     "jest-glamor-react": "^3.1.0",
32 |     "polished": "^1.7.0",
33 |     "pretty-format": "^20.0.3",
34 |     "react-test-renderer": "^15.6.1",
35 |     "snapshot-diff": "^0.1.1"
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/pages/_document.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Document, {Head, Main, NextScript} from 'next/document'
 3 | import {renderStaticOptimized} from 'glamor/server'
 4 | 
 5 | export default class MyDocument extends Document {
 6 |   static async getInitialProps({renderPage}) {
 7 |     const page = renderPage()
 8 |     const styles = renderStaticOptimized(() => page.html)
 9 |     return {...page, ...styles}
10 |   }
11 | 
12 |   constructor(props) {
13 |     super(props)
14 |     const {__NEXT_DATA__, ids} = this.props
15 |     if (typeof window !== 'undefined') {
16 |       rehydrate(ids)
17 |     } else {
18 |       __NEXT_DATA__.ids = ids
19 |     }
20 |   }
21 | 
22 |   render() {
23 |     return (
24 |       <html>
25 |         <Head>
26 |           <title>With Glamorous</title>
27 |           <style dangerouslySetInnerHTML={{__html: this.props.css}} />
28 |         </Head>
29 |         <body>
30 |           <Main />
31 |           <NextScript />
32 |         </body>
33 |       </html>
34 |     )
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {rehydrate, css} from 'glamor'
 3 | import Toggle from 'react-toggled'
 4 | import {Div} from 'glamorous'
 5 | import ToggleButton from '../components/toggle-button'
 6 | 
 7 | const onClassName = css({color: 'blue', fontSize: 30})
 8 | const offClassName = css({color: 'red', fontSize: 20})
 9 | 
10 | function Index() {
11 |   return (
12 |     <Div display="flex" justifyContent="center" marginTop={40}>
13 |       <Toggle>
14 |         {({on, getTogglerProps}) => (
15 |           <Div display="flex" justifyContent="center" flexDirection="column">
16 |             <ToggleButton on={on} {...getTogglerProps()}>
17 |               Toggle me
18 |             </ToggleButton>
19 |             <div className={on ? onClassName : offClassName}>
20 |               {on ? 'Toggled On' : 'Toggled Off'}
21 |             </div>
22 |           </Div>
23 |         )}
24 |       </Toggle>
25 |     </Div>
26 |   )
27 | }
28 | 
29 | export default Index
30 | 


--------------------------------------------------------------------------------