All files / src/adapters fela.js

100% Statements 12/12
100% Branches 29/29
100% Functions 4/4
100% Lines 12/12
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103  60x   60x 20x         40x     2x         5x         5x                 10x 10x   10x         10x                               10x                                                                                              
function stringifyDeclaration(declaration) {
  const prop = '"' + declaration.property + '":'
 
  if (typeof declaration.value === 'object') {
    return (
      prop + '{' + declaration.value.map(stringifyDeclaration).join(',\n') + '}'
    )
  }
 
  return prop + declaration.value
}
 
const defaultConfig = {
  reactFela: false,
  dynamicImport: false,
}
export default function felaAdapter(customConfig = {}) {
  const { dynamicImport, reactFela } = {
    ...defaultConfig,
    ...customConfig,
  }
 
  return ({
    style,
    variantStyleMap,
    className,
    cssFileName,
    resetClassName,
    classNameMap,
    moduleName,
  }) => {
    const hasVariations = Object.keys(classNameMap).length > 1
    const hasDynamicVariations = Object.keys(variantStyleMap).length > 0
 
    const imports = [
      hasVariations ? 'getClassNameFromVariantMap' : undefined,
      hasDynamicVariations ? 'getDynamicStyleFromVariantMap' : undefined,
    ].filter(Boolean)
 
    return (
      (!dynamicImport ? "import './" + cssFileName + ".css'\n" : '') +
      (reactFela ? "import { createComponent } from 'react-fela'\n" : '') +
      (imports.length > 0
        ? 'import { ' + imports.join(', ') + " } from '@elodin/runtime'\n\n"
        : '\n') +
      (hasVariations
        ? 'const variantClassNameMap = ' +
          JSON.stringify(classNameMap, null, 2) +
          '\n\n'
        : '') +
      (hasDynamicVariations
        ? 'const variantStyleMap = {\n' +
          Object.keys(variantStyleMap)
            .map(
              modifier =>
                "'" +
                modifier +
                "'" +
                ': (props = {}) => ({\n  ' +
                variantStyleMap[modifier]
                  .map(stringifyDeclaration)
                  .join(',\n  ') +
                '\n})'
            )
            .join(',\n') +
          '\n}' +
          '\n\n'
        : '') +
      (reactFela ? '' : 'export ') +
      'function ' +
      moduleName +
      (reactFela ? 'Style' : '') +
      '(props = {})' +
      ' {\n  ' +
      (dynamicImport ? "import('./" + cssFileName + ".css')\n  " : '') +
      'return {\n    ' +
      '_className: ' +
      (hasVariations
        ? "'" +
          resetClassName +
          " ' + " +
          "getClassNameFromVariantMap('" +
          className +
          "', variantClassNameMap, props)"
        : "'" + resetClassName + ' ' + className + "'") +
      ',\n    ' +
      style.map(stringifyDeclaration).join(',\n    ') +
      (hasDynamicVariations
        ? ',\n    ...getDynamicStyleFromVariantMap(variantStyleMap, props)'
        : '') +
      '\n  }\n}' +
      (reactFela
        ? '\nexport const ' +
          moduleName +
          ' = createComponent(' +
          moduleName +
          'Style' +
          ')'
        : '')
    )
  }
}