├── .gitignore ├── .npmignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── bin └── post-css-split.js ├── index.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | npm-debug.log 3 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .gitignore 2 | node_modules/ 3 | test/ 4 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # 0.0.2 2 | 3 | * Bug fix. 4 | 5 | # 0.0.1 6 | 7 | * Initial release. 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright 2015 Wladston Viana 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ⚠️ PostCSS Split (Deprecated) 2 | 3 | 🚨 **This project is no longer maintained.** 4 | For a modern alternative that works with **PostCSS 8**, use: 5 | 👉 **[`postcss-critical-split`](https://github.com/mrnocreativity/postcss-critical-split)**. 6 | 7 | --- 8 | 9 | [PostCSS] plugin to split annotated CSS into two: a small set of important rules that will be embedded in the HTML, and a large set of rules that will be loaded asynchronously. 10 | 11 | [PostCSS]: https://github.com/postcss/postcss 12 | 13 | ```css 14 | /* Input example */ 15 | a { 16 | /*!CRITICAL*/ 17 | color:blue 18 | } 19 | b { 20 | font-weight:bold 21 | } 22 | @media only screen and (max-width: 500px){ 23 | a { 24 | /*!CRITICAL*/ 25 | color:black 26 | } 27 | b { 28 | /*!CRITICAL*/ 29 | color:blue 30 | } 31 | c { 32 | color: orange 33 | } 34 | } 35 | ``` 36 | 37 | ```css 38 | /* Output example */ 39 | a { 40 | color:blue 41 | } 42 | @media only screen and (max-width: 500px){ 43 | a { 44 | color:black 45 | } 46 | b { 47 | color:blue 48 | } 49 | } 50 | ``` 51 | 52 | ## Usage 53 | 54 | ```js 55 | postcss([ require('postcss-split') ]) 56 | ``` 57 | -------------------------------------------------------------------------------- /bin/post-css-split.js: -------------------------------------------------------------------------------- 1 | #! /usr/bin/env node 2 | var fs = require('fs'); 3 | var postcss = require('postcss'); 4 | var Split = require('postcss-split'); 5 | var path = require('path'); 6 | 7 | if (process.argv.length < 2) { 8 | console.log("Usage: " + process.argv[2] + " "); 9 | process.exit(-1); 10 | } 11 | 12 | var inputf = process.argv[2];; 13 | 14 | if (inputf.indexOf('.css', inputf.length - 4) === -1) { 15 | console.log('Please input a filename that ends with .css.'); 16 | console.log(inputf); 17 | process.exit(1); 18 | } 19 | 20 | var f_full = path.resolve(inputf); 21 | if (!fs.existsSync(f_full)) { 22 | console.log('The file ' + f_full + ' does not exist.'); 23 | process.exit(1); 24 | } 25 | 26 | var criticf = inputf.substring(0, inputf.length - 4) + '-critical.css'; 27 | var ncriticf = inputf.substring(0, inputf.length - 4) + '-noncritical.css'; 28 | 29 | var f_crit = path.resolve(criticf) 30 | var f_non_crit = path.resolve(ncriticf) 31 | 32 | var css = fs.readFileSync(f_full); 33 | var opts = {pattern: /!CRITICAL/i}; 34 | 35 | // Critical CSS. 36 | opts.positive_match = true; 37 | fs.writeFileSync(f_crit, postcss(Split(opts)).process(css).css); 38 | 39 | // Non-Critical CSS. 40 | opts.positive_match = false; 41 | fs.writeFileSync(f_non_crit, postcss(Split(opts)).process(css).css); 42 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | var postcss = require('postcss'); 3 | 4 | var Splitter = postcss.plugin('postcss-split', function (opts) { 5 | var opts = opts || {}; 6 | var pattern = opts.pattern || /FOLD/; 7 | if (typeof opts.positive_match !== 'undefined') { 8 | var positive_match = opts.positive_match; 9 | } 10 | else { 11 | var positive_match = true; 12 | } 13 | return function (css, result) { 14 | var newcss = postcss.root(); 15 | css.eachRule(function (rule) { 16 | if (rule.toString().match(pattern)){ 17 | if (rule.parent.name != 'media'){ 18 | rule.removeSelf(); 19 | newcss.append(rule); 20 | } else { 21 | var mediaq_in_newcss = false; 22 | newcss.eachAtRule('media', function (mediaq) { 23 | if (mediaq.params == rule.parent.params) { 24 | rule.removeSelf(); 25 | mediaq.append(rule); 26 | mediaq_in_newcss = true; 27 | return false; 28 | } 29 | }); 30 | if (!mediaq_in_newcss) { 31 | var parent = rule.parent.clone(); 32 | parent.eachRule(function(r) { r.removeSelf(); }); 33 | rule.removeSelf(); 34 | parent.append(rule); 35 | newcss.append(parent); 36 | } 37 | } 38 | } 39 | }); 40 | if(positive_match) 41 | result.root = newcss; 42 | }; 43 | }); 44 | module.exports = Splitter; 45 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "postcss-split", 3 | "version": "0.0.3", 4 | "description": "PostCSS plugin to split annotated CSS into a small set of important rules that will be embedded in the HTML, and a large set of rules that will be loaded asynchronously.", 5 | "keywords": [ 6 | "postcss", 7 | "css", 8 | "postcss-plugin", 9 | "critical css", 10 | "css split", 11 | "prioritize critical css" 12 | ], 13 | "author": "Wladston Viana Ferreira Filho ", 14 | "license": "MIT", 15 | "preferGlobal": true, 16 | "bin": {"post-css-split": "bin/post-css-split.js"}, 17 | "repository": { 18 | "type": "git", 19 | "url": "git+https://github.com/wladston/postcss-split.git" 20 | }, 21 | "bugs": { 22 | "url": "https://github.com/wladston/postcss-split/issues" 23 | }, 24 | "homepage": "https://github.com/wladston/postcss-split", 25 | "dependencies": { 26 | "postcss": "^4.1.13" 27 | }, 28 | "devDependencies": {}, 29 | "scripts": {}, 30 | "main": "index.js" 31 | } 32 | --------------------------------------------------------------------------------