css_modules 0.4.0 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 3261fa451c6d2f9b7d8c8564c4c0b54f4613ee0a
-  data.tar.gz: 789422c0b2976e9fdb356eff866a57433949f904
+  metadata.gz: 352a7700216a0f529079aff18c7035208211015e
+  data.tar.gz: 84a4377828e9abae5e54cc2cab1efbf71d695054
 SHA512:
-  metadata.gz: e085342418b7748788b0594dd2f320757cfe8012d1676bf453da26b9e9a886f016d6dae4b321e4e9c119848cfc624ad9b0099843bacc32f2ac5e7bfb9ae4f3c8
-  data.tar.gz: bc2cea63cdd3c0bf2978db0ee181b7e63f26603291b9c54f4e13409d9b409eab0028f09bfc80641e18adc542308e49267ee12656e533d3a223d6f5ad09feddc5
+  metadata.gz: 0f97e68229bab8c72efa3d9b35606c5b47679c82c2b2ae5ea7533abd624b74ec1353e37612d2f4dcc391518800b66fe9addc99a161dc581d43337baa03a693ab
+  data.tar.gz: 94b85889226a878d04137af172ffc6b8f7d3361328ca856323b9828ebe0389ab68a045d7a7ade68551925e067033ea3e7b0e1bb331bb0dc3daf06b96562076e4

data/README.md

@@ -66,6 +66,29 @@ Then, in your view, you can access the module & its contents by name:
 <% end %>
 ```
 
+#### Extra classes
+
+You can also provide _multiple_, space-separated class names and/or extra class names to join without a module:
+
+```ruby
+# Apply "events" to "image-wrapper" and "image", then add "pull-left" without modification
+css_module("events", "image-wrapper image", "pull-left")
+#=> "events_123_image-wrapper events_123_image pull-left
+```
+
+#### Null module
+
+If you pass `nil` as the module name, _no_ transformation is applied to the selectors.
+
+```ruby
+css_module(nil, "media-row")
+# => "media-row"
+css_module(nil) do |styles|
+  styles.selector("image image--main", "pull-left")
+  # => "image image--main pull-left"
+end
+```
+
 ### Use modulized names in JavaScript
 
 In JavaScript, you can include a helper to access module styles:
@@ -88,10 +111,27 @@ function header() {
 }
 ```
 
-`CSSModule` requires the global JS function `btoa`. To include a polyfill from this gem, add:
+#### Extra classes
+
+You can also provide _multiple_, space-separated class names and/or extra class names to add without a module:
 
 ```js
-//= require base64
+// Apply "events" to "image-wrapper" and "image", then add "pull-left" without modification
+CSSModule("events", "image-wrapper image", "pull-left")
+// "events_123_image-wrapper events_123_image pull-left"
+```
+
+#### Null module
+
+If you pass `null` as the module name, `CSSModule` will make _no_ transformation:
+
+```js
+CSSModule(null, "item")
+// => "item"
+
+var cssModule = CSSModule(null)
+cssModule("item")
+// => item
 ```
 
 ## Installation

data/lib/css_modules/assets/css_module.js.erb

