mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
Deprecate css examples
This commit is contained in:
parent
ab889369d5
commit
6db44f8058
|
@ -1,13 +0,0 @@
|
||||||
{
|
|
||||||
"presets": ["next/babel"],
|
|
||||||
"plugins": [
|
|
||||||
[
|
|
||||||
"css-modules-transform", {
|
|
||||||
"extensions": [".css", ".sass"],
|
|
||||||
"append": [ "postcss-cssnext" ],
|
|
||||||
"extractCss": "./static/css/bundle.css",
|
|
||||||
"preprocessCss": "./pre-processor.js"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
]
|
|
||||||
}
|
|
1
examples/with-external-scoped-css/.gitignore
vendored
1
examples/with-external-scoped-css/.gitignore
vendored
|
@ -1 +0,0 @@
|
||||||
static
|
|
|
@ -1,18 +1,4 @@
|
||||||
[![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-external-scoped-css)
|
|
||||||
## Scoped Style with external CSS file
|
|
||||||
The motivation for this example is using scoped css from external files and in the end generate a compiled static `.css` file to use in production..
|
|
||||||
|
|
||||||
#### Running That
|
# With external scoped css
|
||||||
|
|
||||||
```
|
This example has been deprecated in favor of [@zeit/next-css](https://github.com/zeit/next-plugins/tree/master/packages/next-css).
|
||||||
yarn install
|
|
||||||
yarn start
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Supported Langs
|
|
||||||
The plugin supports the `less`, `scss` and `css` file extensions. It is possible to add support for another pre-processor by creating a function to compile the code. In the example we use `sass` as our css pre-processor
|
|
||||||
|
|
||||||
You need to edit the `.babelrc` and sometimes the `pre-processor.js` to work with another languages, if you want to use SCSS the solution and explanation (fit with other css-pre-processors) are in this issue <3 [#3053](https://github.com/zeit/next.js/issues/3053)
|
|
||||||
|
|
||||||
#### Attention Points
|
|
||||||
- Next.js doesn't have support for watching `*.css files. So you will have to edit a Javascript file to re-compile the css. In the future this will be fixed by [#823](https://github.com/zeit/next.js/pull/823).
|
|
||||||
|
|
|
@ -1,3 +0,0 @@
|
||||||
@mixin opacity($opacity)
|
|
||||||
opacity: $opacity
|
|
||||||
filter: alpha(opacity=($opacity * 100))
|
|
|
@ -1,23 +0,0 @@
|
||||||
{
|
|
||||||
"name": "with-external-scoped-css",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"main": "index.js",
|
|
||||||
"license": "ISC",
|
|
||||||
"author": "",
|
|
||||||
"scripts": {
|
|
||||||
"start": "next",
|
|
||||||
"build": "next build",
|
|
||||||
"run": "next start"
|
|
||||||
},
|
|
||||||
"dependencies":{
|
|
||||||
"next": "latest",
|
|
||||||
"react": "^16.0.0",
|
|
||||||
"react-dom": "^16.0.0"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"babel-plugin-css-modules-transform": "^1.2.1",
|
|
||||||
"node-sass": "^4.5.0",
|
|
||||||
"postcss": "^5.2.16",
|
|
||||||
"postcss-cssnext": "^2.10.0"
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,24 +0,0 @@
|
||||||
import React from 'react'
|
|
||||||
import Document, { Head, Main, NextScript } from 'next/document'
|
|
||||||
|
|
||||||
export default class MyDocument extends Document {
|
|
||||||
static getInitialProps ({ renderPage }) {
|
|
||||||
const { html, head, errorHtml, chunks } = renderPage()
|
|
||||||
return { html, head, errorHtml, chunks }
|
|
||||||
}
|
|
||||||
|
|
||||||
render () {
|
|
||||||
return (
|
|
||||||
<html>
|
|
||||||
<Head>
|
|
||||||
<link rel='stylesheet' href='/static/css/bundle.css' />
|
|
||||||
</Head>
|
|
||||||
<body>
|
|
||||||
{this.props.customValue}
|
|
||||||
<Main />
|
|
||||||
<NextScript />
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,10 +0,0 @@
|
||||||
import React from 'react'
|
|
||||||
import ss from './index.sass'
|
|
||||||
|
|
||||||
export const IndexPage = () => (
|
|
||||||
<div className={ss.example}>
|
|
||||||
This is an example from scoped style in a outside CSS file {'<3'}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
export default IndexPage
|
|
|
@ -1,7 +0,0 @@
|
||||||
@import "../global"
|
|
||||||
|
|
||||||
.example
|
|
||||||
@include opacity(0.5)
|
|
||||||
font-size: 36px
|
|
||||||
width: 300px
|
|
||||||
display: flex
|
|
|
@ -1,10 +0,0 @@
|
||||||
const sass = require('node-sass')
|
|
||||||
|
|
||||||
module.exports = (data, filename) => {
|
|
||||||
return sass.renderSync({
|
|
||||||
data,
|
|
||||||
file: filename,
|
|
||||||
indentedSyntax: true,
|
|
||||||
outputStyle: 'compressed'
|
|
||||||
}).css.toString('utf8')
|
|
||||||
}
|
|
|
@ -1,45 +1,3 @@
|
||||||
[![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-scoped-stylesheets-and-postcss)
|
# Scoped stylesheets and PostCSS
|
||||||
# Scoped stylesheets with PostCSS example
|
|
||||||
|
|
||||||
This is an example of using scoped stylesheets and PostCSS, heavily influenced by @davibe's [`with-global-stylesheet`](https://github.com/zeit/next.js/tree/master/examples/with-global-stylesheet).
|
This example has been deprecated in favor of the [@zeit/next-css](https://github.com/zeit/next-plugins/tree/master/packages/next-css#postcss-plugins) module.
|
||||||
|
|
||||||
## How to use
|
|
||||||
|
|
||||||
### Using `create-next-app`
|
|
||||||
|
|
||||||
Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example:
|
|
||||||
|
|
||||||
```
|
|
||||||
npm i -g create-next-app
|
|
||||||
create-next-app --example with-scoped-stylesheets-and-postcss with-scoped-stylesheets-and-postcss-app
|
|
||||||
```
|
|
||||||
|
|
||||||
### Download manually
|
|
||||||
|
|
||||||
Download the example [or clone the repo](https://github.com/zeit/next.js):
|
|
||||||
|
|
||||||
```bash
|
|
||||||
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-scoped-stylesheets-and-postcss
|
|
||||||
cd with-scoped-stylesheets-and-postcss
|
|
||||||
```
|
|
||||||
|
|
||||||
To get this example running you must
|
|
||||||
|
|
||||||
npm install .
|
|
||||||
npm run dev
|
|
||||||
|
|
||||||
Visit [http://localhost:3000](http://localhost:3000) and try edit `pages/styles.css`. Your changes should be picked up instantly.
|
|
||||||
|
|
||||||
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
|
|
||||||
|
|
||||||
```bash
|
|
||||||
now
|
|
||||||
```
|
|
||||||
|
|
||||||
# Why
|
|
||||||
|
|
||||||
Scoped CSS is neat and keeps your JS clean. PostCSS is amazing for extended features, such as nesting. CSS Modules keep your class names “local”.
|
|
||||||
|
|
||||||
# Known issues
|
|
||||||
|
|
||||||
Composed CSS files are not watched by next.js, and thus, if you change one, nothing will happen. You'll need to edit a JS file or the CSS file you're composing for it to hot reload.
|
|
||||||
|
|
|
@ -1,44 +0,0 @@
|
||||||
const fs = require('fs')
|
|
||||||
const trash = require('trash')
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
webpack: (config) => {
|
|
||||||
config.plugins = config.plugins.filter(
|
|
||||||
(plugin) => (plugin.constructor.name !== 'UglifyJsPlugin')
|
|
||||||
)
|
|
||||||
|
|
||||||
config.module.rules.push(
|
|
||||||
{
|
|
||||||
test: /\.css$/,
|
|
||||||
use: [
|
|
||||||
{
|
|
||||||
loader: 'emit-file-loader',
|
|
||||||
options: {
|
|
||||||
name: 'dist/[path][name].[ext]'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
loader: 'skeleton-loader',
|
|
||||||
options: {
|
|
||||||
procedure: function (content) {
|
|
||||||
const fileName = `${this._module.userRequest}.json`
|
|
||||||
const classNames = fs.readFileSync(fileName, 'utf8')
|
|
||||||
|
|
||||||
trash(fileName)
|
|
||||||
|
|
||||||
return ['module.exports = {',
|
|
||||||
`classNames: ${classNames},`,
|
|
||||||
`stylesheet: \`${content}\``,
|
|
||||||
'}'
|
|
||||||
].join('')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
'postcss-loader'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
return config
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,25 +0,0 @@
|
||||||
{
|
|
||||||
"name": "with-scoped-stylesheets-and-postcss",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"scripts": {
|
|
||||||
"dev": "next dev",
|
|
||||||
"build": "next build",
|
|
||||||
"start": "next start"
|
|
||||||
},
|
|
||||||
"author": "Thomas Lindstrøm <t@hom.as>",
|
|
||||||
"license": "ISC",
|
|
||||||
"dependencies": {
|
|
||||||
"cssnano": "^3.10.0",
|
|
||||||
"next": "latest",
|
|
||||||
"postcss-cssnext": "^2.9.0",
|
|
||||||
"postcss-loader": "^1.3.0",
|
|
||||||
"postcss-modules": "^0.6.4",
|
|
||||||
"react": "^16.0.0",
|
|
||||||
"react-dom": "^16.0.0",
|
|
||||||
"skeleton-loader": "^1.1.2",
|
|
||||||
"trash": "^4.0.1"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"now": "^4.10.3"
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,3 +0,0 @@
|
||||||
.font-color {
|
|
||||||
color: blue;
|
|
||||||
}
|
|
|
@ -1,10 +0,0 @@
|
||||||
import React from 'react'
|
|
||||||
import Head from 'next/head'
|
|
||||||
import {stylesheet, classNames} from './styles.css'
|
|
||||||
|
|
||||||
export default () => (
|
|
||||||
<p className={classNames.paragraph}>
|
|
||||||
<Head><style dangerouslySetInnerHTML={{__html: stylesheet}} /></Head>
|
|
||||||
bazinga
|
|
||||||
</p>
|
|
||||||
)
|
|
|
@ -1,4 +0,0 @@
|
||||||
.paragraph {
|
|
||||||
composes: font-color from './global.css';
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
|
@ -1,9 +0,0 @@
|
||||||
module.exports = {
|
|
||||||
plugins: [
|
|
||||||
require('postcss-cssnext')(),
|
|
||||||
require('postcss-modules')({
|
|
||||||
generateScopedName: '[local]-[hash:base64:5]'
|
|
||||||
}),
|
|
||||||
require('cssnano')()
|
|
||||||
]
|
|
||||||
}
|
|
Loading…
Reference in a new issue