glimmer-dsl-web 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5c9bd6a7f085751de551a8eada611f25b6462c32f31019ebc31e296a98a7dbe7
-  data.tar.gz: cde631c346fddf15d48c52b85643f4f436761b059ccca0a8909cca56fdc7676e
+  metadata.gz: 429afe58eb54b98a9aa229faeecbe09ceefb82ebae7e240ef3dd68ce63110164
+  data.tar.gz: '03469f3f04757d5b95aab910b1469047e467481aeaf6169ed69a33a8ab900b6f'
 SHA512:
-  metadata.gz: 036cbe077a6378e6fb18cf10060074b4a071b20f4293960ded842458069c4dfb5bc041eb909f0b7b3cfbb809f73a41605f2b97f101b338f1ee616e52f00445c3
-  data.tar.gz: 4441339edfaf2724324e4aa30c19b2afc7e0e9d673add6130882e1c3220e278a1be1d21be126bf9b8aaa7568c62a0c59ecbce9ca2d1103183263ae17deb2d15e
+  metadata.gz: 93b2b65475f2609476997bb7139e2078f8851b88e881d123af4298df2f293a8a2537eecf3f697d734d09e0a8d5ad87771b32899873b9161b74f3e5387e86df00
+  data.tar.gz: 7a37b8b255486545016a982522a52ee3cf00c8238557d396a874e38da8d5689fda9e8a8b021cb698f380f641e68d341b9b9e2ea10e035692192e534693cfac21

data/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Change Log
 
+## 0.2.0
+
+- Support `style` element content as Glimmer DSL for CSS syntax (Ruby Programmable CSS) as an alternative to a CSS `String`
+
+## 0.1.1
+
+- Upgrade to opal-jquery 0.5.1 (adds `# backtick_javascript: true` where needed to satisfy new Opal requirement)
+- Upgrade to opal-async 1.4.1 (adds `# backtick_javascript: true` where needed to satisfy new Opal requirement)
+- Update setup instructions to NOT disable Hotwire files, to allow running Hotwire/Turbo side by side with Glimmer DSL for Web (but not in the same pages)
+
 ## 0.1.0
 
 - Update rendering system to render HTML elements immediately instead of waiting for complete components to be rendered all at once.

data/README.md

@@ -1,4 +1,4 @@
-# [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=85 />](https://github.com/AndyObtiva/glimmer) Glimmer DSL for Web 0.1.0 (Beta)
+# [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=85 />](https://github.com/AndyObtiva/glimmer) Glimmer DSL for Web 0.2.0 (Beta)
 ## Ruby in the Browser Web GUI Frontend Library
 [![Gem Version](https://badge.fury.io/rb/glimmer-dsl-web.svg)](http://badge.fury.io/rb/glimmer-dsl-web)
 [![Join the chat at https://gitter.im/AndyObtiva/glimmer](https://badges.gitter.im/AndyObtiva/glimmer.svg)](https://gitter.im/AndyObtiva/glimmer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
@@ -131,6 +131,7 @@ Document.ready? do
     
     # CSS Styles
     style {
+      # CSS can be included as a String as done below, or as Glimmer DSL for CSS syntax (Ruby code) as done in other samples
       <<~CSS
         input {
           margin: 5px;
@@ -392,15 +393,15 @@ Document.ready? do
         }
       }
       
+      # Programmable CSS using Glimmer DSL for CSS
       style {
-        <<~CSS
-          #{address_div.selector} * {
-            margin: 5px;
-          }
-          #{address_div.selector} input, #{address_div.selector} select {
-            grid-column: 2;
-          }
-        CSS
+        # `r` is an alias for `rule`, generating a CSS rule
+        r("#{address_div.selector} *") {
+          margin '5px'
+        }
+        r("#{address_div.selector} input, #{address_div.selector} select") {
+          grid_column '2'
+        }
       }
     }
   
@@ -528,20 +529,18 @@ Document.ready? do
               }
               
               style {
-                <<~CSS
-                  #{address_div.selector} {
-                    margin: 10px 0;
-                  }
-                  #{address_div.selector} * {
-                    margin: 5px;
-                  }
-                  #{address_div.selector} label {
-                    grid-column: 1;
-                  }
-                  #{address_div.selector} input, #{address_div.selector} select {
-                    grid-column: 2;
-                  }
-                CSS
+                r(address_div.selector) {
+                  margin '10px 0'
+                }
+                r("#{address_div.selector} *") {
+                  margin '5px'
+                }
+                r("#{address_div.selector} label") {
+                  grid_column '1'
+                }
+                r("#{address_div.selector} input, #{address_div.selector} select") {
+                  grid_column '2'
+                }
               }
             }
           }
