1.0.0-beta.18

Author: esr360

dist/cell.scss

@@ -362,6 +362,9 @@ $extendOptions: true !default;
 // Custom parser to use for configuration
 $sassConfigParser: null !default;
 
+// Automatically generate CSS from module configuration
+$outputCSSFromConfig: false !default;
+
 // The variable to hold a single module (do not edit)
 $module: null !default;
 /// Cell Atom - Display property
@@ -479,6 +482,83 @@ $module: null !default;
 
   @return $smart-config;
 }
+/// Used to create a selector from context() arguments
+///
+/// @param {(string|list)} $block - The name of the module/component that has the context
+/// @param {string} $context - The context you wish to test
+@function create-selector-from-context($block, $context: null, $pipeContexts: false) {
+  $selector: ();
+  $pipedContexts: '';
+  $excludeRootSelector: false;
+
+  @if $pipeContexts {
+    @each $item in $context {
+      @if str-index($item, ':') == 1 {
+        $pipedContexts: $pipedContexts + $item;
+      }
+      @else {
+        $excludeRootSelector: true;
+        $pipedContexts: $pipedContexts + '[class*="#{$modifierGlue}#{$item}"]';
+      }
+    }
+    @if type-of($block) == 'string' and not $excludeRootSelector {
+      $selector: '.#{$block}#{$pipedContexts}, [class*="#{$block}#{$modifierGlue}"]#{$pipedContexts}';
+    }
+    @else {
+      $selector: '#{generate-chunk($block)}#{$pipedContexts}';
+    }
+  }
+
+  @else {
+    @if $context {
+      @each $item in $context {
+        @if str-index($item, ':') == 1 {
+          @if type-of($block) == 'string' {
+            $selector: append($selector, '.#{$block}#{$item}', comma);
+          }
+          $selector: append($selector, '#{generate-chunk($block)}#{$item}', comma);
+        }
+        @else {
+          $selector: append($selector, '#{generate-chunk($block)}[class*="#{$modifierGlue}#{$item}"]', comma);
+        }
+      }
+    }
+    @else {
+      @if type-of($block) == 'string' {
+        $selector: append($selector, '.#{$block}', comma);
+        $selector: append($selector, '[class*="#{$block}#{$modifierGlue}"]', comma);
+      }
+      @else {
+        $selector: append($selector, generate-chunk($block), comma);
+      }
+    }
+  }
+
+  @return $selector;
+}
+
+/// Generate a selector chunk from a $block list
+///
+/// @param {(string|list)} $block
+@function generate-chunk($block) {
+  $chunk: '';
+
+  @if type-of($block) == 'list' {
+    @for $i from 1 through length($block) {
+      @if $i == 1 {
+        $chunk: $chunk + '[class*="#{nth($block, $i)}#{$componentGlue}"]';
+      }
+      @else {
+        $chunk: $chunk + '[class*="#{$componentGlue}#{nth($block, $i)}"]';
+      }
+    }
+  }
+  @else {
+    $chunk: '[class*="#{$block}#{$modifierGlue}"]';
+  }
+
+  @return $chunk;
+}
 /// List of known and valid CSS properties
 ///
 /// @type Map
