Example to create next application with scoped/external css. #1340

guidiego · 2017-03-03T20:17:21Z

Create structure
Write a nice README.md

frol · 2017-03-04T12:42:24Z

examples/with-external-scoped-css/static/css/bundle.css

+.index__x___ASWLj {
+    font-size: 26px;
+    color: #238499;
+}


It seems the point of the example is that this bundle.css is auto-generated, isn't it? If so, this file should not be committed to the repo. Is this the case?

frol · 2017-03-04T12:47:08Z

examples/with-external-scoped-css/.editorconfig

+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 4


2-space indentation is used in Next.js code-base, so it would be nice to follow the style in the examples as well. Also, I would drop this config to keep the example clean.

nahue · 2017-03-10T21:32:00Z

Any progress on this PR? Im using https://github.com/zeit/next.js/tree/master/examples/with-scoped-stylesheets-and-postcss but it generates a new <style> tag in for each component that uses styling.. so eventually this will downgrade browser performance, or cause a crash 😞

guidiego · 2017-03-11T19:51:02Z

@nahue I have some problems with the example, I'm sick on this week, next on I will be back stronger again!

guidiego · 2017-03-13T19:52:34Z

Updated @nahue

guidiego · 2017-03-13T19:56:13Z

#627 #1245

timneutkens · 2017-03-14T22:47:08Z

examples/with-external-scoped-css/package.json

@@ -0,0 +1,17 @@
+{


Could you make this file line with https://github.com/zeit/next.js/blob/master/examples/basic-css/package.json

name same as example directory
license ISC
author empty

Also next, react and react-dom should be inside the dependencies. Not devDependencies.

"next": "^2.0.0-beta.17" can be changed to "next": "^2.0.0-beta"

timneutkens · 2017-03-14T22:51:43Z

examples/with-external-scoped-css/README.md

+
+
+#### 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 :/ 


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).

timneutkens · 2017-03-14T22:52:44Z

examples/with-external-scoped-css/README.md

+
+#### 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


I believe this line can be removed.

Removed not, maybe change "Problems" to something like "Attention Points" and link you PR/Advertisement @timneutkens

I mean

Sometimes cache come in and you need to reload with (shift + r) to clear and got the new css file version

People know how to refresh their browser when something doesn't work 😄

timneutkens · 2017-03-14T22:55:59Z

examples/with-external-scoped-css/README.md