@@ -708,14 +707,12 @@ class AddressForm
         }
         
         style {
-          <<~CSS
-            #{address_div.selector} * {
-              margin: 5px;
-            }
-            #{address_div.selector} input, #{address_div.selector} select {
-              grid-column: 2;
-            }
-          CSS
+          r("#{address_div.selector} *") {
+            margin '5px'
+          }
+          r("#{address_div.selector} input, #{address_div.selector} select") {
+            grid_column '2'
+          }
         }
       }
       
@@ -957,14 +954,12 @@ class AddressForm
         }
         
         style {
-          <<~CSS
-            #{address_div.selector} * {
-              margin: 5px;
-            }
-            #{address_div.selector} input, #{address_div.selector} select {
-              grid-column: 2;
-            }
-          CSS
+          r("#{address_div.selector} *") {
+            margin '5px'
+          }
+          r("#{address_div.selector} input, #{address_div.selector} select") {
+            grid_column '2'
+          }
         }
       }
       
@@ -1146,7 +1141,7 @@ rails new glimmer_app_server
 Add the following to `Gemfile`:
 
 ```
-gem 'glimmer-dsl-web', '~> 0.1.0'
+gem 'glimmer-dsl-web', '~> 0.2.0'
 ```
 
 Run:
@@ -1191,26 +1186,28 @@ rails db:migrate
 Add the following to `config/routes.rb` inside the `Rails.application.routes.draw` block:
 
 ```ruby
-mount Glimmer::Engine => "/glimmer" # add on top
 root to: 'welcomes#index'
 ```
 
 Clear the file `app/views/welcomes/index.html.erb` completely from all content.
 
-Delete `app/javascript` directory
+Rename `app/assets/javascript/application.js.rb` file to `app/assets/javascript/opal_application.rb`.
 
 Rename `app/assets/javascript` directory to `app/assets/opal`.
 
-Add the following lines to `app/assets/config/manifest.js` (and delete their `javascript` equivalents):
+Edit `app/assets/config/manifest.js` and update `//= link_directory ../javascript .js` to `//= link_directory ../opal .js`:
 
 ```js
-//= link_tree ../../opal .js
 //= link_directory ../opal .js
 ```
 
-Rename `app/assets/opal/application.js.rb` to `app/assets/opal/application.rb`.
+Edit `app/views/layouts/application.html.erb` and update `<%= javascript_include_tag "application", "data-turbolinks-track": "reload" %>` to `<%= javascript_include_tag "opal_application", "data-turbolinks-track": "reload" %>`:
+
+```erb
+<%= javascript_include_tag "opal_application", "data-turbolinks-track": "reload" %>
+```
 
