tailwindcss-3d
Version:
Add 3D transforms to your TailwindCSS project
95 lines (94 loc) • 4.44 kB
JavaScript
;
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _plugin = /*#__PURE__*/ _interop_require_default._(require("tailwindcss/plugin"));
var _cssanimations = require("./css-animations");
var _cssutilities = require("./css-utilities");
var _ensure = require("./utils/ensure");
// Default CSS variables, modelled from core
var DEFAULT_VARIABLE_VALUES = {
'--tw-perspective': 'none',
'--tw-translate-x': '0',
'--tw-translate-y': '0',
'--tw-translate-z': '0',
'--tw-rotate-x': '0',
'--tw-rotate-y': '0',
'--tw-rotate-z': '0',
'--tw-skew-x': '0',
'--tw-skew-y': '0',
'--tw-scale-x': '1',
'--tw-scale-y': '1',
'--tw-scale-z': '1'
};
var optionDefaults = {
legacy: false
};
var tailwindCss3d = _plugin.default.withOptions(function() {
var _ref = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : optionDefaults, _ref_legacy = _ref.legacy, legacy = _ref_legacy === void 0 ? optionDefaults.legacy : _ref_legacy;
var safeLegacy = (0, _ensure.ensureBoolean)(legacy, optionDefaults.legacy);
return function(api) {
var localAPI = api;
// Replace the transform core plugin defaults and add some new ones
localAPI.addDefaults('transform', DEFAULT_VARIABLE_VALUES);
var perspective = new _cssutilities.Perspective(localAPI, safeLegacy);
var transformStyle = new _cssutilities.TransformStyle(localAPI);
var translate = new _cssutilities.Translate(localAPI, safeLegacy);
var transform = new _cssutilities.Transform(localAPI, safeLegacy);
var scale = new _cssutilities.Scale(localAPI, safeLegacy);
var backface = new _cssutilities.Backface(localAPI);
var perspectiveOrigin = new _cssutilities.PerspectiveOrigin(localAPI);
var transformBox = new _cssutilities.TransformBox(localAPI);
var transformCore = new _cssutilities.TransformCore(localAPI, safeLegacy);
// New CSS Utilities
perspective.utilities();
transformStyle.utilities();
translate.utilities();
transform.utilities();
scale.utilities();
backface.utilities();
perspectiveOrigin.utilities();
transformBox.utilities();
transformCore.utilities();
};
}, function() {
var _ref = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : optionDefaults, _ref_legacy = _ref.legacy, legacy = _ref_legacy === void 0 ? optionDefaults.legacy : _ref_legacy;
var safeLegacy = (0, _ensure.ensureBoolean)(legacy, optionDefaults.legacy);
var spin = new _cssanimations.Spin(safeLegacy);
var bounce = new _cssanimations.Bounce(safeLegacy);
var bounceAndSpin = new _cssanimations.BounceAndSpin(safeLegacy);
return {
theme: {
// Set new theme defaults
perspective: _cssutilities.Perspective.defaultTheme,
transformStyle: _cssutilities.TransformStyle.defaultTheme,
backface: _cssutilities.Backface.defaultTheme,
perspectiveOrigin: _cssutilities.PerspectiveOrigin.defaultTheme,
transformBox: _cssutilities.TransformBox.defaultTheme,
spin: spin.defaultTheme,
bounce: bounce.defaultTheme,
bounceAndSpin: bounceAndSpin.defaultTheme,
extend: {
// Update the core transform transition property
transitionProperty: {
transform: safeLegacy ? 'transform' : 'perspective, translate, scale, transform, perspective, rotate'
},
// New CSS keyframes and animations
keyframes: function(pluginUtilities) {
return _object_spread._({}, spin.keyframes(), bounce.keyframes(pluginUtilities), bounceAndSpin.keyframes(pluginUtilities));
},
animation: function(pluginUtilities) {
return _object_spread._({}, spin.animation(pluginUtilities), bounce.animation(pluginUtilities), bounceAndSpin.animation(pluginUtilities));
}
}
},
// Disable some core plugins which are superceded by this plugin
corePlugins: {
rotate: false,
scale: false,
skew: false,
transform: false,
translate: false
}
};
});
module.exports = tailwindCss3d;