Skip to content

Commit 805f101

Browse files
bentzibentzbentzibentz
committed
add possibility to define which classes are generated
1 parent dfb2412 commit 805f101

3 files changed

Lines changed: 118 additions & 92 deletions

File tree

‎README.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ Install tailwindcss plugin as described above and add it to your tailwind.config
2222
plugins: [
2323
// Other plugins
2424
require('tailwindcss-animatecss')({
25+
classes: ['fade', 'bounce', 'lightSpeedOut'],
2526
settings: {
2627
animatedSpeed: 1000,
2728
heartBeatSpeed: 1000,
@@ -35,6 +36,22 @@ plugins: [
3536
]
3637
```
3738

39+
You want to determine yourself which classes are used? You just have to set these class names at the classes array. Caution, class names without dot, for example if you want ```.fade``` just add ```fade``` to the array.
40+
You can find all available class names further down.
41+
42+
Defining the classes is recommended to avoid to bloat your css with unused classes and keyframes.
43+
44+
```js
45+
plugins: [
46+
// Other plugins
47+
require('tailwindcss-animatecss')({
48+
classes: ['fade', 'bounce', ...],
49+
settings: {},
50+
variants: [],
51+
}),
52+
]
53+
```
54+
3855
If you want to prefix your CSS classes, use the tailwind prefix option:
3956

4057
```js

‎animate/animate.js‎

Lines changed: 100 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const keyframesSlideOut = require('./keyframes/slideOut');
1313
const keyframesFadeIn = require('./keyframes/fadeIn');
1414
const keyframesFadeOut = require('./keyframes/fadeOut');
1515

16-
module.exports = function ({ settings = {}, variants = ['responsive'] }) {
16+
module.exports = function ({ classes = [], settings = {}, variants = ['responsive'] }) {
1717
return function ({ e, addUtilities, prefix }) {
1818

1919
// set fallback if speed not defined
@@ -25,7 +25,88 @@ module.exports = function ({ settings = {}, variants = ['responsive'] }) {
2525
const animationDelaySpeed = settings.animationDelaySpeed ? settings.animationDelaySpeed : 500;
2626
const opacity = settings.opacity ? settings.opacity : 1;
2727

28-
addUtilities({
28+
const fallbackKeyframes = {
29+
'@keyframes bounce': keyframes.keyframeBounce,
30+
'@keyframes flash': keyframes.keyframeFlash,
31+
'@keyframes pulse': keyframes.keyframePulse,
32+
'@keyframes rubberBand': keyframes.keyframeRubberBand,
33+
'@keyframes shake': keyframes.keyframeShake,
34+
'@keyframes headShake': keyframes.keyframeHeadShake,
35+
'@keyframes swing': keyframes.keyframeSwing,
36+
'@keyframes tada': keyframes.keyframeTada,
37+
'@keyframes wobble': keyframes.keyframeWobble,
38+
'@keyframes jello': keyframes.keyframeJello,
39+
'@keyframes heartBeat': keyframes.keyframeHeartBeat,
40+
'@keyframes hinge': keyframes.keyframeHinge,
41+
'@keyframes jackInTheBox': keyframes.keyframeJackInTheBox,
42+
'@keyframes lightSpeedIn': keyframesLightSpeed.keyframeLightSpeedIn,
43+
'@keyframes lightSpeedOut': keyframesLightSpeed.keyframeLightSpeedOut,
44+
'@keyframes flip': keyframesFlip.keyframeFlip,
45+
'@keyframes flipInX': keyframesFlip.keyframeFlipInX,
46+
'@keyframes flipInY': keyframesFlip.keyframeFlipInY,
47+
'@keyframes flipOutX': keyframesFlip.keyframeFlipOutX,
48+
'@keyframes flipOutY': keyframesFlip.keyframeFlipOutY,
49+
'@keyframes rotateIn': keyframesRotateIn.keyframeRotateIn,
50+
'@keyframes rotateInDownLeft': keyframesRotateIn.keyframeRotateInDownLeft,
51+
'@keyframes rotateInDownRight': keyframesRotateIn.keyframeRotateInDownRight,
52+
'@keyframes rotateInUpLeft': keyframesRotateIn.keyframeRotateInUpLeft,
53+
'@keyframes rotateInUpRight': keyframesRotateIn.keyframeRotateInUpRight,
54+
'@keyframes rotateOut': keyframesRotateOut.keyframeRotateOut,
55+
'@keyframes rotateOutDownLeft': keyframesRotateOut.keyframeRotateOutDownLeft,
56+
'@keyframes rotateOutDownRight': keyframesRotateOut.keyframeRotateOutDownRight,
57+
'@keyframes rotateOutUpLeft': keyframesRotateOut.keyframeRotateOutUpLeft,
58+
'@keyframes rotateOutUpRight': keyframesRotateOut.keyframeRotateOutUpRight,
59+
'@keyframes rollIn': keyframesRoll.keyframeRollIn,
60+
'@keyframes rollOut': keyframesRoll.keyframeRollOut,
61+
'@keyframes zoomIn': keyframesZoomIn.keyframeZoomIn,
62+
'@keyframes zoomInDown': keyframesZoomIn.keyframeZoomInDown,
63+
'@keyframes zoomInLeft': keyframesZoomIn.keyframeZoomInLeft,
64+
'@keyframes zoomInRight': keyframesZoomIn.keyframeZoomInRight,
65+
'@keyframes zoomInUp': keyframesZoomIn.keyframeZoomInUp,
66+
'@keyframes bounceIn': keyframesBounceIn.keyframeBounceIn,
67+
'@keyframes bounceInDown': keyframesBounceIn.keyframeBounceInDown,
68+
'@keyframes bounceInLeft': keyframesBounceIn.keyframeBounceInLeft,
69+
'@keyframes bounceInRight': keyframesBounceIn.keyframeBounceInRight,
70+
'@keyframes bounceInUp': keyframesBounceIn.keyframeBounceInUp,
71+
'@keyframes bounceOut': keyframesBounceOut.keyframeBounceOut,
72+
'@keyframes bounceOutDown': keyframesBounceOut.keyframeBounceOutDown,
73+
'@keyframes bounceOutLeft': keyframesBounceOut.keyframeBounceOutLeft,
74+
'@keyframes bounceOutRight': keyframesBounceOut.keyframeBounceOutRight,
75+
'@keyframes bounceOutUp': keyframesBounceOut.keyframeBounceOutUp,
76+
'@keyframes zoomOut': keyframesZoomOut.keyframeZoomOut,
77+
'@keyframes zoomOutDown': keyframesZoomOut.keyframeZoomOutDown,
78+
'@keyframes zoomOutLeft': keyframesZoomOut.keyframeZoomOutLeft,
79+
'@keyframes zoomOutRight': keyframesZoomOut.keyframeZoomOutRight,
80+
'@keyframes zoomOutUp': keyframesZoomOut.keyframeZoomOutUp,
81+
'@keyframes slideInDown': keyframesSlideIn.keyframeSlideInDown,
82+
'@keyframes slideInLeft': keyframesSlideIn.keyframeSlideInLeft,
83+
'@keyframes slideInRight': keyframesSlideIn.keyframeSlideInRight,
84+
'@keyframes slideInUp': keyframesSlideIn.keyframeSlideInUp,
85+
'@keyframes slideOutDown': keyframesSlideOut.keyframeSlideOutDown,
86+
'@keyframes slideOutLeft': keyframesSlideOut.keyframeSlideOutLeft,
87+
'@keyframes slideOutRight': keyframesSlideOut.keyframeSlideOutRight,
88+
'@keyframes slideOutUp': keyframesSlideOut.keyframeSlideOutUp,
89+
'@keyframes fadeIn': keyframesFadeIn.keyframeFadeIn,
90+
'@keyframes fadeInDown': keyframesFadeIn.keyframeFadeInDown,
91+
'@keyframes fadeInDownBig': keyframesFadeIn.keyframeFadeInDownBig,
92+
'@keyframes fadeInLeft': keyframesFadeIn.keyframeFadeInLeft,
93+
'@keyframes fadeInLeftBig': keyframesFadeIn.keyframeFadeInLeftBig,
94+
'@keyframes fadeInRight': keyframesFadeIn.keyframeFadeInRight,
95+
'@keyframes fadeInRightBig': keyframesFadeIn.keyframeFadeInRightBig,
96+
'@keyframes fadeInUp': keyframesFadeIn.keyframeFadeInUp,
97+
'@keyframes fadeInUpBig': keyframesFadeIn.keyframeFadeInUpBig,
98+
'@keyframes fadeOut': keyframesFadeOut.keyframeFadeOut,
99+
'@keyframes fadeOutDown': keyframesFadeOut.keyframeFadeOutDown,
100+
'@keyframes fadeOutDownBig': keyframesFadeOut.keyframeFadeOutDownBig,
101+
'@keyframes fadeOutLeft': keyframesFadeOut.keyframeFadeOutLeft,
102+
'@keyframes fadeOutLeftBig': keyframesFadeOut.keyframeFadeOutLeftBig,
103+
'@keyframes fadeOutRight': keyframesFadeOut.keyframeFadeOutRight,
104+
'@keyframes fadeOutRightBig': keyframesFadeOut.keyframeFadeOutRightBig,
105+
'@keyframes fadeOutUp': keyframesFadeOut.keyframeFadeOutUp,
106+
'@keyframes fadeOutUpBig': keyframesFadeOut.keyframeFadeOutUpBig
107+
}
108+
109+
const fallbackUtilities = {
29110
'.animated': {
30111
animationDuration: `${animatedSpeed}ms`,
31112
animationFillMode: 'both'
@@ -214,7 +295,7 @@ module.exports = function ({ settings = {}, variants = ['responsive'] }) {
214295
animationName: 'bounceOutUp',
215296
},
216297
'.zoomOut': {
217-
animationName: 'zoomOut',
298+
animationName: 'zoomIn',
218299
},
219300
'.zoomOutDown': {
220301
animationName: 'zoomOutDown',
@@ -306,95 +387,23 @@ module.exports = function ({ settings = {}, variants = ['responsive'] }) {
306387
'.fadeOutUpBig': {
307388
animationName: 'fadeOutUpBig'
308389
},
309-
}, {
310-
variants,
311-
respectPrefix: true,
312-
respectImportant: false
313390
}
314-
);
315391

316-
addUtilities({
317-
'@keyframes bounce': keyframes.keyframeBounce,
318-
'@keyframes flash': keyframes.keyframeFlash,
319-
'@keyframes pulse': keyframes.keyframePulse,
320-
'@keyframes rubberBand': keyframes.keyframeRubberBand,
321-
'@keyframes shake': keyframes.keyframeShake,
322-
'@keyframes headShake': keyframes.keyframeHeadShake,
323-
'@keyframes swing': keyframes.keyframeSwing,
324-
'@keyframes tada': keyframes.keyframeTada,
325-
'@keyframes wobble': keyframes.keyframeWobble,
326-
'@keyframes jello': keyframes.keyframeJello,
327-
'@keyframes heartBeat': keyframes.keyframeHeartBeat,
328-
'@keyframes hinge': keyframes.keyframeHinge,
329-
'@keyframes jackInTheBox': keyframes.keyframeJackInTheBox,
330-
'@keyframes lightSpeedIn': keyframesLightSpeed.keyframeLightSpeedIn,
331-
'@keyframes lightSpeedOut': keyframesLightSpeed.keyframeLightSpeedOut,
332-
'@keyframes flip': keyframesFlip.keyframeFlip,
333-
'@keyframes flipInX': keyframesFlip.keyframeFlipInX,
334-
'@keyframes flipInY': keyframesFlip.keyframeFlipInY,
335-
'@keyframes flipOutX': keyframesFlip.keyframeFlipOutX,
336-
'@keyframes flipOutY': keyframesFlip.keyframeFlipOutY,
337-
'@keyframes rotateIn': keyframesRotateIn.keyframeRotateIn,
338-
'@keyframes rotateInDownLeft': keyframesRotateIn.keyframeRotateInDownLeft,
339-
'@keyframes rotateInDownRight': keyframesRotateIn.keyframeRotateInDownRight,
340-
'@keyframes rotateInUpLeft': keyframesRotateIn.keyframeRotateInUpLeft,
341-
'@keyframes rotateInUpRight': keyframesRotateIn.keyframeRotateInUpRight,
342-
'@keyframes rotateOut': keyframesRotateOut.keyframeRotateOut,
343-
'@keyframes rotateOutDownLeft': keyframesRotateOut.keyframeRotateOutDownLeft,
344-
'@keyframes rotateOutDownRight': keyframesRotateOut.keyframeRotateOutDownRight,
345-
'@keyframes rotateOutUpLeft': keyframesRotateOut.keyframeRotateOutUpLeft,
346-
'@keyframes rotateOutUpRight': keyframesRotateOut.keyframeRotateOutUpRight,
347-
'@keyframes rollIn': keyframesRoll.keyframeRollIn,
348-
'@keyframes rollOut': keyframesRoll.keyframeRollOut,
349-
'@keyframes zoomIn': keyframesZoomIn.keyframeZoomIn,
350-
'@keyframes zoomInDown': keyframesZoomIn.keyframeZoomInDown,
351-
'@keyframes zoomInLeft': keyframesZoomIn.keyframeZoomInLeft,
352-
'@keyframes zoomInRight': keyframesZoomIn.keyframeZoomInRight,
353-
'@keyframes zoomInUp': keyframesZoomIn.keyframeZoomInUp,
354-
'@keyframes bounceIn': keyframesBounceIn.keyframeBounceIn,
355-
'@keyframes bounceInDown': keyframesBounceIn.keyframeBounceInDown,
356-
'@keyframes bounceInLeft': keyframesBounceIn.keyframeBounceInLeft,
357-
'@keyframes bounceInRight': keyframesBounceIn.keyframeBounceInRight,
358-
'@keyframes bounceInUp': keyframesBounceIn.keyframeBounceInUp,
359-
'@keyframes bounceOut': keyframesBounceOut.keyframeBounceOut,
360-
'@keyframes bounceOutDown': keyframesBounceOut.keyframeBounceOutDown,
361-
'@keyframes bounceOutLeft': keyframesBounceOut.keyframeBounceOutLeft,
362-
'@keyframes bounceOutRight': keyframesBounceOut.keyframeBounceOutRight,
363-
'@keyframes bounceOutUp': keyframesBounceOut.keyframeBounceOutUp,
364-
'@keyframes zoomOut': keyframesZoomOut.keyframeZoomOut,
365-
'@keyframes zoomOutDown': keyframesZoomOut.keyframeZoomOutDown,
366-
'@keyframes zoomOutLeft': keyframesZoomOut.keyframeZoomOutLeft,
367-
'@keyframes zoomOutRight': keyframesZoomOut.keyframeZoomOutRight,
368-
'@keyframes zoomOutUp': keyframesZoomOut.keyframeZoomOutUp,
369-
'@keyframes slideInDown': keyframesSlideIn.keyframeSlideInDown,
370-
'@keyframes slideInLeft': keyframesSlideIn.keyframeSlideInLeft,
371-
'@keyframes slideInRight': keyframesSlideIn.keyframeSlideInRight,
372-
'@keyframes slideInUp': keyframesSlideIn.keyframeSlideInUp,
373-
'@keyframes slideOutDown': keyframesSlideOut.keyframeSlideOutDown,
374-
'@keyframes slideOutLeft': keyframesSlideOut.keyframeSlideOutLeft,
375-
'@keyframes slideOutRight': keyframesSlideOut.keyframeSlideOutRight,
376-
'@keyframes slideOutUp': keyframesSlideOut.keyframeSlideOutUp,
377-
'@keyframes fadeIn': keyframesFadeIn.keyframeFadeIn,
378-
'@keyframes fadeInDown': keyframesFadeIn.keyframeFadeInDown,
379-
'@keyframes fadeInDownBig': keyframesFadeIn.keyframeFadeInDownBig,
380-
'@keyframes fadeInLeft': keyframesFadeIn.keyframeFadeInLeft,
381-
'@keyframes fadeInLeftBig': keyframesFadeIn.keyframeFadeInLeftBig,
382-
'@keyframes fadeInRight': keyframesFadeIn.keyframeFadeInRight,
383-
'@keyframes fadeInRightBig': keyframesFadeIn.keyframeFadeInRightBig,
384-
'@keyframes fadeInUp': keyframesFadeIn.keyframeFadeInUp,
385-
'@keyframes fadeInUpBig': keyframesFadeIn.keyframeFadeInUpBig,
386-
'@keyframes fadeOut': keyframesFadeOut.keyframeFadeOut,
387-
'@keyframes fadeOutDown': keyframesFadeOut.keyframeFadeOutDown,
388-
'@keyframes fadeOutDownBig': keyframesFadeOut.keyframeFadeOutDownBig,
389-
'@keyframes fadeOutLeft': keyframesFadeOut.keyframeFadeOutLeft,
390-
'@keyframes fadeOutLeftBig': keyframesFadeOut.keyframeFadeOutLeftBig,
391-
'@keyframes fadeOutRight': keyframesFadeOut.keyframeFadeOutRight,
392-
'@keyframes fadeOutRightBig': keyframesFadeOut.keyframeFadeOutRightBig,
393-
'@keyframes fadeOutUp': keyframesFadeOut.keyframeFadeOutUp,
394-
'@keyframes fadeOutUpBig': keyframesFadeOut.keyframeFadeOutUpBig
395-
}, {
396-
respectPrefix: true,
397-
respectImportant: false
398-
});
392+
let utilities = {};
393+
let keyFrames = {};
394+
395+
if (classes && classes.length > 0) {
396+
classes.forEach((el) => {
397+
utilities[`.${el}`] = fallbackUtilities[`.${el}`];
398+
keyFrames[`@keyframes ${el}`] = fallbackKeyframes[`@keyframes ${el}`];
399+
});
400+
} else {
401+
utilities = fallbackUtilities;
402+
keyFrames = fallbackKeyframes;
403+
}
404+
405+
addUtilities(utilities, { variants, respectImportant: false });
406+
407+
addUtilities(keyFrames, { respectImportant: false });
399408
};
400409
};

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "tailwindcss-animatecss",
3-
"version": "0.2.10",
3+
"version": "0.3.0",
44
"description": "Add Animate CSS as Tailwind CSS plugin to your project.",
55
"main": "index.js",
66
"repository": {

0 commit comments

Comments
 (0)