-Edit and replace `app/assets/opal/application.rb` content with code below (optionally including a require statement for one of the [samples](#samples) below):
+Edit and replace `app/assets/opal/opal_application.rb` content with code below (optionally including a require statement for one of the [samples](#samples) below):
 
 ```ruby
 require 'glimmer-dsl-web' # brings opal and other dependencies automatically
@@ -1317,6 +1314,7 @@ That produces:
 </div>
 ...
 ```
+
 You may insert a Glimmer component anywhere into a Rails View using `glimmer_component(component_path, *args)` Rails helper. Add `include GlimmerHelper` to `ApplicationHelper` or another Rails helper, and use `<%= glimmer_component("path/to/component", *args) %>` in Views.
 
 To use `glimmer_component`, edit `app/helpers/application_helper.rb` in your Rails application, add `require 'glimmer/helpers/glimmer_helper'` on top and `include GlimmerHelper` inside `module`.
@@ -1333,6 +1331,8 @@ module ApplicationHelper
 end
 ```
 
+Note that Turbo is disabled on Glimmer elements/components. You can still use Turbo/Hotwire side by side with Glimmer DSL for Web by using one of the two technologies in every page. But, mixing them in the same pages is not recommended at the moment, so any pages loaded with Glimmer DSL for Web must be loaded without Turbo (e.g. by putting "data-turbo"="false" on anchor "a" tag links to Glimmer pages).
+
 If you run into any issues in setup, refer to the [Sample Glimmer DSL for Web Rails 7 App](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app) project (in case I forgot to include some setup steps by mistake).
 
 Otherwise, if you still cannot setup successfully (even with the help of the sample project, or if the sample project stops working), please do not hesitate to report an [Issue request](https://github.com/AndyObtiva/glimmer-dsl-web/issues) or fix and submit a [Pull Request](https://github.com/AndyObtiva/glimmer-dsl-web/pulls).
@@ -1362,7 +1362,7 @@ Disable the `webpacker` gem line in `Gemfile`:
 Add the following to `Gemfile`:
 
 ```ruby
-gem 'glimmer-dsl-web', '~> 0.1.0'
+gem 'glimmer-dsl-web', '~> 0.2.0'
 ```
 
 Run:
@@ -1407,10 +1407,8 @@ rails db:migrate
 Add the following to `config/routes.rb` inside the `Rails.application.routes.draw` block:
 
 ```ruby
-mount Glimmer::Engine => "/glimmer" # add on top
 root to: 'welcomes#index'
 ```
-```
 
 Also, delete the following line:
 
@@ -1420,18 +1418,23 @@ Also, delete the following line:
 
 Clear the file `app/views/welcomes/index.html.erb` completely from all content.
 
+Rename `app/assets/javascript/application.js.rb` file to `app/assets/javascript/opal_application.rb`.
+
 Rename `app/assets/javascript` directory to `app/assets/opal`.
 
-Add the following lines to `app/assets/config/manifest.js` (and delete their `javascript` equivalents):
+Edit `app/assets/config/manifest.js` and update `//= link_directory ../javascript .js` to `//= link_directory ../opal .js`:
 
 ```js
-//= link_tree ../../opal .js
 //= link_directory ../opal .js
 ```
 
-Rename `app/assets/opal/application.js.rb` to `app/assets/opal/application.rb`.
+Edit `app/views/layouts/application.html.erb` and update `<%= javascript_include_tag "application", "data-turbolinks-track": "reload" %>` to `<%= javascript_include_tag "opal_application", "data-turbolinks-track": "reload" %>`:
 
-Edit and replace `app/assets/opal/application.rb` content with code below (optionally including a require statement for one of the [samples](#samples) below inside a `Document.ready? do; end` block):
+```erb
+<%= javascript_include_tag "opal_application", "data-turbolinks-track": "reload" %>
+```
+
+Edit and replace `app/assets/opal/opal_application.rb` content with code below (optionally including a require statement for one of the [samples](#samples) below):
 
 ```ruby
 require 'glimmer-dsl-web' # brings opal and other dependencies automatically
@@ -1508,6 +1511,8 @@ module ApplicationHelper
 end
 ```
 
+Note that Turbo is disabled on Glimmer elements/components. You can still use Turbo/Hotwire side by side with Glimmer DSL for Web by using one of the two technologies in every page. But, mixing them in the same pages is not recommended at the moment, so any pages loaded with Glimmer DSL for Web must be loaded without Turbo (e.g. by putting "data-turbo"="false" on anchor "a" tag links to Glimmer pages).
+
 **NOT RELEASED OR SUPPORTED YET**
 
 If you run into any issues in setup, refer to the [Sample Glimmer DSL for Web Rails 6 App](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails6-app) project (in case I forgot to include some setup steps by mistake).
@@ -1754,6 +1759,7 @@ Document.ready? do
     
     # CSS Styles
     style {
+      # CSS can be included as a String as done below, or as Glimmer DSL for CSS syntax (Ruby code) as done in other samples
       <<~CSS
         input {
           margin: 5px;
@@ -2072,14 +2078,12 @@ Document.ready? do
       }
       
       style {
-        <<~CSS
-          #{address_div.selector} * {
-            margin: 5px;
-          }
-          #{address_div.selector} input, #{address_div.selector} select {
-            grid-column: 2;
-          }
-        CSS
+        r("#{address_div.selector} *") {
+          margin '5px'
+        }
+        r("#{address_div.selector} input, #{address_div.selector} select") {
+          grid_column '2'
+        }
       }
     }
   
@@ -2207,20 +2211,18 @@ Document.ready? do
               }
               
               style {
-                <<~CSS
-                  #{address_div.selector} {
-                    margin: 10px 0;
-                  }
-                  #{address_div.selector} * {
-                    margin: 5px;
-                  }
-                  #{address_div.selector} label {
-                    grid-column: 1;
-                  }
-                  #{address_div.selector} input, #{address_div.selector} select {
-                    grid-column: 2;
-                  }
-                CSS
+                r(address_div.selector) {
+                  margin '10px 0'
+                }
+                r("#{address_div.selector} *") {
+                  margin '5px'
+                }
+                r("#{address_div.selector} label") {
+                  grid_column '1'
+                }
+                r("#{address_div.selector} input, #{address_div.selector} select") {
+                  grid_column '2'
+                }
               }
             }
           }
