├── .gitignore
├── README.md
├── index.js
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # POSTHTML MODULAR CSS
 2 | <img align="right" width="57" height="108" title="Dev Kit Main Logo" src="http://adm-designhouse.com/dev-kit-main-logo.png">  
 3 | 
 4 | PostHTML Modular CSS is a [PostHTML](https://github.com/posthtml/posthtml) plugin.  
 5 | The main idea is to help you make yor css modular.  
 6 | With PostHTML it allows to include your css right in html.
 7 | 
 8 | 
 9 | ## Usage
10 | ```js
11 | var gulp = require('gulp');
12 | var posthtml = require('gulp-posthtml');
13 | 
14 | gulp.task('posthtml', function () {
15 |     var plugins = [
16 | 		require('posthtml-modular-css')({
17 |             srcFolder: __dirname + '/webroot/',
18 |             outputCSS: './dest/style.css'
19 |         })
20 |     ];
21 |     var options = {};
22 | 
23 |     return gulp.src('./webroot/index.html')
24 |         .pipe(posthtml(plugins, options))
25 |         .pipe(gulp.dest('./dest'));
26 | });
27 | ```
28 | 
29 | ## Example
30 | ```html
31 | /*box.html*/
32 | <css src="css/box.css"></css>
33 | <div class="box">
34 | 	<h1>title</h1>
35 | 	<p>Some text</p>
36 | </div>
37 | 
38 | /*box.css*/
39 | .box{
40 | 	background: #ccc;
41 | 	margin: 0 auto;
42 | 	width: 50%;
43 | }
44 | .box h1{
45 | 	text-transform: uppercase;
46 | }
47 | ```
48 | ```html
49 | /*button.html*/
50 | <css src="css/button.css"></css>
51 | <a href="http://best-url-ever.com" class="button">button</a>
52 | 
53 | /*button.css*/
54 | .button{
55 | 	display: block;
56 | 	height: 40px;
57 | 	line-height: 40px;
58 | 	text-align: center;
59 | 	width: 200px;
60 | }
61 | ```
62 | all included css files will be compiled to external one:
63 | ```css
64 | .box{
65 | 	background: #ccc;
66 | 	margin: 0 auto;
67 | 	width: 50%;
68 | }
69 | .box h1{
70 | 	text-transform: uppercase;
71 | }
72 | .button{
73 | 	display: block;
74 | 	height: 40px;
75 | 	line-height: 40px;
76 | 	text-align: center;
77 | 	width: 200px;
78 | }
79 | ```
80 | [example with jade](https://github.com/admdh/posthtml-modular-css-example)
81 | 
82 | You just keep your css in one place with your html. From now on ther is no need to make separate file with css imports. If you delete  your html file no extra css will be generated.
83 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | var concat = require('concatenate-files');
 2 | 
 3 | module.exports = function (options) {
 4 |     options = options || {
 5 |         srcFolder: __dirname + 'webroot',
 6 |         outputCSS: 'style.css'
 7 |     };
 8 | 
 9 |     return function posthtmlModularCss(tree){
10 | 
11 |         var cssFile = [];
12 | 
13 |         tree.match({ tag: 'css' }, function(node) {
14 |             cssFile.push(options.srcFolder + node.attrs.src);
15 |             return '';
16 |         });
17 | 
18 |         concat(cssFile, options.outputCSS, function (error) {
19 |             console.log('CSS file created');
20 |         });
21 | 
22 |     };
23 | };
24 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "posthtml-modular-css",
 3 |   "version": "1.0.4",
 4 |   "description": "posthtml modular css plugin",
 5 |   "main": "index.js",
 6 |   "dependencies": {
 7 |     "concatenate-files": "^0.1.1"
 8 |   },
 9 |   "scripts": {
10 |   },
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "git+https://github.com/admdh/posthtml-modular-css"
14 |   },
15 |   "keywords": [
16 |     "html",
17 |     "postproccessor",
18 |     "modular css",
19 |     "modular",
20 |     "css"
21 |   ],
22 |   "author": "ADM DESIGNHOUSE <admdh.com@gmail.com>",
23 |   "license": "MIT",
24 |   "bugs": {
25 |     "url": "https://github.com/admdh/posthtml-modular-css/issues"
26 |   },
27 |   "homepage": "https://github.com/admdh/posthtml-modular-css"
28 | }
29 | 


--------------------------------------------------------------------------------