├── .gitignore ├── test ├── input.css └── output.css ├── CHANGELOG.md ├── package.json ├── test.js ├── LICENSE ├── index.js ├── flexbox-configs.js └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | 4 | -------------------------------------------------------------------------------- /test/input.css: -------------------------------------------------------------------------------- 1 | .horizontal-box-items-centered { 2 | box: vertical; 3 | } 4 | 5 | .box2 { 6 | box: horizontal wrap bottom badvalue; 7 | } 8 | 9 | .second { 10 | box-item: stretch; 11 | } 12 | -------------------------------------------------------------------------------- /test/output.css: -------------------------------------------------------------------------------- 1 | .horizontal-box-items-centered { 2 | display: flex; 3 | flex-direction: column; 4 | } 5 | 6 | .box2 { 7 | display: flex; 8 | flex-direction: row; 9 | flex-wrap: wrap; 10 | align-items: flex-end; 11 | } 12 | 13 | .second { 14 | align-self: stretch; 15 | } 16 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # 1.0.2 - 2015-12-29 2 | Removed all vendor prefixes. Developers should use autoprefixer after this plugin to ensure all the vendor prefixes are added. 3 | 4 | # 1.0.1 - 2015-12-28 5 | 6 | Removed '' used around values. 7 | Updated the name of the plugin to be postcss-flexbox 8 | Made code faster 9 | 10 | # 1.0.0 - 2015-12-27 11 | 12 | Initial release from [postcss-flexbox](https://github.com/archana-s/postcss-flexbox) 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "postcss-flexbox", 3 | "version": "1.0.3", 4 | "description": "Flexbox layouts made easy with PostCSS", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "ava && eslint *.js" 8 | }, 9 | "repository": "https://github.com/archana-s/postcss-flexbox.git", 10 | "keywords": [ 11 | "flexbox", 12 | "layouts", 13 | "postcss" 14 | ], 15 | "author": "Archana Sankaranarayanan", 16 | "license": "MIT", 17 | "dependencies": { 18 | "ava": "^0.20.0", 19 | "postcss": "^5.0.13" 20 | }, 21 | "devDependencies": { 22 | "eslint": "^1.10.3" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /test.js: -------------------------------------------------------------------------------- 1 | var postcss = require('postcss'); 2 | var test = require('ava'); 3 | var flexbox = require('./'); 4 | var fs = require('fs'); 5 | 6 | require.extensions['.css'] = function (module, filename) { 7 | module.exports = fs.readFileSync(filename, 'utf8'); 8 | }; 9 | 10 | var inputCSS = require("./test/input.css"); 11 | var outputCSS = require("./test/output.css"); 12 | 13 | function run(t, input, output, opts) { 14 | return postcss([ flexbox(opts) ]).process(input) 15 | .then(function(result) { 16 | t.deepEqual(result.css, output); 17 | t.deepEqual(result.warnings().length, 0); 18 | }); 19 | } 20 | 21 | test('converts box and box-item to flexbox props and values', function(t) { 22 | return run(t, inputCSS, outputCSS, { }); 23 | }) 24 | 25 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | Copyright (c) 2015 Archana Sankaranarayanan 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy of this 5 | software and associated documentation files (the "Software"), to deal in the Software without 6 | restriction, including without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the 8 | Software is furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all copies 11 | or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 14 | INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE 15 | AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, 16 | DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 17 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 18 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var postcss = require('postcss'); 2 | var layouts = require('./flexbox-configs.js'); 3 | 4 | var appendProps = function(name, rule) { 5 | // check if the property exists in the configs 6 | if (layouts.hasOwnProperty(name)) { 7 | var props = layouts[name]; 8 | for (var i=0; i= 0 ? 'horizontal':'vertical'; 20 | 21 | var allValues = decl.value.split(' '); 22 | 23 | // Loop through all values and apply the styles 24 | for (var i=0; i= 0) { 28 | appendProps(direction + '-' + currValue, rule); 29 | } else { // direction-agnostic rules 30 | appendProps(currValue, rule); 31 | } 32 | } 33 | rule.removeChild(decl); 34 | }; 35 | 36 | var appendBoxItemProps = function(decl, rule) { 37 | var allValues = decl.value.split(' '); 38 | 39 | // For every value, apply styles 40 | for (var i=0; i