advanced-css-component-stylus/index.styl

Stylus lib to create modular CSS components

use('./plugin/callWithObjArg.js');

/* Global components map
======================== */
$ACComponents = {};

/* Mixin to add component
========================= */
ACCRegister($componentName, $componentVariationName, $componentVariationOptions = {}) {
  unless ($componentVariationOptions['$selector']) {
    $componentVariationOptions['$selector'] = $componentVariationName;
  }

  unless ($ACComponents[$componentName]) {
    $ACComponents[$componentName] = {};
  }

  $ACComponents[$componentName][$componentVariationName] = $componentVariationOptions;
}

/* Mixin to configure components map
==================================== */
ACCConfig($componentName, $componentVariationName, $componentVariationOptions) {
  // $components(all) > $component(ex: "inlineList") > $componentVariationName(ex: "dashboardModulesList")
  $componentOptions = $ACComponents[$componentName][$componentVariationName];
  $ACComponents[$componentName][$componentVariationName] = extend($componentOptions, $componentVariationOptions);
}

/* Mixin to call right placeholders
=================================== */
ACCExtend($placeholder, $skin) {
  $placeholderSkin = $placeholder + '-skin-' + $skin

  unless (selector-exists($placeholderSkin)) {
    $placeholderSkin = $placeholder + '-skin-default'
  }

  @extend {$placeholder}
  @extend {$placeholderSkin} !optional
}

/* Mixin to expose all components
=================================== */
ACCExpose() {
  for $component, $componentVariations in $ACComponents {
    for $componentVariationName, $componentVariationOptions in $componentVariations {
      fn = lookup($component);
      callWithObjArg(fn, $componentVariationOptions);
    }
  }
}