glimmer-dsl-css 1.5.0 → 1.5.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4d7025737d0f0a5d69fa10f2410f119e35037300e0b588ac71cbcc93d2bcc37e
-  data.tar.gz: 6123b4db4d7f8e575e0d3480f9709a5c4b69da3a1a5404b163577a6acb0df299
+  metadata.gz: e7e949aec92ed02ea78029ede9817280b0ab9bb542382f7cb08223f9f9ee7870
+  data.tar.gz: e21dfaa4ff4538d1e432c2c3804076db7cfb7dd785aa4db4df7991415c319e84
 SHA512:
-  metadata.gz: 1860dbc22baf525cc80be2df7ae16f9a6b1f158e42f00ead107c1440ca4d75579392f51c19371372fcb063416db62b0831e675cb54856dba2ee9a07218d5a5b0
-  data.tar.gz: 13db5825e60924567f8004d1c20a6fe5e822b1a2a739fc6791e831cc72a9c77083009312212b19393901783128928ebaadb39f39b7fcfd5aafb1e78f4a274e66
+  metadata.gz: 37041f729a6aebec6fc12084ee7bd419a0f8d540b3ccb01ea96b8640d3f24d87b9b7f60133fe6791c4e8add93ad9b832e21cbb911bff61c20c55aabc06a8f20a
+  data.tar.gz: 13c3c85185fb5e81bc6279e2e4a8cf331c6cde51e8d2db6828ca9e9a7e839707ff6700fb7f6fcce7d0534f40e96783a606e8983c87dc948155e3beb6be6ad3d7

data/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change Log
 
