Split CSS files to make it possible to pick up individual effects [AMP Support]

[marcelovani]

I really like this library and I want to use it with AMP see https://www.ampproject.org/

The problem
AMP validator limits the size of the CSS to 50kb.
The generated hover.css alone uses 115kb.

Proposed solution
The ability to generate single CSS files for each effect.
This would make it possible for example, to import only the effects I want, i.e.

@import 'hover.css/css/float-shadow';

This library uses this approach https://github.com/basscss/addons

import 'basscss-addons/modules/btn';
@import 'basscss-addons/modules/btn-primary';
@import 'basscss-addons/modules/btn-outline';
@import 'basscss-addons/modules/btn-sizes';

See https://github.com/ampproject/ampstart/blob/master/css/core.css

That makes it possible to use this library with AMP

[Manuel-Suarez-Abascal]

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.

[marcelovani]

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

[jwv]

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();
}