├── .travis.yml ├── .npmignore ├── .gitignore ├── index.js ├── tests ├── atomize.test.js └── lib │ └── AtomicStyler.test.js ├── package.json ├── LICENSE ├── lib └── AtomicStyler.js └── README.md /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - iojs 4 | - '0.12' 5 | - '0.11' 6 | - '0.10' 7 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | coverage/ 2 | artifacts/ 3 | **/npm-debug.log 4 | .DS_Store 5 | *~ 6 | test/ 7 | tests/ 8 | docs/ 9 | examples/ 10 | Makefile 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | coverage/ 2 | artifacts/ 3 | node_modules/ 4 | **/npm-debug.log 5 | tmp/ 6 | CVS/ 7 | .DS_Store 8 | .*.swp 9 | .svn 10 | *~ 11 | .com.apple.timemachine.supported 12 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2015, Yahoo Inc. 3 | * Copyrights licensed under the MIT License. 4 | * See the accompanying LICENSE file for terms. 5 | */ 6 | 'use strict'; 7 | 8 | var AtomicStyler = require('./lib/AtomicStyler'); 9 | 10 | module.exports = new AtomicStyler(); 11 | -------------------------------------------------------------------------------- /tests/atomize.test.js: -------------------------------------------------------------------------------- 1 | /* globals describe, it */ 2 | 3 | 'use strict'; 4 | 5 | var atomize = require('../index'); 6 | var AtomicStyler = require('../lib/AtomicStyler'); 7 | var assert = require('assert'); 8 | 9 | describe('atomize', function () { 10 | it('is a singlethon instance of AtomicStyler', function () { 11 | assert(AtomicStyler.prototype.isPrototypeOf(atomize)); 12 | }); 13 | 14 | it('starts with a empty list of styles', function () { 15 | assert.deepEqual(atomize._styles, {}); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "atomic-style", 3 | "version": "0.3.2", 4 | "description": "Atomic classSets and dedupe", 5 | "license": "MIT", 6 | "main": "index.js", 7 | "scripts": { 8 | "cover": "COVERAGE=true jenkins-mocha tests/**/*.test.js", 9 | "test": "jenkins-mocha --no-coverage tests/**/*.test.js" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/yahoo/atomic-style.git" 14 | }, 15 | "keywords": [ 16 | "atomic", 17 | "style", 18 | "atomizer", 19 | "css", 20 | "styles" 21 | ], 22 | "bugs": { 23 | "url": "https://github.com/yahoo/jsx-test/issues" 24 | }, 25 | "author": "Marcelo Eden", 26 | "homepage": "https://github.com/yahoo/atomic-style", 27 | "dependencies": { 28 | "lodash": "^4.0" 29 | }, 30 | "devDependencies": { 31 | "jenkins-mocha": "^2.2" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright 2015, Yahoo Inc. 4 | Author: Marcelo Eden 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all 14 | copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | SOFTWARE. 23 | -------------------------------------------------------------------------------- /lib/AtomicStyler.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2015, Yahoo Inc. 3 | * Copyrights licensed under the MIT License. 4 | * See the accompanying LICENSE file for terms. 5 | */ 6 | 'use strict'; 7 | 8 | var SPLIT_REGEX = /\s+/g; 9 | var VALUE_REGEX = /\(.+\)/; 10 | 11 | var _ = { 12 | assign: require('lodash/assign') 13 | }; 14 | 15 | function AtomicStyler(styles) { 16 | this._styles = {}; 17 | styles && this.set(styles); 18 | } 19 | 20 | function classesFromObject(obj) { 21 | var classNames = ''; 22 | var key; 23 | 24 | for (key in obj) { 25 | if (obj.hasOwnProperty(key) && obj[key]) { 26 | classNames += ' ' + key; 27 | } 28 | } 29 | 30 | return classNames; 31 | } 32 | 33 | function sanitizeArray(classes) { 34 | if (!classes) { 35 | return []; 36 | } 37 | 38 | if (Array.isArray(classes)) { 39 | classes = classes.join(' '); 40 | } 41 | 42 | if (typeof classes === 'object') { 43 | classes = classesFromObject(classes); 44 | } 45 | 46 | return classes.trim().split(SPLIT_REGEX); 47 | } 48 | 49 | function _reduceClassSet(result, className) { 50 | result[className.replace(VALUE_REGEX, '')] = className; 51 | return result; 52 | } 53 | 54 | function buildClassSet(classes) { 55 | return sanitizeArray(classes).reduce(_reduceClassSet, {}); 56 | } 57 | 58 | function getClassNames(styles) { 59 | return Object.keys(styles).map(function (key) { 60 | return styles[key]; 61 | }).join(' '); 62 | } 63 | 64 | function set(styles) { 65 | if (Array.isArray(styles)) { 66 | return styles.forEach(set, this); 67 | } 68 | 69 | Object.keys(styles).forEach(function(key) { 70 | this._styles[key] = _.assign( 71 | this._styles[key] || {}, 72 | buildClassSet(styles[key]) 73 | ); 74 | }, this); 75 | } 76 | 77 | function get(styles, overrides) { 78 | var classes = {}; 79 | 80 | sanitizeArray(styles).forEach(function(key) { 81 | _.assign(classes, this._styles[key]); 82 | }, this); 83 | 84 | overrides && _.assign(classes, buildClassSet(overrides)); 85 | return getClassNames(classes); 86 | } 87 | 88 | function mergeStyles(result, style) { 89 | return _.assign(result, buildClassSet(style)); 90 | } 91 | 92 | function dedupe() { 93 | return getClassNames([].reduce.call(arguments, mergeStyles, {})); 94 | } 95 | 96 | AtomicStyler.prototype = { 97 | set: set, 98 | get: get, 99 | dedupe: dedupe 100 | }; 101 | 102 | module.exports = AtomicStyler; 103 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # AtomicStyle 2 | 3 | This lib provides atomic classSets and dedupes atomic classes, it is an Atomizer friendly replacement for the [classNames](https://github.com/JedWatson/classnames) module. 4 | 5 | The atomic style class sets helps to remove duplication when there are many components repeating the same style over and over but it should not be overused the Atomic prefered way it to have reusable components with explicit atomic classes, the dedupe feature provided by this lib is very usefull for that. 6 | 7 | ## Install 8 | 9 | ``` 10 | npm install --save atomic-style 11 | ``` 12 | 13 | ## How To Use? 14 | 15 | Create some classSets to group atomic styles that are duplicated on your app. 16 | 17 | ```js 18 | // config/styles/btn.json 19 | // the AtomicStyle is a simple object where the keys is the style name, 20 | // and the values can be eather a string, object or array. 21 | { 22 | // you can use an Array 23 | 'btn': [ 24 | 'H(30px) Lh(30px)', 25 | 'Bgc(#ccc)', 26 | 'C(#000)', 27 | ... // more styles 28 | ], 29 | 30 | // you can use an String 31 | 'btn-blue': "Bgc(blue) C(#fff)", 32 | 33 | // or you can use an object 34 | 'btn-lg': { 35 | 'H(50px)': true, 36 | 'Lh(50px)': true 37 | } 38 | } 39 | ``` 40 | 41 | Create a config file that load your classes. 42 | 43 | ```js 44 | // config/atomize.js 45 | 'use strict'; 46 | 47 | // atomize-style return a singlethon object where all your styles will be merged 48 | var atomize = require('atomic-style'); 49 | 50 | atomize.set([ 51 | require('./styles/btn.json'), 52 | require('./styles/foobar.json'), 53 | ... // all other styles 54 | ]); 55 | 56 | module.exports = atomize; 57 | ``` 58 | 59 | Now you can use your config/atomize to get classSets and dedupe stuff. 60 | 61 | ```jsx 62 | // components/SomeComponent.jsx 63 | var atomize = require('../config/atomize'); 64 | 65 | module.exports = React.createClass({ 66 | displayName: 'SomeComponent', 67 | 68 | ... 69 | 70 | render: function () { 71 | // #dedupe can be used to merge classes 72 | var divClasses = atomize.dedupe('W(500px)', this.props.divClassName, { 73 | 'W(100%)': this.props.isFullScreen 74 | }); 75 | 76 | var customBtnClasses = atomize.get('btn btn-lg', { 77 | 'C(#fff) Bgc(pink)': this.props.hasPinkBtn 78 | }); 79 | 80 | return ( 81 |
82 | 83 | 84 | 85 |
86 | ) 87 | } 88 | }); 89 | ``` 90 | 91 | The `atomize.get` and `atomize.dedupe` both guaranty no duplication of same style, for more details and examples check the [tests](https://github.com/yahoo/atomic-style/tree/master/tests). 92 | 93 | Code licensed under the MIT license. See LICENSE file for terms. 94 | -------------------------------------------------------------------------------- /tests/lib/AtomicStyler.test.js: -------------------------------------------------------------------------------- 1 | /* globals describe, it, beforeEach */ 2 | 3 | 'use strict'; 4 | 5 | var AtomicStyler = require('../../lib/AtomicStyler'); 6 | var assert = require('assert'); 7 | 8 | describe('AtomicStyler', function() { 9 | beforeEach(function() { 10 | this.atomize = new AtomicStyler({ 11 | 'btn': 'D(ib) C(white) Bg(gray)', 12 | 'btn-blue': ['Bg(blue) Bg(grey):h', 'Bd(n) BdT'] 13 | }); 14 | }); 15 | 16 | describe('#set', function() { 17 | it('sets styles as a map', function() { 18 | assert.deepEqual(this.atomize._styles, { 19 | 'btn': { 20 | 'Bg': 'Bg(gray)', 21 | 'C': 'C(white)', 22 | 'D': 'D(ib)' 23 | }, 24 | 'btn-blue': { 25 | 'Bd': 'Bd(n)', 26 | 'BdT': 'BdT', 27 | 'Bg': 'Bg(blue)', 28 | 'Bg:h': 'Bg(grey):h' 29 | } 30 | }); 31 | }); 32 | 33 | it('override some styles', function() { 34 | this.atomize.set({ 35 | 'btn': 'P(10px) Bg(pink) ' 36 | }); 37 | 38 | assert.deepEqual(this.atomize._styles, { 39 | 'btn': { 40 | 'Bg': 'Bg(pink)', 41 | 'P': 'P(10px)', 42 | 'C': 'C(white)', 43 | 'D': 'D(ib)' 44 | }, 45 | 'btn-blue': { 46 | 'Bd': 'Bd(n)', 47 | 'BdT': 'BdT', 48 | 'Bg': 'Bg(blue)', 49 | 'Bg:h': 'Bg(grey):h' 50 | } 51 | }); 52 | }); 53 | 54 | it('merges many styles if an array is given', function () { 55 | this.atomize.set([ 56 | { 57 | 'box': 'P(10px) M(5px)' 58 | }, 59 | { 60 | 'btn-pink': 'Bgc(pink) C(black)' 61 | } 62 | ]); 63 | 64 | assert.deepEqual(this.atomize._styles, { 65 | 'btn': { 66 | 'Bg': 'Bg(gray)', 67 | 'C': 'C(white)', 68 | 'D': 'D(ib)' 69 | }, 70 | 'btn-blue': { 71 | 'Bd': 'Bd(n)', 72 | 'BdT': 'BdT', 73 | 'Bg': 'Bg(blue)', 74 | 'Bg:h': 'Bg(grey):h' 75 | }, 76 | 'btn-pink': { 77 | 'Bgc': 'Bgc(pink)', 78 | 'C': 'C(black)' 79 | }, 80 | "box": { 81 | "P": "P(10px)", 82 | "M": "M(5px)" 83 | } 84 | }); 85 | }); 86 | }); 87 | 88 | describe('#get', function() { 89 | it('gets the atomic classes', function() { 90 | assert.equal(this.atomize.get('btn'), 'D(ib) C(white) Bg(gray)'); 91 | assert.equal(this.atomize.get('btn-blue'), 'Bg(blue) Bg(grey):h Bd(n) BdT'); 92 | }); 93 | 94 | it('mixes atomic classes', function() { 95 | assert.equal(this.atomize.get('btn btn-blue'), 96 | 'D(ib) C(white) Bg(blue) Bg(grey):h Bd(n) BdT'); 97 | }); 98 | 99 | it('adds some overrides', function() { 100 | assert.equal(this.atomize.get('btn btn-blue'), 101 | 'D(ib) C(white) Bg(blue) Bg(grey):h Bd(n) BdT'); 102 | }); 103 | 104 | it('overrides with an object', function() { 105 | assert.equal(this.atomize.get('btn', { 106 | 'P(10px)': true, 107 | 'M(0)': false 108 | }), 'D(ib) C(white) Bg(gray) P(10px)'); 109 | }); 110 | 111 | it('mixes atomic classes', function() { 112 | assert.equal(this.atomize.get('btn', 'BdB Bg(grey):h'), 113 | 'D(ib) C(white) Bg(gray) BdB Bg(grey):h'); 114 | }); 115 | 116 | it('trims empty spaces', function() { 117 | assert.equal(this.atomize.get('btn', 'BdB P(n) '), 118 | 'D(ib) C(white) Bg(gray) BdB P(n)'); 119 | 120 | assert.equal(this.atomize.get('btn', ['BdB ', ' P(n) M(n)']), 121 | 'D(ib) C(white) Bg(gray) BdB P(n) M(n)'); 122 | }); 123 | }); 124 | 125 | describe('#dedupe', function () { 126 | it('dedupes atomic classes', function () { 127 | assert.equal(this.atomize.dedupe('P(10px)', 'P(5px)'), 'P(5px)'); 128 | assert.equal(this.atomize.dedupe('P(10px)', ['P(5px)']), 'P(5px)'); 129 | assert.equal(this.atomize.dedupe('P(10px) C(blue)', { 130 | 'P(5px)': true, 131 | 'M(0)': false 132 | }), 'P(5px) C(blue)'); 133 | }); 134 | }); 135 | }); 136 | --------------------------------------------------------------------------------