@xpd/tailwind-3dtransforms - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/index.js

 'use strict';var plugin=require('tailwindcss/plugin');function linearInterpolateKeys(start, end, interval) {
     let obj = {};
-    for (var i = start; i <= end; i += interval) {
+    for (let i = start; i <= end; i += interval) {
         obj[i] = i.toString();
     }
     return obj;
-}
-function mapInterpolateKeys(start, end, incrementor, mapper) {
-    let obj = {};
-    for (var i = start; i <= end; i = incrementor(i)) {
-        obj[i] = mapper(i);
-    }
-    return obj;
 }function perspective({ matchUtilities, theme }) {
     matchUtilities({
-        perspective: (value) => {
-            const unit = (value < 100) ? 'rem' : 'px';
+        perspective: (value, x) => {
+            // Check if value is a number. If not pass it.
+            if (/[^0-9]/.test(value)) {
+                return {
+                    perspective: `${value}`
+                };
+            }
             return {
-                perspective: `${value}${unit}`
+                perspective: `${value}px`
             };
@@ -25,12 +23,151 @@ }
         respectImportant: true,
-        type: 'number',
+        type: ['length', 'number'],
         values: theme('perspective')
     });
 }
-const perspectiveDefaults = Object.assign(mapInterpolateKeys(1, 10, (i) => 2 * i, (i) => i / 4), linearInterpolateKeys(0, 1200, 200));const tailwind3dTransformPlugin = plugin((pluginAPI) => {
+const perspectiveDefaults = linearInterpolateKeys(0, 1600, 200);function extendWithTransform(obj) {
+    // return {
+    //        ...obj,
+    //        ...transform3dGpu
+    // };
+    return obj;
+}function toUnit$2(value) {
+    return value;
+}
+function transformRotate(pluginAPI) {
+    pluginAPI.matchUtilities({
+        'rotate-x': function (value) {
+            return extendWithTransform({
+                '--tw-rotate-x': `${toUnit$2(value)}`
+            });
+        },
+        'rotate-y': function (value) {
+            return extendWithTransform({
+                '--tw-rotate-y': `${toUnit$2(value)}`
+            });
+        },
+        'rotate-z': function (value) {
+            // Default tw variable
+            return extendWithTransform({
+                '--tw-rotate': `${toUnit$2(value)}`
+            });
+        },
+        'rotate-3d': function (value) {
+            return extendWithTransform({
+                '--tw-rotate-3d': `${value}`
+            });
+        }
+    }, {
+        supportsNegativeValues: true,
+        values: pluginAPI.theme('rotate')
+    });
+}function toUnit$1(value) {
+    value = value.trim();
+    if (value.indexOf('px') > -1) {
+        if (value === 'px') {
+            // For translate-x-px similar
+            return '1px';
+        }
+        return value;
+    }
+    if (value == 'full') {
+        return '100%';
+    }
+    return value;
+}
+function transformTranslate(pluginAPI) {
+    pluginAPI.matchUtilities({
+        'translate-z': function (value) {
+            return extendWithTransform({
+                '--tw-translate-z': `${toUnit$1(value)}`
+            });
+        },
+        'translate-3d': function (value) {
+            let items = value.split(',');
+            while (items.length < 3) {
+                items.push(items[0]);
+            }
+            return extendWithTransform({
+                '--tw-translate-x': `${toUnit$1(items[0])}`,
+                '--tw-translate-y': `${toUnit$1(items[1])}`,
+                '--tw-translate-z': `${toUnit$1(items[2])}`,
+            });
+        }
+    }, {
+        supportsNegativeValues: true,
+        values: pluginAPI.theme('translate')
+    });
+}function toUnit(value) {
+    return value;
+}
+function transformScale(pluginAPI) {
+    pluginAPI.matchUtilities({
+        'scale-z': function (value) {
+            return extendWithTransform({
+                '--tw-scale-z': `${toUnit(value)}`
+            });
+        }
+    }, {
+        supportsNegativeValues: true,
+        values: pluginAPI.theme('scale')
+    });
+}const transform3dGpu = {
+    transform: `translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate)) rotate3d(var(--tw-rotate-3d)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scale3d(var(--tw-scale-x),var(--tw-scale-y),var(--tw-scale-z))`
+};
+const transform3dCpu = {
+    transform: `translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate)) rotate3d(var(--tw-rotate-3d)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scale3d(var(--tw-scale-x),var(--tw-scale-y),var(--tw-scale-z))`
+};function transformOverride(pluginAPI) {
+    pluginAPI.addUtilities({
+        '.transform': transform3dGpu,
+        '.transform-cpu': transform3dCpu,
+        '.transform-gpu': transform3dGpu,
+    });
+}function flip(pluginAPI) {
+    pluginAPI.addUtilities({
+        '.flip-x': {
+            '--tw-rotate-x': '180deg'
+        },
+        '.flip-y': {
+            '--tw-rotate-y': '180deg'
+        },
+        '.flip-z': {
+            '--tw-rotate': '180deg'
+        }
+    });
+}const tailwind3dTransformPlugin = plugin((pluginAPI) => {
     perspective(pluginAPI);
+    transformRotate(pluginAPI);
+    transformTranslate(pluginAPI);
+    transformScale(pluginAPI);
+    flip(pluginAPI);
+    transformOverride(pluginAPI);
+    pluginAPI.addBase({
+        ':root': {
+            '--tw-rotate-x': '0',
+            '--tw-rotate-y': '0',
+            '--tw-translate-z': '0',
+            '--tw-scale-z': '1',
+            '--tw-rotate-3d': '0,0,0,0deg'
+        }
+    });
 }, {
     theme: {
-        perspective: perspectiveDefaults
+        extend: {
+            perspective: perspectiveDefaults,
+            rotate: {
+                30: '30deg',
+                60: '60deg',
+                135: '135deg',
+                120: '120deg',
+                270: '270deg'
+            }
+        },
+        variables: {
+            '--tw-rotate-x': '0',
+            '--tw-rotate-y': '0',
+            '--tw-rotate-3d': '0,0,0,0deg',
+            '--tw-scale-z': '1',
+            '--tw-translate-z': '0',
+        }
     }
 });module.exports=tailwind3dTransformPlugin;

package.json

 {
   "name": "@xpd/tailwind-3dtransforms",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Tailwind plugin to enable css 3d transforms properties for tailwind.",
   "main": "dist/index.js",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "rollup -c rollup.config.js",
-    "dev": "rollup -c --watch"
+    "dev": "rollup -c --watch",
+    "test": "jest"
   },
@@ -32,2 +35,3 @@ "repository": {
   "devDependencies": {
+    "@jest/globals": "^29.5.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
@@ -40,6 +44,10 @@ "@rollup/plugin-typescript": "^11.1.0",
     "jest": "^29.5.0",
+    "jest-matcher-css": "^1.1.0",
+    "lightningcss": "^1.20.0",
+    "postcss": "^8.4.23",
     "rollup": "^3.20.7",
     "tailwindcss": "^3.3.1",
+    "ts-jest": "^29.1.0",
     "typescript": "^5.0.4"
   }
 }

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

8048

increased by129.42%

Lines of code

173

increased by408.82%

Worsened metrics

Dev dependency count

15

increased by50%

No dependency changes