From 015180cf89b2640bc622ef7855d1b4f86113bda5 Mon Sep 17 00:00:00 2001 From: Guilherme Diego Date: Fri, 3 Mar 2017 17:15:15 -0300 Subject: [PATCH 1/6] First structure for external css example --- examples/with-external-scoped-css/.babelrc | 11 +++++++++ .../with-external-scoped-css/.editorconfig | 11 +++++++++ .../with-external-scoped-css/next.config.js | 12 ++++++++++ .../with-external-scoped-css/package.json | 23 ++++++++++++++++++ .../pages/_document.js | 24 +++++++++++++++++++ .../with-external-scoped-css/pages/index.js | 10 ++++++++ .../with-external-scoped-css/pages/index.scss | 4 ++++ .../static/css/bundle.css | 4 ++++ 8 files changed, 99 insertions(+) create mode 100644 examples/with-external-scoped-css/.babelrc create mode 100644 examples/with-external-scoped-css/.editorconfig create mode 100644 examples/with-external-scoped-css/next.config.js create mode 100644 examples/with-external-scoped-css/package.json create mode 100644 examples/with-external-scoped-css/pages/_document.js create mode 100644 examples/with-external-scoped-css/pages/index.js create mode 100644 examples/with-external-scoped-css/pages/index.scss create mode 100644 examples/with-external-scoped-css/static/css/bundle.css diff --git a/examples/with-external-scoped-css/.babelrc b/examples/with-external-scoped-css/.babelrc new file mode 100644 index 0000000000000..b6d7ab690445f --- /dev/null +++ b/examples/with-external-scoped-css/.babelrc @@ -0,0 +1,11 @@ +{ + "presets": ["airbnb", "es2015", "react"], + "plugins": [ + [ + "css-modules-transform", { + "extensions": [".css", ".scss"], + "extractCss": "./static/css/bundle.css" + } + ] + ] +} diff --git a/examples/with-external-scoped-css/.editorconfig b/examples/with-external-scoped-css/.editorconfig new file mode 100644 index 0000000000000..0b038ec3754c2 --- /dev/null +++ b/examples/with-external-scoped-css/.editorconfig @@ -0,0 +1,11 @@ +# editorconfig.org + +root = true + +[*] +charset = utf-8 +end_of_line = lf +indent_size = 4 +indent_style = space +insert_final_newline = true +trim_trailing_whitespace = true diff --git a/examples/with-external-scoped-css/next.config.js b/examples/with-external-scoped-css/next.config.js new file mode 100644 index 0000000000000..d57d501051372 --- /dev/null +++ b/examples/with-external-scoped-css/next.config.js @@ -0,0 +1,12 @@ +module.exports = { + webpack: (config, { dev }) => { + config.module.loaders = (config.module.loaders || []).concat({ + test: /\.js$/, + loaders: [ + 'babel-loader' + ] + }); + + return config + } +} diff --git a/examples/with-external-scoped-css/package.json b/examples/with-external-scoped-css/package.json new file mode 100644 index 0000000000000..c094c74e24da5 --- /dev/null +++ b/examples/with-external-scoped-css/package.json @@ -0,0 +1,23 @@ +{ + "name": "with-external-scoped-css", + "version": "1.0.0", + "main": "index.js", + "license": "MIT", + "author": "Guilherme Diego ", + "scripts": { + "start": "next" + }, + "devDependencies": { + "babel-loader": "^6.3.2", + "babel-plugin-css-modules-transform": "^1.2.1", + "babel-preset-airbnb": "^2.2.3", + "babel-preset-es2015": "^6.22.0", + "babel-preset-react": "^6.23.0", + "css-loader": "^0.26.2", + "isomorphic-style-loader": "^1.1.0", + "next": "^2.0.0-beta.17", + "postcss-loader": "^1.3.3", + "react": "^15.4.2", + "react-dom": "^15.4.2" + } +} diff --git a/examples/with-external-scoped-css/pages/_document.js b/examples/with-external-scoped-css/pages/_document.js new file mode 100644 index 0000000000000..b5051c6b1f461 --- /dev/null +++ b/examples/with-external-scoped-css/pages/_document.js @@ -0,0 +1,24 @@ +import React from 'react' +import Document, { Head, Main, NextScript } from 'next/document' + +export default class MyDocument extends Document { + static getInitialProps ({ renderPage }) { + const {html, head} = renderPage() + return { html, head } + } + + render () { + return ( + + + + + + {this.props.customValue} +
+ + + + ) + } +} diff --git a/examples/with-external-scoped-css/pages/index.js b/examples/with-external-scoped-css/pages/index.js new file mode 100644 index 0000000000000..3daab0534dd74 --- /dev/null +++ b/examples/with-external-scoped-css/pages/index.js @@ -0,0 +1,10 @@ +import React from 'react' +import ss from './index.scss' + +export const IndexPage = () => ( +
+ Hey +
+) + +export default IndexPage diff --git a/examples/with-external-scoped-css/pages/index.scss b/examples/with-external-scoped-css/pages/index.scss new file mode 100644 index 0000000000000..8c42e8c1b9d48 --- /dev/null +++ b/examples/with-external-scoped-css/pages/index.scss @@ -0,0 +1,4 @@ +.x { + font-size: 26px; + color: #238499; +} diff --git a/examples/with-external-scoped-css/static/css/bundle.css b/examples/with-external-scoped-css/static/css/bundle.css new file mode 100644 index 0000000000000..e94739dbe3ee9 --- /dev/null +++ b/examples/with-external-scoped-css/static/css/bundle.css @@ -0,0 +1,4 @@ +.index__x___ASWLj { + font-size: 26px; + color: #238499; +} From 3dcad3b294c1d83efd2c636a96e49aef7c3ec953 Mon Sep 17 00:00:00 2001 From: Guilherme Diego Date: Mon, 6 Mar 2017 08:52:39 -0300 Subject: [PATCH 2/6] Remove: Builded files --- examples/with-external-scoped-css/.gitignore | 1 + examples/with-external-scoped-css/static/css/bundle.css | 4 ---- 2 files changed, 1 insertion(+), 4 deletions(-) create mode 100644 examples/with-external-scoped-css/.gitignore delete mode 100644 examples/with-external-scoped-css/static/css/bundle.css diff --git a/examples/with-external-scoped-css/.gitignore b/examples/with-external-scoped-css/.gitignore new file mode 100644 index 0000000000000..bac9c79b753ff --- /dev/null +++ b/examples/with-external-scoped-css/.gitignore @@ -0,0 +1 @@ +static/css/bundle.css diff --git a/examples/with-external-scoped-css/static/css/bundle.css b/examples/with-external-scoped-css/static/css/bundle.css deleted file mode 100644 index e94739dbe3ee9..0000000000000 --- a/examples/with-external-scoped-css/static/css/bundle.css +++ /dev/null @@ -1,4 +0,0 @@ -.index__x___ASWLj { - font-size: 26px; - color: #238499; -} From eb1c844ccbb113ccdb17558cd58cdfdb6bd184ad Mon Sep 17 00:00:00 2001 From: Guilherme Diego Date: Mon, 6 Mar 2017 08:58:04 -0300 Subject: [PATCH 3/6] Fix: Identation to 2 spaces --- examples/with-external-scoped-css/.babelrc | 16 +++---- .../with-external-scoped-css/.editorconfig | 2 +- .../with-external-scoped-css/next.config.js | 6 +-- .../with-external-scoped-css/package.json | 42 +++++++++---------- .../pages/_document.js | 20 ++++----- .../with-external-scoped-css/pages/index.js | 6 +-- .../with-external-scoped-css/pages/index.scss | 4 +- 7 files changed, 47 insertions(+), 49 deletions(-) diff --git a/examples/with-external-scoped-css/.babelrc b/examples/with-external-scoped-css/.babelrc index b6d7ab690445f..5c51abcda688a 100644 --- a/examples/with-external-scoped-css/.babelrc +++ b/examples/with-external-scoped-css/.babelrc @@ -1,11 +1,11 @@ { - "presets": ["airbnb", "es2015", "react"], - "plugins": [ - [ - "css-modules-transform", { - "extensions": [".css", ".scss"], - "extractCss": "./static/css/bundle.css" - } - ] + "presets": ["airbnb", "es2015", "react"], + "plugins": [ + [ + "css-modules-transform", { + "extensions": [".css", ".scss"], + "extractCss": "./static/css/bundle.css" + } ] + ] } diff --git a/examples/with-external-scoped-css/.editorconfig b/examples/with-external-scoped-css/.editorconfig index 0b038ec3754c2..f29d257cc5900 100644 --- a/examples/with-external-scoped-css/.editorconfig +++ b/examples/with-external-scoped-css/.editorconfig @@ -5,7 +5,7 @@ root = true [*] charset = utf-8 end_of_line = lf -indent_size = 4 +indent_size = 2 indent_style = space insert_final_newline = true trim_trailing_whitespace = true diff --git a/examples/with-external-scoped-css/next.config.js b/examples/with-external-scoped-css/next.config.js index d57d501051372..b652308d1f976 100644 --- a/examples/with-external-scoped-css/next.config.js +++ b/examples/with-external-scoped-css/next.config.js @@ -1,10 +1,8 @@ module.exports = { webpack: (config, { dev }) => { config.module.loaders = (config.module.loaders || []).concat({ - test: /\.js$/, - loaders: [ - 'babel-loader' - ] + test: /\.js$/, + loaders: [ 'babel-loader' ] }); return config diff --git a/examples/with-external-scoped-css/package.json b/examples/with-external-scoped-css/package.json index c094c74e24da5..409035ccdccb8 100644 --- a/examples/with-external-scoped-css/package.json +++ b/examples/with-external-scoped-css/package.json @@ -1,23 +1,23 @@ { - "name": "with-external-scoped-css", - "version": "1.0.0", - "main": "index.js", - "license": "MIT", - "author": "Guilherme Diego ", - "scripts": { - "start": "next" - }, - "devDependencies": { - "babel-loader": "^6.3.2", - "babel-plugin-css-modules-transform": "^1.2.1", - "babel-preset-airbnb": "^2.2.3", - "babel-preset-es2015": "^6.22.0", - "babel-preset-react": "^6.23.0", - "css-loader": "^0.26.2", - "isomorphic-style-loader": "^1.1.0", - "next": "^2.0.0-beta.17", - "postcss-loader": "^1.3.3", - "react": "^15.4.2", - "react-dom": "^15.4.2" - } + "name": "with-external-scoped-css", + "version": "1.0.0", + "main": "index.js", + "license": "MIT", + "author": "Guilherme Diego ", + "scripts": { + "start": "next" + }, + "devDependencies": { + "babel-loader": "^6.3.2", + "babel-plugin-css-modules-transform": "^1.2.1", + "babel-preset-airbnb": "^2.2.3", + "babel-preset-es2015": "^6.22.0", + "babel-preset-react": "^6.23.0", + "css-loader": "^0.26.2", + "isomorphic-style-loader": "^1.1.0", + "next": "^2.0.0-beta.17", + "postcss-loader": "^1.3.3", + "react": "^15.4.2", + "react-dom": "^15.4.2" + } } diff --git a/examples/with-external-scoped-css/pages/_document.js b/examples/with-external-scoped-css/pages/_document.js index b5051c6b1f461..cb4a4c35091eb 100644 --- a/examples/with-external-scoped-css/pages/_document.js +++ b/examples/with-external-scoped-css/pages/_document.js @@ -9,16 +9,16 @@ export default class MyDocument extends Document { render () { return ( - - - - - - {this.props.customValue} -
- - - + + + + + + {this.props.customValue} +
+ + + ) } } diff --git a/examples/with-external-scoped-css/pages/index.js b/examples/with-external-scoped-css/pages/index.js index 3daab0534dd74..2264c2e7da9b7 100644 --- a/examples/with-external-scoped-css/pages/index.js +++ b/examples/with-external-scoped-css/pages/index.js @@ -2,9 +2,9 @@ import React from 'react' import ss from './index.scss' export const IndexPage = () => ( -
- Hey -
+
+ Hey +
) export default IndexPage diff --git a/examples/with-external-scoped-css/pages/index.scss b/examples/with-external-scoped-css/pages/index.scss index 8c42e8c1b9d48..064d1c5ad9830 100644 --- a/examples/with-external-scoped-css/pages/index.scss +++ b/examples/with-external-scoped-css/pages/index.scss @@ -1,4 +1,4 @@ .x { - font-size: 26px; - color: #238499; + font-size: 26px; + color: #238499; } From a763460815348e5842ea323eb202632150984c0f Mon Sep 17 00:00:00 2001 From: Guilherme Diego Date: Mon, 13 Mar 2017 16:50:15 -0300 Subject: [PATCH 4/6] Fix example --- examples/with-external-scoped-css/.babelrc | 7 ++++--- .../with-external-scoped-css/.editorconfig | 11 ----------- examples/with-external-scoped-css/.gitignore | 2 +- examples/with-external-scoped-css/README.md | 19 +++++++++++++++++++ .../with-external-scoped-css/next.config.js | 10 ---------- .../with-external-scoped-css/package.json | 10 ++-------- .../with-external-scoped-css/pages/index.js | 6 +++--- .../with-external-scoped-css/pages/index.sass | 4 ++++ .../with-external-scoped-css/pages/index.scss | 4 ---- .../with-external-scoped-css/pre-processor.js | 10 ++++++++++ 10 files changed, 43 insertions(+), 40 deletions(-) delete mode 100644 examples/with-external-scoped-css/.editorconfig create mode 100644 examples/with-external-scoped-css/README.md delete mode 100644 examples/with-external-scoped-css/next.config.js create mode 100644 examples/with-external-scoped-css/pages/index.sass delete mode 100644 examples/with-external-scoped-css/pages/index.scss create mode 100644 examples/with-external-scoped-css/pre-processor.js diff --git a/examples/with-external-scoped-css/.babelrc b/examples/with-external-scoped-css/.babelrc index 5c51abcda688a..e6031195a87c7 100644 --- a/examples/with-external-scoped-css/.babelrc +++ b/examples/with-external-scoped-css/.babelrc @@ -1,10 +1,11 @@ { - "presets": ["airbnb", "es2015", "react"], + "presets": ["next/babel"], "plugins": [ [ "css-modules-transform", { - "extensions": [".css", ".scss"], - "extractCss": "./static/css/bundle.css" + "extensions": [".css", ".sass"], + "extractCss": "./static/css/bundle.css", + "preprocessCss": "./pre-processor.js" } ] ] diff --git a/examples/with-external-scoped-css/.editorconfig b/examples/with-external-scoped-css/.editorconfig deleted file mode 100644 index f29d257cc5900..0000000000000 --- a/examples/with-external-scoped-css/.editorconfig +++ /dev/null @@ -1,11 +0,0 @@ -# editorconfig.org - -root = true - -[*] -charset = utf-8 -end_of_line = lf -indent_size = 2 -indent_style = space -insert_final_newline = true -trim_trailing_whitespace = true diff --git a/examples/with-external-scoped-css/.gitignore b/examples/with-external-scoped-css/.gitignore index bac9c79b753ff..ecdef5b83e63c 100644 --- a/examples/with-external-scoped-css/.gitignore +++ b/examples/with-external-scoped-css/.gitignore @@ -1 +1 @@ -static/css/bundle.css +static \ No newline at end of file diff --git a/examples/with-external-scoped-css/README.md b/examples/with-external-scoped-css/README.md new file mode 100644 index 0000000000000..6e60501cf5196 --- /dev/null +++ b/examples/with-external-scoped-css/README.md @@ -0,0 +1,19 @@ +## 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 `.css` on static to use in the final application. + +#### Running That + +``` +yarn install +yarn start +``` + +#### Supported Langs +The plugin supports `less`, `scss` and `css` extension. Is possible using another pre-processor creating a function to compile the code. In the example I use `sass` as my css' pre processor + +To edit the types you need to go to `.babelrc` + + +#### Problems +- Next haven't support to auto-reload in files that not be JS and JSX, this is frutasting, so you need to edit something on JS to compile your css :/ +- Sometimes cache come in and you need to reload with (shift + r) to clear and got the new css file version \ No newline at end of file diff --git a/examples/with-external-scoped-css/next.config.js b/examples/with-external-scoped-css/next.config.js deleted file mode 100644 index b652308d1f976..0000000000000 --- a/examples/with-external-scoped-css/next.config.js +++ /dev/null @@ -1,10 +0,0 @@ -module.exports = { - webpack: (config, { dev }) => { - config.module.loaders = (config.module.loaders || []).concat({ - test: /\.js$/, - loaders: [ 'babel-loader' ] - }); - - return config - } -} diff --git a/examples/with-external-scoped-css/package.json b/examples/with-external-scoped-css/package.json index 409035ccdccb8..209e66d6c3a5e 100644 --- a/examples/with-external-scoped-css/package.json +++ b/examples/with-external-scoped-css/package.json @@ -1,5 +1,5 @@ { - "name": "with-external-scoped-css", + "name": "test-css", "version": "1.0.0", "main": "index.js", "license": "MIT", @@ -8,15 +8,9 @@ "start": "next" }, "devDependencies": { - "babel-loader": "^6.3.2", "babel-plugin-css-modules-transform": "^1.2.1", - "babel-preset-airbnb": "^2.2.3", - "babel-preset-es2015": "^6.22.0", - "babel-preset-react": "^6.23.0", - "css-loader": "^0.26.2", - "isomorphic-style-loader": "^1.1.0", "next": "^2.0.0-beta.17", - "postcss-loader": "^1.3.3", + "node-sass": "^4.5.0", "react": "^15.4.2", "react-dom": "^15.4.2" } diff --git a/examples/with-external-scoped-css/pages/index.js b/examples/with-external-scoped-css/pages/index.js index 2264c2e7da9b7..8eace51246512 100644 --- a/examples/with-external-scoped-css/pages/index.js +++ b/examples/with-external-scoped-css/pages/index.js @@ -1,9 +1,9 @@ import React from 'react' -import ss from './index.scss' +import ss from './index.sass' export const IndexPage = () => ( -
- Hey +
+ This is an example from scoped style in a outside CSS file {"<3"}
) diff --git a/examples/with-external-scoped-css/pages/index.sass b/examples/with-external-scoped-css/pages/index.sass new file mode 100644 index 0000000000000..8dc7419c1cdfa --- /dev/null +++ b/examples/with-external-scoped-css/pages/index.sass @@ -0,0 +1,4 @@ +.example + font-size: 36px + width: 300px + margin: 100px auto \ No newline at end of file diff --git a/examples/with-external-scoped-css/pages/index.scss b/examples/with-external-scoped-css/pages/index.scss deleted file mode 100644 index 064d1c5ad9830..0000000000000 --- a/examples/with-external-scoped-css/pages/index.scss +++ /dev/null @@ -1,4 +0,0 @@ -.x { - font-size: 26px; - color: #238499; -} diff --git a/examples/with-external-scoped-css/pre-processor.js b/examples/with-external-scoped-css/pre-processor.js new file mode 100644 index 0000000000000..63518e706af44 --- /dev/null +++ b/examples/with-external-scoped-css/pre-processor.js @@ -0,0 +1,10 @@ +const sass = require('node-sass') + +module.exports = (data, filename) => { + return sass.renderSync({ + data, + file: filename, + indentedSyntax: true, + outputStyle: 'compressed' + }).css.toString('utf8') +} \ No newline at end of file From fbbfb3f31786e8801b76edca209920fff800ba6b Mon Sep 17 00:00:00 2001 From: Guilherme Diego Date: Mon, 13 Mar 2017 17:40:23 -0300 Subject: [PATCH 5/6] Fix lint --- examples/with-external-scoped-css/pages/_document.js | 2 +- examples/with-external-scoped-css/pages/index.js | 2 +- examples/with-external-scoped-css/pre-processor.js | 12 ++++++------ 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/examples/with-external-scoped-css/pages/_document.js b/examples/with-external-scoped-css/pages/_document.js index cb4a4c35091eb..2fedf3990f790 100644 --- a/examples/with-external-scoped-css/pages/_document.js +++ b/examples/with-external-scoped-css/pages/_document.js @@ -11,7 +11,7 @@ export default class MyDocument extends Document { return ( - + {this.props.customValue} diff --git a/examples/with-external-scoped-css/pages/index.js b/examples/with-external-scoped-css/pages/index.js index 8eace51246512..3f6f14ca904b6 100644 --- a/examples/with-external-scoped-css/pages/index.js +++ b/examples/with-external-scoped-css/pages/index.js @@ -3,7 +3,7 @@ import ss from './index.sass' export const IndexPage = () => (
- This is an example from scoped style in a outside CSS file {"<3"} + This is an example from scoped style in a outside CSS file {'<3'}
) diff --git a/examples/with-external-scoped-css/pre-processor.js b/examples/with-external-scoped-css/pre-processor.js index 63518e706af44..183cfd737a0f8 100644 --- a/examples/with-external-scoped-css/pre-processor.js +++ b/examples/with-external-scoped-css/pre-processor.js @@ -1,10 +1,10 @@ const sass = require('node-sass') module.exports = (data, filename) => { - return sass.renderSync({ - data, - file: filename, - indentedSyntax: true, - outputStyle: 'compressed' + return sass.renderSync({ + data, + file: filename, + indentedSyntax: true, + outputStyle: 'compressed' }).css.toString('utf8') -} \ No newline at end of file +} From 62d704570bf80c499dee62505025202d5b25eeef Mon Sep 17 00:00:00 2001 From: Guilherme Diego Date: Wed, 15 Mar 2017 11:11:43 -0300 Subject: [PATCH 6/6] Fix: Review points --- examples/with-external-scoped-css/README.md | 9 ++++----- examples/with-external-scoped-css/package.json | 18 +++++++++++------- 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/examples/with-external-scoped-css/README.md b/examples/with-external-scoped-css/README.md index 6e60501cf5196..821d9ccc11189 100644 --- a/examples/with-external-scoped-css/README.md +++ b/examples/with-external-scoped-css/README.md @@ -1,5 +1,5 @@ ## 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 `.css` on static to use in the final application. +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 @@ -9,11 +9,10 @@ yarn start ``` #### Supported Langs -The plugin supports `less`, `scss` and `css` extension. Is possible using another pre-processor creating a function to compile the code. In the example I use `sass` as my css' pre processor +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 To edit the types you need to go to `.babelrc` -#### Problems -- Next haven't support to auto-reload in files that not be JS and JSX, this is frutasting, so you need to edit something on JS to compile your css :/ -- Sometimes cache come in and you need to reload with (shift + r) to clear and got the new css file version \ No newline at end of file +#### 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). \ No newline at end of file diff --git a/examples/with-external-scoped-css/package.json b/examples/with-external-scoped-css/package.json index 209e66d6c3a5e..1fa0efff2e9be 100644 --- a/examples/with-external-scoped-css/package.json +++ b/examples/with-external-scoped-css/package.json @@ -1,17 +1,21 @@ { - "name": "test-css", + "name": "with-external-scoped-css", "version": "1.0.0", "main": "index.js", - "license": "MIT", - "author": "Guilherme Diego ", + "license": "ISC", + "author": "", "scripts": { - "start": "next" + "start": "next", + "build": "next build", + "run": "next start" + }, + "dependencies":{ + "next": "^2.0.0-beta", + "react": "^15.4.2", + "react-dom": "^15.4.2" }, "devDependencies": { "babel-plugin-css-modules-transform": "^1.2.1", - "next": "^2.0.0-beta.17", "node-sass": "^4.5.0", - "react": "^15.4.2", - "react-dom": "^15.4.2" } }