bem-constructor 0.1.1 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 6a5f29c158ee72d70d4bea646b71b78f29b18952
-  data.tar.gz: e9b0a1cc67ad4210e097467dcf88c5acc9f424c8
+  metadata.gz: ebdae9d3c028fc32f09e818f79065b4f26facc6f
+  data.tar.gz: f8107c8e18d07ba716a4d5d94902509166cbb176
 SHA512:
-  metadata.gz: e9f4bcdffc6e15a96e16e33413cf8a193d2084b06d2adb8012d3053f79f710102e57b64f176e4e75452a85ee950f63dd3936caa37641c822f74ea12691d739b3
-  data.tar.gz: 586343de875a9775945fb9b1a9955f27b9f5abf4a9d16b31b22d641c60486ba8da3aa870ad90845635bdfa8592539387334804b796e34011a59843f560ee4f75
+  metadata.gz: cfcf0086fa4b32fc43fac20da997396757e135e75d81439f26aef7330aeb8091e39f591d9f330a03c229acbd0508e7b6da5011c8f46facd9607ce54364d9c6c1
+  data.tar.gz: 58ff5071cbbe9457143af0effa1fd4ff06b4a6133f4ed8733c6818eb35f9220fce275be41a2a4ca6876ba8c0d62c020cfb57014b889302812f682ef888a5de3c

data/CHANGELOG.md

@@ -1,3 +1,12 @@
+## 0.2
+
+* Fix wrong selector namespacing when hack() is called within a modifies-element() context
+* Add test suite
+
+## 0.1.1
+
+* Fix some copy and paste in Gemspec
+
 ## 0.1.0
 
 * Initial release

data/README.md

@@ -4,7 +4,7 @@ BEM Constructor is a Sass library for building immutable and namespaced BEM-styl
 
 By enforcing a consistent and programatic way of defining objects (blocks, elements and modifiers) it ensures a more structured, robust and secure object codebase that is easy to understand and maintain. Objects defined using the constructor are impossible to modify and reassign by mistake or omission.
 
