├── .babelrc ├── .esformatter ├── .eslintrc ├── .gitignore ├── modules ├── functions │ ├── hsl.js │ ├── hsla.js │ ├── matrix.js │ ├── matrix3d.js │ ├── perspective.js │ ├── rgb.js │ ├── rgba.js │ ├── rotate.js │ ├── rotate3d.js │ ├── rotateX.js │ ├── rotateY.js │ ├── rotateZ.js │ ├── scale.js │ ├── scale3d.js │ ├── scaleX.js │ ├── scaleY.js │ ├── scaleZ.js │ ├── skew.js │ ├── skewX.js │ ├── skewY.js │ ├── translate.js │ ├── translate3d.js │ ├── translateX.js │ ├── translateY.js │ └── translateZ.js ├── index.js ├── multiple.js └── utils │ ├── applyUnitToNumber.js │ ├── applyUnitToNumbers.js │ └── isObject.js ├── package.json ├── readme.md └── test ├── _setup ├── mocha.opts └── test-setup.js ├── multiple-test.js └── utils ├── applyUnitToNumber-test.js └── applyUnitToNumbers-test.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "es2015", 4 | "stage-0" 5 | ], 6 | "plugins": [ 7 | "add-module-exports" 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /.esformatter: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "esformatter-jsx", 4 | "esformatter-quotes", 5 | "esformatter-literal-notation", 6 | "esformatter-parseint", 7 | "esformatter-spaced-lined-comment", 8 | "esformatter-var-each", 9 | "esformatter-braces", 10 | "esformatter-dot-notation", 11 | "esformatter-remove-trailing-commas", 12 | "esformatter-collapse-objects", 13 | "esformatter-quote-props" 14 | ], 15 | "quotes": { 16 | "type": "single" 17 | }, 18 | "jsx": { 19 | "formatJSX": true, 20 | "attrsOnSameLineAsTag": true, 21 | "maxAttrsOnTag": 4, 22 | "firstAttributeOnSameLine": false, 23 | "alignWithFirstAttribute": false, 24 | "spaceInJSXExpressionContainers": "", 25 | "htmlOptions": { 26 | "brace_style": "collapse", 27 | "indent_char": " ", 28 | "indent_size": 2, 29 | "max_preserve_newlines": 4, 30 | "preserve_newlines": true, 31 | "wrap_line_length": 250 32 | } 33 | }, 34 | "indent": { 35 | "value": " ", 36 | "alignComments": true, 37 | "ArrayExpression": 1, 38 | "ArrowFunctionExpression": 1, 39 | "AssignmentExpression": 1, 40 | "AssignmentExpression.BinaryExpression": 1, 41 | "AssignmentExpression.LogicalExpression": 1, 42 | "AssignmentExpression.UnaryExpression": 1, 43 | "CallExpression": 1, 44 | "CallExpression.BinaryExpression": 1, 45 | "CallExpression.LogicalExpression": 1, 46 | "CallExpression.UnaryExpression": 1, 47 | "CatchClause": 1, 48 | "ConditionalExpression": 1, 49 | "CommentInsideEmptyBlock": 1, 50 | "ClassDeclaration": 1, 51 | "DoWhileStatement": 1, 52 | "ForInStatement": 1, 53 | "ForStatement": 1, 54 | "FunctionDeclaration": 1, 55 | "FunctionExpression": 1, 56 | "IfStatement": 1, 57 | "MemberExpression": 1, 58 | "MultipleVariableDeclaration": 1, 59 | "NewExpression": 1, 60 | "ObjectExpression": 1, 61 | "ObjectExpression.BinaryExpression": 1, 62 | "ObjectExpression.LogicalExpression": 1, 63 | "ObjectExpression.UnaryExpression": 1, 64 | "ParameterList": 1, 65 | "ReturnStatement": 1, 66 | "SwitchCase": 1, 67 | "SwitchStatement": 1, 68 | "TopLevelFunctionBlock": 1, 69 | "TryStatement": 1, 70 | "VariableDeclaration.BinaryExpression": 1, 71 | "VariableDeclaration.LogicalExpression": 1, 72 | "VariableDeclaration.UnaryExpression": 1, 73 | "WhileStatement": 1 74 | }, 75 | "lineBreak": { 76 | "value": "\n", 77 | "before": { 78 | "AssignmentExpression": ">=1", 79 | "AssignmentOperator": 0, 80 | "ArrowFunctionExpressionArrow": 0, 81 | "ArrowFunctionExpressionOpeningBrace": 0, 82 | "ArrowFunctionExpressionClosingBrace": ">=1", 83 | "BlockStatement": 0, 84 | "BreakKeyword": ">=1", 85 | "CallExpression": -1, 86 | "CallExpressionOpeningParentheses": 0, 87 | "CallExpressionClosingParentheses": -1, 88 | "ClassDeclaration": ">=1", 89 | "ClassDeclarationOpeningBrace": 0, 90 | "ClassDeclarationClosingBrace": ">=1", 91 | "ConditionalExpression": ">=1", 92 | "CatchOpeningBrace": 0, 93 | "CatchClosingBrace": ">=1", 94 | "CatchKeyword": 0, 95 | "DeleteOperator": ">=1", 96 | "DoWhileStatement": ">=1", 97 | "DoWhileStatementOpeningBrace": 0, 98 | "DoWhileStatementClosingBrace": ">=1", 99 | "EndOfFile": -1, 100 | "EmptyStatement": -1, 101 | "FinallyKeyword": -1, 102 | "FinallyOpeningBrace": 0, 103 | "FinallyClosingBrace": ">=1", 104 | "ForInStatement": ">=1", 105 | "ForInStatementExpressionOpening": 0, 106 | "ForInStatementExpressionClosing": 0, 107 | "ForInStatementOpeningBrace": 0, 108 | "ForInStatementClosingBrace": ">=1", 109 | "ForStatement": ">=1", 110 | "ForStatementExpressionOpening": 0, 111 | "ForStatementExpressionClosing": "<2", 112 | "ForStatementOpeningBrace": 0, 113 | "ForStatementClosingBrace": ">=1", 114 | "FunctionExpression": -1, 115 | "FunctionExpressionOpeningBrace": 0, 116 | "FunctionExpressionClosingBrace": ">=1", 117 | "FunctionDeclaration": ">=1", 118 | "FunctionDeclarationOpeningBrace": 0, 119 | "FunctionDeclarationClosingBrace": ">=1", 120 | "IIFEClosingParentheses": 0, 121 | "IfStatement": ">=1", 122 | "IfStatementOpeningBrace": 0, 123 | "IfStatementClosingBrace": ">=1", 124 | "ElseIfStatement": 0, 125 | "ElseIfStatementOpeningBrace": 0, 126 | "ElseIfStatementClosingBrace": ">=1", 127 | "ElseStatement": 0, 128 | "ElseStatementOpeningBrace": 0, 129 | "ElseStatementClosingBrace": ">=1", 130 | "LogicalExpression": -1, 131 | "MethodDefinition": ">=1", 132 | "ObjectExpressionClosingBrace": ">=1", 133 | "ParameterDefault": 0, 134 | "Property": ">=1", 135 | "PropertyValue": 0, 136 | "ReturnStatement": -1, 137 | "SwitchOpeningBrace": 0, 138 | "SwitchClosingBrace": ">=1", 139 | "ThisExpression": -1, 140 | "ThrowStatement": ">=1", 141 | "TryKeyword": -1, 142 | "TryOpeningBrace": 0, 143 | "TryClosingBrace": ">=1", 144 | "VariableName": ">=1", 145 | "VariableValue": 0, 146 | "VariableDeclaration": ">=1", 147 | "VariableDeclarationWithoutInit": ">=1", 148 | "WhileStatement": ">=1", 149 | "WhileStatementOpeningBrace": 0, 150 | "WhileStatementClosingBrace": ">=1" 151 | }, 152 | "after": { 153 | "AssignmentExpression": ">=1", 154 | "AssignmentOperator": 0, 155 | "ArrowFunctionExpressionArrow": 0, 156 | "ArrowFunctionExpressionOpeningBrace": ">=1", 157 | "ArrowFunctionExpressionClosingBrace": -1, 158 | "BlockStatement": 0, 159 | "BreakKeyword": -1, 160 | "CallExpression": -1, 161 | "CallExpressionOpeningParentheses": -1, 162 | "CallExpressionClosingParentheses": -1, 163 | "ClassDeclaration": ">=1", 164 | "ClassDeclarationOpeningBrace": ">=1", 165 | "ClassDeclarationClosingBrace": ">=1", 166 | "CatchOpeningBrace": ">=1", 167 | "CatchClosingBrace": ">=0", 168 | "CatchKeyword": 0, 169 | "ConditionalExpression": ">=1", 170 | "DeleteOperator": ">=1", 171 | "DoWhileStatement": ">=1", 172 | "DoWhileStatementOpeningBrace": ">=1", 173 | "DoWhileStatementClosingBrace": 0, 174 | "EmptyStatement": -1, 175 | "FinallyKeyword": -1, 176 | "FinallyOpeningBrace": ">=1", 177 | "FinallyClosingBrace": ">=1", 178 | "ForInStatement": ">=1", 179 | "ForInStatementExpressionOpening": "<2", 180 | "ForInStatementExpressionClosing": -1, 181 | "ForInStatementOpeningBrace": ">=1", 182 | "ForInStatementClosingBrace": ">=1", 183 | "ForStatement": ">=1", 184 | "ForStatementExpressionOpening": "<2", 185 | "ForStatementExpressionClosing": -1, 186 | "ForStatementOpeningBrace": ">=1", 187 | "ForStatementClosingBrace": ">=1", 188 | "FunctionExpression": ">=1", 189 | "FunctionExpressionOpeningBrace": ">=1", 190 | "FunctionExpressionClosingBrace": -1, 191 | "FunctionDeclaration": ">=1", 192 | "FunctionDeclarationOpeningBrace": ">=1", 193 | "FunctionDeclarationClosingBrace": ">=1", 194 | "IIFEOpeningParentheses": 0, 195 | "IfStatement": ">=1", 196 | "IfStatementOpeningBrace": ">=1", 197 | "IfStatementClosingBrace": ">=1", 198 | "ElseIfStatement": ">=1", 199 | "ElseIfStatementOpeningBrace": ">=1", 200 | "ElseIfStatementClosingBrace": ">=1", 201 | "ElseStatement": ">=1", 202 | "ElseStatementOpeningBrace": ">=1", 203 | "ElseStatementClosingBrace": ">=1", 204 | "LogicalExpression": -1, 205 | "MethodDefinition": ">=1", 206 | "ObjectExpressionOpeningBrace": ">=1", 207 | "ParameterDefault": 0, 208 | "Property": 0, 209 | "PropertyName": 0, 210 | "ReturnStatement": -1, 211 | "SwitchOpeningBrace": ">=1", 212 | "SwitchClosingBrace": ">=1", 213 | "ThisExpression": 0, 214 | "ThrowStatement": ">=1", 215 | "TryKeyword": -1, 216 | "TryOpeningBrace": ">=1", 217 | "TryClosingBrace": 0, 218 | "VariableDeclaration": ">=1", 219 | "WhileStatement": ">=1", 220 | "WhileStatementOpeningBrace": ">=1", 221 | "WhileStatementClosingBrace": ">=1" 222 | } 223 | }, 224 | "whiteSpace": { 225 | "value": " ", 226 | "removeTrailing": 1, 227 | "before": { 228 | "ArrayExpressionOpening": 0, 229 | "ArrayExpressionClosing": 1, 230 | "ArrayExpressionComma": 0, 231 | "ArrayPatternOpening": 1, 232 | "ArrayPatternClosing": 1, 233 | "ArrayPatternComma": 0, 234 | "ArrowFunctionExpressionArrow": 1, 235 | "ArrowFunctionExpressionOpeningBrace": 1, 236 | "ArrowFunctionExpressionClosingBrace": 0, 237 | "ArgumentComma": 0, 238 | "ArgumentList": 0, 239 | "AssignmentOperator": 1, 240 | "BinaryExpression": 0, 241 | "BinaryExpressionOperator": 1, 242 | "BlockComment": 1, 243 | "CallExpression": -1, 244 | "CallExpressionOpeningParentheses": 0, 245 | "CallExpressionClosingParentheses": -1, 246 | "CatchParameterList": 0, 247 | "CatchOpeningBrace": 1, 248 | "CatchClosingBrace": 1, 249 | "CatchKeyword": 1, 250 | "CommaOperator": 0, 251 | "ClassDeclarationOpeningBrace": 1, 252 | "ClassDeclarationClosingBrace": 1, 253 | "ConditionalExpressionConsequent": 1, 254 | "ConditionalExpressionAlternate": 1, 255 | "DoWhileStatementOpeningBrace": 1, 256 | "DoWhileStatementClosingBrace": 1, 257 | "DoWhileStatementConditional": 1, 258 | "EmptyStatement": 0, 259 | "ExpressionClosingParentheses": 0, 260 | "FinallyKeyword": -1, 261 | "FinallyOpeningBrace": 1, 262 | "FinallyClosingBrace": 1, 263 | "ForInStatement": 1, 264 | "ForInStatementExpressionOpening": 1, 265 | "ForInStatementExpressionClosing": 0, 266 | "ForInStatementOpeningBrace": 1, 267 | "ForInStatementClosingBrace": 1, 268 | "ForStatement": 1, 269 | "ForStatementExpressionOpening": 1, 270 | "ForStatementExpressionClosing": 0, 271 | "ForStatementOpeningBrace": 1, 272 | "ForStatementClosingBrace": 1, 273 | "ForStatementSemicolon": 0, 274 | "FunctionDeclarationOpeningBrace": 1, 275 | "FunctionDeclarationClosingBrace": 1, 276 | "FunctionExpressionOpeningBrace": 1, 277 | "FunctionExpressionClosingBrace": 1, 278 | "FunctionName": 1, 279 | "IIFEClosingParentheses": 0, 280 | "IfStatementConditionalOpening": 1, 281 | "IfStatementConditionalClosing": 0, 282 | "IfStatementOpeningBrace": 1, 283 | "IfStatementClosingBrace": 1, 284 | "ElseStatementOpeningBrace": 1, 285 | "ElseStatementClosingBrace": 1, 286 | "ElseIfStatementOpeningBrace": 1, 287 | "ElseIfStatementClosingBrace": 1, 288 | "LineComment": 1, 289 | "LogicalExpressionOperator": 1, 290 | "MemberExpressionClosing": 0, 291 | "ObjectExpressionOpeningBrace": -1, 292 | "ObjectExpressionClosingBrace": 1, 293 | "ObjectPatternOpeningBrace": 1, 294 | "ObjectPatternClosingBrace": 1, 295 | "ObjectPatternComma": 0, 296 | "PropertyName": 1, 297 | "PropertyValue": 1, 298 | "ParameterComma": 0, 299 | "ParameterDefault": 1, 300 | "ParameterList": 0, 301 | "SwitchDiscriminantOpening": 1, 302 | "SwitchDiscriminantClosing": 0, 303 | "ThrowKeyword": 1, 304 | "TryKeyword": -1, 305 | "TryOpeningBrace": 1, 306 | "TryClosingBrace": 1, 307 | "UnaryExpressionOperator": 0, 308 | "VariableName": 1, 309 | "VariableValue": 1, 310 | "WhileStatementConditionalOpening": 1, 311 | "WhileStatementConditionalClosing": 0, 312 | "WhileStatementOpeningBrace": 1, 313 | "WhileStatementClosingBrace": 1 314 | }, 315 | "after": { 316 | "ArrayExpressionOpening": 1, 317 | "ArrayExpressionClosing": 0, 318 | "ArrayExpressionComma": 1, 319 | "ArrayPatternOpening": 1, 320 | "ArrayPatternClosing": 0, 321 | "ArrayPatternComma": 1, 322 | "ArrowFunctionExpressionArrow": 1, 323 | "ArrowFunctionExpressionOpeningBrace": 0, 324 | "ArrowFunctionExpressionClosingBrace": 0, 325 | "ArgumentComma": 1, 326 | "ArgumentList": 0, 327 | "AssignmentOperator": 1, 328 | "BinaryExpression": 0, 329 | "BinaryExpressionOperator": 1, 330 | "BlockComment": 1, 331 | "CallExpression": -1, 332 | "CallExpressionOpeningParentheses": -1, 333 | "CallExpressionClosingParentheses": -1, 334 | "CatchParameterList": 0, 335 | "CatchOpeningBrace": 1, 336 | "CatchClosingBrace": 1, 337 | "CatchKeyword": 1, 338 | "ClassDeclarationOpeningBrace": 1, 339 | "ClassDeclarationClosingBrace": 1, 340 | "CommaOperator": 1, 341 | "ConditionalExpressionConsequent": 1, 342 | "ConditionalExpressionTest": 1, 343 | "DoWhileStatementOpeningBrace": 1, 344 | "DoWhileStatementClosingBrace": 1, 345 | "DoWhileStatementBody": 1, 346 | "EmptyStatement": 0, 347 | "ExpressionOpeningParentheses": 0, 348 | "FinallyKeyword": -1, 349 | "FinallyOpeningBrace": 1, 350 | "FinallyClosingBrace": 1, 351 | "ForInStatement": 1, 352 | "ForInStatementExpressionOpening": 0, 353 | "ForInStatementExpressionClosing": 1, 354 | "ForInStatementOpeningBrace": 1, 355 | "ForInStatementClosingBrace": 1, 356 | "ForStatement": 1, 357 | "ForStatementExpressionOpening": 0, 358 | "ForStatementExpressionClosing": 1, 359 | "ForStatementClosingBrace": 1, 360 | "ForStatementOpeningBrace": 1, 361 | "ForStatementSemicolon": 1, 362 | "FunctionReservedWord": 0, 363 | "FunctionName": 0, 364 | "FunctionExpressionOpeningBrace": 1, 365 | "FunctionExpressionClosingBrace": 0, 366 | "FunctionDeclarationOpeningBrace": 1, 367 | "FunctionDeclarationClosingBrace": 1, 368 | "IIFEOpeningParentheses": 0, 369 | "IfStatementConditionalOpening": 0, 370 | "IfStatementConditionalClosing": 1, 371 | "IfStatementOpeningBrace": 1, 372 | "IfStatementClosingBrace": 1, 373 | "ElseStatementOpeningBrace": 1, 374 | "ElseStatementClosingBrace": 1, 375 | "ElseIfStatementOpeningBrace": 1, 376 | "ElseIfStatementClosingBrace": 1, 377 | "MemberExpressionOpening": 0, 378 | "LogicalExpressionOperator": 1, 379 | "ObjectExpressionOpeningBrace": 1, 380 | "ObjectExpressionClosingBrace": 0, 381 | "ObjectPatternOpeningBrace": 1, 382 | "ObjectPatternClosingBrace": 0, 383 | "ObjectPatternComma": 1, 384 | "PropertyName": 0, 385 | "PropertyValue": 0, 386 | "ParameterComma": 1, 387 | "ParameterDefault": 1, 388 | "ParameterList": 0, 389 | "SwitchDiscriminantOpening": 0, 390 | "SwitchDiscriminantClosing": 1, 391 | "ThrowKeyword": 1, 392 | "TryKeyword": -1, 393 | "TryOpeningBrace": 1, 394 | "TryClosingBrace": 1, 395 | "UnaryExpressionOperator": 0, 396 | "VariableName": 1, 397 | "WhileStatementConditionalOpening": 0, 398 | "WhileStatementConditionalClosing": 1, 399 | "WhileStatementOpeningBrace": 1, 400 | "WhileStatementClosingBrace": 1 401 | } 402 | } 403 | } 404 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "eslint-config-rackt", 3 | "env": { 4 | "browser": true, 5 | "mocha": true, 6 | "node": true 7 | }, 8 | "rules": { 9 | "eol-last": 0 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OS or Editor files 2 | ._* 3 | .DS_Store 4 | Thumbs.db 5 | .idea 6 | 7 | # Files that might appear on external disks 8 | .Spotlight-V100 9 | .Trashes 10 | 11 | # Always-ignore extensions 12 | *~ 13 | *.diff 14 | *.err 15 | *.log 16 | *.orig 17 | *.pyc 18 | *.rej 19 | *.sass-cache 20 | *.sw? 21 | *.vi 22 | 23 | *.js.map 24 | node_modules/ 25 | npm-debug.log 26 | lib/ 27 | coverage 28 | _book 29 | examples/react/bundle.js 30 | -------------------------------------------------------------------------------- /modules/functions/hsl.js: -------------------------------------------------------------------------------- 1 | import isObject from '../utils/isObject' 2 | 3 | export default function hsl(h, s, l) { 4 | const values = isObject(h) ? [ h.hue, h.saturation, h.lightness ] : [ h, s, l ] 5 | return 'hsl(' + values.join(',') + ')' 6 | } 7 | -------------------------------------------------------------------------------- /modules/functions/hsla.js: -------------------------------------------------------------------------------- 1 | import isObject from '../utils/isObject' 2 | 3 | export default function hsla(h, s, l, a) { 4 | const values = isObject(h) ? [ h.hue, h.saturation, h.lightness, h.alpha ] : [ h, s, l, a ] 5 | return 'hsla(' + values.join(',') + ')' 6 | } 7 | -------------------------------------------------------------------------------- /modules/functions/matrix.js: -------------------------------------------------------------------------------- 1 | import isObject from '../utils/isObject' 2 | 3 | export default function matrix(a, b, c, d, x, y) { 4 | const values = isObject(a) ? [ a.a, a.b, a.c, a.d, a.x, a.y ] : [ a, b, c, d, x, y ] 5 | return 'matrix(' + values.join(',') + ')' 6 | } 7 | -------------------------------------------------------------------------------- /modules/functions/matrix3d.js: -------------------------------------------------------------------------------- 1 | import isObject from '../utils/isObject' 2 | 3 | export default function matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) { 4 | const values = isObject(a1) ? [ a1.a1, a1.b1, a1.c1, a1.d1, a1.a2, a1.b2, a1.c2, a1.d2, a1.a3, a1.b3, a1.c3, a1.d3, a1.a4, a1.b4, a1.c4, a1.d4 ] : [ a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4 ] 5 | return 'matrix3d(' + values.join(',') + ')' 6 | } 7 | -------------------------------------------------------------------------------- /modules/functions/perspective.js: -------------------------------------------------------------------------------- 1 | export default function perspective(p) { 2 | return 'perspective(' + p + ')' 3 | } 4 | -------------------------------------------------------------------------------- /modules/functions/rgb.js: -------------------------------------------------------------------------------- 1 | import isObject from '../utils/isObject' 2 | 3 | export default function rgb(r, g, b) { 4 | const values = isObject(r) ? [ r.red, r.green, r.blue ] : [ r, g, b ] 5 | return 'rgb(' + values.join(',') + ')' 6 | } 7 | -------------------------------------------------------------------------------- /modules/functions/rgba.js: -------------------------------------------------------------------------------- 1 | import isObject from '../utils/isObject' 2 | 3 | export default function rgba(r, g, b, a) { 4 | const values = isObject(r) ? [ r.red, r.green, r.blue, r.alpha ] : [ r, g, b, a ] 5 | return 'rgba(' + values.join(',') + ')' 6 | } 7 | -------------------------------------------------------------------------------- /modules/functions/rotate.js: -------------------------------------------------------------------------------- 1 | import applyUnitToNumber from '../utils/applyUnitToNumber' 2 | 3 | export default function rotate(x) { 4 | return 'rotate(' + applyUnitToNumber(x, 'deg') + ')' 5 | } 6 | -------------------------------------------------------------------------------- /modules/functions/rotate3d.js: -------------------------------------------------------------------------------- 1 | import isObject from '../utils/isObject' 2 | import applyUnitToNumbers from '../utils/applyUnitToNumbers' 3 | 4 | export default function rotate3d(x, y, z) { 5 | const values = isObject(x) ? [ x.x, x.y, x.z ] : [ x, y, z ] 6 | return 'rotate3d(' + applyUnitToNumbers(values, 'deg').join(',') + ')' 7 | } 8 | -------------------------------------------------------------------------------- /modules/functions/rotateX.js: -------------------------------------------------------------------------------- 1 | import applyUnitToNumber from '../utils/applyUnitToNumber' 2 | 3 | export default function rotateX(x) { 4 | return 'rotateX(' + applyUnitToNumber(x, 'deg') + ')' 5 | } 6 | -------------------------------------------------------------------------------- /modules/functions/rotateY.js: -------------------------------------------------------------------------------- 1 | import applyUnitToNumber from '../utils/applyUnitToNumber' 2 | 3 | export default function rotateY(y) { 4 | return 'rotateY(' + applyUnitToNumber(y, 'deg') + ')' 5 | } 6 | -------------------------------------------------------------------------------- /modules/functions/rotateZ.js: -------------------------------------------------------------------------------- 1 | import applyUnitToNumber from '../utils/applyUnitToNumber' 2 | 3 | export default function rotateZ(z) { 4 | return 'rotateZ(' + applyUnitToNumber(z, 'deg') + ')' 5 | } 6 | -------------------------------------------------------------------------------- /modules/functions/scale.js: -------------------------------------------------------------------------------- 1 | import isObject from '../utils/isObject' 2 | 3 | export default function scale(x, y) { 4 | const values = isObject(x) ? [ x.x, x.y ] : [ x, y ] 5 | if (typeof values[1] === 'undefined') values[1] = values[0] 6 | return 'scale(' + values.join(',') + ')' 7 | } 8 | -------------------------------------------------------------------------------- /modules/functions/scale3d.js: -------------------------------------------------------------------------------- 1 | import isObject from '../utils/isObject' 2 | 3 | export default function scale3d(x, y, z) { 4 | const values = isObject(x) ? [ x.x, x.y, x.z ] : [ x, y, z ] 5 | return 'scale3d(' + values.join(',') + ')' 6 | } 7 | -------------------------------------------------------------------------------- /modules/functions/scaleX.js: -------------------------------------------------------------------------------- 1 | export default function scaleX(x) { 2 | return 'scaleX(' + x + ')' 3 | } 4 | -------------------------------------------------------------------------------- /modules/functions/scaleY.js: -------------------------------------------------------------------------------- 1 | export default function scaleY(y) { 2 | return 'scaleY(' + y + ')' 3 | } 4 | -------------------------------------------------------------------------------- /modules/functions/scaleZ.js: -------------------------------------------------------------------------------- 1 | export default function scaleZ(z) { 2 | return 'scaleZ(' + z + ')' 3 | } 4 | -------------------------------------------------------------------------------- /modules/functions/skew.js: -------------------------------------------------------------------------------- 1 | import isObject from '../utils/isObject' 2 | import applyUnitToNumbers from '../utils/applyUnitToNumbers' 3 | 4 | export default function skew(x, y) { 5 | const values = isObject(x) ? [ x.x, x.y ] : [ x, y ] 6 | return 'skew(' + applyUnitToNumbers(values, 'deg').join(',') + ')' 7 | } 8 | -------------------------------------------------------------------------------- /modules/functions/skewX.js: -------------------------------------------------------------------------------- 1 | import applyUnitToNumber from '../utils/applyUnitToNumber' 2 | 3 | export default function skewX(x) { 4 | return 'skewX(' + applyUnitToNumber(x, 'deg') + ')' 5 | } 6 | -------------------------------------------------------------------------------- /modules/functions/skewY.js: -------------------------------------------------------------------------------- 1 | import applyUnitToNumber from '../utils/applyUnitToNumber' 2 | 3 | export default function skewY(x) { 4 | return 'skewY(' + applyUnitToNumber(x, 'deg') + ')' 5 | } 6 | -------------------------------------------------------------------------------- /modules/functions/translate.js: -------------------------------------------------------------------------------- 1 | import isObject from '../utils/isObject' 2 | import applyUnitToNumbers from '../utils/applyUnitToNumbers' 3 | 4 | export default function translate(x, y) { 5 | const values = isObject(x) ? [ x.x, x.y ] : [ x, y ] 6 | return 'translate(' + applyUnitToNumbers(values).join(',') + ')' 7 | } 8 | -------------------------------------------------------------------------------- /modules/functions/translate3d.js: -------------------------------------------------------------------------------- 1 | import isObject from '../utils/isObject' 2 | import applyUnitToNumbers from '../utils/applyUnitToNumbers' 3 | 4 | export default function translate(x, y, z) { 5 | const values = isObject(x) ? [ x.x, x.y, x.z ] : [ x, y, z ] 6 | return 'translate(' + applyUnitToNumbers(values).join(',') + ')' 7 | } 8 | -------------------------------------------------------------------------------- /modules/functions/translateX.js: -------------------------------------------------------------------------------- 1 | import applyUnitToNumber from '../utils/applyUnitToNumber' 2 | 3 | export default function translateX(x) { 4 | return 'translateX(' + applyUnitToNumber(x) + ')' 5 | } 6 | -------------------------------------------------------------------------------- /modules/functions/translateY.js: -------------------------------------------------------------------------------- 1 | import applyUnitToNumber from '../utils/applyUnitToNumber' 2 | 3 | export default function translateY(y) { 4 | return 'translateY(' + applyUnitToNumber(y) + ')' 5 | } 6 | -------------------------------------------------------------------------------- /modules/functions/translateZ.js: -------------------------------------------------------------------------------- 1 | import applyUnitToNumber from '../utils/applyUnitToNumber' 2 | 3 | export default function translateZ(z) { 4 | return 'translateZ(' + applyUnitToNumber(z) + ')' 5 | } 6 | -------------------------------------------------------------------------------- /modules/index.js: -------------------------------------------------------------------------------- 1 | export hsl from './functions/hsl' 2 | export hsla from './functions/hsla' 3 | export matrix from './functions/matrix' 4 | export matrix3d from './functions/matrix3d' 5 | export perspective from './functions/perspective' 6 | export rgb from './functions/rgb' 7 | export rgba from './functions/rgba' 8 | export rotate from './functions/rotate' 9 | export rotate3d from './functions/rotate3d' 10 | export rotateX from './functions/rotateX' 11 | export rotateY from './functions/rotateY' 12 | export rotateZ from './functions/rotateZ' 13 | export scale from './functions/scale' 14 | export scale3d from './functions/scale3d' 15 | export scaleX from './functions/scaleX' 16 | export scaleY from './functions/scaleY' 17 | export scaleZ from './functions/scaleZ' 18 | export skew from './functions/skew' 19 | export skewX from './functions/skewX' 20 | export skewY from './functions/skewY' 21 | export translate from './functions/translate' 22 | export translate3d from './functions/translate3d' 23 | export translateX from './functions/translateX' 24 | export translateY from './functions/translateY' 25 | export translateZ from './functions/translateZ' 26 | 27 | export multiple from './multiple' 28 | -------------------------------------------------------------------------------- /modules/multiple.js: -------------------------------------------------------------------------------- 1 | export default function multiple(...cssFunctions) { 2 | return cssFunctions.join(' ') 3 | } 4 | -------------------------------------------------------------------------------- /modules/utils/applyUnitToNumber.js: -------------------------------------------------------------------------------- 1 | export default function applyUnitToNumbers(value, unit = 'px') { 2 | // only transform number values other than 0 3 | // as 0 does not need a value anyway 4 | if (typeof value === 'number' && value !== 0) { 5 | return value + unit 6 | } 7 | 8 | return value 9 | } 10 | -------------------------------------------------------------------------------- /modules/utils/applyUnitToNumbers.js: -------------------------------------------------------------------------------- 1 | export default function applyUnitToNumbers(values, unit = 'px') { 2 | for (let i = 0, len = values.length; i < len; ++i) { 3 | const value = values[i] 4 | 5 | // only transform number values other than 0 6 | // as 0 does not need a value anyway 7 | if (typeof value === 'number' && value !== 0) { 8 | values[i] = value + unit 9 | } 10 | } 11 | 12 | return values 13 | } 14 | -------------------------------------------------------------------------------- /modules/utils/isObject.js: -------------------------------------------------------------------------------- 1 | export default function isObject(obj) { 2 | return typeof obj === 'object' && !Array.isArray(obj) 3 | } 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-functions", 3 | "version": "1.0.5", 4 | "description": "JavaScript functions to build CSS functions", 5 | "main": "lib/index.js", 6 | "files": [ 7 | "LICENSE", 8 | "README.md", 9 | "/lib", 10 | "/dist" 11 | ], 12 | "scripts": { 13 | "babel": "babel -d lib modules", 14 | "lint": "eslint modules", 15 | "precommit": "npm run lint && npm test", 16 | "prepare": "npm run precommit && npm run babel", 17 | "release": "npm run prepare && npm publish", 18 | "coverage": "istanbul cover node_modules/mocha/bin/_mocha -- --opts test/_setup/mocha.opts", 19 | "test": "mocha --opts test/_setup/mocha.opts" 20 | }, 21 | "repository": { 22 | "type": "git", 23 | "url": "git+ssh://git@github.com/cssinjs/css-functions.git" 24 | }, 25 | "keywords": [ 26 | "css", 27 | "functions", 28 | "jss", 29 | "css", 30 | "in", 31 | "js", 32 | "jsstyles", 33 | "cssinjs" 34 | ], 35 | "author": [ 36 | { 37 | "name": "Oleg Slobodskoi", 38 | "email": "oleg008@gmail.com" 39 | }, 40 | { 41 | "name": "Robin Frischmann", 42 | "email": "robin@rofrischmann.de" 43 | } 44 | ], 45 | "license": "MIT", 46 | "bugs": { 47 | "url": "https://github.com/cssinjs/css-functions/issues" 48 | }, 49 | "homepage": "https://github.com/cssinjs/css-functions", 50 | "devDependencies": { 51 | "babel": "^6.5.2", 52 | "babel-cli": "^6.6.0", 53 | "babel-core": "^6.6.0", 54 | "babel-eslint": "^5.0.0", 55 | "babel-plugin-add-module-exports": "^0.2.1", 56 | "babel-preset-es2015": "^6.16.0", 57 | "babel-preset-stage-0": "^6.5.0", 58 | "chai": "^3.5.0", 59 | "codeclimate-test-reporter": "^0.3.1", 60 | "cross-env": "^1.0.8", 61 | "esformatter": "^0.9.0", 62 | "esformatter-braces": "^1.2.1", 63 | "esformatter-collapse-objects": "^0.5.1", 64 | "esformatter-dot-notation": "^1.3.1", 65 | "esformatter-jsx": "^4.1.2", 66 | "esformatter-literal-notation": "^1.0.1", 67 | "esformatter-parseint": "^1.0.3", 68 | "esformatter-quote-props": "^1.0.2", 69 | "esformatter-quotes": "^1.0.3", 70 | "esformatter-remove-trailing-commas": "^1.0.1", 71 | "esformatter-spaced-lined-comment": "^2.0.1", 72 | "esformatter-var-each": "^2.1.0", 73 | "eslint": "^2.10.2", 74 | "eslint-config-rackt": "^1.1.1", 75 | "estraverse-fb": "^1.3.1", 76 | "istanbul": "^1.0.0-alpha.2", 77 | "mocha": "^2.4.5" 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | ## JavaScript functions to build CSS functions 2 | 3 | This package ships functions that return the equivalent CSS function syntax. 4 | There will be automatic value validation in non-production mode soon. 5 | 6 | ## Functions 7 | Right now we ship 25 functions.
8 | 9 | * `hsl(h, s, l)` 10 | * `hsla(h, s, l, a)` 11 | * `matrix(a, b, c, d, x, y)` 12 | * `matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)` 13 | * `perspective(p)` 14 | * `rgb(r, g, b)` 15 | * `rgba(r, g, b, a)` 16 | * `rotate(x, y)` 17 | * `rotate3d(x, y, z)` 18 | * `rotateX(x)` 19 | * `rotateY(y)` 20 | * `rotateZ(z)` 21 | * `scale(x, y)` 22 | * `scale3d(x, y, z)` 23 | * `scaleX(x)` 24 | * `scaleY(y)` 25 | * `scaleZ(z)` 26 | * `skew(x, y)` 27 | * `skewX(x)` 28 | * `skewY(y)` 29 | * `translate(x, y)` 30 | * `translate3d(x, y, z)` 31 | * `translateX(x)` 32 | * `translateY(y)` 33 | * `translateZ(z)` 34 | 35 | ### Parameter object notation 36 | All parameters can always be passed as a single objects as well.
37 | The keys always match the parameter name e.g. `rotate3d({ x, y, z })` except for the following color functions: 38 | 39 | * `hsl({ hue, saturation, lightness })` 40 | * `hsla({ hue, saturation, lightness, alpha })` 41 | * `rgb({ red, green, blue })` 42 | * `rgba({ red, green, blue, alpha })` 43 | 44 | ## Example 45 | ```javascript 46 | import { rgba, translate3d } from 'css-functions' 47 | 48 | // => 'rgba(255, 0, 255, 0.5)' 49 | const color = rgba(255, 0, 255, 0.5) 50 | const color = rgba({ 51 | red: 255, 52 | green: 0, 53 | blue: 255, 54 | alpha: 0.5 55 | }) 56 | 57 | // => 'translate3d(10px, 10%, 0)' 58 | const transform = translate3d('10px', '10%', 0) 59 | const transform = translate3d({ 60 | x: '10px', 61 | y: '10%', 62 | z: 0 63 | }) 64 | ``` 65 | 66 | ## Multiple functions 67 | To combine multiple functions safely, it ships the `multiple` API. 68 | It safely combines both returned strings separated by a whitespace. 69 | 70 | ```javascript 71 | import { translateX, scale, rotateX, multiple } from 'css-functions' 72 | 73 | // => 'translateX(10px) translateY(5%) scale(0.5, 0.5) rotateX(180deg)' 74 | const combined = multiple( 75 | translateX(10), 76 | translateY('5%'), 77 | scale(0.5, 0.5), 78 | rotateX(180) 79 | ) 80 | ``` 81 | 82 | ## Units 83 | As the above example shows, we add default units to some numbers. 84 | #### px 85 | * `translate` 86 | * `translate3d` 87 | * `translateX` 88 | * `translateY` 89 | * `translateZ` 90 | 91 | #### deg 92 | * `rotate` 93 | * `rotate3d` 94 | * `rotateX` 95 | * `rotateY` 96 | * `rotateZ` 97 | * `skew` 98 | * `skewX` 99 | * `skewY` 100 | -------------------------------------------------------------------------------- /test/_setup/mocha.opts: -------------------------------------------------------------------------------- 1 | --recursive 2 | --require test/_setup/test-setup.js 3 | --compilers js:babel-core/register 4 | -------------------------------------------------------------------------------- /test/_setup/test-setup.js: -------------------------------------------------------------------------------- 1 | var chai = require('chai') 2 | 3 | global.expect = chai.expect 4 | -------------------------------------------------------------------------------- /test/multiple-test.js: -------------------------------------------------------------------------------- 1 | import multiple from '../modules/multiple' 2 | 3 | describe('Combining multiple css functions', () => { 4 | it('should concatenate each function', () => { 5 | expect(multiple('translateX(30px)', 'translateY(40px)')).to.eql('translateX(30px) translateY(40px)') 6 | }) 7 | }) 8 | -------------------------------------------------------------------------------- /test/utils/applyUnitToNumber-test.js: -------------------------------------------------------------------------------- 1 | import applyUnitToNumber from '../../modules/utils/applyUnitToNumber' 2 | 3 | describe('Applying a unit to a number', () => { 4 | it('should default to px', () => { 5 | expect(applyUnitToNumber(3)).to.eql('3px') 6 | }) 7 | 8 | it('should use the passed unit', () => { 9 | expect(applyUnitToNumber(3, 'deg')).to.eql('3deg') 10 | }) 11 | 12 | it('should not apply a unit to strings', () => { 13 | expect(applyUnitToNumber('3px')).to.eql('3px') 14 | }) 15 | }) 16 | -------------------------------------------------------------------------------- /test/utils/applyUnitToNumbers-test.js: -------------------------------------------------------------------------------- 1 | import applyUnitToNumbers from '../../modules/utils/applyUnitToNumbers' 2 | 3 | describe('Applying units to numbers', () => { 4 | it('should default to px', () => { 5 | expect(applyUnitToNumbers([ 3, 4 ])).to.eql([ '3px', '4px' ]) 6 | }) 7 | 8 | it('should use the passed unit', () => { 9 | expect(applyUnitToNumbers([ 3, 4 ], 'deg')).to.eql([ '3deg', '4deg' ]) 10 | }) 11 | 12 | it('should not apply units to strings', () => { 13 | expect(applyUnitToNumbers([ '3px', 4 ])).to.eql([ '3px', '4px' ]) 14 | }) 15 | }) 16 | --------------------------------------------------------------------------------