modules/Transformer.js
/**
 * Generates a object with CSS key-value pairs out of a CSS string
 * @param {string} CSS - CSS string that gets objectified
 */
Generates a object with CSS key-value pairs out of a CSS string
@param {string} CSS - CSS string that gets objectified
Generates a object with CSS key - value pairs out of a CSS string @param { string } CSS - CSS string that gets objectified
function toObject(CSS, options = { }) {
  const replacer = options.replacer || { '.': '' }
  const replacePrefixes = Object.keys(replacer)
  const replacerRegExp = replacePrefixes.map(prefix => '[' + prefix + ']').join('|')
  const selectors = CSS.match(new RegExp('(' + replacerRegExp + ')?[a-z0-9-_:\(\) ]*{[^}]*}', 'g'))
  if (selectors && selectors.length > 0) {
    return selectors.reduce((rules, rule) => {
      const selector = rule.match(/[^{]*/)[0]
      const styles = rule.replace(selector, '')
      const className = replacePrefixes.reduce((transformedClassName, prefix) => {
        if (transformedClassName.indexOf(prefix) === 0) {
          transformedClassName = transformedClassName.replace(prefix, replacer[prefix])
        }
        return transformedClassName
      }, selector.trim())
      rules[className] = toObject(styles.replace(new RegExp('{|}', 'g'), ''))
      return rules
    }, { })
  }
  return CSS.split(';').reduce((rules, rule) => {
    let [ property, value ] = rule.split(':')
    value = value.trim()
    if (value) {
      const numberValue = parseFloat(value)
      if (numberValue == value || numberValue == value.replace('px', '')) { 
        value = numberValue
      }
      property = dashToCamelCase(property.trim())
      if (rules.hasOwnProperty(property)) {
        value = [ rules[property] ].concat(value)
      }
      rules[property] = value
    }
    return rules
  }, { })
}
function toObject ( CSS , options = { } ) { const replacer = options . replacer || { '.' : '' } const replacePrefixes = Object . keys ( replacer ) const replacerRegExp = replacePrefixes . map ( prefix => '[' + prefix + ']' ) . join ( '|' ) const selectors = CSS . match ( new RegExp ( '(' + replacerRegExp + ')?[a-z0-9-_:\(\) ]*{[^}]*}' , 'g' ) ) if ( selectors && selectors . length > 0 ) { return selectors . reduce ( ( rules , rule ) => { const selector = rule . match ( / [^{]* / ) [ 0 ] const styles = rule . replace ( selector , '' ) const className = replacePrefixes . reduce ( ( transformedClassName , prefix ) => { if ( transformedClassName . indexOf ( prefix ) === 0 ) { transformedClassName = transformedClassName . replace ( prefix , replacer [ prefix ] ) } return transformedClassName } , selector . trim ( ) ) rules [ className ] = toObject ( styles . replace ( new RegExp ( '{|}' , 'g' ) , '' ) ) return rules } , { } ) } return CSS . split ( ';' ) . reduce ( ( rules , rule ) => { let [ property , value ] = rule . split ( ':' ) value = value . trim ( ) if ( value ) { const numberValue = parseFloat ( value ) if ( numberValue == value || numberValue == value . replace ( 'px' , '' ) ) { value = numberValue } property = dashToCamelCase ( property . trim ( ) ) if ( rules . hasOwnProperty ( property ) ) { value = [ rules [ property ] ] . concat ( value ) } rules [ property ] = value } return rules } , { } ) }
Generates a object with CSS key-value pairs out of a CSS string
 @param {string} CSS - CSS string that gets objectified
Generates a object with CSS key - value pairs out of a CSS string @param { string } CSS - CSS string that gets objectified
// this checks if the string is made of selectors // Resolve nested CSS selector strings // seperate selector (className) and its styles // replace selector prefixes according the replacer settings // recursive objectify on pure styles string (without wrapping brackets) // splitting the rules to single statements // trimming both to remove padding whitespace // convert number strings to real numbers if possible // Improves usability and developer experience // eslint-disable-line // dash-casing the property // mutiple values / fallback values get added to an array // while the order stays the exact same order