Add with-global-stylesheet-simple (vercel#3157)

* Add with-global-stylesheet-simple * Lint fix
m-allanson · Oct 23, 2017 · 9320d9f · 9320d9f
1 parent ef157d9
commit 9320d9f
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 0 deletions.
diff --git a/examples/with-global-stylesheet-simple/.babelrc b/examples/with-global-stylesheet-simple/.babelrc
@@ -0,0  1,12 @@
 {
   "plugins": [
     [
       "inline-import",
       {
         "extensions": [".css"]
       }
     ]
   ],
   "presets": ["next/babel"],
   "ignore": []
 }
diff --git a/examples/with-global-stylesheet-simple/README.md b/examples/with-global-stylesheet-simple/README.md
@@ -0,0  1,48 @@
 [![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-global-stylesheet-simple)
 
 ## Global Stylesheet Example (Simple Version - CSS inside `node_modules`)
 
 This is an example of importing a CSS file located inside `node_modules` (ones you downloaded using `npm` or `yarn`).
 
 This would be useful for importing CSS libraries such as [`normalize.css`](https://necolas.github.io/normalize.css/).
 
 ### What if I want to import my own CSS, such as `styles/foo.css`?
 
 Check out the [with-global-stylesheet](../with-global-stylesheet) example.
 
 ### How It Works
 
 - Install `babel-plugin-inline-import` using `npm` or `yarn`
 - Then, add this to your `.babelrc`:
 
 ```js
 {
   "plugins": [
     [
       "inline-import",
       {
         "extensions": [".css"]
       }
     ]
   ],
   "presets": ["next/babel"],
   "ignore": []
 }
 ```
 
 - Install any CSS library using `npm` or `yarn`. In this example, I installed [`tachyons`](http://tachyons.io/).
 - Import the CSS file. Here, I'm importing a CSS file located at `node_modules/tachyons/css/tachyons.min.css`.
 
 ```js
 import tachyons from 'tachyons/css/tachyons.min.css'
 ```
 
 - Add it globally using `styled-jsx`:
 
 ```js
 <style jsx global>{tachyons}</style>
 ```
 
 ### Result ([`index.js`](pages/index.js)):
 
 ![](example.png)
diff --git a/examples/with-global-stylesheet-simple/example.png b/examples/with-global-stylesheet-simple/example.png
diff --git a/examples/with-global-stylesheet-simple/package.json b/examples/with-global-stylesheet-simple/package.json
@@ -0,0  1,14 @@
 {
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next"
   },
   "dependencies": {
     "babel-plugin-inline-import": "^2.0.6",
     "next": "^4.1.3",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "tachyons": "^4.8.1"
   }
 }
diff --git a/examples/with-global-stylesheet-simple/pages/index.js b/examples/with-global-stylesheet-simple/pages/index.js
@@ -0,0  1,29 @@
 import React from 'react'
 import tachyons from 'tachyons/css/tachyons.min.css'
 
 const SomeComponent = () =>
   <div className='sans-serif'>
     <article className='br2 ba dark-gray b--black-10 mv4 w-100 w-50-m w-25-l mw5 center'>
       <img src='http://placekitten.com/g/600/300' className='db w-100 br2 br--top' alt='Photo of a kitten looking menacing.' />
       <div className='pa2 ph3-ns pb3-ns'>
         <div className='dt w-100 mt1'>
           <div className='dtc'>
             <h1 className='f5 f4-ns mv0'>Cat</h1>
           </div>
           <div className='dtc tr'>
             <h2 className='f5 mv0'>$1,000</h2>
           </div>
         </div>
         <p className='f6 lh-copy measure mt2 mid-gray'>
           If it fits, i sits burrow under covers. Destroy couch leave hair everywhere,
           and touch water with paw then recoil in horror.
         </p>
       </div>
     </article>
   </div>
 
 export default () =>
   <div>
     <SomeComponent />
     <style jsx global>{tachyons}</style>
   </div>