css_modules 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 431374aa2a26649b2dac684cf81efe66e419c84c
-  data.tar.gz: 2dffe66a072a52b0c60074940be0774a6513e7a1
+  metadata.gz: dce9ca6ecb86907f4b2b6dd0b19eed2769d56f8a
+  data.tar.gz: ef5476565fb76bb21618521dbe9e7e57c0adbef0
 SHA512:
-  metadata.gz: b89042953316ab3a5b1b17c7c46eb5d2882e529415f5fb7a1c5247d3628ca1cd11aa796b09c9d0318c89578fe384a896f014d124f3f5616d07047b073fcc4c5f
-  data.tar.gz: 9c6387bfb0e5b68e7f5879c2999e4cd994c1b3ddfa03449ac18b5213f276ca7bff7f6c4abe9227732f8430134f68a59d2db39673594b9128fc2f992d3656dc5e
+  metadata.gz: 386082a080e70bef2535c1bb7730f6203969f8d7655563572b427ffffbbcb96d197ac638e2a4abf8db14bbaaf50529ac414073e7703e8fa0f1ad10d397e79b38
+  data.tar.gz: fee03dea66978d5af49efb5a68b0702e0fc85ccfb8d1cca2ad683358dec4c325f6acfc13276bea7981c2f8b7503888a5a3f6111724e57254f280837f483587d6

data/README.md

@@ -1,5 +1,8 @@
 # CSSModules
 