@@ -2387,14 +2389,12 @@ class AddressForm
         }
         
         style {
-          <<~CSS
-            #{address_div.selector} * {
-              margin: 5px;
-            }
-            #{address_div.selector} input, #{address_div.selector} select {
-              grid-column: 2;
-            }
-          CSS
+          r("#{address_div.selector} *") {
+            margin '5px'
+          }
+          r("#{address_div.selector} input, #{address_div.selector} select") {
+            grid_column '2'
+          }
         }
       }
       
@@ -2636,14 +2636,12 @@ class AddressForm
         }
         
         style {
-          <<~CSS
-            #{address_div.selector} * {
-              margin: 5px;
-            }
-            #{address_div.selector} input, #{address_div.selector} select {
-              grid-column: 2;
-            }
-          CSS
+          r("#{address_div.selector} *") {
+            margin '5px'
+          }
+          r("#{address_div.selector} input, #{address_div.selector} select") {
+            grid_column '2'
+          }
         }
       }
       
@@ -2840,17 +2838,15 @@ Document.ready? do
       }
       
       style {
-        <<~CSS
-          #{container_div.selector} * {
-            margin: 5px;
-          }
-          #{container_div.selector} label {
-            grid-column: 1;
-          }
-          #{container_div.selector} input {
-            grid-column: 2;
-          }
-        CSS
+        r("#{container_div.selector} *") {
+          margin '5px'
+        }
+        r("#{container_div.selector} label") {
+          grid_column '1'
+        }
+        r("#{container_div.selector} input") {
+          grid_column '2'
+        }
       }
     }
   }

data/VERSION

@@ -1 +1 @@
-0.1.0
+0.2.0

data/glimmer-dsl-web.gemspec

@@ -2,11 +2,11 @@
 # DO NOT EDIT THIS FILE DIRECTLY
 # Instead, edit Jeweler::Tasks in Rakefile, and run 'rake gemspec'
 # -*- encoding: utf-8 -*-
-# stub: glimmer-dsl-web 0.1.0 ruby lib
+# stub: glimmer-dsl-web 0.2.0 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.1.0".freeze
+  s.version = "0.2.0".freeze
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0".freeze) if s.respond_to? :required_rubygems_version=
   s.require_paths = ["lib".freeze]
@@ -58,6 +58,7 @@ Gem::Specification.new do |s|
     "lib/glimmer/dsl/web/property_expression.rb",
     "lib/glimmer/dsl/web/select_expression.rb",
     "lib/glimmer/dsl/web/shine_data_binding_expression.rb",
+    "lib/glimmer/dsl/web/style_expression.rb",
     "lib/glimmer/helpers/glimmer_helper.rb",
     "lib/glimmer/util/proc_tracker.rb",
     "lib/glimmer/web.rb",
@@ -76,11 +77,11 @@ Gem::Specification.new do |s|
 
   s.add_runtime_dependency(%q<glimmer>.freeze, ["~> 2.7.6".freeze])
   s.add_runtime_dependency(%q<glimmer-dsl-xml>.freeze, ["~> 1.3.2".freeze])
-  s.add_runtime_dependency(%q<glimmer-dsl-css>.freeze, ["~> 1.2.2".freeze])
+  s.add_runtime_dependency(%q<glimmer-dsl-css>.freeze, ["~> 1.2.3".freeze])
   s.add_runtime_dependency(%q<opal>.freeze, ["= 1.8.2".freeze])
   s.add_runtime_dependency(%q<opal-rails>.freeze, ["= 2.0.3".freeze])
-  s.add_runtime_dependency(%q<opal-async>.freeze, ["~> 1.4.0".freeze])
-  s.add_runtime_dependency(%q<opal-jquery>.freeze, ["~> 0.5.0".freeze])
+  s.add_runtime_dependency(%q<opal-async>.freeze, ["~> 1.4.1".freeze])
+  s.add_runtime_dependency(%q<opal-jquery>.freeze, ["~> 0.5.1".freeze])
   s.add_runtime_dependency(%q<to_collection>.freeze, [">= 2.0.1".freeze, "< 3.0.0".freeze])
   s.add_development_dependency(%q<puts_debuggerer>.freeze, [">= 0".freeze])
   s.add_development_dependency(%q<rake>.freeze, [">= 10.1.0".freeze, "< 14.0.0".freeze])

