github · joelhawksley · joelhawksley · joelhawksley · Mar 25, 2021 · joelhawksley
diff --git a/adr/0677-css-encapsulation.md b/adr/0677-css-encapsulation.md
diff --git a/adr/0677-css-encapsulation.md b/adr/0677-css-encapsulation.md
diff --git a/lib/view_component/css_module.rb b/lib/view_component/css_module.rb
+
+    # Generate a short, random-ish token to prevent CSS selector collisions.
+    def compute_hash
+      Digest::MD5.hexdigest(@module_name).first(5) # rubocop:disable GitHub/InsecureHashAlgorithm
diff --git a/lib/view_component/css_module.rb b/lib/view_component/css_module.rb
+
+    # Generate a short, random-ish token to prevent CSS selector collisions.
+    def compute_hash
+      Digest::MD5.hexdigest(@module_name).first(5) # rubocop:disable GitHub/InsecureHashAlgorithm
diff --git a/adr/0677-css-encapsulation.md b/adr/0677-css-encapsulation.md
diff --git a/adr/0677-css-encapsulation.md b/adr/0677-css-encapsulation.md
diff --git a/adr/0677-css-encapsulation.md b/adr/0677-css-encapsulation.md
diff --git a/adr/0677-css-encapsulation.md b/adr/0677-css-encapsulation.md
+
+We considered allowing for evaluation of Ruby inside CSS files (at compile, runtime, or both) but instead decided to lean on [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) for injecting dynamic values.
+
+### Bundle splitting
diff --git a/adr/0677-css-encapsulation.md b/adr/0677-css-encapsulation.md
+
+### No Webpacker
+
+The proposed design avoids Webpacker and other build tools. Instead, it uses a Ruby implementation of CSS Modules built by @rmosolgo, enabling greater portability and a convention-over-configuration experience that Rails developers expect.
diff --git a/lib/view_component/stylable.rb b/lib/view_component/stylable.rb
diff --git a/lib/view_component/compiler.rb b/lib/view_component/compiler.rb
@@ -10,7 +10,7 @@ def compiled?
      CompileCache.compiled?(component_class)
    end

-    def compile(raise_errors: false)
+    def ensure_compiled(raise_errors: false)
diff --git a/test/view_component/css_module_test.rb b/test/view_component/css_module_test.rb
+  def test_it_doesnt_rewrite_bare_element_selectors
+    before_css = "span {\n  background: rbga(255, 255, 255, 0.8);\n}"
+    after_css = "span {\n  background: rbga(255, 255, 255, 0.8); }\n"
+    assert_rewrite("item", before_css, after_css)
diff --git a/lib/view_component/stylable.rb b/lib/view_component/stylable.rb
+      self.class.styles
+    end
+  end
+end
-end
+end
+
diff --git a/docs/index.md b/docs/index.md
-  def commenter_name
-    commenter.name
+  def call
+    content_tag(:div, "Hello, World!", class: styles['foo'])
-    content_tag(:div, "Hello, World!", class: styles['foo'])
+    content_tag(:div, "Hello, World!", class: styles.foo)
diff --git a/adr/0677-css-encapsulation.md b/adr/0677-css-encapsulation.md
diff --git a/adr/0677-css-encapsulation.md b/adr/0677-css-encapsulation.md
+
+### No SCSS
+
+We're not very sure about this one, but we're playing with the idea of just using plain CSS, at least to start.
diff --git a/adr/0677-css-encapsulation.md b/adr/0677-css-encapsulation.md
+
+We considered allowing for evaluation of Ruby inside CSS files (at compile, runtime, or both) but instead decided to lean on [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) for injecting dynamic values.
+
+### Bundle splitting
diff --git a/adr/0677-css-encapsulation.md b/adr/0677-css-encapsulation.md
+
+## Consequences
+
+o, avoiding several common errors and resulting in more resilient user interfaces.
diff --git a/lib/view_component/styleable.rb b/lib/view_component/styleable.rb
+      if !rendered_components.include?(rendered_components_identifier)
+        request.params["___rendered_view_components"] << rendered_components_identifier
+
+        content_tag(:style, self.class._css.html_safe)

		We considered allowing for evaluation of Ruby inside CSS files (at compile, runtime, or both) but instead decided to lean on [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) for injecting dynamic values.

		### Bundle splitting

		### No Webpacker

		The proposed design avoids Webpacker and other build tools. Instead, it uses a Ruby implementation of CSS Modules built by @rmosolgo, enabling greater portability and a convention-over-configuration experience that Rails developers expect.
	content_tag(:div, "Hello, World!", class: styles['foo'])
	content_tag(:div, "Hello, World!", class: styles.foo)

		### No SCSS

		We're not very sure about this one, but we're playing with the idea of just using plain CSS, at least to start.

		## Consequences

		o, avoiding several common errors and resulting in more resilient user interfaces.