+[![Build Status](https://travis-ci.org/rmosolgo/css_modules.svg?branch=master)](https://travis-ci.org/rmosolgo/css_modules)
+[![Gem Version](https://badge.fury.io/rb/css_modules.svg)](https://badge.fury.io/rb/css_modules)
+
 An alternative to "magic string" classnames in Sass or SCSS. Currently supports Sprockets 2 only 😖.
 
 Thanks to [Fatih Kadir Akın](https://twitter.com/fkadev) for his post, ["How I Implemented CSS Modules in Ruby on Rails, Easily"](https://medium.com/@fkadev/how-i-implemented-css-modules-to-ruby-on-rails-easily-abb324ce22d), which led the way on this idea!
@@ -118,6 +121,8 @@ $ gem install css_modules
 - Support plain `.css`
 - Use Sass's built-in parser?
 - Support Sprockets 3+
+- Check for hash collisions in development
+- Fix bundle cache
 
 ## License
 

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

@@ -0,0 +1,59 @@
+// Usage:
+//
+// - Call with a module name + selector name to get a transformed (opaque) selector
+//
+//   ```js
+//   CSSModule("events_index", "header")
+//   // => "..." (some opaque string that matches the stylesheet)
+//   ```
+//
+// - Call with a module name to get a function for modulizing selectors
+//
+//   ```js
+//   var eventsModule = CSSModule("events_index")
+//   var headerSelector = eventsModule("header")
+//   var footerSelector = eventsModule("footer")
+//   ```
+//
+// This behavior has to match `CSSModules::Rewrite` in Ruby
+// so that generated selectors match.
+var CSSModule = (function() {
+  // This matches Transform.compute_hash in Ruby
+  var HASH_LIMIT = 10009;
+  var SUM_SIZE = 4;
+  function computeHash(inputString) {
+    var bytesCount = 0;
+    var stringSum = 0;
+    var byte;
+    for(var i = 0; i < inputString.length; i++) {
+      byte = inputString.charCodeAt(i);
+      stringSum += (byte * Math.pow(256, bytesCount))
+      bytesCount += 1;
+      bytesCount %= SUM_SIZE;
+    }
+
+    return stringSum % HASH_LIMIT;
+  };
+
+  function modulizeSelector(moduleName, selectorName, environment) {
+    if (environment === "production") {
+      return moduleName.substr(0, 1) + computeHash(moduleName + selectorName) + selectorName.substr(0, 1);
+    } else {
+      return moduleName + "_" + computeHash(moduleName + selectorName) + "_" + selectorName;
+    }
+  }
+
+  function _CSSModule(moduleName, selectorName, environment) {
+    environment || (environment = "<% Rails.env %>")
+
+    if (selectorName) {
+      return modulizeSelector(moduleName, selectorName, environment);
+    } else {
+      return function(selectorName) {
+        return modulizeSelector(moduleName, selectorName, environment);
+      };
+    }
+  };
+
+  return _CSSModule;
+})();

data/lib/css_modules/rewrite.rb

@@ -1,5 +1,5 @@
 require "css_parser"
-require "base64"
+require "css_modules/transform"
 
 module CSSModules
   module Rewrite
@@ -30,9 +30,12 @@ module CSSModules
 
     # Combine `module_name` and `selector`, but don't prepend a `.` or `#`
     # because this value will be inserted into the HTML page as `class=` or `id=`
+    # @param module_name [String] A CSS module name
+    # @param selector [String] A would-be DOM selector (without the leading `.` or `#`)
+    # @return [String] An opaque selector for this module-selector pair
     def modulize_selector(module_name, selector)
-      transformed_name = transform_name(module_name)
-      "#{transformed_name}_#{selector}"
+      tran = Rails.env.production? ? Transform::ProductionTransform : Transform::DevelopmentTransform
+      tran.transform(module_name, selector)
     end
 
     private
@@ -44,7 +47,7 @@ module CSSModules
       if matches.nil?
         selector
       else
-        module_name = transform_name(matches[:module_name])
+        module_name = matches[:module_name]
         declaration_parts = matches[:declarations].split(" ")
         declaration_parts
           .map { |declaration_or_operator| rebuild_selector(module_name, declaration_or_operator) }
@@ -57,19 +60,12 @@ module CSSModules
     def rebuild_selector(module_ident, selector)
       case selector[0]
       when "#"
-        "##{module_ident}_#{selector[1..-1]}"
+        "##{modulize_selector(module_ident, selector[1..-1])}"
       when "."
-        ".#{module_ident}_#{selector[1..-1]}"
+        ".#{modulize_selector(module_ident, selector[1..-1])}"
       else
         selector
       end
     end
-
-    def transform_name(css_module_name)
-      # Some base64 characters aren't valid for CSS (eg, `=`)
-      opaque_string = Base64.encode64(css_module_name).gsub(/[^a-zA-Z0-9]/, "")
-      # p [css_module_name, opaque_string]
-      "#{opaque_string}_#{css_module_name}"
-    end
   end
 end

data/lib/css_modules/transform.rb

@@ -0,0 +1,38 @@
+module CSSModules
+  module Transform
+    # Hash outputs will be within the range `0..HASH_LIMIT-1`
+    HASH_LIMIT = 10009
+    # How big of a chunk should we use for folding over the string?
+    SUM_SIZE = 4
+
+    # Generate a short, random-ish token for `input_string`.
+    # This has to be replicable in JS.
+    # Ruby's `#hash` is randomly seeded, so we can't reuse that!
+    # @param input_string [String] A string to hash
+    # @return [String] a deterministic output for `input_string`
+    def self.compute_hash(input_string)
+      bytes_count = 0
+      string_sum = 0
+
+      input_string.each_byte do |byte|
+        string_sum += byte * (256 ** bytes_count)
+        bytes_count += 1
+        bytes_count %= SUM_SIZE
+      end
+
+      string_sum % HASH_LIMIT
+    end
+
+    module DevelopmentTransform
+      def self.transform(module_name, selector_name)
+        "#{module_name}_#{Transform.compute_hash(module_name + selector_name)}_#{selector_name}"
+      end
+    end
+
+    module ProductionTransform
+      def self.transform(module_name, selector_name)
+        "#{module_name[0]}#{Transform.compute_hash(module_name + selector_name)}#{selector_name[0]}"
+      end
+    end
+  end
+end

data/lib/css_modules/version.rb

@@ -1,3 +1,3 @@
 module CSSModules
-  VERSION = '0.1.0'
+  VERSION = '0.2.0'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: css_modules
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - Robert Mosolgo
@@ -78,9 +78,10 @@ files:
 - Rakefile
 - lib/css_modules.rb
 - lib/css_modules/assets/base64.js
-- lib/css_modules/assets/css_module.js
+- lib/css_modules/assets/css_module.js.erb
 - lib/css_modules/engine.rb
 - lib/css_modules/rewrite.rb
+- lib/css_modules/transform.rb
 - lib/css_modules/version.rb
 - lib/css_modules/view_helper.rb
 homepage: https://github.com/rmosolgo/css_modules

data/lib/css_modules/assets/css_module.js

@@ -1,31 +0,0 @@
-// Usage:
-//
-// - Call with a module name + selector name to get a transformed (opaque) selector
-//
-//   ```js
-//   CSSModule("events_index", "header")
-//   // => "..." (some opaque string that matches the stylesheet)
-//   ```
-//
-// - Call with a module name to get a function for modulizing selectors
-//
-//   ```js
-//   var eventsModule = CSSModule("events_index")
-//   var headerSelector = eventsModule("header")
-//   var footerSelector = eventsModule("footer")
-//   ```
-//
-// This behavior has to match `CSSModules::Rewrite` in Ruby
-// so that generated selectors match.
-function CSSModule(moduleName, selectorName) {
-  // This matches `Rewrite`:
-  var opaqueString = btoa(moduleName).replace(/[^a-zA-Z0-9]/g, "")
-  var transformedModuleName = opaqueString + "_" + moduleName;
-  if (selectorName) {
-    return transformedModuleName + "_" + selectorName;
-  } else {
-    return function(selectorName) {
-      return transformedModuleName + "_" + selectorName;
-    };
-  }
-};