UNPKG

polished

Version:

A lightweight toolset for writing styles in Javascript.

45 lines (43 loc) 1.5 kB
// @flow import type { Styles } from '../types/style' import PolishedError from '../internalHelpers/_errors' /** * Accepts any number of transition values as parameters for creating a single transition statement. You may also pass an array of properties as the first parameter that you would like to apply the same transition values to (second parameter). * @example * // Styles as object usage * const styles = { * ...transitions('opacity 1.0s ease-in 0s', 'width 2.0s ease-in 2s'), * ...transitions(['color', 'background-color'], '2.0s ease-in 2s') * } * * // styled-components usage * const div = styled.div` * ${transitions('opacity 1.0s ease-in 0s', 'width 2.0s ease-in 2s')}; * ${transitions(['color', 'background-color'], '2.0s ease-in 2s'),}; * ` * * // CSS as JS Output * * div { * 'transition': 'opacity 1.0s ease-in 0s, width 2.0s ease-in 2s' * 'transition': 'color 2.0s ease-in 2s, background-color 2.0s ease-in 2s', * } */ export default function transitions(...properties: Array<string | Array<string>>): Styles { if (Array.isArray(properties[0]) && properties.length === 2) { const value = properties[1] if (typeof value !== 'string') { throw new PolishedError(61) } const transitionsString = properties[0] .map((property: string): string => `${property} ${value}`) .join(', ') return { transition: transitionsString, } } else { return { transition: properties.join(', '), } } }