data/lib/glimmer/dsl/web/dsl.rb

@@ -26,6 +26,7 @@ require 'glimmer/dsl/web/listener_expression'
 require 'glimmer/dsl/web/property_expression'
 require 'glimmer/dsl/web/p_expression'
 require 'glimmer/dsl/web/select_expression'
+require 'glimmer/dsl/web/style_expression'
 require 'glimmer/dsl/web/bind_expression'
 require 'glimmer/dsl/web/data_binding_expression'
 require 'glimmer/dsl/web/content_data_binding_expression'

data/lib/glimmer/dsl/web/style_expression.rb

@@ -0,0 +1,27 @@
+require 'glimmer/dsl/static_expression'
+require 'glimmer/dsl/web/general_element_expression'
+
+module Glimmer
+  module DSL
+    module Web
+      class StyleExpression < StaticExpression
+        include GeneralElementExpression
+        include Glimmer
+        
+        def add_content(parent, keyword, *args, &block)
+          if parent.rendered? || parent.skip_content_on_render_blocks?
+            return_value = css(&block).to_s
+            return_value = super(parent, keyword, *args, &block) if return_value.to_s.empty?
+            if return_value.is_a?(String) && parent.dom_element.text.to_s.empty?
+              parent.add_text_content(return_value)
+            end
+            parent.post_add_content
+            return_value
+          else
+            parent.add_content_on_render(&block)
+          end
+        end
+      end
+    end
+  end
+end

data/lib/glimmer/helpers/glimmer_helper.rb

@@ -7,24 +7,27 @@ module GlimmerHelper
   end
   
   def glimmer_component(component_asset_path, *component_args)
-    component_file = component_asset_path.split('/').last
-    component_class_name = component_file.classify
+    component_file = component_asset_path.split('/').last # TODO support namespaced components
+    component_class_name = component_file.classify # TODO support namespaced components
     next_id_number = GlimmerHelper.next_id_number
     component_id = "glimmer_component_#{next_id_number}"
     component_script_container_id = "glimmer_component_script_container_#{next_id_number}"
     component_args_json = JSON.dump(component_args)
-    opal_script = <<~Opal
+    opal_script = <<~OPAL
       require 'glimmer-dsl-web'
       component_args_json = '#{component_args_json}'
       component_args = JSON.parse(component_args_json)
       component_args << {} if !component_args.last.is_a?(Hash)
       component_args.last[:parent] = "##{component_id}"
       #{component_class_name}.render(*component_args)
-    Opal
-    content_tag(:div, id: component_script_container_id, class: ['glimmer_component_script_container', "#{component_file}_script_container"]) do
+    OPAL
+    js_script = <<~JAVASCRIPT
+      Opal.eval(`#{opal_script}`)
+    JAVASCRIPT
+    content_tag(:div, id: component_script_container_id, class: ['glimmer_component_script_container', "#{component_file}_script_container"], 'data-turbo': 'false') do
       content_tag(:div, '', id: component_id, class: ['glimmer_component', component_file]) +
       javascript_include_tag(component_asset_path, "data-turbolinks-track": "reload") +
-        content_tag(:script, raw(opal_script), type: 'text/ruby')
+      content_tag(:script, raw(js_script), type: 'application/javascript', "data-turbo-eval": "false")
     end
   end
 end

data/lib/glimmer/web/element_proxy.rb

@@ -253,7 +253,6 @@ module Glimmer
         brand_new = @dom.nil? || old_element.empty? || !options[:parent].to_s.empty? || brand_new
         build_dom(layout: !custom_parent_dom_element) # TODO handle custom parent layout by passing parent instead of parent dom element
         if brand_new
-          # TODO make a method attach to allow subclasses to override if needed
           attach(the_parent_dom_element)
         else
           reattach(old_element)
@@ -336,6 +335,7 @@ module Glimmer
         end
         html_options[:class] ||= ''
         html_options[:class] = "#{html_options[:class]} #{body_class}".strip
+        html_options['data-turbo'] = 'false' if parent.nil?
         html_options
       end
       

data/lib/glimmer-dsl-web/samples/hello/hello_component.rb

@@ -158,14 +158,12 @@ class AddressForm
         }
         
         style {
-          <<~CSS
-            #{address_div.selector} * {
-              margin: 5px;
-            }
-            #{address_div.selector} input, #{address_div.selector} select {
-              grid-column: 2;
-            }
-          CSS
+          r("#{address_div.selector} *") {
+            margin '5px'
+          }
+          r("#{address_div.selector} input, #{address_div.selector} select") {
+            grid_column '2'
+          }
         }
       }
       

