import type { SelectorDecorator } from './types' ; import { join , tail } from './util' ; export const escape = ( typeof CSS !== 'undefined' && CSS . escape ) || ( ( className ) : string => className . replace ( /[!"#$%&'()*+,./:;<=>?@[\]^`{|}~]/g , '\\$&' ) ) ; const isGroupVariant = ( variant ) : boolean => variant . slice ( 0 , 7 ) === ':group-' ; const isPseudoVariant = ( variant ) : boolean => variant [ 0 ] === ':' && ! isGroupVariant ( variant ) ; export const isAtRuleVariant = ( variant ) : boolean => variant [ 0 ] === '@' ; export const toClassName = ( token , variants ) : string => { const base = join ( variants , '' ) ; return ( base && tail ( base ) + ':' ) + token ; } ; const createSelector = ( className , variants , selectorDecorator , tag ) : string => selectorDecorator ( variants . reduce ( ( selector , variant ) => ( isGroupVariant ( variant ) ? `.${ escape ( tag ( 'group' ) ) }:${ tail ( variant , 7 ) } ` : '' ) + selector + ( isPseudoVariant ( variant ) ? variant : '' ) , '.' + escape ( className ) ) ) ; export const createRule = ( className , variants , declaration , selectorDecorator , tag ) : string => variants . reduceRight ( ( rule , variant ) => ( isAtRuleVariant ( variant ) ? `${ variant }{${ rule }}` : rule ) , `${ createSelector ( className , variants , selectorDecorator , tag ) }{${ declaration }}` ) ;