glimmer-dsl-css 1.3.0 → 1.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a00ff31e682fcc94d72464388bec42ba14ee932dda12bb3c6013b8dd8e406db5
-  data.tar.gz: f78b7fe8fab6e01321ffffb4af61321470e131ccd4da523fed318e753e1b90c6
+  metadata.gz: 63ac41960245ceacb5eaec363a41bf8f80e56bdea6e150f68a16266b88b96937
+  data.tar.gz: 40ead61962a906cd7ecf1703afcb5b0998b369416e026e17a0b2cebe3aa770f8
 SHA512:
-  metadata.gz: 278840c459c817881f89642c343ceb56cf201604adbb7d4b26e6f2d6676f9716245c196269422696d9936cc3795c296d48e52127fe1afb05b26b0c8f91bbfefa
-  data.tar.gz: 6e191a28c199a17b44c7e3b5e154d87bb6f36d945eb5e9aafe536fd3db2f87953f79fd99f80af53ef555782052ab822299bfa51ed38308ddec42da9726b723ab
+  metadata.gz: 07ef93287f2769c303d1159d451468d33d5c6cff4aa81679fa5ff559bc733fbc834d26daf909a7db5f03928b9ced56efef39f34b83d2ffd65a7b5fbb219918ce
+  data.tar.gz: e9fee33a86f2ba56bc8e9f43071a437e440a0b68f1e9f3bd0755f4497138188118e7d7812860c2f7590f59b23008e2b473dec3ac49746fcb27b10d8becaac51b

data/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Change Log
 
+## 1.4.0
+
+- `css_to_glimmer` converter command for automatically converting CSS to Glimmer DSL Ruby code
+- `css_to_glimmer` -r=rule_keyword option to customize rule keyword (rule has aliases: rul, ru, r, s, _)
+- `minifier` converter command for automatically minifying CSS
+- Fix issue with `display` CSS property not getting interpreted successfully in Glimmer DSL Ruby code
+
 ## 1.3.0
 
 - Support media queries

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.3.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.4.0
 ## 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)