@@ -35,25 +35,48 @@ var CSSModule = (function() {
     return stringSum % HASH_LIMIT;
   };
 
-  function modulizeSelector(moduleName, selectorName, environment) {
-    if (environment === "production") {
+  function modulizeSelector(moduleName, selectorName) {
+    if (_CSSModule.environment === "production") {
       return moduleName.substr(0, 1) + computeHash(moduleName) + selectorName;
     } else {
       return moduleName + "_" + computeHash(moduleName) + "_" + selectorName;
     }
   }
 
-  function _CSSModule(moduleName, selectorName, environment) {
-    environment || (environment = "<%= CSSModules.env.to_s %>")
+  function createJoinedSelector(moduleName, selectorNames, bareSelectorNames) {
+    var modulizedSelectorNames;
 
-    if (selectorName) {
-      return modulizeSelector(moduleName, selectorName, environment);
+    if (moduleName) {
+      // Split and apply transformation to each part:
+      modulizedSelectorNames = selectorNames
+        .split(" ")
+        .map(function(selectorName) {
+          return modulizeSelector(moduleName, selectorName);
+        })
     } else {
-      return function(selectorName) {
-        return modulizeSelector(moduleName, selectorName, environment);
+      // Don't bother splitting, it's a null module
+      modulizedSelectorNames = [selectorNames]
+    }
+
+    if (bareSelectorNames) {
+      modulizedSelectorNames.push(bareSelectorNames);
+    }
+
+    return modulizedSelectorNames.join(" ");
+  }
+
+  function _CSSModule(moduleName, selectorNames, bareSelectorNames) {
+    if (selectorNames) {
+      return createJoinedSelector(moduleName, selectorNames, bareSelectorNames);
+    } else {
+      return function(selectorNames, bareSelectorNames) {
+        return createJoinedSelector(moduleName, selectorNames, bareSelectorNames);
       };
     }
   };
 
+  _CSSModule.environment = "<%= CSSModules.env.to_s %>";
+
+
   return _CSSModule;
 })();

data/lib/css_modules/version.rb

@@ -1,3 +1,3 @@
 module CSSModules
-  VERSION = '0.4.0'
+  VERSION = "0.5.0"
 end

data/lib/css_modules/view_helper.rb

@@ -14,8 +14,9 @@ module CSSModules
     #      css_module("events_index", "header")
     #      # => "..." (opaque string which matches the stylesheet)
     #
-    #   @param module_name
-    #   @param selector_name DOM id or class name
+    #   @param module_name [String]
+    #   @param selector_names [String] Space-separated DOM ids or class names
+    #   @param bare_selector_names [String] Space-separated selectors to be appended _without_ the module
     #   @return [String] modulized selector name for `class=` or `id=` in a view
     #
     # @overload css_module(module_name, &block)
@@ -27,29 +28,48 @@ module CSSModules
     #       <p id="<%= events_module.selector("description") %>"> ... </p>
     #     <% end %>
     #
-    #   @param module_name
+    #   @param module_name [String]
     #   @yieldparam [ModuleLookup] a helper for modulizing selectors within `module_name`
     #   @return [void]
-    def css_module(module_name, selector_name = nil, &block)
-      if selector_name.nil? && block_given?
-        lookup = ModuleLookup.new(module_name)
+    def css_module(module_name, selector_names = nil, bare_selector_names = nil, &block)
+      lookup = ModuleLookup.new(module_name)
+
+      if selector_names.nil? && block_given?
         yield(lookup)
         nil
-      elsif selector_name.present?
-        CSSModules::Rewrite.modulize_selector(module_name.to_s, selector_name.to_s)
+      elsif selector_names.present?
+        lookup.selector(selector_names.to_s, bare_selector_names.to_s)
       else
-        raise("css_module must be called with a module_name and either a selector_name or a block")
+        raise("css_module must be called with a module_name and either selector_names or a block")
       end
     end
 
-    # Shorthand for getting several classnames from one module
     class ModuleLookup
       def initialize(module_name)
-        @module_name = module_name.to_s
+        @module_name = module_name
+      end
+
+      # @see {ViewHelper#css_module}
+      # @param selector_names [String]
+      # @param bare_selector_names [String]
+      def selector(selector_names, bare_selector_names = nil)
+        create_joined_selector(@module_name, selector_names.to_s, bare_selector_names.to_s)
       end
 
-      def selector(selector_name)
-        CSSModules::Rewrite.modulize_selector(@module_name, selector_name.to_s)
+      private
+
+      def create_joined_selector(module_name, selector_names, bare_selector_names)
+        padded_bare_selector_names = bare_selector_names.present? ? " #{bare_selector_names}" : ""
+        case module_name
+        when nil
+          selector_names + padded_bare_selector_names
+        else
+          selector_names
+            .split(" ")
+            .map { |selector_name| CSSModules::Rewrite.modulize_selector(module_name, selector_name) }
+            .join(" ")
+            .concat(padded_bare_selector_names)
+        end
       end
     end
   end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css_modules
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.5.0
 platform: ruby
 authors:
 - Robert Mosolgo
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-10-13 00:00:00.000000000 Z
+date: 2016-10-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -77,7 +77,6 @@ files:
 - README.md
 - Rakefile
 - lib/css_modules.rb
-- lib/css_modules/assets/base64.js
 - lib/css_modules/assets/css_module.js.erb
 - lib/css_modules/engine.rb
 - lib/css_modules/rewrite.rb

data/lib/css_modules/assets/base64.js

@@ -1,136 +0,0 @@
-// btoa polyfill, from https://jsfiddle.net/gabrieleromanato/qaght/
-var Base64 = {
-
-
-    _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
-
-
-    encode: function(input) {
-        var output = "";
-        var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
-        var i = 0;
-
-        input = Base64._utf8_encode(input);
-
-        while (i < input.length) {
-
-            chr1 = input.charCodeAt(i++);
-            chr2 = input.charCodeAt(i++);
-            chr3 = input.charCodeAt(i++);
-
-            enc1 = chr1 >> 2;
-            enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
-            enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
-            enc4 = chr3 & 63;
-
-            if (isNaN(chr2)) {
-                enc3 = enc4 = 64;
-            } else if (isNaN(chr3)) {
-                enc4 = 64;
-            }
-
-            output = output + this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) + this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
-
-        }
-
-        return output;
-    },
-
-
-    decode: function(input) {
-        var output = "";
-        var chr1, chr2, chr3;
-        var enc1, enc2, enc3, enc4;
-        var i = 0;
-
-        input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
-
-        while (i < input.length) {
-
-            enc1 = this._keyStr.indexOf(input.charAt(i++));
-            enc2 = this._keyStr.indexOf(input.charAt(i++));
-            enc3 = this._keyStr.indexOf(input.charAt(i++));
-            enc4 = this._keyStr.indexOf(input.charAt(i++));
-
-            chr1 = (enc1 << 2) | (enc2 >> 4);
-            chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
-            chr3 = ((enc3 & 3) << 6) | enc4;
-
-            output = output + String.fromCharCode(chr1);
-
-            if (enc3 != 64) {
-                output = output + String.fromCharCode(chr2);
-            }
-            if (enc4 != 64) {
-                output = output + String.fromCharCode(chr3);
-            }
-
-        }
-
-        output = Base64._utf8_decode(output);
-
-        return output;
-
-    },
-
-    _utf8_encode: function(string) {
-        string = string.replace(/\r\n/g, "\n");
-        var utftext = "";
-
-        for (var n = 0; n < string.length; n++) {
-
-            var c = string.charCodeAt(n);
-
-            if (c < 128) {
-                utftext += String.fromCharCode(c);
-            }
-            else if ((c > 127) && (c < 2048)) {
-                utftext += String.fromCharCode((c >> 6) | 192);
-                utftext += String.fromCharCode((c & 63) | 128);
-            }
-            else {
-                utftext += String.fromCharCode((c >> 12) | 224);
-                utftext += String.fromCharCode(((c >> 6) & 63) | 128);
-                utftext += String.fromCharCode((c & 63) | 128);
-            }
-
-        }
-
-        return utftext;
-    },
-
-    _utf8_decode: function(utftext) {
-        var string = "";
-        var i = 0;
-        var c = c1 = c2 = 0;
-
-        while (i < utftext.length) {
-
-            c = utftext.charCodeAt(i);
-
-            if (c < 128) {
-                string += String.fromCharCode(c);
-                i++;
-            }
-            else if ((c > 191) && (c < 224)) {
-                c2 = utftext.charCodeAt(i + 1);
-                string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
-                i += 2;
-            }
-            else {
-                c2 = utftext.charCodeAt(i + 1);
-                c3 = utftext.charCodeAt(i + 2);
-                string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
-                i += 3;
-            }
-
-        }
-
-        return string;
-    }
-
-}
-
-if (!btoa) {
-  var btoa = function(str) { return Base64.encode(str) }
-}