codepunkt / css-spring

Generate physics based css-keyframe animations for the css-in-js solution of your choice or plain css.
MIT License
314 stars 15 forks source link

Plugin use cases: autoprefix, minify etc. #8

Open codepunkt opened 7 years ago

codepunkt commented 7 years ago

for style prefixing, inline-style-prefixer could be used. could also use cssnano (thanks @oliverturner for the idea) and autoprefixer postcss plugins - especially when performed at build time as opposed to runtime (needs babel/webpack plugins first)

codepunkt commented 7 years ago

@rofrischmann's inline-style-prefixer is around 8.5kb and 2.5kb when used in static mode. i'd rather not have this included, but it might be added as a plugin. A quick idea:

plugin

import Prefixer from 'inline-style-prefixer'

export default (properties, options) => {
  const prefixer = new Prefixer(options)
  return prefixer.prefix(properties)
}

usage

import spring from 'css-spring'
import prefix from 'css-spring-prefixer'

const keyframes = spring(
  { transform: '0deg' },
  { transform: '15deg' },
  { plugins: [ prefix ]},
)

After calculation of keyframes, plugins could be applied in the order they are defined - like this:

plugins.forEach((plugin) => {
  const method = plugin.method || plugin
  const options = plugin.options || {}

  Object.keys(keyframes).forEach((percent) => {
    keyframes[percent] = method(keyframes[percent], options)
  })
})