@@ -1589,7 +1669,7 @@ $css-properties: (
 /// Get CSS from Sass map
 ///
 /// @param {map} $map - The map from which to get CSS
-@mixin get-css-from-map($map, $sub-component: false) {
+@mixin get-css-from-map($map, $sub-component: false, $prevContext: false) {
   @each $property, $value in $map {
     @if type-of($property) == 'string' {
       // $property defines new Modifier
@@ -1613,33 +1693,75 @@ $css-properties: (
         }
       }
 
-      // $property defines new Modifier
+      // Determine if current node is queried modifier/state
       @else if str-index($property, 'is-') == 1 {
         @include modifier(str-replace($property, 'is-', '')) {
           @include get-css-from-map($value);
         }
       }
 
-      // $property defines new Modifier on parent element
-      @else if str-index($property, '-is-') {
-        $component: str-slice($property, 1, str-index($property, '-is-') - 1);
-        $context: str-slice($property, str-index($property, '-is-') + 4, str-length($property));
+      // Determine if parent module/block is queried modifier/state
+      @else if str-index($property, '$-is-') == 1 or str-index($property, '$:') == 1 {
+        $context: if(str-index($property, '$:') == 1, str-replace($property, '$', ''), str-replace($property, '$-is-', ''));
 
-        @include context(($module, $component), $context) {
+        @include context($module, $context) {
           @include get-css-from-map($value);
         }
       }
 
-      // $property defines new context
-      @else if str-index($property, 'with-') == 1 {
-        @include context($module, str-replace($property, 'with-', '')) {
-          @include get-css-from-map($value);
+      // Determine if previously specified parent component is queried modifier/state
+      @else if str-index($property, 'and-is-') == 1 or str-index($property, 'and:') == 1 {
+        $context: if(
+          str-index($property, 'and-is-'),
+          str-replace($property, 'and-is-', ''),
+          str-slice($property, str-index($property, ':'), str-length($property))
+        );
+        $prevContextVal: ('block': nth($prevContext, 1), 'context': nth($prevContext, 2));
+        $prevChunk: create-selector-from-context(map-get($prevContextVal, 'block'), map-get($prevContextVal, 'context'));
+        $newContextVal: append(map-get($prevContextVal, 'context'), $context);
+        $newChunk: create-selector-from-context(map-get($prevContextVal, 'block'), $newContextVal, $pipeContexts: true);
+
+        $selector: ();
+
+        @each $chunk in selector-parse(str-replace(inspect($newChunk), ' ', ', ')) {
+          @each $item in & {
+            $selector: append($selector, selector-replace($item, nth($prevChunk, 1), $chunk), comma);
+          }
+        }
+
+        @at-root {
+          #{$selector} {
+            @include get-css-from-map($value, $prevContext: (map-get($prevContextVal, 'block'), $newContextVal));
+          }
         }
       }
 
-      // $property defines new context
-      @else if str-index($property, 'within-') == 1 {
-        @include context(str-replace($property, 'within-', '')) {
+      // Determine if specified parent component/module is queried modifier/state
+      @else if str-index($property, '-is-') or (str-index($property, ':') and str-index($property, ':') > 1) {
+        $component: if(
+          str-index($property, ':'),
+          str-slice($property, 1, str-index($property, ':') - 1),
+          str-slice($property, 1, str-index($property, '-is-') - 1)
+        );
+        $contextVal: if(
+          str-index($property, ':'),
+          str-slice($property, str-index($property, ':'), str-length($property)),
+          str-slice($property, str-index($property, '-is-') + 4, str-length($property))
+        );
+        $block: if(str-index($component, '$') == 1, str-slice($component, 2), $module);
+        $context: if(str-index($component, '$') == 1, ($block, $contextVal), (($block, $component), $contextVal));
+
+        @include context($context...) {
+          @include get-css-from-map($value, $prevContext: $context);
+        }
+      }
+
+      // Determine if current node is a child of the queried component/module
+      @else if str-index($property, 'with-') == 1 {
+        $component: str-replace($property, 'with-', '');
+        $context: if(str-index($component, '$') == 1, str-slice($component, 2), ($module, $component));
+
+        @include context($context) {
           @include get-css-from-map($value);
         }
       }
@@ -1975,7 +2097,7 @@ $css-properties: (
     $disable-output: map-get($config, 'disable-output');
   }
 
-  // @TODO this needs to identify if nested within itself, not in general
+  // @TODO this needs to identify if nested within itself, not nested in general
   $nested: &;
 
   @if not $nested {
@@ -1992,8 +2114,7 @@ $css-properties: (
   }
 
   $targetExists: variable-exists('config') and map-has-key($config, 'target');
-  // @TODO tidy up how $target is used here and in $modifier - also probably
-  // won't work for component()
+  // @TODO tidy up how $target is used here and in $modifier - also probably won't work for component()
   $target: if($targetExists, ('module': $module, 'target': map-get($config, 'target')), false) !global;
 
   @if not $disable-output {
@@ -2018,7 +2139,7 @@ $css-properties: (
   @include extend-modifiers;
   @include combine-modifiers;
 
-  @if variable-exists('config') {
+  @if variable-exists('config') and $outputCSSFromConfig {
     @if $module == map-get($config, 'name') or $target {
       @if type-of($target) == 'map' and map-get($target, 'module') == $module {
         #{map-get($target, 'target')} {
@@ -2281,37 +2402,13 @@ $css-properties: (
 }
 /// Apply styles to a component within a certain context
 ///
-/// @param {string} $block - The name of the module/component that has the context
-/// @param {string} $context - The context you wish to test
-@mixin context($block, $context: null) {
-  $selector: ();
-
-  @if type-of($block) == 'list' {
-    $block-from-list: false;
-    @each $item in $block {
-      $block-from-list: if($block-from-list, '#{$block-from-list}#{$componentGlue}#{$item}', $item);
-    }
-    $block: $block-from-list;
-  }
-
-  @if $context {
-    @each $item in $context {
-      @if str-index($item, ':') == 1 {
-        $selector: append($selector, '.#{$block}#{$item}', comma);
-        $selector: append($selector, '[class*="#{$block}#{$modifierGlue}"]#{$item}', comma);
-      }
-      @else {
-        $selector: append($selector, '[class*="#{$block}#{$modifierGlue}"][class*="#{$modifierGlue}#{$item}"]', comma);
-      }
-    }
-  }
-  @else {
-    $selector: append($selector, '.#{$block}', comma);
-    $selector: append($selector, '[class*="#{$block}#{$modifierGlue}"]', comma);
-  }
+/// @param {arglist} $context
+@mixin context($context...) {
+  $selector: create-selector-from-context($context...);
+  $scope: &;
 
-  @each $item in $selector {
-    @at-root #{$item} & {
+  @at-root #{$selector} {
+    #{$scope} {
       @content;
     }
   }