@@ -6,13 +6,15 @@
 [![Maintainability](https://api.codeclimate.com/v1/badges/c7365cdb8556be433115/maintainability)](https://codeclimate.com/github/AndyObtiva/glimmer-dsl-css/maintainability)
 [![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)
 
-[Glimmer](https://github.com/AndyObtiva/glimmer) DSL for CSS provides Ruby syntax for building CSS (Cascading Style Sheets). It used to be part of the [Glimmer](https://github.com/AndyObtiva/glimmer) library (created in 2007), but eventually got extracted into its own project.
+[Glimmer](https://github.com/AndyObtiva/glimmer) DSL for CSS provides Ruby syntax for building CSS (Cascading Style Sheets). It used to be part of the [Glimmer](https://github.com/AndyObtiva/glimmer) library (created in 2007), but eventually got extracted into its own project. The Ruby gem also includes a [CSS to Glimmer converter](#css-to-glimmer-converter) (`css_to_glimmer`) to automatically convert legacy CSS code into Glimmer DSL syntax.
 
 Example (you can try in IRB):
 
 ```ruby
 require 'glimmer-dsl-css'
+
 include Glimmer
+
 @css = css {
   body {
     font_size '1.1em'
@@ -31,6 +33,7 @@ include Glimmer
     }
   }
 }
+
 puts @css
 ```
 
@@ -61,7 +64,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.3.0
+gem install glimmer-dsl-css -v 1.4.0
 ```
 
 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 ...`
@@ -76,7 +79,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.3.0'
+gem 'glimmer-dsl-css', '~> 1.4.0'
 ```
 
 And, then run:
@@ -115,17 +118,21 @@ Example (you can try in IRB):
 
 ```ruby
 require 'glimmer-dsl-css'
+
 include Glimmer
+
 @css = css {
   body {
     font_size '1.1em'
     background 'white'
   }
+  
   r('body > h1') {
     background_color :red
     font_size 24
   }
 }
+
 puts @css
 ```
 
@@ -171,7 +178,9 @@ As you saw above, numeric values (e.g. `24` in `font_size 24`) automatically get
 
 ```ruby
 require 'glimmer-dsl-css'
+
 include Glimmer
+
 @css = css {
   body {
     font_size '1.1em'
@@ -182,6 +191,7 @@ include Glimmer
     font_size 24
   end
 }
+
 puts @css
 ```
 
@@ -191,6 +201,93 @@ Output (minified CSS):
 body{font-size:1.1em;background:white}body > h1{background-color:red;font-size:24px}
 ```
 
+### CSS to Glimmer Converter
+
+The Ruby gem includes a CSS to Glimmer converter (`css_to_glimmer`) to automatically convert legacy CSS code into Glimmer DSL syntax.
+
+Script:
+
+[bin/css_to_glimmer](/bin/css_to_glimmer)
+
+Usage:
+
+```
+css_to_glimmer [-r=rule_keyword] path_to_css_file
+```
+
+Example:
+
+```
+css_to_glimmer input.css
+```
+
+Prints:
+
+```
+Converting from CSS syntax to Glimmer DSL Ruby syntax for input file: input.css
+Converted output file: input.css.glimmer.rb
+```
+
+Output file (`input.css.glimmer.rb`) is a runnable Ruby file containing Glimmer DSL for CSS syntax:
+
+```
+require 'glimmer-dsl-css'
+
+include Glimmer
+
+style_sheet = css {
+  rule('html,body') {
+    margin '0'
+    padding '0'
+  }
+  
+  media('(max-width: 430px)') {
+    rule('.footer') {
+      height '50px'
+    }
+    
+    rule('.filters') {
+      bottom '10px'
+    }
+  }
+}
+
+puts style_sheet.to_s
+```
+
+If you would rather customize the `rule` keyword with a shorter alias like `rul`, `ru`, `r`, `s` (for selector), or `_`, you can run the following command:
+
+```
+css_to_glimmer -r=ru input.css
+```
+
+Output file (`input.css.glimmer.rb`) is a runnable Ruby file containing Glimmer DSL for CSS syntax:
+
+```
+require 'glimmer-dsl-css'
+
+include Glimmer
+
+style_sheet = css {
+  ru('html,body') {
+    margin '0'
+    padding '0'
+  }
+  
+  media('(max-width: 430px)') {
+    ru('.footer') {
+      height '50px'
+    }
+    
+    ru('.filters') {
+      bottom '10px'
+    }
+  }
+}
+
+puts style_sheet.to_s
+```
+
 ## Multi-DSL Support
 
 Learn more about how to use this DSL alongside other Glimmer DSLs:

data/VERSION

@@ -1 +1 @@
-1.3.0
+1.4.0

data/bin/css_to_glimmer

@@ -0,0 +1,19 @@
+#!/usr/bin/env ruby
+
+require_relative '../lib/glimmer/css/css_to_glimmer_converter'
+
+usage = "***Glimmer DSL for CSS - CSS to Glimmer Converter***\nUsage: css_to_glimmer path_to_css_file"
+
+if ARGV.empty?
+  puts usage
+else
+  css_file_path = ARGV.last
+  puts "Converting from CSS syntax to Glimmer DSL Ruby syntax for input file: #{css_file_path}"
+  css = File.read(css_file_path)
+  rule_keyword = ARGV.find { |arg| arg.start_with?("-r=") }.to_s.split('=')[1].to_s
+  converter = rule_keyword.empty? ? Glimmer::CSS::CSSToGlimmerConverter.new : Glimmer::CSS::CSSToGlimmerConverter.new(rule_keyword: rule_keyword)
+  glimmer = converter.convert(css)
+  glimmer_file_path = "#{css_file_path}.glimmer.rb"
+  File.write(glimmer_file_path, glimmer)
+  puts "Converted output file: #{glimmer_file_path}"
+end

data/bin/minify_css

@@ -0,0 +1,20 @@
+#!/usr/bin/env ruby
+
+require_relative '../lib/glimmer/css/css_minifier'
+
+usage = "***Glimmer DSL for CSS - CSS Minifier***\nUsage: minify_css path_to_css_file"
+
+# TODO support option to select rule, or rul, or r
+
+if ARGV.empty?
+  puts usage
+else
+  css_file_path = ARGV.first
+  puts "Minifying CSS for input file: #{css_file_path}"
+  css = File.read(css_file_path)
+  converter = Glimmer::CSS::CSSMinifier.new
+  minified_css = converter.convert(css)
+  minified_css_file_path = "#{File.basename(css_file_path, '.css')}.minified.css"
+  File.write(minified_css_file_path, minified_css)
+  puts "Converted output file: #{minified_css_file_path}"
+end

data/glimmer-dsl-css.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-css 1.3.0 ruby lib
+# stub: glimmer-dsl-css 1.4.0 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-css".freeze
-  s.version = "1.3.0"
+  s.version = "1.4.0"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0".freeze) if s.respond_to? :required_rubygems_version=
   s.require_paths = ["lib".freeze]
@@ -14,6 +14,7 @@ Gem::Specification.new do |s|
   s.date = "2024-05-18"
   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]
   s.extra_rdoc_files = [
     "CHANGELOG.md",
     "LICENSE.txt",
@@ -25,13 +26,18 @@ Gem::Specification.new do |s|
     "LICENSE.txt",
     "README.md",
     "VERSION",
+    "bin/css_to_glimmer",
+    "bin/minify_css",
     "glimmer-dsl-css.gemspec",
     "lib/glimmer-dsl-css.rb",
+    "lib/glimmer/css/css_minifier.rb",
+    "lib/glimmer/css/css_to_glimmer_converter.rb",
     "lib/glimmer/css/media_query.rb",
     "lib/glimmer/css/rule.rb",
     "lib/glimmer/css/rule_composite.rb",
     "lib/glimmer/css/style_sheet.rb",
     "lib/glimmer/dsl/css/css_expression.rb",
+    "lib/glimmer/dsl/css/display_expression.rb",
     "lib/glimmer/dsl/css/dsl.rb",
     "lib/glimmer/dsl/css/dynamic_property_expression.rb",
     "lib/glimmer/dsl/css/element_rule_expression.rb",
@@ -52,6 +58,7 @@ Gem::Specification.new do |s|
   s.specification_version = 4
 
   s.add_runtime_dependency(%q<glimmer>.freeze, [">= 2.0.0", "< 3.0.0"])
+  s.add_runtime_dependency(%q<css_parser>.freeze, [">= 1.0.0", "< 2.0.0"])
   s.add_development_dependency(%q<rspec-mocks>.freeze, ["~> 3.0"])
   s.add_development_dependency(%q<rspec>.freeze, ["~> 3.0"])
   s.add_development_dependency(%q<puts_debuggerer>.freeze, [">= 0"])

data/lib/glimmer/css/css_minifier.rb

@@ -0,0 +1,30 @@
+# Copyright (c) 2020-2024 - Andy Maleh
+#
+# Permission is hereby granted, free of charge, to any person obtaining
+# a copy of this software and associated documentation files (the
+# "Software"), to deal in the Software without restriction, including
+# without limitation the rights to use, copy, modify, merge, publish,
+# distribute, sublicense, and/or sell copies of the Software, and to
+# permit persons to whom the Software is furnished to do so, subject to
+# the following conditions:
+#
+# The above copyright notice and this permission notice shall be
+# included in all copies or substantial portions of the Software.
+#
+# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+# EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+# MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+# NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+# LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+# OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+# WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+module Glimmer
+  module CSS
+    class CSSMinifier
+      def convert(css)
+        css.lines.map(&:chomp).map(&:strip).join
+      end
+    end
+  end
+end

data/lib/glimmer/css/css_to_glimmer_converter.rb

@@ -0,0 +1,121 @@
+# Copyright (c) 2020-2024 - Andy Maleh
+#
+# Permission is hereby granted, free of charge, to any person obtaining
+# a copy of this software and associated documentation files (the
+# "Software"), to deal in the Software without restriction, including
+# without limitation the rights to use, copy, modify, merge, publish,
+# distribute, sublicense, and/or sell copies of the Software, and to
+# permit persons to whom the Software is furnished to do so, subject to
+# the following conditions:
+#
+# The above copyright notice and this permission notice shall be
+# included in all copies or substantial portions of the Software.
+#
+# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+# EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+# MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+# NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+# LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+# OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+# WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+require 'css_parser'
+require_relative 'css_minifier'
+
+module Glimmer
+  module CSS
+    class CSSToGlimmerConverter
+      include CssParser
+      
+      RULE_KEYWORDS = %w[rule rul ru r s _]
+      
+      # This option specifies if we want to use the default rule keyword or an alias like rul or r
+      attr_reader :rule_keyword
+      
+      def initialize(rule_keyword: 'rule')
+        @rule_keyword = rule_keyword.to_s
+        validate_rule_keyword
+      end
+      
+      def convert(css)
+        glimmer = ''
+        glimmer += "require 'glimmer-dsl-css'\n\n"
+        glimmer += "include Glimmer\n\n"
+        glimmer += "style_sheet = css {\n"
+        glimmer += convert_css(css).lines.map { |line| "  #{line}" }.join
+        glimmer += "}\n\n"
+        glimmer += "puts style_sheet.to_s\n"
+      end
+      
+      def minify(css)
+        CSSMinifier.new.convert(css)
+      end
+      
+      def remove_charset(css)
+        css.sub(/@charset[^;]*;/, '')
+      end
+      
+      def remove_comments(css)
+        output = ''
+        comment = false
+        current_two_characters = [];
+        css.chars.each do |character|
+          output << character if !comment
+          current_two_characters.shift if current_two_characters.size == 2
+          current_two_characters << character
+          if !comment && current_two_characters.join == '/*'
+            comment = true
+            output = output[0...-2]
+          elsif comment && current_two_characters.join == '*/'
+            comment = false
+          end
+        end
+        output
+      end
+      
+      private
+      
+      def convert_css(css)
+        parser = CssParser::Parser.new
+        parser.load_string!(css)
+        parser.rules_by_media_query.map do |media_query, rule_set|
+          if media_query == :all
+            convert_rule_set_to_glimmer(rule_set)
+          else
+            convert_media_query_rule_set_to_glimmer(rule_set, media_query)
+          end
+        end.join("\n")
+      end
+      
+      def convert_rule_set_to_glimmer(rule_set)
+        glimmer = ''
+        rule_set.each_with_index do |rule, index|
+          glimmer += "\n" if index > 0
+          rule_selector = rule.selectors.join(', ').gsub("'", '"')
+          glimmer += "#{rule_keyword}('#{rule_selector}') {\n"
+          rule.each_declaration do |declaration, value|
+            property_name = declaration.gsub('-', '_')
+            property_value = value.sub(/^("|')/, '').sub(/("|')$/, '').gsub("'", '"')
+            glimmer += "  #{property_name} '#{property_value}'\n"
+          end
+          glimmer += "}\n"
+        end
+        glimmer
+      end
+      
+      def convert_media_query_rule_set_to_glimmer(rule_set, media_query)
+        glimmer = ''
+        glimmer += "media('#{media_query.to_s.gsub("'", '"')}') {\n"
+        glimmer += convert_rule_set_to_glimmer(rule_set).lines.map { |line| "  #{line}" }.join
+        glimmer += "}\n"
+        glimmer
+      end
+      
+      private
+      
+      def validate_rule_keyword
+        raise "rule_keyword '#{rule_keyword}' is invalid! It must be 'rule', 'rul', 'ru', 'r', 's', or '_'" if !RULE_KEYWORDS.include?(rule_keyword)
+      end
+    end
+  end
+end

data/lib/glimmer/css/media_query.rb

@@ -19,6 +19,9 @@
 # OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 # WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
+require 'glimmer/css/rule_composite'
+require 'glimmer/css/rule'
+
 module Glimmer
   module CSS
     class MediaQuery < Rule

data/lib/glimmer/dsl/css/display_expression.rb

@@ -0,0 +1,33 @@
+# Copyright (c) 2020-2024 - Andy Maleh
+#
+# Permission is hereby granted, free of charge, to any person obtaining
+# a copy of this software and associated documentation files (the
+# "Software"), to deal in the Software without restriction, including
+# without limitation the rights to use, copy, modify, merge, publish,
+# distribute, sublicense, and/or sell copies of the Software, and to
+# permit persons to whom the Software is furnished to do so, subject to
+# the following conditions:
+#
+# The above copyright notice and this permission notice shall be
+# included in all copies or substantial portions of the Software.
+#
+# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+# EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+# MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+# NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+# LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+# OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+# WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+require 'glimmer/dsl/static_expression'
+require 'glimmer/dsl/css/property_expression'
+
+module Glimmer
+  module DSL
+    module CSS
+      class DisplayExpression < StaticExpression
+        include PropertyExpression
+      end
+    end
+  end
+end

data/lib/glimmer/dsl/css/dsl.rb

@@ -29,6 +29,7 @@ require 'glimmer/dsl/css/rul_expression'
 require 'glimmer/dsl/css/ru_expression'
 require 'glimmer/dsl/css/s_expression'
 require 'glimmer/dsl/css/pv_expression'
+require 'glimmer/dsl/css/display_expression'
 require 'glimmer/dsl/css/media_expression'
 
 module Glimmer

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-css
 version: !ruby/object:Gem::Version
-  version: 1.3.0
+  version: 1.4.0
 platform: ruby
 authors:
 - AndyMaleh
@@ -30,6 +30,26 @@ dependencies:
     - - "<"
       - !ruby/object:Gem::Version
         version: 3.0.0
+- !ruby/object:Gem::Dependency
+  name: css_parser
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 1.0.0
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: 2.0.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 1.0.0
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: 2.0.0
 - !ruby/object:Gem::Dependency
   name: rspec-mocks
   requirement: !ruby/object:Gem::Requirement
@@ -190,7 +210,9 @@ dependencies:
         version: '0'
 description: Glimmer DSL for CSS (Ruby Programmable Cascading Style Sheets)
 email: andy.am@gmail.com
-executables: []
+executables:
+- css_to_glimmer
+- minify_css
 extensions: []
 extra_rdoc_files:
 - CHANGELOG.md
@@ -202,13 +224,18 @@ files:
 - LICENSE.txt
 - README.md
 - VERSION
+- bin/css_to_glimmer
+- bin/minify_css
 - glimmer-dsl-css.gemspec
 - lib/glimmer-dsl-css.rb
+- lib/glimmer/css/css_minifier.rb
+- lib/glimmer/css/css_to_glimmer_converter.rb
 - lib/glimmer/css/media_query.rb
 - lib/glimmer/css/rule.rb
 - lib/glimmer/css/rule_composite.rb
 - lib/glimmer/css/style_sheet.rb
 - lib/glimmer/dsl/css/css_expression.rb
+- lib/glimmer/dsl/css/display_expression.rb
 - lib/glimmer/dsl/css/dsl.rb
 - lib/glimmer/dsl/css/dynamic_property_expression.rb
 - lib/glimmer/dsl/css/element_rule_expression.rb