tailwindcss-3d
Version:
Add 3D transforms to your TailwindCSS project
211 lines (210 loc) • 10.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Transform", {
enumerable: true,
get: function() {
return Transform;
}
});
var _assert_this_initialized = require("@swc/helpers/_/_assert_this_initialized");
var _class_call_check = require("@swc/helpers/_/_class_call_check");
var _define_property = require("@swc/helpers/_/_define_property");
var _inherits = require("@swc/helpers/_/_inherits");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _create_super = require("@swc/helpers/_/_create_super");
var _lodash = require("lodash");
var _base = require("./base");
var _cssvalue = require("../utils/css-value");
var _dimension = require("../utils/dimension");
var _generateguard = require("../utils/generate-guard");
var Transform = /*#__PURE__*/ function(Base) {
"use strict";
_inherits._(Transform, Base);
var _super = _create_super._(Transform);
function Transform() {
_class_call_check._(this, Transform);
var _this;
_this = _super.apply(this, arguments);
_define_property._(_assert_this_initialized._(_this), "isProcessableValue", (0, _generateguard.generateGuard)(_lodash.isString, _lodash.isUndefined));
_define_property._(_assert_this_initialized._(_this), "isProcessableValues", (0, _generateguard.generateGuard)([
_lodash.isPlainObject,
function(maybe) {
return (0, _lodash.every)((0, _lodash.keys)(maybe), _lodash.isString);
},
function(maybe) {
return (0, _lodash.every)((0, _lodash.values)(maybe), _this.isProcessableValue);
}
]));
_define_property._(_assert_this_initialized._(_this), "normaliseValues", function(values) {
return _this.isProcessableValues(values) ? (0, _lodash.chain)(values).mapValues(function(angle) {
return (0, _cssvalue.normaliseAngleValue)(angle);
}).pickBy(function(angle, modifier) {
return (0, _lodash.isString)(modifier) && modifier !== '' && (0, _lodash.isString)(angle);
}).value() : {};
});
_define_property._(_assert_this_initialized._(_this), "utilities", function() {
var rotateValues = _this.normaliseValues(_this.api.theme('rotate'));
var skewValues = _this.normaliseValues(_this.api.theme('skew'));
var transformDeclarations = _this.legacy ? Transform.legacyDeclarations() : Transform.declarations();
_this.api.matchUtilities({
rotate: function(value) {
return _object_spread._({
'@defaults transform': {},
'--tw-rotate-z': value
}, _this.legacy ? transformDeclarations : {
rotate: 'var(--tw-rotate-z)'
});
},
'rotate-x': function(value) {
return _object_spread._({
'@defaults transform': {},
'--tw-rotate-x': value
}, transformDeclarations);
},
'rotate-y': function(value) {
return _object_spread._({
'@defaults transform': {},
'--tw-rotate-y': value
}, transformDeclarations);
},
'rotate-z': function(value) {
return _object_spread._({
'@defaults transform': {},
'--tw-rotate-z': value
}, _this.legacy ? transformDeclarations : {
rotate: 'var(--tw-rotate-z)'
});
}
}, {
values: rotateValues,
supportsNegativeValues: true
});
_this.api.matchUtilities({
'skew-x': function(value) {
return _object_spread._({
'@defaults transform': {},
'--tw-skew-x': value
}, transformDeclarations);
},
'skew-y': function(value) {
return _object_spread._({
'@defaults transform': {},
'--tw-skew-y': value
}, transformDeclarations);
}
}, {
values: skewValues,
supportsNegativeValues: true
});
});
return _this;
}
return Transform;
}(_base.Base);
_define_property._(Transform, "defaultFunctionValues", {
rotateX: 'var(--tw-rotate-x)',
rotateY: 'var(--tw-rotate-y)',
skewX: 'var(--tw-skew-x)',
skewY: 'var(--tw-skew-y)'
});
_define_property._(Transform, "defaultLegacyFunctionValues", _object_spread_props._(_object_spread._({}, Transform.defaultFunctionValues), {
translateX: 'var(--tw-translate-x)',
translateY: 'var(--tw-translate-y)',
translateZ: 'var(--tw-translate-z)',
rotateZ: 'var(--tw-rotate-z)',
scaleX: 'var(--tw-scale-x)',
scaleY: 'var(--tw-scale-y)',
scaleZ: 'var(--tw-scale-z)',
perspective: 'var(--tw-perspective)'
}));
_define_property._(Transform, "normaliseFunctionValues", function() {
var _ref = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, dimension = _ref.dimension, rotateX = _ref.rotateX, rotateY = _ref.rotateY, skewX = _ref.skewX, skewY = _ref.skewY;
var safeDimension = (0, _dimension.normaliseDimension)(dimension);
var safeValues = {
rotateX: (0, _cssvalue.normaliseAngleValue)(rotateX, Transform.defaultFunctionValues.rotateX),
rotateY: (0, _cssvalue.normaliseAngleValue)(rotateY, Transform.defaultFunctionValues.rotateY),
skewX: (0, _cssvalue.normaliseAngleValue)(skewX, Transform.defaultFunctionValues.skewX),
skewY: (0, _cssvalue.normaliseAngleValue)(skewY, Transform.defaultFunctionValues.skewY)
};
return [
{
'3d': "rotateX(".concat(safeValues.rotateX, ") rotateY(").concat(safeValues.rotateY, ")"),
'2d': ''
},
"skewX(".concat(safeValues.skewX, ")"),
"skewY(".concat(safeValues.skewY, ")")
].map(function(value) {
return (0, _lodash.isString)(value) ? value : value[safeDimension];
}).filter(function(value) {
return value !== '';
}).join(' ');
});
_define_property._(Transform, "normaliseLegacyFunctionValues", function() {
var _ref = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, dimension = _ref.dimension, translateX = _ref.translateX, translateY = _ref.translateY, translateZ = _ref.translateZ, rotateX = _ref.rotateX, rotateY = _ref.rotateY, rotateZ = _ref.rotateZ, skewX = _ref.skewX, skewY = _ref.skewY, scaleX = _ref.scaleX, scaleY = _ref.scaleY, scaleZ = _ref.scaleZ, perspective = _ref.perspective;
var safeDimension = (0, _dimension.normaliseDimension)(dimension);
var safeValues = {
translateX: (0, _cssvalue.normaliseLengthPercentageValue)(translateX, Transform.defaultLegacyFunctionValues.translateX),
translateY: (0, _cssvalue.normaliseLengthPercentageValue)(translateY, Transform.defaultLegacyFunctionValues.translateY),
translateZ: (0, _cssvalue.normaliseLengthPercentageValue)(translateZ, Transform.defaultLegacyFunctionValues.translateZ),
rotateX: (0, _cssvalue.normaliseAngleValue)(rotateX, Transform.defaultLegacyFunctionValues.rotateX),
rotateY: (0, _cssvalue.normaliseAngleValue)(rotateY, Transform.defaultLegacyFunctionValues.rotateY),
rotateZ: (0, _cssvalue.normaliseAngleValue)(rotateZ, Transform.defaultLegacyFunctionValues.rotateZ),
skewX: (0, _cssvalue.normaliseAngleValue)(skewX, Transform.defaultLegacyFunctionValues.skewX),
skewY: (0, _cssvalue.normaliseAngleValue)(skewY, Transform.defaultLegacyFunctionValues.skewY),
scaleX: (0, _cssvalue.normaliseNumberPercentageValue)(scaleX, Transform.defaultLegacyFunctionValues.scaleX, {
lowerLimit: 0
}),
scaleY: (0, _cssvalue.normaliseNumberPercentageValue)(scaleY, Transform.defaultLegacyFunctionValues.scaleY, {
lowerLimit: 0
}),
scaleZ: (0, _cssvalue.normaliseNumberPercentageValue)(scaleZ, Transform.defaultLegacyFunctionValues.scaleZ, {
lowerLimit: 0
}),
perspective: (0, _cssvalue.normaliseLengthValue)(perspective, Transform.defaultLegacyFunctionValues.perspective)
};
return [
{
'3d': "translate3d(".concat(safeValues.translateX, ", ").concat(safeValues.translateY, ", ").concat(safeValues.translateZ, ")"),
'2d': "translate(".concat(safeValues.translateX, ", ").concat(safeValues.translateY, ")")
},
{
'3d': "rotateX(".concat(safeValues.rotateX, ") rotateY(").concat(safeValues.rotateY, ") rotateZ(").concat(safeValues.rotateZ, ")"),
'2d': "rotate(".concat(safeValues.rotateZ, ")")
},
"skewX(".concat(safeValues.skewX, ")"),
"skewY(".concat(safeValues.skewY, ")"),
"scaleX(".concat(safeValues.scaleX, ")"),
"scaleY(".concat(safeValues.scaleY, ")"),
{
'3d': "scaleZ(".concat(safeValues.scaleZ, ")"),
'2d': ''
},
{
'3d': "perspective(".concat(safeValues.perspective, ")"),
'2d': ''
}
].map(function(value) {
return (0, _lodash.isString)(value) ? value : value[safeDimension];
}).filter(function(value) {
return value !== '';
}).join(' ');
});
_define_property._(Transform, "declarations", function() {
var values = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
var functionValues = Transform.normaliseFunctionValues(values);
return {
'--webkit-transform': functionValues,
transform: functionValues
};
});
_define_property._(Transform, "legacyDeclarations", function() {
var values = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
var functionValues = Transform.normaliseLegacyFunctionValues(values);
return {
'--webkit-transform': functionValues,
transform: functionValues
};
});