From 85502c1f80263f9f8fb0c96b744b216eefa5bfe7 Mon Sep 17 00:00:00 2001 From: Alexey Litvinov Date: Wed, 24 Feb 2016 23:02:48 +0300 Subject: [PATCH 1/4] readme update --- demo/readme.md | 74 ++++++++++++-------------------------------------- 1 file changed, 17 insertions(+), 57 deletions(-) diff --git a/demo/readme.md b/demo/readme.md index 0cc5c66..42eb316 100644 --- a/demo/readme.md +++ b/demo/readme.md @@ -1,91 +1,51 @@ Universal Usage demo ==================== -Small demo of configuring [css-modules-require-hook](https://github.com/css-modules/css-modules-require-hook/) with [webpack](https://webpack.github.io/) and [react](https://facebook.github.io/react/). See the detailed description below. +It's a small demo to show how to set up [css-modules-require-hook](https://github.com/css-modules/css-modules-require-hook/) with [webpack](https://webpack.github.io/) and [react](https://facebook.github.io/react/). If you are familiar with the technologies you can jump to the quick start. Otherwise, you can find detailed description below. + ## Quick start +Make sure that you have [Node.js](https://nodejs.org/en/) and [npm](https://www.npmjs.com/) and run these commands: + ```bash $ npm install $ npm run compile $ npm run start ``` -## Description +Open http://localhost:3000/. + + +## Detailed description -Hi, I tried to make a simple demo. So if you are familiar with technologies [webpack](https://webpack.github.io/), [react](https://facebook.github.io/react/) and [express](http://expressjs.com/), then it will be easy for to understand that example. Anyways, I'll point on the main parts to save your time. +In short [CSS Modules](https://github.com/css-modules/css-modules) provide modularity with generated class names. Therefore, generated names should be present in CSS styles and in templates which form resulting html. Since, we talk about server rendering in the current example I'll show you how to set require hook to generate the same names in runtime as the CSS styles. + +### Frontend + +The modern frontend is so tough that you have to use particular bundler systems in order to generate a simple CSS file. My favourite one is [webpack](https://webpack.github.io/), so I'll show you how to set it with the require hook. ### Backend -In this demo I use [express](http://expressjs.com/) to handle user requests and [react](https://facebook.github.io/react/) components to serve html for them: +I use [express](http://expressjs.com/) to handle user requests and [react](https://facebook.github.io/react/) components to serve html for them. In order to make it independent and good looking I decided to use a custom [template engine](http://expressjs.com/en/advanced/developing-template-engines.html) to isolate all the rendering stuff and to have neat calls in the middlewares. So, here is my structure: - **app/** - `view-engine.js` - `worker.js` -- **components/** - - `Page.js` #### `worker.js` -Is an entry point for the server application. It contains main middlewares and helpers for the server rendering. Here I attach require hook: - -```javascript -require('css-modules-require-hook/preset'); -``` - -It helps to process calls to the css files in runtime and build necessary class names: - -```javascript -import styles from './Page.css'; // Page.js -``` - -Also, I made a small [template engine](http://expressjs.com/en/advanced/developing-template-engines.html) for express to make render step isolated from the main program. It's connected here: +Is an entry point for the app. It sets react [template engine](http://expressjs.com/en/advanced/developing-template-engines.html): ```javascript -// setting rendering engine +// sets react rendering engine app.engine('js', viewEngine); app.set('views', path.join(__dirname, '../components')); app.set('view engine', 'js'); ``` -and implemented in the `view-engine.js` file. So, I can use neat calls to build html: +and declares basic middlewares: ```javascript app.get('/', (req, res) => res.render('Page')); ``` - -#### `view-engine.js` - -Is a [template engine](http://expressjs.com/en/advanced/developing-template-engines.html) implementation. Requires necessary react components and builds html. - -#### `Page.js` - -Main react component, which describes the page and contains all the necessary dependencies. - -```javascript -// get the necessary class names -import styles from './Page.css'; - -// pass particular generated class name to the component -
- // ... -
-``` - -### Frontend - -The modern frontend is so tough that you have to use particular bundler systems in order to build necessary styles and scripts. My favourite one is [webpack](https://webpack.github.io/), so I'll describe how to configure it. Usually to build necessary styles using [CSS Modules](https://github.com/css-modules/) you have to use a [css-loader](https://github.com/webpack/css-loader): - -```javascript -module: { - loaders: [ - { - test: /\.css$/i, - loader: ExtractTextPlugin.extract('style', - `css?modules&localIdentName=[name]_[local]__[hash:base64:5]`), - }, - ], -}, -``` - -In this example I provide a custom template for the generic class names `[name]_[local]__[hash:base64:5]` which is also used by require hook (see the `cmrh.conf.js` file). From ffaed56834120636a0880130f4ed349cff0ad9e6 Mon Sep 17 00:00:00 2001 From: Alexey Litvinov Date: Wed, 24 Feb 2016 23:24:30 +0300 Subject: [PATCH 2/4] template engine description --- demo/readme.md | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/demo/readme.md b/demo/readme.md index 42eb316..34c7d38 100644 --- a/demo/readme.md +++ b/demo/readme.md @@ -21,15 +21,17 @@ Open http://localhost:3000/ In short [CSS Modules](https://github.com/css-modules/css-modules) provide modularity with generated class names. Therefore, generated names should be present in CSS styles and in templates which form resulting html. Since, we talk about server rendering in the current example I'll show you how to set require hook to generate the same names in runtime as the CSS styles. + ### Frontend The modern frontend is so tough that you have to use particular bundler systems in order to generate a simple CSS file. My favourite one is [webpack](https://webpack.github.io/), so I'll show you how to set it with the require hook. + ### Backend I use [express](http://expressjs.com/) to handle user requests and [react](https://facebook.github.io/react/) components to serve html for them. In order to make it independent and good looking I decided to use a custom [template engine](http://expressjs.com/en/advanced/developing-template-engines.html) to isolate all the rendering stuff and to have neat calls in the middlewares. So, here is my structure: -- **app/** +- *app/* - `view-engine.js` - `worker.js` @@ -49,3 +51,13 @@ and declares basic middlewares: ```javascript app.get('/', (req, res) => res.render('Page')); ``` + +#### `view-engine.js` + +Describes the simple [template engine](http://expressjs.com/en/advanced/developing-template-engines.html) and attaches require hook: + +```javascript +// teaches node.js to load css files +// uses external config cmrh.conf.js +require('css-modules-require-hook/preset'); +``` From 67007d1891ab08c01f7bdea3afe9112a94ce5378 Mon Sep 17 00:00:00 2001 From: Alexey Litvinov Date: Thu, 25 Feb 2016 00:12:23 +0300 Subject: [PATCH 3/4] webpack description --- demo/readme.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/demo/readme.md b/demo/readme.md index 34c7d38..ccbf748 100644 --- a/demo/readme.md +++ b/demo/readme.md @@ -26,6 +26,25 @@ In short [CSS Modules](https://github.com/css-modules/css-modules) provide modul The modern frontend is so tough that you have to use particular bundler systems in order to generate a simple CSS file. My favourite one is [webpack](https://webpack.github.io/), so I'll show you how to set it with the require hook. +To understand [webpack](https://webpack.github.io/) configs you should be familiar with [loaders](https://webpack.github.io/docs/using-loaders.html). In order to use [CSS Modules](https://github.com/css-modules/css-modules) with [webpack](https://webpack.github.io/) you should set [css-loader](https://github.com/webpack/css-loader#css-modules). Also [extract-text-webpack-plugin](https://github.com/webpack/extract-text-webpack-plugin) provides you possibility to create pure CSS file. So eventually, your configuration should look similar to this: + +```javascript +module: { + loaders: [ + { + test: /\.css$/i, + loader: ExtractTextPlugin.extract('style', + 'css?modules&localIdentName=[name]_[local]__[hash:base64:5]'), + }, + ], +}, + +plugins: [ + new ExtractTextPlugin('styles.css', { + allChunks: true + }), +], +``` ### Backend From 77609c3a320961dfdbe40d08c357f0585f8abc24 Mon Sep 17 00:00:00 2001 From: Alexey Litvinov Date: Thu, 25 Feb 2016 00:22:09 +0300 Subject: [PATCH 4/4] patterns --- demo/readme.md | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/demo/readme.md b/demo/readme.md index ccbf748..72b603e 100644 --- a/demo/readme.md +++ b/demo/readme.md @@ -19,14 +19,14 @@ Open http://localhost:3000/ ## Detailed description -In short [CSS Modules](https://github.com/css-modules/css-modules) provide modularity with generated class names. Therefore, generated names should be present in CSS styles and in templates which form resulting html. Since, we talk about server rendering in the current example I'll show you how to set require hook to generate the same names in runtime as the CSS styles. +In short [CSS Modules](https://github.com/css-modules/css-modules) provide modularity with generated class names. Therefore, generated names should be present in CSS styles and in templates which form resulting html. Since, we talk about server rendering in the current example I'll show you how to set require hook to generate the same names in runtime as the CSS styles. ### Frontend The modern frontend is so tough that you have to use particular bundler systems in order to generate a simple CSS file. My favourite one is [webpack](https://webpack.github.io/), so I'll show you how to set it with the require hook. -To understand [webpack](https://webpack.github.io/) configs you should be familiar with [loaders](https://webpack.github.io/docs/using-loaders.html). In order to use [CSS Modules](https://github.com/css-modules/css-modules) with [webpack](https://webpack.github.io/) you should set [css-loader](https://github.com/webpack/css-loader#css-modules). Also [extract-text-webpack-plugin](https://github.com/webpack/extract-text-webpack-plugin) provides you possibility to create pure CSS file. So eventually, your configuration should look similar to this: +To understand [webpack](https://webpack.github.io/) configs you should be familiar with [loaders](https://webpack.github.io/docs/using-loaders.html). In order to use [CSS Modules](https://github.com/css-modules/css-modules) with [webpack](https://webpack.github.io/) you should set [css-loader](https://github.com/webpack/css-loader#css-modules). Also [extract-text-webpack-plugin](https://github.com/webpack/extract-text-webpack-plugin) provides you possibility to create pure CSS file. So eventually, your configuration should look similar to this: ```javascript module: { @@ -80,3 +80,22 @@ Describes the simple [template engine](http://expressjs.com/en/advanced/developi // uses external config cmrh.conf.js require('css-modules-require-hook/preset'); ``` + +**Note** that to generate the same names in runtime as the CSS styles you should provide the same pattern to [webpack](https://webpack.github.io/) and to the require hook. + +Use `localIdentName` for [webpack](https://webpack.github.io/): + +```javascript +loader: ExtractTextPlugin.extract('style', + 'css?modules&localIdentName=[name]_[local]__[hash:base64:5]'), +``` + +and `generateScopedName` for the require hook. For example, if you use presets then you can put it to the `cmrh.conf.js` file: + +```javascript +module.exports = { + // the custom template for the generic classes + generateScopedName: '[name]_[local]__[hash:base64:5]', +}; + +```