stylefire - npm Package Compare versions

Comparing version 1.2.10 to 1.2.11

CHANGELOG.md

@@ -5,2 +5,8 @@ # Changelog
 
+## [1.2.11] 2018-04-04
+
+### Fixed
+
+- `originX` and `originY` are now set as a single style value, as `transform-origin-` axis-specific values aren't supported in Firefox.
+
 ## [1.2.10] 2018-04-04
@@ -7,0 +13,0 @@

css/render.js

@@ -11,4 +11,14 @@ "use strict";
     originX: 'transformOriginX',
-    originY: 'transformOriginY'
+    originY: 'transformOriginY',
+    originZ: 'transformOriginZ'
 };
+var NUMBER = 'number';
+var OBJECT = 'object';
+var COLON = ':';
+var SEMI_COLON = ';';
+var TRANSFORM_ORIGIN = 'transform-origin';
+var TRANSFORM = 'transform';
+var TRANSLATE_Z = 'translateZ';
+var TRANSFORM_NONE = ';transform: none';
+var styleRule = function (key, value) { return "" + SEMI_COLON + key + COLON + value; };
 function buildStylePropertyString(state, changedValues, enableHardwareAcceleration) {
@@ -20,2 +30,3 @@ if (changedValues === void 0) { changedValues = true; }
     var transformString = '';
+    var hasTransformOrigin = false;
     var transformIsDefault = true;
@@ -44,3 +55,3 @@ var hasTransform = false;
         var valueType = value_types_1.default(key);
-        if (valueType && (typeof value === 'number' || typeof value === 'object') && valueType.transform) {
+        if (valueType && (typeof value === NUMBER || typeof value === OBJECT) && valueType.transform) {
             if (isTransformKey && (valueType.default && value !== valueType.default) || (!valueType.default && value !== 0)) {
@@ -53,18 +64,20 @@ transformIsDefault = false;
             transformString += key + '(' + value + ') ';
-            transformHasZ = (key === 'translateZ') ? true : transformHasZ;
+            transformHasZ = (key === TRANSLATE_Z) ? true : transformHasZ;
         }
+        else if (transform_props_1.isTransformOriginProp(key)) {
+            state[key] = value;
+            hasTransformOrigin = true;
+        }
         else {
-            propertyString += ';' + prefixer_1.default(key, true) + ':' + value;
+            propertyString += styleRule(prefixer_1.default(key, true), value);
         }
     }
+    if (hasTransformOrigin) {
+        propertyString += styleRule(TRANSFORM_ORIGIN, (state.transformOriginX || 0) + " " + (state.transformOriginY || 0) + " " + (state.transformOriginZ || 0));
+    }
     if (hasTransform) {
-        if (transformIsDefault) {
-            propertyString += ';transform: none';
+        if (!transformHasZ && enableHardwareAcceleration) {
+            transformString += TRANSLATE_Z + "(0)";
         }
-        else {
-            if (!transformHasZ && enableHardwareAcceleration) {
-                transformString += 'translateZ(0)';
-            }
-            propertyString += ';' + prefixer_1.default('transform', true) + ':' + transformString;
-        }
+        propertyString += styleRule(TRANSFORM, transformIsDefault ? TRANSFORM_NONE : transformString);
     }
@@ -71,0 +84,0 @@ return propertyString;

css/transform-props.d.ts

 export declare const isTransformProp: (key: string) => boolean;
 export declare const sortTransformProps: (a: string, b: string) => number;
+export declare const isTransformOriginProp: (key: string) => boolean;

css/transform-props.js

@@ -5,2 +5,4 @@ "use strict";
 var order = ['translate', 'scale', 'rotate', 'skew', 'transformPerspective'];
+var TRANSFORM_ORIGIN_X = 'transformOriginX';
+var TRANSFORM_ORIGIN_Y = 'transformOriginY';
 var transformProps = order.reduce(function (acc, key) {
@@ -18,2 +20,3 @@ return axes.reduce(function (axesAcc, axesKey) {
 exports.sortTransformProps = function (a, b) { return transformProps.indexOf(a) - transformProps.indexOf(b); };
+exports.isTransformOriginProp = function (key) { return key === TRANSFORM_ORIGIN_X || key === TRANSFORM_ORIGIN_Y; };
 //# sourceMappingURL=transform-props.js.map

css/value-types.js

@@ -41,5 +41,6 @@ "use strict";
     transformOriginX: style_value_types_1.percent,
-    transformOriginY: style_value_types_1.percent
+    transformOriginY: style_value_types_1.percent,
+    transformOriginZ: style_value_types_1.px
 };
 exports.default = function (key) { return valueTypes[key]; };
 //# sourceMappingURL=value-types.js.map

package.json

 {
   "name": "stylefire",
-  "version": "1.2.10",
+  "version": "1.2.11",
   "description": "Performant, simplified stylers for CSS, SVG, path and DOM scroll.",
@@ -5,0 +5,0 @@ "main": "index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

59891

increased by3.34%

Lines of code

560

increased by3.32%

No dependency changes