+# 1.5.1
+
+- Support px in pt cm mm em methods on `Numeric` to allow producing px in pt cm mm em CSS values (e.g. `3.px` => "3px")
+- Support % method on `Integer`/`Float` to allow producing % CSS values (e.g. `90.%` => "90%")
+
 ## 1.5.0
 
 - Support `raw` keyword to allow adding raw CSS to a `css { }` block, which gets appended to other CSS generated by the DSL.

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 CSS 1.5.0
+# [<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 CSS 1.5.1
 ## Ruby Programmable Cascading Style Sheets
 [![Gem Version](https://badge.fury.io/rb/glimmer-dsl-css.svg)](http://badge.fury.io/rb/glimmer-dsl-css)
 [![Travis CI](https://travis-ci.com/AndyObtiva/glimmer-dsl-css.svg?branch=master)](https://travis-ci.com/github/AndyObtiva/glimmer-dsl-css)
@@ -17,8 +17,10 @@ include Glimmer
 
 @css = css {
   body {
-    font_size '1.1em'
+    font_size 1.1.em
     background 'white'
+    width 90.%
+    height 100.%
   }
   
   rule('body > h1') {
@@ -40,7 +42,7 @@ puts @css
 Output (minified CSS):
 
 ```css
-body{font-size:1.1em;background:white}body > h1{background-color:red;font-size:24px}@media screen and (min-width: 30em) and (orientation: landscape){body#app h1#title{font-size:16px;font-family:"Times New Roman", Times, serif}}
+body{font-size:1.1em;background:white;width:90%;height:100%}body > h1{background-color:red;font-size:24px}@media screen and (min-width: 30em) and (orientation: landscape){body#app h1#title{font-size:16px;font-family:"Times New Roman", Times, serif}}
 ```
 
 The key reason for using the CSS DSL instead of actual CSS is Ruby programmability without getting lost in string concatenations. The CSS DSL helps in including conditional CSS with `if` or ternery expressions as well as looping from lists while building CSS.
@@ -64,7 +66,7 @@ Please follow these instructions to make the `glimmer` command available on your
 
 Run this command to install directly:
 ```
-gem install glimmer-dsl-css -v 1.5.0
+gem install glimmer-dsl-css -v 1.5.1
 ```
 
 Note: In case you are using JRuby, `jgem` is JRuby's version of the `gem` command. RVM allows running `gem` as an alias in JRuby. Otherwise, you may also run `jruby -S gem install ...`
@@ -79,7 +81,7 @@ That's it! Requiring the gem activates the Glimmer CSS DSL automatically.
 
 Add the following to `Gemfile` (after `glimmer-dsl-swt` and/or `glimmer-dsl-opal` if included too):
 ```
-gem 'glimmer-dsl-css', '~> 1.5.0'
+gem 'glimmer-dsl-css', '~> 1.5.1'
 ```
 
 And, then run:
@@ -172,9 +174,18 @@ The `body > h1` rule could have been written in any other alternative way:
   end
 ```
 
-### Numeric Values
+### Numeric Values and Unit Types
+
+All CSS unit types are supported by invoking methods matching them on Numeric objects (e.g. `3.em` produces `'3em'`):
+- `px` (default if not specified)
+- `in`
+- `pt`
+- `cm`
+- `mm`
+- `em`
+- `%`
 
-As you saw above, numeric values (e.g. `24` in `font_size 24`) automatically get suffixed with `px` by convention (e.g. `24px`).
+For example:
 
 ```ruby
 require 'glimmer-dsl-css'
@@ -183,7 +194,37 @@ include Glimmer
 
 @css = css {
   body {
-    font_size '1.1em'
+    font_size 1.1.em
+    width 80.%
+    height 100.%
+    background 'white'
+  }
+  
+  r('body > h1') {
+    font_size 24.px
+    background_color :red
+  }
+}
+
+puts @css
+```
+
+Output (minified CSS):
+
+```css
+body{font-size:1.1em;width:80%;height:100%;background:white}body > h1{font-size:24px;background-color:red}
+```
+
+Also, as you saw above, numeric values (e.g. `24` in `font_size 24`) automatically get suffixed with `px` by convention (e.g. `24px`).
+
+```ruby
+require 'glimmer-dsl-css'
+
+include Glimmer
+
+@css = css {
+  body {
+    font_size 14
     background 'white'
   }
   _ 'body > h1' do
@@ -198,7 +239,7 @@ puts @css
 Output (minified CSS):
 
 ```css
-body{font-size:1.1em;background:white}body > h1{background-color:red;font-size:24px}
+body{font-size:14px;background:white}body > h1{background-color:red;font-size:24px}
 ```
 
 ### Raw CSS
@@ -358,6 +399,10 @@ Learn more about how to use this DSL alongside other Glimmer DSLs:
 
 [Glimmer Multi-DSL Support](https://github.com/AndyObtiva/glimmer/tree/master#multi-dsl-support)
 
+## Influences
+
+- https://github.com/opal/paggio
+
 ## Help
 
 ### Issues

data/VERSION

@@ -1 +1 @@
-1.5.0
+1.5.1

data/glimmer-dsl-css.gemspec

@@ -2,16 +2,16 @@
 # DO NOT EDIT THIS FILE DIRECTLY
 # Instead, edit Jeweler::Tasks in Rakefile, and run 'rake gemspec'
 # -*- encoding: utf-8 -*-
-# stub: glimmer-dsl-css 1.5.0 ruby lib
+# stub: glimmer-dsl-css 1.5.1 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-css".freeze
-  s.version = "1.5.0"
+  s.version = "1.5.1"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0".freeze) if s.respond_to? :required_rubygems_version=
   s.require_paths = ["lib".freeze]
   s.authors = ["AndyMaleh".freeze]
-  s.date = "2024-07-05"
+  s.date = "2024-07-28"
   s.description = "Glimmer DSL for CSS (Ruby Programmable Cascading Style Sheets)".freeze
   s.email = "andy.am@gmail.com".freeze
   s.executables = ["css_to_glimmer".freeze, "minify_css".freeze]
@@ -30,6 +30,10 @@ Gem::Specification.new do |s|
     "bin/minify_css",
     "glimmer-dsl-css.gemspec",
     "lib/glimmer-dsl-css.rb",
+    "lib/glimmer-dsl-css/ext/css_percentable.rb",
+    "lib/glimmer-dsl-css/ext/float.rb",
+    "lib/glimmer-dsl-css/ext/integer.rb",
+    "lib/glimmer-dsl-css/ext/numeric.rb",
     "lib/glimmer/css/css_fragment.rb",
     "lib/glimmer/css/css_fragment_composite.rb",
     "lib/glimmer/css/css_minifier.rb",

data/lib/glimmer-dsl-css/ext/css_percentable.rb

@@ -0,0 +1,13 @@
+module CssPercentable
+  def %(other = nil)
+    if other.nil?
+      if zero?
+        to_s
+      else
+        "#{self}%"
+      end
+    else
+      super(other)
+    end
+  end
+end

data/lib/glimmer-dsl-css/ext/float.rb

@@ -0,0 +1,5 @@
+require 'glimmer-dsl-css/ext/css_percentable'
+
+class Float
+  prepend CssPercentable
+end

data/lib/glimmer-dsl-css/ext/integer.rb

@@ -0,0 +1,6 @@
+require 'glimmer-dsl-css/ext/css_percentable'
+
+class Integer
+  prepend CssPercentable
+end
+

data/lib/glimmer-dsl-css/ext/numeric.rb

@@ -0,0 +1,15 @@
+class Numeric
+  %w[px in pt cm mm em].each do |unit_type|
+    if 1.respond_to?(unit_type)
+      puts "Unable to define Numeric##{unit_type} method because it is already defined. Please avoid using the Glimmer Numeric##{unit_type} method or remove the other implementation of it!"
+    else
+      define_method(unit_type) do
+        if zero?
+          to_s
+        else
+          "#{self}#{unit_type}"
+        end
+      end
+    end
+  end
+end

data/lib/glimmer-dsl-css.rb

@@ -26,6 +26,9 @@ require 'facets/string/camelcase'
 require 'glimmer'
 
 require 'glimmer/dsl/css/dsl'
+require 'glimmer-dsl-css/ext/numeric'
+require 'glimmer-dsl-css/ext/integer'
+require 'glimmer-dsl-css/ext/float'
 
 module Glimmer
   def _(selector, &rule_block)

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-css
 version: !ruby/object:Gem::Version
-  version: 1.5.0
+  version: 1.5.1
 platform: ruby
 authors:
 - AndyMaleh
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-07-05 00:00:00.000000000 Z
+date: 2024-07-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: glimmer
@@ -228,6 +228,10 @@ files:
 - bin/minify_css
 - glimmer-dsl-css.gemspec
 - lib/glimmer-dsl-css.rb
+- lib/glimmer-dsl-css/ext/css_percentable.rb
+- lib/glimmer-dsl-css/ext/float.rb
+- lib/glimmer-dsl-css/ext/integer.rb
+- lib/glimmer-dsl-css/ext/numeric.rb
 - lib/glimmer/css/css_fragment.rb
 - lib/glimmer/css/css_fragment_composite.rb
 - lib/glimmer/css/css_minifier.rb