Split CSS files to make it possible to pick up individual effects [AMP Support] about hover HOT 3 OPEN

Just use SCSS.

Example:

# styles.scss
// import required files
@import '../node_modules/hover.css/scss/options';
@import '../node_modules/hover.css/scss/hacks';
@import '../node_modules/hover.css/scss/mixins';

// import just effects u need
@import '../node_modules/hover.css/scss/effects/2d-transitions/grow';

// Apply Hover to Element
a {
  @include grow();
}

from hover.

From the documentation:

A. Copy and Paste an Effect
If you plan on only using one or several effects, it's better practice to copy and paste an effect into your own stylesheet, so a user doesn't have to download css/hover.css in its entirety.

Assuming you want to use the Grow effect:

Download Hover.css

In css/hover.css, find the Grow CSS (each effect is named using a comment above it):

/* Grow */
.hvr-grow {
display: inline-block;
vertical-align: middle;
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
transition-duration: 0.3s;
transition-property: transform;
}

.hvr-grow:hover,
.hvr-grow:focus,
.hvr-grow:active {
transform: scale(1.1);
}
Copy this effect and then paste it into your own stylesheet.

In the HTML file which you'd like the effect to appear, add the class of .hvr-grow to your chosen element.

Example element before applying Hover.css effect:

Add to Basket
Example element after applying Hover.css effect:

Add to Basket
Note: As of 2.0.0 all Hover.css class names are prefixed with hvr- to prevent conflicts with other libraries/stylesheets. If using Sass/LESS, this can easily be changed using the $nameSpace/@namespace variable in scss/_options.scss or less/_options.less.

from hover.

I know I can copy and paste code but that is not scalable. If I want to keep the CSS up to date when this project is updated I would have to redo the manual task again.

My proposal is to look into splitting the effects into components that can be pulled in projects individually. Using this approach, it would be simple to use this into React or AMP themes for example.

Have a look at this project https://bitsrc.io/features
Some examples here https://blog.bitsrc.io/the-vanilla-and-flavouring-pattern-fcf07942a57a
and https://blog.bitsrc.io/how-to-use-sass-and-css-modules-with-create-react-app-83fa8b805e5e

from hover.