css-spring icon indicating copy to clipboard operation
css-spring copied to clipboard

Plugin use cases: autoprefix, minify etc.

Open codepunkt opened this issue 8 years ago • 1 comments

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 avatar Jan 26 '17 23:01 codepunkt

@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)
  })
})

codepunkt avatar Jan 27 '17 18:01 codepunkt