1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00

Add styled-jsx-postcss example (#781)

* Add styled-jsx-postcss example

* Remove commented code
This commit is contained in:
Giuseppe 2017-01-16 04:59:22 +01:00 committed by Guillermo Rauch
parent 782807bb8b
commit 0d6ceec8db
5 changed files with 77 additions and 0 deletions

View file

@ -0,0 +1,8 @@
{
"presets": [
"next/babel"
],
"plugins": [
"styled-jsx-postcss/babel"
]
}

View file

@ -0,0 +1,26 @@
# Example app with styled-jsx-postcss
This example features how you use PostCSS with styled-jsx via [styled-jsx-postcss](https://github.com/giuseppeg/styled-jsx-postcss)
## How to use
Download the example (or clone the repo)[https://github.com/zeit/next.js.git]:
```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-styled-jsx-postcss
cd with-styled-jsx-postcss
```
Install it and run:
```bash
npm install
npm run dev
```
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
```bash
now
```

View file

@ -0,0 +1,16 @@
{
"name": "with-styled-jsx-postcss",
"version": "1.0.0",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "^2.0.0-beta",
"postcss-cssnext": "^2.9.0",
"styled-jsx-postcss": "^0.1.5"
},
"author": "Giuseppe Gurgone",
"license": "MIT"
}

View file

@ -0,0 +1,22 @@
export default () => (
<div className='hello'>
<p>Hello World</p>
<style jsx>{`
:global(:root) {
--bgColor: green;
--color: white;
}
.hello {
font: 15px Helvetica, Arial, sans-serif;
background: var(--bgColor);
color: var(--color);
padding: 100px;
text-align: center;
transition: 100ms ease-in background;
}
.hello:hover {
color: color(var(--color) blackness(+80%));
}
`}</style>
</div>
)

View file

@ -0,0 +1,5 @@
module.exports = () => ({
plugins: {
'postcss-cssnext': {}
}
})