├── .gitignore
├── README.md
├── StyleBuilder.js
├── __tests__
    └── StyleBuilder.js
├── dist
    └── StyleBuilder.js
├── gulpfile.js
└── package.json


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Style Builder
 2 | 
 3 | A JavaScript utility to break apart shorthand CSS components in objects.
 4 | 
 5 | When using inline styles with React components, it can be dangerous to use shorthand CSS properties. As a work around, use StyleBuilder to break apart any shorthand properties that exist in your style objects.
 6 | 
 7 | Read our blog post [here](http://www.actioniq.co/blog/reactjs-cramping-my-style/)
 8 | 
 9 | ## Example
10 | 
11 | ```
12 | const StyleBuilder = require("style-builder");
13 | 
14 | const _styles = StyleBuilder.build({
15 |   margin: "5px 10px"
16 | });
17 | 
18 | console.log(_styles);
19 | {
20 |   marginTop: "5px",
21 |   marginRight: "10px",
22 |   marginBottom: "5px",
23 |   marginLeft: "10px"
24 | }
25 | ```
26 | ## Options
27 | Style builder can also take options when building styles. Currently only one option is available.
28 | 
29 | `cache` (default: `true`): If true, style builder will store a cache of the results from style functions, key'd off the arguments. This is very useful in React if you use the pure render mixin. Each time you pass a computed style to a child component, it will receive the exact (===) same style object.
30 | 
31 | For example:
32 | ```
33 | const _styles = StyleBuilder.build({
34 |   awesomeStyle: (iLikeGreen) => ({
35 |     background: iLikeGreen ? "green" : "blue",
36 |   }),
37 | }, {
38 |   cache: true,
39 | });
40 | console.log(_styles.awesomeStyle(true) === _styles.awesomeStyle(true)); // true
41 | 
42 | const _styles = StyleBuilder.build({
43 |   awesomeStyle: (iLikeGreen) => ({
44 |     background: iLikeGreen ? "green" : "blue",
45 |   }),
46 | }, {
47 |   cache: false,
48 | });
49 | console.log(_styles.awesomeStyle(true) === _styles.awesomeStyle(true)); // false
50 | ```
51 | ## Build
52 | ```
53 | npm run-script build
54 | ```
55 | 
56 | ## Test
57 | ```
58 | npm test
59 | ```
60 | 
61 | ## TODO
62 | * background
63 | * font
64 | * transition
65 | * transform
66 | * list-style
67 | 
68 | 


--------------------------------------------------------------------------------
/StyleBuilder.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * StyleBuilder. Breaks apart short hand properties (padding, margin, border, etc) into their
  3 |  * sub components.
  4 |  *
  5 |  * Currently react doesn't properly handle short hand properties: http://jsfiddle.net/ox3Lcmuy/
  6 |  *
  7 |  * If you start with
  8 |  *    { border: 1px solid red }
  9 |  * then add an active state with
 10 |  *    { borderColor: green }
 11 |  * you'll correctly see
 12 |  *    { border: 1px solid green }
 13 |  * but as soon as you remove that active border state and only define { border: 1px soild red} again
 14 |  * you'll be left with a black border because of the way React handles its style diffing.
 15 |  * See a more detailed explanation here:
 16 |  *
 17 |  * By always breaking up short hand components into their smaller parts we should be able to sidestep
 18 |  * this problem.
 19 |  *
 20 |  * TODO:
 21 |  *  background
 22 |  *  font
 23 |  *  transition
 24 |  *  transform
 25 |  *  list-style
 26 |  */
 27 | 
 28 | const objectAssign = require('object-assign');
 29 | "use strict";
 30 | 
 31 | const _borderStyles = ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"];
 32 | const _units = ["px", "em", "pt", "%"];
 33 | 
 34 | class StyleBuilder {
 35 | 
 36 |   /*
 37 |    * Properly converts 4 part values (like padding and margin) into an
 38 |    * array, each index matching one of the 4 sub components.
 39 |    */
 40 |   _explodeToFour(value) {
 41 |     let fourPartArray = [0, 1, 2, 3];
 42 |     let valueArray = value.split(" ");
 43 |     if (valueArray.length == 1) {
 44 |       fourPartArray = fourPartArray.map(() => valueArray[0]);
 45 |     } else if (valueArray.length == 2) {
 46 |       fourPartArray = fourPartArray.map((v, i) => valueArray[i % 2]);
 47 |     } else if (valueArray.length == 3) {
 48 |       fourPartArray = fourPartArray.map((v, i) => valueArray[i % 3 + Math.floor(i / 3)]);
 49 |     } else {
 50 |       fourPartArray = valueArray;
 51 |     }
 52 |     return fourPartArray;
 53 |   }
 54 | 
 55 |   /*
 56 |    * Takes in an array of length 4 with a prefix and suffix and converts
 57 |    * it to an object with Top, Right, Bottom, Left
 58 |    */
 59 |   _applyFour(valueArr, prefix, suffix) {
 60 |     prefix = prefix || "";
 61 |     suffix = suffix || "";
 62 |     const styles = {};
 63 |     styles[`${prefix}Top${suffix}`] = valueArr[0];
 64 |     styles[`${prefix}Right${suffix}`] = valueArr[1];
 65 |     styles[`${prefix}Bottom${suffix}`] = valueArr[2];
 66 |     styles[`${prefix}Left${suffix}`] = valueArr[3];
 67 |     return styles;
 68 |   }
 69 | 
 70 |   /*
 71 |    * Takes in an array of length 4 with a prefix and suffix and converts
 72 |    * it to an object with TopLeft, TopRight, BottomRight, BottomLeft
 73 |    */
 74 |   _applyFourCorner(valueArr, prefix, suffix) {
 75 |     prefix = prefix || "";
 76 |     suffix = suffix || "";
 77 |     const styles = {};
 78 |     styles[`${prefix}TopLeft${suffix}`] = valueArr[0];
 79 |     styles[`${prefix}TopRight${suffix}`] = valueArr[1];
 80 |     styles[`${prefix}BottomRight${suffix}`] = valueArr[2];
 81 |     styles[`${prefix}BottomLeft${suffix}`] = valueArr[3];
 82 |     return styles;
 83 |   }
 84 | 
 85 |   /*
 86 |    * Adds px to any numbers that do not have an extension
 87 |    */
 88 |   applyPX(values) {
 89 |     return values.map(v => {
 90 |       if (_units.filter(u => v.indexOf(u) > -1).length === 0) {
 91 |         return v + "px";
 92 |       }
 93 |       return v;
 94 |     });
 95 |   }
 96 | 
 97 |   margin(value) {
 98 |     return this._applyFour(this._explodeToFour(value), "margin");
 99 |   }
100 | 
101 |   padding(value) {
102 |     return this._applyFour(this._explodeToFour(value), "padding");
103 |   }
104 | 
105 |   borderRadius(value) {
106 |     let partOne = this._explodeToFour(value.split("/")[0]);
107 |     if (value.indexOf("/") > -1) {
108 |       const partTwo = this._explodeToFour(value.split("/")[1]);
109 |       partOne = partOne.map((v, index) => v + " " + partTwo[index]);
110 |     }
111 |     return this._applyFourCorner(partOne, "border", "Radius");
112 |   }
113 | 
114 |   borderStyle(value) {
115 |     return this._applyFour(this._explodeToFour(value), "border", "Style");
116 |   }
117 | 
118 |   borderColor(value) {
119 |     return this._applyFour(this._explodeToFour(value), "border", "Color");
120 |   }
121 | 
122 |   borderWidth(value) {
123 |     return this._applyFour(this._explodeToFour(value), "border", "Width");
124 |   }
125 | 
126 |   borderSide(value, side) {
127 |     const styles = {
128 |       [`border${side}Width`]: "initial",
129 |       [`border${side}Style`]: "initial",
130 |       [`border${side}Color`]: "initial",
131 |     };
132 | 
133 |     const values = value.split(" ");
134 |     if (values.length > 3) {
135 |       console.warn(`More than 3 properties found in border: ${value}. Only using first 3`);
136 |     }
137 | 
138 |     let widthIndex, styleIndex, colorIndex = -1;
139 |     [0, 1, 2].forEach(index => {
140 |       if (values[index] === undefined) { return; }
141 | 
142 |       const v = values[index].trim();
143 | 
144 |       if (_borderStyles.indexOf(v) > -1) {
145 |         if (styleIndex > -1) { console.warn(`Found more than one 'style' border prop: ${value}`); }
146 |         styleIndex = index;
147 |       } else if (!isNaN(parseFloat(v))) {
148 |         if (widthIndex > -1) { console.warn(`Found more than one 'width' border prop: ${value}`); }
149 |         widthIndex = index;
150 |       } else {
151 |         if (colorIndex > -1) { console.warn(`Found more than one 'color' border prop: ${value}`); }
152 |         colorIndex = index;
153 |       }
154 |     });
155 | 
156 |     if (widthIndex > -1) { styles[`border${side}Width`] = values[widthIndex]; }
157 |     if (styleIndex > -1) { styles[`border${side}Style`] = values[styleIndex]; }
158 |     if (colorIndex > -1) { styles[`border${side}Color`] = values[colorIndex]; }
159 | 
160 |     return styles;
161 |   }
162 | 
163 |   borderLeft(value) {
164 |     return this.borderSide(value, "Left");
165 |   }
166 | 
167 |   borderRight(value) {
168 |     return this.borderSide(value, "Right");
169 |   }
170 | 
171 |   borderTop(value) {
172 |     return this.borderSide(value, "Top");
173 |   }
174 | 
175 |   borderBottom(value) {
176 |     return this.borderSide(value, "Bottom");
177 |   }
178 | 
179 |   border(value) {
180 |     // TODO: Properly handle { border: <style> | <style> <color> }
181 |     return objectAssign({},
182 |                           this.borderSide(value, "Left"),
183 |                           this.borderSide(value, "Right"),
184 |                           this.borderSide(value, "Top"),
185 |                           this.borderSide(value, "Bottom"));
186 |   }
187 | 
188 |   build(styles, options) {
189 |     let newStyles;
190 |     if (styles.length !== undefined) {
191 |       newStyles = [];
192 |     } else {
193 |       newStyles = {};
194 |     }
195 | 
196 |     /*
197 |      * Options:
198 |      *
199 |      * cache [default: true]: if style builder should cache responses from style functions
200 |      */
201 |     options = objectAssign({}, {
202 |       cache: true
203 |     }, options);
204 | 
205 |     /*
206 |      * Loop through each key in the object, if array Object.keys returns
207 |      * indexes.
208 |      */
209 |     Object.keys(styles).forEach((key) => {
210 |       const value = styles[key];
211 |       const type = typeof value;
212 | 
213 |       if (type == "string") {
214 |         if (this[key]) {
215 |           objectAssign(newStyles, this[key](value));
216 |         } else {
217 |           newStyles[key] = value;
218 |         }
219 |       } else if (type == "object" && value.length !== undefined) {
220 |         newStyles[key] = value.map(v => this.build(v));
221 |       } else if (type == "object") {
222 |         newStyles[key] = this.build(value);
223 |       } else if (type == "function") {
224 |         /*
225 |          * A cache to store the result of style functions when passed the same arguments.
226 |          * Helps make PureRenderMixin more performant as without the cache each call to
227 |          * the function returns a new object instance.
228 |          */
229 |         const styleCache = {};
230 | 
231 |         newStyles[key] = (...args) => {
232 |           if (options.cache) {
233 |             const key = JSON.stringify(args);
234 |             if (!styleCache[key]) {
235 |               styleCache[key] = this.build(value(...args));
236 |             }
237 |             return styleCache[key];
238 |           }
239 |           return this.build(value(...args));
240 |         };
241 |       } else {
242 |         newStyles[key] = value;
243 |       }
244 | 
245 |     });
246 | 
247 |     return newStyles;
248 |   }
249 | }
250 | 
251 | export default new StyleBuilder();
252 | 
253 | 


--------------------------------------------------------------------------------
/__tests__/StyleBuilder.js:
--------------------------------------------------------------------------------
  1 | jest.dontMock("../StyleBuilder");
  2 | jest.dontMock("../node_modules/object-assign/index.js");
  3 | 
  4 | const borderResult = {
  5 |   borderBottomColor:  "green",
  6 |   borderBottomStyle:  "solid",
  7 |   borderBottomWidth:  "1px",
  8 |   borderLeftColor:    "green",
  9 |   borderLeftStyle:    "solid",
 10 |   borderLeftWidth:    "1px",
 11 |   borderRightColor:   "green",
 12 |   borderRightStyle:   "solid",
 13 |   borderRightWidth:   "1px",
 14 |   borderTopColor:     "green",
 15 |   borderTopStyle:     "solid",
 16 |   borderTopWidth:     "1px"
 17 | }
 18 | 
 19 | describe("StyleBuilder", function() {
 20 |   var StyleBuilder = require("../StyleBuilder");
 21 | 
 22 |   it("converts border with 3 subcomponents, px style color", function() {
 23 |     expect(StyleBuilder.build({
 24 |       border: "1px solid green"
 25 |     })).toEqual(borderResult);
 26 |   });
 27 | 
 28 |   it("converts border with 3 subcomponents, px color style", function() {
 29 |     expect(StyleBuilder.build({
 30 |       border: "1px green solid"
 31 |     })).toEqual(borderResult);
 32 |   });
 33 | 
 34 |   it("converts border with 3 subcomponents, style color px", function() {
 35 |     expect(StyleBuilder.build({
 36 |       border: "solid green 1px"
 37 |     })).toEqual(borderResult);
 38 |   });
 39 | 
 40 |   it("converts border with 3 subcomponents, style px color", function() {
 41 |     expect(StyleBuilder.build({
 42 |       border: "solid 1px green"
 43 |     })).toEqual(borderResult);
 44 |   });
 45 | 
 46 |   it("converts border with 3 subcomponents, color style px", function() {
 47 |     expect(StyleBuilder.build({
 48 |       border: "green solid 1px"
 49 |     })).toEqual(borderResult);
 50 |   });
 51 | 
 52 |   it("converts border with 3 subcomponents, color px style", function() {
 53 |     expect(StyleBuilder.build({
 54 |       border: "green 1px solid"
 55 |     })).toEqual(borderResult);
 56 |   });
 57 | 
 58 |   it("converts top border with only style and width defined", function() {
 59 |     expect(StyleBuilder.build({
 60 |       borderTop: "solid 1px"
 61 |     })).toEqual({
 62 |       borderTopStyle: "solid",
 63 |       borderTopWidth: "1px",
 64 |       borderTopColor: "initial"
 65 |     })
 66 |   });
 67 | 
 68 |   it("converts bottom border with only width and color defined", function() {
 69 |     expect(StyleBuilder.build({
 70 |       borderBottom: "1px green"
 71 |     })).toEqual({
 72 |       borderBottomStyle: "initial",
 73 |       borderBottomWidth: "1px",
 74 |       borderBottomColor: "green"
 75 |     })
 76 |   });
 77 | 
 78 |   it("converts right border with only color and style defined", function() {
 79 |     expect(StyleBuilder.build({
 80 |       borderRight: "solid green"
 81 |     })).toEqual({
 82 |       borderRightStyle: "solid",
 83 |       borderRightWidth: "initial",
 84 |       borderRightColor: "green"
 85 |     })
 86 |   });
 87 | 
 88 |   it("converts top border with only style defined", function() {
 89 |     expect(StyleBuilder.build({
 90 |       borderTop: "solid"
 91 |     })).toEqual({
 92 |       borderTopStyle: "solid",
 93 |       borderTopWidth: "initial",
 94 |       borderTopColor: "initial"
 95 |     })
 96 |   });
 97 | 
 98 |   it("converts bottom border with only color defined", function() {
 99 |     expect(StyleBuilder.build({
100 |       borderBottom: "green"
101 |     })).toEqual({
102 |       borderBottomStyle: "initial",
103 |       borderBottomWidth: "initial",
104 |       borderBottomColor: "green"
105 |     })
106 |   });
107 | 
108 |   it("converts right border with only width defined", function() {
109 |     expect(StyleBuilder.build({
110 |       borderRight: "1px"
111 |     })).toEqual({
112 |       borderRightStyle: "initial",
113 |       borderRightWidth: "1px",
114 |       borderRightColor: "initial"
115 |     })
116 |   });
117 | 
118 |   it("converts margin with one subcomponent", function() {
119 |     expect(StyleBuilder.build({
120 |       margin: "5px"
121 |     })).toEqual({
122 |       marginTop:    "5px",
123 |       marginRight:  "5px",
124 |       marginBottom: "5px",
125 |       marginLeft:   "5px"
126 |     });
127 |   });
128 | 
129 |   it("converts margin with two subcomponents", function() {
130 |     expect(StyleBuilder.build({
131 |       margin: "5px 10px"
132 |     })).toEqual({
133 |       marginTop:    "5px",
134 |       marginRight:  "10px",
135 |       marginBottom: "5px",
136 |       marginLeft:   "10px"
137 |     });
138 |   });
139 | 
140 |   it("converts margin with three subcomponent", function() {
141 |     expect(StyleBuilder.build({
142 |       margin: "5px 10px 15px"
143 |     })).toEqual({
144 |       marginTop:    "5px",
145 |       marginRight:  "10px",
146 |       marginBottom: "15px",
147 |       marginLeft:   "10px"
148 |     });
149 |   });
150 | 
151 |   it("converts margin with four subcomponent", function() {
152 |     expect(StyleBuilder.build({
153 |       margin: "5px 10px 15px 20px"
154 |     })).toEqual({
155 |       marginTop:    "5px",
156 |       marginRight:  "10px",
157 |       marginBottom: "15px",
158 |       marginLeft:   "20px"
159 |     });
160 |   });
161 | 
162 |   it("convert a style given as a function call", function() {
163 |     expect(StyleBuilder.build({
164 |       elem: function(size) {
165 |         return {
166 |           margin: size,
167 |         };
168 |       },
169 |     }).elem("5px")).toEqual({
170 |       marginTop:    "5px",
171 |       marginRight:  "5px",
172 |       marginBottom: "5px",
173 |       marginLeft:   "5px",
174 |     });
175 |   });
176 | 
177 |   it("returns the same object for style functions when given the same params", function() {
178 |     var styles = StyleBuilder.build({
179 |       fn: function(a, b, c) {
180 |         return {
181 |           background: a ? "green" : "blue",
182 |           margin: b ? "5px" : "10px",
183 |           padding: c ? "1px 2px" : "3px 4px",
184 |         };
185 |       }
186 |     });
187 |     expect(styles.fn(true, false, true)).toBe(styles.fn(true, false, true));
188 |     expect(styles.fn(false, true, false)).toBe(styles.fn(false, true, false));
189 |     expect(styles.fn(false, true)).not.toBe(styles.fn(false, false));
190 |   });
191 | 
192 |   it("returns different objects for style functions when given different params, even if response has same keys and values", function() {
193 |     var styles = StyleBuilder.build({
194 |       fn: function(a, b, c) {
195 |         return {
196 |           background: "green",
197 |         };
198 |       }
199 |     });
200 |     expect(styles.fn(true, true, true)).toEqual(styles.fn(false, false, false));
201 |     expect(styles.fn(true, true, true)).not.toBe(styles.fn(false, false, false));
202 |   });
203 | 
204 |   it("caches separately for different style functions", function() {
205 |     var styles = StyleBuilder.build({
206 |       fn1: function(a, b, c) {
207 |         return {
208 |           background: "green",
209 |         };
210 |       },
211 |       fn2: function(d, e, f) {
212 |        return {
213 |          background: "blue",
214 |        };
215 |       },
216 |     });
217 |     expect(styles.fn1(true, true, true)).not.toBe(styles.fn2(true, true, true));
218 |     expect(styles.fn1(true, true, true)).not.toEqual(styles.fn2(true, true, true));
219 |   });
220 | });
221 | 


--------------------------------------------------------------------------------
/dist/StyleBuilder.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * StyleBuilder. Breaks apart short hand properties (padding, margin, border, etc) into their
  3 |  * sub components.
  4 |  *
  5 |  * Currently react doesn't properly handle short hand properties: http://jsfiddle.net/ox3Lcmuy/
  6 |  *
  7 |  * If you start with
  8 |  *    { border: 1px solid red }
  9 |  * then add an active state with
 10 |  *    { borderColor: green }
 11 |  * you'll correctly see
 12 |  *    { border: 1px solid green }
 13 |  * but as soon as you remove that active border state and only define { border: 1px soild red} again
 14 |  * you'll be left with a black border because of the way React handles its style diffing.
 15 |  * See a more detailed explanation here:
 16 |  *
 17 |  * By always breaking up short hand components into their smaller parts we should be able to sidestep
 18 |  * this problem.
 19 |  *
 20 |  * TODO:
 21 |  *  background
 22 |  *  font
 23 |  *  transition
 24 |  *  transform
 25 |  *  list-style
 26 |  */
 27 | 
 28 | "use strict";
 29 | 
 30 | Object.defineProperty(exports, "__esModule", {
 31 |   value: true
 32 | });
 33 | 
 34 | var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 35 | 
 36 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 37 | 
 38 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 39 | 
 40 | var objectAssign = require('object-assign');
 41 | "use strict";
 42 | 
 43 | var _borderStyles = ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"];
 44 | var _units = ["px", "em", "pt", "%"];
 45 | 
 46 | var StyleBuilder = (function () {
 47 |   function StyleBuilder() {
 48 |     _classCallCheck(this, StyleBuilder);
 49 |   }
 50 | 
 51 |   _createClass(StyleBuilder, [{
 52 |     key: "_explodeToFour",
 53 | 
 54 |     /*
 55 |      * Properly converts 4 part values (like padding and margin) into an
 56 |      * array, each index matching one of the 4 sub components.
 57 |      */
 58 |     value: function _explodeToFour(value) {
 59 |       var fourPartArray = [0, 1, 2, 3];
 60 |       var valueArray = value.split(" ");
 61 |       if (valueArray.length == 1) {
 62 |         fourPartArray = fourPartArray.map(function () {
 63 |           return valueArray[0];
 64 |         });
 65 |       } else if (valueArray.length == 2) {
 66 |         fourPartArray = fourPartArray.map(function (v, i) {
 67 |           return valueArray[i % 2];
 68 |         });
 69 |       } else if (valueArray.length == 3) {
 70 |         fourPartArray = fourPartArray.map(function (v, i) {
 71 |           return valueArray[i % 3 + Math.floor(i / 3)];
 72 |         });
 73 |       } else {
 74 |         fourPartArray = valueArray;
 75 |       }
 76 |       return fourPartArray;
 77 |     }
 78 | 
 79 |     /*
 80 |      * Takes in an array of length 4 with a prefix and suffix and converts
 81 |      * it to an object with Top, Right, Bottom, Left
 82 |      */
 83 |   }, {
 84 |     key: "_applyFour",
 85 |     value: function _applyFour(valueArr, prefix, suffix) {
 86 |       prefix = prefix || "";
 87 |       suffix = suffix || "";
 88 |       var styles = {};
 89 |       styles[prefix + "Top" + suffix] = valueArr[0];
 90 |       styles[prefix + "Right" + suffix] = valueArr[1];
 91 |       styles[prefix + "Bottom" + suffix] = valueArr[2];
 92 |       styles[prefix + "Left" + suffix] = valueArr[3];
 93 |       return styles;
 94 |     }
 95 | 
 96 |     /*
 97 |      * Takes in an array of length 4 with a prefix and suffix and converts
 98 |      * it to an object with TopLeft, TopRight, BottomRight, BottomLeft
 99 |      */
100 |   }, {
101 |     key: "_applyFourCorner",
102 |     value: function _applyFourCorner(valueArr, prefix, suffix) {
103 |       prefix = prefix || "";
104 |       suffix = suffix || "";
105 |       var styles = {};
106 |       styles[prefix + "TopLeft" + suffix] = valueArr[0];
107 |       styles[prefix + "TopRight" + suffix] = valueArr[1];
108 |       styles[prefix + "BottomRight" + suffix] = valueArr[2];
109 |       styles[prefix + "BottomLeft" + suffix] = valueArr[3];
110 |       return styles;
111 |     }
112 | 
113 |     /*
114 |      * Adds px to any numbers that do not have an extension
115 |      */
116 |   }, {
117 |     key: "applyPX",
118 |     value: function applyPX(values) {
119 |       return values.map(function (v) {
120 |         if (_units.filter(function (u) {
121 |           return v.indexOf(u) > -1;
122 |         }).length === 0) {
123 |           return v + "px";
124 |         }
125 |         return v;
126 |       });
127 |     }
128 |   }, {
129 |     key: "margin",
130 |     value: function margin(value) {
131 |       return this._applyFour(this._explodeToFour(value), "margin");
132 |     }
133 |   }, {
134 |     key: "padding",
135 |     value: function padding(value) {
136 |       return this._applyFour(this._explodeToFour(value), "padding");
137 |     }
138 |   }, {
139 |     key: "borderRadius",
140 |     value: function borderRadius(value) {
141 |       var _this = this;
142 | 
143 |       var partOne = this._explodeToFour(value.split("/")[0]);
144 |       if (value.indexOf("/") > -1) {
145 |         (function () {
146 |           var partTwo = _this._explodeToFour(value.split("/")[1]);
147 |           partOne = partOne.map(function (v, index) {
148 |             return v + " " + partTwo[index];
149 |           });
150 |         })();
151 |       }
152 |       return this._applyFourCorner(partOne, "border", "Radius");
153 |     }
154 |   }, {
155 |     key: "borderStyle",
156 |     value: function borderStyle(value) {
157 |       return this._applyFour(this._explodeToFour(value), "border", "Style");
158 |     }
159 |   }, {
160 |     key: "borderColor",
161 |     value: function borderColor(value) {
162 |       return this._applyFour(this._explodeToFour(value), "border", "Color");
163 |     }
164 |   }, {
165 |     key: "borderWidth",
166 |     value: function borderWidth(value) {
167 |       return this._applyFour(this._explodeToFour(value), "border", "Width");
168 |     }
169 |   }, {
170 |     key: "borderSide",
171 |     value: function borderSide(value, side) {
172 |       var _styles;
173 | 
174 |       var styles = (_styles = {}, _defineProperty(_styles, "border" + side + "Width", "initial"), _defineProperty(_styles, "border" + side + "Style", "initial"), _defineProperty(_styles, "border" + side + "Color", "initial"), _styles);
175 | 
176 |       var values = value.split(" ");
177 |       if (values.length > 3) {
178 |         console.warn("More than 3 properties found in border: " + value + ". Only using first 3");
179 |       }
180 | 
181 |       var widthIndex = undefined,
182 |           styleIndex = undefined,
183 |           colorIndex = -1;
184 |       [0, 1, 2].forEach(function (index) {
185 |         if (values[index] === undefined) {
186 |           return;
187 |         }
188 | 
189 |         var v = values[index].trim();
190 | 
191 |         if (_borderStyles.indexOf(v) > -1) {
192 |           if (styleIndex > -1) {
193 |             console.warn("Found more than one 'style' border prop: " + value);
194 |           }
195 |           styleIndex = index;
196 |         } else if (!isNaN(parseFloat(v))) {
197 |           if (widthIndex > -1) {
198 |             console.warn("Found more than one 'width' border prop: " + value);
199 |           }
200 |           widthIndex = index;
201 |         } else {
202 |           if (colorIndex > -1) {
203 |             console.warn("Found more than one 'color' border prop: " + value);
204 |           }
205 |           colorIndex = index;
206 |         }
207 |       });
208 | 
209 |       if (widthIndex > -1) {
210 |         styles["border" + side + "Width"] = values[widthIndex];
211 |       }
212 |       if (styleIndex > -1) {
213 |         styles["border" + side + "Style"] = values[styleIndex];
214 |       }
215 |       if (colorIndex > -1) {
216 |         styles["border" + side + "Color"] = values[colorIndex];
217 |       }
218 | 
219 |       return styles;
220 |     }
221 |   }, {
222 |     key: "borderLeft",
223 |     value: function borderLeft(value) {
224 |       return this.borderSide(value, "Left");
225 |     }
226 |   }, {
227 |     key: "borderRight",
228 |     value: function borderRight(value) {
229 |       return this.borderSide(value, "Right");
230 |     }
231 |   }, {
232 |     key: "borderTop",
233 |     value: function borderTop(value) {
234 |       return this.borderSide(value, "Top");
235 |     }
236 |   }, {
237 |     key: "borderBottom",
238 |     value: function borderBottom(value) {
239 |       return this.borderSide(value, "Bottom");
240 |     }
241 |   }, {
242 |     key: "border",
243 |     value: function border(value) {
244 |       // TODO: Properly handle { border: <style> | <style> <color> }
245 |       return objectAssign({}, this.borderSide(value, "Left"), this.borderSide(value, "Right"), this.borderSide(value, "Top"), this.borderSide(value, "Bottom"));
246 |     }
247 |   }, {
248 |     key: "build",
249 |     value: function build(styles, options) {
250 |       var _this2 = this;
251 | 
252 |       var newStyles = undefined;
253 |       if (styles.length !== undefined) {
254 |         newStyles = [];
255 |       } else {
256 |         newStyles = {};
257 |       }
258 | 
259 |       /*
260 |        * Options:
261 |        *
262 |        * cache [default: true]: if style builder should cache responses from style functions
263 |        */
264 |       options = objectAssign({}, {
265 |         cache: true
266 |       }, options);
267 | 
268 |       /*
269 |        * Loop through each key in the object, if array Object.keys returns
270 |        * indexes.
271 |        */
272 |       Object.keys(styles).forEach(function (key) {
273 |         var value = styles[key];
274 |         var type = typeof value;
275 | 
276 |         if (type == "string") {
277 |           if (_this2[key]) {
278 |             objectAssign(newStyles, _this2[key](value));
279 |           } else {
280 |             newStyles[key] = value;
281 |           }
282 |         } else if (type == "object" && value.length !== undefined) {
283 |           newStyles[key] = value.map(function (v) {
284 |             return _this2.build(v);
285 |           });
286 |         } else if (type == "object") {
287 |           newStyles[key] = _this2.build(value);
288 |         } else if (type == "function") {
289 |           (function () {
290 |             /*
291 |              * A cache to store the result of style functions when passed the same arguments.
292 |              * Helps make PureRenderMixin more performant as without the cache each call to
293 |              * the function returns a new object instance.
294 |              */
295 |             var styleCache = {};
296 | 
297 |             newStyles[key] = function () {
298 |               for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
299 |                 args[_key] = arguments[_key];
300 |               }
301 | 
302 |               if (options.cache) {
303 |                 var _key2 = JSON.stringify(args);
304 |                 if (!styleCache[_key2]) {
305 |                   styleCache[_key2] = _this2.build(value.apply(undefined, args));
306 |                 }
307 |                 return styleCache[_key2];
308 |               }
309 |               return _this2.build(value.apply(undefined, args));
310 |             };
311 |           })();
312 |         } else {
313 |           newStyles[key] = value;
314 |         }
315 |       });
316 | 
317 |       return newStyles;
318 |     }
319 |   }]);
320 | 
321 |   return StyleBuilder;
322 | })();
323 | 
324 | exports["default"] = new StyleBuilder();
325 | module.exports = exports["default"];


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require("gulp");
2 | var babel = require("gulp-babel");
3 | 
4 | gulp.task("build", function () {
5 |   return gulp.src("StyleBuilder.js")
6 |     .pipe(babel())
7 |     .pipe(gulp.dest("dist"));
8 | });
9 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "style-builder",
 3 |   "version": "1.0.13",
 4 |   "description": "JavaScript Utility to convert shorthand CSS properties into subcomponents",
 5 |   "main": "dist/StyleBuilder.js",
 6 |   "scripts": {
 7 |     "build": "gulp build",
 8 |     "test": "jest",
 9 |     "release": "gulp release"
10 |   },
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "git+https://github.com/ActionIQ/style-builder.git"
14 |   },
15 |   "author": "actioniq",
16 |   "license": "ISC",
17 |   "bugs": {
18 |     "url": "https://github.com/ActionIQ/style-builder/issues"
19 |   },
20 |   "homepage": "https://github.com/ActionIQ/style-builder#readme",
21 |   "devDependencies": {
22 |     "babel-jest": "*",
23 |     "gulp": "^3.9.0",
24 |     "gulp-babel": "^5.2.1",
25 |     "jest-cli": "^0.5.10"
26 |   },
27 |   "jest": {
28 |     "scriptPreprocessor": "<rootDir>/node_modules/babel-jest"
29 |   },
30 |   "dependencies": {
31 |     "object-assign": "^4.0.1"
32 |   },
33 |   "keywords": [
34 |     "react",
35 |     "javascript",
36 |     "css",
37 |     "inline-styles"
38 |   ]
39 | }
40 | 


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