data/lib/glimmer-dsl-web/samples/hello/hello_content_data_binding.rb

@@ -117,20 +117,18 @@ Document.ready? do
               }
               
               style {
-                <<~CSS
-                  #{address_div.selector} {
-                    margin: 10px 0;
-                  }
-                  #{address_div.selector} * {
-                    margin: 5px;
-                  }
-                  #{address_div.selector} label {
-                    grid-column: 1;
-                  }
-                  #{address_div.selector} input, #{address_div.selector} select {
-                    grid-column: 2;
-                  }
-                CSS
+                r(address_div.selector) {
+                  margin '10px 0'
+                }
+                r("#{address_div.selector} *") {
+                  margin '5px'
+                }
+                r("#{address_div.selector} label") {
+                  grid_column '1'
+                }
+                r("#{address_div.selector} input, #{address_div.selector} select") {
+                  grid_column '2'
+                }
               }
             }
           }

data/lib/glimmer-dsl-web/samples/hello/hello_data_binding.rb

@@ -156,15 +156,15 @@ Document.ready? do
         }
       }
       
+      # Programmable CSS using Glimmer DSL for CSS
       style {
-        <<~CSS
-          #{address_div.selector} * {
-            margin: 5px;
-          }
-          #{address_div.selector} input, #{address_div.selector} select {
-            grid-column: 2;
-          }
-        CSS
+        # `r` is an alias for `rule`, generating a CSS rule
+        r("#{address_div.selector} *") {
+          margin '5px'
+        }
+        r("#{address_div.selector} input, #{address_div.selector} select") {
+          grid_column '2'
+        }
       }
     }
   

data/lib/glimmer-dsl-web/samples/hello/hello_form.rb

@@ -79,6 +79,7 @@ Document.ready? do
     
     # CSS Styles
     style {
+      # CSS can be included as a String as done below, or as Glimmer DSL for CSS syntax (Ruby code) as done in other samples
       <<~CSS
         input {
           margin: 5px;

data/lib/glimmer-dsl-web/samples/hello/hello_glimmer_component_helper/address_form.rb

@@ -135,14 +135,12 @@ class AddressForm
         }
         
         style {
-          <<~CSS
-            #{address_div.selector} * {
-              margin: 5px;
-            }
-            #{address_div.selector} input, #{address_div.selector} select {
-              grid-column: 2;
-            }
-          CSS
+          r("#{address_div.selector} *") {
+            margin '5px'
+          }
+          r("#{address_div.selector} input, #{address_div.selector} select") {
+            grid_column '2'
+          }
         }
       }
       

data/lib/glimmer-dsl-web/samples/hello/hello_input_date_time.rb

@@ -100,17 +100,15 @@ Document.ready? do
       }
       
       style {
-        <<~CSS
-          #{container_div.selector} * {
-            margin: 5px;
-          }
-          #{container_div.selector} label {
-            grid-column: 1;
-          }
-          #{container_div.selector} input {
-            grid-column: 2;
-          }
-        CSS
+        r("#{container_div.selector} *") {
+          margin '5px'
+        }
+        r("#{container_div.selector} label") {
+          grid_column '1'
+        }
+        r("#{container_div.selector} input") {
+          grid_column '2'
+        }
       }
     }
   }

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-web
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - Andy Maleh
@@ -44,14 +44,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.2.2
+        version: 1.2.3
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.2.2
+        version: 1.2.3
 - !ruby/object:Gem::Dependency
   name: opal
   requirement: !ruby/object:Gem::Requirement
@@ -86,28 +86,28 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.4.0
+        version: 1.4.1
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.4.0
+        version: 1.4.1
 - !ruby/object:Gem::Dependency
   name: opal-jquery
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.5.0
+        version: 0.5.1
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.5.0
+        version: 0.5.1
 - !ruby/object:Gem::Dependency
   name: to_collection
   requirement: !ruby/object:Gem::Requirement
@@ -287,6 +287,7 @@ files:
 - lib/glimmer/dsl/web/property_expression.rb
 - lib/glimmer/dsl/web/select_expression.rb
 - lib/glimmer/dsl/web/shine_data_binding_expression.rb
+- lib/glimmer/dsl/web/style_expression.rb
 - lib/glimmer/helpers/glimmer_helper.rb
 - lib/glimmer/util/proc_tracker.rb
 - lib/glimmer/web.rb