+```
+
+#### 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

timneutkens · 2017-03-14T22:57:02Z

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.


in the end generate a compiled static .css file to use in production.

nahue · 2017-03-14T23:21:52Z

Progress! i love you guys you are geniuses!

guidiego · 2017-03-15T14:12:38Z

@timneutkens Review points done 👍

timneutkens

Thanks!

* Add better hash URL support. (vercel#1250) * Add better hash URL support. 1. Add scrolling to given id related to hash 2. Hash changes won't trigger getInitialProps * Add some comments. * Fix tests. * Add some test cases. * Fire the route cancel event only when needed. (vercel#1316) Earlier we do it for every route change. * Update Koa example for Koa 2 with async/await (vercel#1317) * Release 2.0.0-beta.36 * Update prefetch docs and mention it's production only. (vercel#1324) * fix(package): update friendly-errors-webpack-plugin to version 1.6.0 (vercel#1320) https://greenkeeper.io/ * chore(package): update standard to version 9.0.0 (vercel#1318) https://greenkeeper.io/ * Example with next-routes (vercel#1290) * Example with next-routes * optimize description * rename to with-next-routes * Throw Error when url.parse without true is parsed (vercel#1282) * Throw Error when url.parse without true is parsed This is a bit more descriptive when this mistake is made by the user. * Parse when needed * Parse querystring if it is not provided * With global stylesheet paths (vercel#1327) * with-global-stylesheet without relative paths and with node_modules * a parenthetical remark about material-components-web not being part of the example * Revert "Update friendly-errors-webpack-plugin to the latest version 🚀" (vercel#1328) * chore(package): update husky to version 0.13.2 (vercel#1330) https://greenkeeper.io/ * Fixed some problems with standard (vercel#1331) * Remove unused webpack import in flyfile.js (vercel#1332) * Fix linting errors in standard 9.0 (vercel#1333) * Fix linting errors in standard 9.0 * Update lockfile * fix(package): update unfetch to version 2.1.2 (vercel#1338) https://greenkeeper.io/ * Add a global Promise polyfill. (vercel#1344) * Add a global Promise polyfill. This is because Webpack2 depends on it. * Change the polyfill location. * Add default entries to main.js (vercel#1343) So, we don't need to add them to individual pages. This also fix the issue where, error pages doesn't ping the server. * chore(package): update cross-env to version 3.2.0 (vercel#1348) https://greenkeeper.io/ * Implement preact/inferno SSR (vercel#1346) * Use module-alias to alias preact server side * Use module-alias to alias inferno server side * Remove unneeded routes example * postcss-loader, postcss-easy-import, normalize.css and autoprefixer (vercel#1352) * Add missing ! in using-preact example (vercel#1355) (vercel#1356) * Revert "Update cross-env to the latest version 🚀" (vercel#1358) * Introducing Shallow Routing (vercel#1357) * Simplify route info handling. * Add basic resolve=false support. * Make sure to render getInitialProps always if it's the first render. * Change resolve=false to shallow routing. * Add test cases for shallow routing. * Update README for shallow routing docs. * Update docs. * Update docs. * Update docs. * Update readme.md * fix(package): update loader-utils to version 1.0.3 (vercel#1361) https://greenkeeper.io/ * fix(package): update babel-loader to version 6.4.0 (vercel#1359) https://greenkeeper.io/ * Disable uglify the pretty way (vercel#1351) * fix(package): update send to version 0.15.1 (vercel#1350) https://greenkeeper.io/ * Shallow routing changes (vercel#1363) * Fix a typo in a test suite. * Add old props.url API with warn for all tags. * Update README.md (vercel#1368) Fix graph.cool link in example * Add content based HASH to main.js and common.js (vercel#1336) * Use file hashes instead of BUILD_ID. Now JSON pages also not prefixed with a hash and doesn't support immutable caching. Instead it supports Etag bases caching. * Remove appUpdated Router Events hook. Becuase now we don't need it because there's no buildId validation. * Remove buildId generation. * Turn off hash checks in the dev mode. * Update tests. * Revert "Remove buildId generation." This reverts commit fdd36a5. * Bring back the buildId validation. * Handle buildId validation only in production. * Add BUILD_ID to path again. * Remove duplicate immutable header. * Fix tests. * update yarn * send credentials when fetching new route (vercel#1371) * [WIP] Improve test setup (vercel#1372) * Run tests serially. * Make test result verbose. * Don't wait until closing the browser. * Add some debug logs. * Add bailing support. * Get the browser with a timeout. * Add some comments. * Remove istanbul babel tranformation. Jest already do it and it's breaking our coveralls hit. * Add beforeHistoryChange router event. (vercel#1360) * Fix styled-components server-render example (vercel#1382) * Fix typo (vercel#1380) port 300 -> 3000 * fix(package): update write-file-webpack-plugin to version 4.0.0 (vercel#1383) https://greenkeeper.io/ * chore(package): update chromedriver to version 2.28.0 (vercel#1386) https://greenkeeper.io/ * Ping to on-demand-entries on every page change. (vercel#1384) This will prevent disposing the page after viewing it. Otherwise, it'll possible to dispose the page even we load the page on the client. * Add support for URL objects in Link and Router (vercel#1345) * Add support for URL objects in Link and Router * Fix typo in comment * Fix possible bug if the `href` prop is `null` * Document the usage of URL objects in Link and Router * Update readme.md * Parse URL to get the host & hostname in `isLocal` This should check if the current location and the checked URL have the same `host` or `hostname`. * Format `as` parameter from object to string if required * Format `href` and `as` inside the construct and componentWillReceiveProps * Use `JSON.stringify` to compare objects * Add usage example * chore(package): update chromedriver to version 2.28.0 (vercel#1386) https://greenkeeper.io/ * Refactor the codebase a bit. * Change the example name. * Add a few test cases. * Add the example to the README. * Updated with-apollo example. (vercel#1389) - Deleted several unused dependencies. - Updated dependencies. - Simplified Apollo related imports thanks to react-apollo exporting apollo-client and graphql-tag since [v0.13.2](https://github.com/apollographql/react-apollo/blob/master/Changelog.md#0132). - Tidied the readme and added a link to the Apollo docs. * Use a private Router event API for the ondemand-pinger. (vercel#1397) * Use mitt instead of EventEmitter. (vercel#1398) EventEmitter is quite bit and mitt is a pretty good/small replacement. * Use mitt instead of EventEmitter for the client HMR (vercel#1399) error handling. * fix(package): update babel-plugin-transform-es2015-modules-commonjs to version 6.24.0 (vercel#1400) https://greenkeeper.io/ * chore(package): update husky to version 0.13.3-0 (vercel#1395) https://greenkeeper.io/ * chore(package): update babel-preset-es2015 to version 6.24.0 (vercel#1401) https://greenkeeper.io/ * fix(package): update babel-preset-latest to version 6.24.0 (vercel#1402) https://greenkeeper.io/ * fix(package): update babel-generator to version 6.24.0 (vercel#1404) https://greenkeeper.io/ * fix(package): update babel-core to version 6.24.0 (vercel#1403) https://greenkeeper.io/ * Release 2.0.0-beta.37 * fix(package): update source-map-support to version 0.4.12 (vercel#1405) https://greenkeeper.io/ * Examples: Update Inferno & Preact (vercel#1407) * clean & bump inferno & preact pkgs * reenable UglifyJS for preact * chore(package): update fly-esnext to version 2.0.1 (vercel#1408) https://greenkeeper.io/ * fix(package): update loader-utils to version 1.0.4 (vercel#1411) https://greenkeeper.io/ * chore(package): update cross-env to version 3.2.4 (vercel#1417) https://greenkeeper.io/ * Remove patch-react.js (vercel#1420) This is a pretty complex code base and it cause issues for some React components. And React/fiber is coming with a proper solution. * Release 2.0.0-beta.38 * Upgrade styled-components. Fixes vercel#1416 (vercel#1422) * Update with-apollo example (vercel#1394) * Add minimal apollo example * Update apollo example README * Update apollo example demo link in README * Fix button styles * Fix show more button * Alias demo url * Include the data field on the Apollo store when hydrating * Revert * Include the data field on the Apollo store when hydrating per tpreusse's suggestion. * Add example to faq section in README * Sort by newest; Add active state to buttons * Make optimization suggestions * Use process.browser; inline props * Pass wrapped component's initial props into component heirarchy if they exist * Remove unnecessary sorting of array * Update Apollo example * Remove trailing comma * Update reduxRootKey * Remove unnecessary babelrc * Update with-apollo example - Remove use of deprecated 'reduxRootKey' option - Add loading indicator inside pagination button * Add/link replace (vercel#1419) * Using developit/unfetch as the Fetch API polyfill * Added the replace prop into the Link component * Added integration test for replace prop on Link component * Use jsonPageRes instead of xhr (vercel#1424) * Add reference to deployment wiki page (vercel#1423) * Fix deployment wiki link. * Fix typo in README (vercel#1427) `routing`not `routig` * Example to create next application with scoped/external css. (vercel#1340) * First structure for external css example * Remove: Builded files * Fix: Identation to 2 spaces * Fix example * Fix lint * Fix: Review points * An example with react-helmet (vercel#1264) * upload example * fix * fix * fix * fix .babelrc * fix standard style * fix indent * rename helmetHead to helmet * added gitignore * package.json * removed yarn.lock * Added more examples of using react-helmet * removed gitignore * [POC] Pretty url routing (vercel#1001) * [example] with pretty url routing * use single quotes even in React components * improve Link import * examples: add `svg-components` (vercel#982) * Remove .DS_Store file from helmet example (vercel#1435) * Document babel caching (vercel#1432) * Update readme to reflect latest changes * Remove deprecated methods

First structure for external css example

015180c

frol reviewed Mar 4, 2017

View reviewed changes

Guilherme Diego added 2 commits March 6, 2017 08:52

Remove: Builded files

3dcad3b

Fix: Identation to 2 spaces

eb1c844

Fix example

a763460

Fix lint

fbbfb3f

guidiego changed the title ~~[WIP] Example to create next application with scoped/external css.~~ Example to create next application with scoped/external css. Mar 13, 2017

timneutkens reviewed Mar 14, 2017

View reviewed changes

Fix: Review points

62d7045

timneutkens approved these changes Mar 15, 2017

View reviewed changes

timneutkens merged commit 123a635 into vercel:master Mar 15, 2017

lock bot locked as resolved and limited conversation to collaborators Jan 18, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Example to create next application with scoped/external css. #1340

Example to create next application with scoped/external css. #1340

guidiego commented Mar 3, 2017 •

edited

frol Mar 4, 2017

frol Mar 4, 2017

nahue commented Mar 10, 2017

guidiego commented Mar 11, 2017

guidiego commented Mar 13, 2017

guidiego commented Mar 13, 2017

timneutkens Mar 14, 2017 •

edited

timneutkens Mar 14, 2017

timneutkens Mar 14, 2017

guidiego Mar 15, 2017

timneutkens Mar 15, 2017

timneutkens Mar 14, 2017

timneutkens Mar 14, 2017 •

edited

nahue commented Mar 14, 2017

guidiego commented Mar 15, 2017

timneutkens left a comment



		#### 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 :/

		@@ -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.

Example to create next application with scoped/external css. #1340

Example to create next application with scoped/external css. #1340

Conversation

guidiego commented Mar 3, 2017 • edited

frol Mar 4, 2017

Choose a reason for hiding this comment

frol Mar 4, 2017

Choose a reason for hiding this comment

nahue commented Mar 10, 2017

guidiego commented Mar 11, 2017

guidiego commented Mar 13, 2017

guidiego commented Mar 13, 2017

timneutkens Mar 14, 2017 • edited

Choose a reason for hiding this comment

timneutkens Mar 14, 2017

Choose a reason for hiding this comment

timneutkens Mar 14, 2017

Choose a reason for hiding this comment

guidiego Mar 15, 2017

Choose a reason for hiding this comment

timneutkens Mar 15, 2017

Choose a reason for hiding this comment

timneutkens Mar 14, 2017

Choose a reason for hiding this comment

timneutkens Mar 14, 2017 • edited

Choose a reason for hiding this comment

nahue commented Mar 14, 2017

guidiego commented Mar 15, 2017

timneutkens left a comment

Choose a reason for hiding this comment

guidiego commented Mar 3, 2017 •

edited

timneutkens Mar 14, 2017 •

edited

timneutkens Mar 14, 2017 •

edited