-Jump to [🍔 The Burger Example™](#example) to see the mixins in action.
+Jump to [:hamburger: The Burger Example™](#example) to see the mixins in action.
 
 ## Key ideas
 
@@ -94,7 +94,7 @@ Creates a new modifier of the parent block or element. Should always be nested w
 
 ### modifies-element($modified-elements...)
 
-When declaring a block modifier, a state you may need to target and modify some of the block elements too. Use the following mixin to scope the ruleset to those elements.
+When declaring a block modifier, a theme a state or a hack you may need to target and modify some of the block elements too. Use the following mixin to scope the ruleset to those elements.
 
     @include modifies-element($modified-elements...) { ... }
 
@@ -169,7 +169,7 @@ You can customize them to whatever fits you needs:
     $bem-modifier-separator: '-_-_'; // Defaults to '--'
 
 
-##<a name="example"></a> 🍔 The Burger Example™
+##<a name="example"></a> :hamburger: The Burger Example™
 
 
 *Disclaimer: the following Sass code may not compile into a real burger.*

data/lib/bem-constructor.rb

@@ -3,6 +3,6 @@ extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
 Compass::Frameworks.register('bem-constructor', :path => extension_path)
 
 module BEMConstructor
-  VERSION = "0.1.1"
-  DATE = "2015-03-24"
+  VERSION = "0.2.0"
+  DATE = "2015-03-26"
 end

data/stylesheets/_bem-constructor.scss

@@ -21,6 +21,12 @@ $bem-element-separator: '__' !default;
 /// @public
 $bem-modifier-separator: '--' !default;
 
+/// Throw errors
+/// @public
+$bem-throw-errors: true !default;
+
+
+
 // -----------------------------------------------------------------------------
 // 2. Imports
 // -----------------------------------------------------------------------------

data/stylesheets/_error-checks.scss

@@ -21,7 +21,11 @@
     }
 
     @if not $found {
-        @error 'It should be called within #{inspect($objs)}';
+        @if ($bem-throw-error) {
+            @error 'It should be called within #{inspect($objs)}';
+        }
+
+        @return false;
     }
 
     @return true;
@@ -35,16 +39,20 @@
 /// Checks that it's being created outside all of the passed $objs...
 @function _should-not-be-called-within($objs...) {
 
-  $found: false;
+    $found: false;
 
-  @each $obj in $objs {
-    @if map-get($_bem-current-context, $obj) != null {
-      $found: true;
+    @each $obj in $objs {
+        @if map-get($_bem-current-context, $obj) != null {
+            $found: true;
+        }
     }
-  }
-  @if $found {
-    @error 'It should not be called within #{inspect($objs)}';
-  }
 
-  @return true;
+    @if $found {
+        @if ($bem-throw-error) {
+            @error 'It should not be called within #{inspect($objs)}';
+        }
+        @return false;
+    }
+
+    @return true;
 }

data/stylesheets/_hack.scss

@@ -5,6 +5,18 @@
 /// Hack namespace prepended to the selector
 $hack-namespace: '_' !default;
 
+/// Find the last simple selector in a selector
+@function _last-simple-selector($selector) {
+    $parsed: selector-parse($selector);
+
+    @if length($parsed) > 1 {
+      @error '`#{$selector}` contains #{length($parsed)} selectors and the `_last-simple-selector()`function accepts only 1.';
+    }
+    $last-simple-selector: nth(nth($parsed, 1), -1);
+
+    @return $last-simple-selector;
+}
+
 @function _hack() {
 
     // You may not hack a hack
@@ -13,11 +25,16 @@ $hack-namespace: '_' !default;
     $selector: ();
     $namespace: if($bem-use-namespaces, $hack-namespace, '');
 
-    @each $s in & {
-        $selector-to-str: inspect(nth($s, 1));
+    // Check if we are hacking an element modified by a block modifier
+    $is-hack-element: not not map-get($_bem-current-context, 'modifies-element');
+    $selectors: if($is-hack-element, map-get(map-get($_bem-current-context, 'modifies-element'), 'selector'), &);
+
+    // @todo refactor the following code to something more readab
+    @each $s in $selectors {
+        $selector-to-str: inspect(if($is-hack-element, _last-simple-selector($s), nth($s, 1)));
         $selector-without-dot: str-slice($selector-to-str, 2, -1);
         $new-selector: '.' + $namespace + $selector-without-dot;
-        $sl: selector-replace($s, nth($s, 1), $new-selector);;
+        $sl: selector-replace($s, if($is-hack-element, $selector-to-str, nth($s, 1)), $new-selector);
         $selector: append($selector, $sl, 'comma');
     }
 

data/stylesheets/_modifies-element.scss

@@ -7,21 +7,21 @@
 /// @param {String | Arglist} $modified-elements - List of elements that should be modified
 /// @returns The final selector for the element(s) modified by the block modifier
 
-@function _modifies-element($modified-element...) {
+@function _modifies-element($modified-elements...) {
 
     $inside-check: should-be-called-within('modifier', 'state');
     $outside-check: should-not-be-called-within('element');
 
     $selectors: ();
 
-    @each $element in $modified-element {
+    @each $element in $modified-elements {
         $element: map-get(map-get($_bem-current-context, 'block'), 'selector') + $bem-element-separator + $element;
         $selectors: append($selectors, $element, 'comma');
     }
 
     $selector: selector-nest(&, $selectors);
 
-    $set-current: set-current-context('modifies-element', $modified-element, $selector);
+    $set-current: set-current-context('modifies-element', $modified-elements, $selector);
 
     @return $selector;
 }
@@ -34,4 +34,6 @@
     @at-root #{_modifies-element($modified-elements...)} {
         @content;
     }
+
+    $unset-current: unset-current-context('modifies-element');
 }

data/stylesheets/_theme.scss

@@ -14,8 +14,10 @@ $bem-theme-namespace: 't' !default;
     $namespace: if($bem-use-namespaces, $bem-theme-namespace + '-', '');
 
     @each $theme in $themes {
-      $t: selector-nest('.#{$namespace}#{$theme}', &);
-      $selector: append($selector, $t, 'comma');
+        @each $sel in & {
+            $t: selector-nest('.#{$namespace}#{$theme}', $sel);
+            $selector: append($selector, $t, 'comma');
+        }
     }
 
     $set-current: set-current-context('theme', $themes, $selector);

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bem-constructor
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.2.0
 platform: ruby
 authors:
 - Daniel Guillan
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-03-24 00:00:00.000000000 Z
+date: 2015-03-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -67,7 +67,6 @@ files:
 - stylesheets/logger/_scope-logger.scss
 - stylesheets/test.css
 - stylesheets/test.css.map
-- stylesheets/test.scss
 homepage: https://github.com/danielguillan/bem-constructor
 licenses:
 - MIT

data/stylesheets/test.scss

@@ -1,59 +0,0 @@
-@import 'bem-constructor';
-
-// The Burger Test™
-
-@include object('burger') {
-    texture: juicy;
-
-    @include element('letuce', 'tomato') {
-        quality: fresh;
-    }
-
-    @include element('cheese') {
-        type: gouda;
-
-        @include modifier('parmigiano') {
-            type: parmigiano;
-        }
-    }
-
-    @include element('extra-topping') {
-        ingredient: bacon;
-    }
-
-    @include element('meat') {
-        type: beef;
-    }
-
-    @include modifier('veggie') {
-        texture: smooth;
-
-        @include modifies-element('meat') {
-            type: lentils;
-        }
-
-        @include modifies-element('extra-topping') {
-            ingredient: avocado;
-
-            @include hack() {
-                ingredient: bacon;
-            }
-        }
-    }
-
-    @include theme('mexican') {
-        spicy: hell-yeah;
-    }
-
-    @include state('cold') {
-        taste: terrible;
-    }
-}
-
-// @include scope(test) {
-//     a: shite
-// }
-
-// .bem-log {
-//     log: inspect($_bem-log);
-// }