stylicon 0.2.0 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 524e3d4f79d939259c43efa7e1571db7e507f852d8655f17b4afd4698e384e74
-  data.tar.gz: cf20bc89defef0a67d3fa767d53bab564a7ad1a3e36097bc55df9732a83682aa
+  metadata.gz: 38690808a8ba07f5bfb35310eee321d2f2eaec78799384847d756ba6661800cc
+  data.tar.gz: c438a87c7cc767734786e4694b50d0384e938447f0fa53c5c039f6febcad4e2f
 SHA512:
-  metadata.gz: e37ae9efd64fe9709d70bddc2eb37c13636052986d2eb035b8ad8ed40ac86084eab9e896bbfbeb32c75e3cd93b79dab396f52101b3329f4bdcc70b729b188f41
-  data.tar.gz: 1e2c82c275b670a5468856008cdf76f30acbc2f9c6d5a20900bade8187bd73f161614d493330f8f097eefb2b5e5b827523a73e787a16a6a2336c9a4d44e51227
+  metadata.gz: dba8bcf1152535c48c72c3bb4cd81ccb0f603cad3314e04fe0284ecf2547082d42884e07572a9b4c34b71b6a1da2433d730ae5e640dd0c4ca6d2a3fe303851c4
+  data.tar.gz: bea0b94eaa5ea0b1f9f29d898154ad31620f00b94bb7e3d900380141db0df79b97cb30f4f987aa5c3607fb6a1c5a9dd5a05e7757b41ce7b39ff4f04bdfa1980a

data/README.md

@@ -2,7 +2,7 @@
 
 ⚡ **High-Performance Icon System** - Generate lightning-fast CSS icon classes from SVG files. Dramatically improve your application's performance by replacing inline SVGs with cacheable, optimized CSS classes.
 
-## 🚀 Why Stylicon? Performance First.
+## Performance First.
 
 Traditional icon approaches hurt performance:
 
@@ -20,6 +20,42 @@ Stylicon generates **cacheable CSS classes**:
 <i class="icon-edit"></i>
 ```
 
+## Performance Benchmarks
+
+  I tested Stylicon against traditional SVG approaches to see if the performance claims hold up.
+
+  ### Test Setup
+  - Users table with 100 rows, 3 action icons per row (300 icons total)
+  - Tested with `oha` HTTP load tester: 100 requests, 10 concurrent connections
+  - Rails 7 development server, local environment
+  - Real-world scenario: Edit, Show, Delete icons
+
+  ### Results
+
+  | Approach | Requests/sec | Avg Response Time | Total Payload | HTTP Requests |
+  |----------|-------------|------------------|---------------|---------------|
+  | Stylicon CSS | 99.7 | 96.5ms | 49.79 KiB | 2 |
+  | Inline SVG | 98.0 | 98.4ms | 256.54 KiB | 1 |
+  | Rails image_tag | 32.9 | 294.1ms | 71.47 KiB | 301 |
+
+  ### Analysis
+
+  **Server Performance**
+  Stylicon handles 3x more requests per second than the Rails image_tag approach. The difference comes from HTTP
+  request overhead - serving 300 individual SVG files per page puts significant load on the Rails server.
+
+  **Payload Size**
+  Stylicon generates the smallest payload at under 50 KiB. Inline SVG creates massive HTML files (256 KiB) because the
+   same SVG markup gets repeated 100 times. This affects loading speed, especially on slower connections.
+
+  **HTTP Requests**
+  The Rails image_tag approach creates 301 HTTP requests per page load (1 for HTML + 300 for individual SVGs). 
+  Stylicon uses just 2 requests - the HTML and one cacheable CSS file.
+
+  **Caching Benefits**
+  The CSS file generated by Stylicon gets cached by browsers, so subsequent page loads and navigation only require the
+   HTML request. This compounds the performance advantage over time
+
 ## Features
 
 - 🎨 **CSS Generation**: Convert SVG files to optimized CSS classes with base64 encoding
@@ -60,14 +96,49 @@ stylicon [config.yml] [output.css]
 stylicon icons.yml stylicon.css
 ```
 
+Create an `icons.yml` configuration file:
+```yaml
+# icons.yml - Configuration for CSS generation
+edit:
+  path: icons/edit.svg
+  class: ".icon-edit"
+  background: "#333"
+
+user:
+  path: icons/user.svg
+  class: [".icon-user", ".user-icon"] 
+  background: "currentColor"
+
+home:
+  path: icons/home.svg
+  class: ".icon-home"
+  # background optional - will use mask mode
+
+delete:
+  path: icons/delete.svg
+  class: ".icon-delete"
+  background: "#e74c3c"
+```
+
 This creates a **single cacheable CSS file** with all your icons as base64-encoded background images:
 
 ```css
-.icon-user {
-  background-image: url('data:image/svg+xml;base64,PHN2Zy...');
-  width: 20px;
-  height: 20px;
+.icon-edit {
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2Zy...");
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  -webkit-mask-position: center;
+  display: inline-block;
+  background-color: #333;
+}
+
+.icon-user, .user-icon {
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2Zy...");
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  -webkit-mask-position: center;
   display: inline-block;
+  background-color: currentColor;
 }
 ```
 
@@ -118,30 +189,6 @@ stylicon --transform-svg "assets/icons/user-*.svg" --out output/ --stroke red --
 stylicon --transform-svg "**/*.svg" --out flattened/ --height 24 --width 24
 ```
 
-## Performance Benchmarks
-
-### Icon Loading Performance
-
-**Test: 100 icons used 10 times each (1,000 total icon instances)**
-
-| Method | HTML Size | HTTP Requests | Cache Efficiency | Load Time |
-|--------|-----------|---------------|------------------|-----------|
-| Inline SVG | 2.3MB | 1 | 0% | 850ms |
-| Individual Icon Files | 45KB | 100 | 80% | 420ms |
-| **Stylicon CSS** | **67KB** | **1** | **100%** | **95ms** |
-
-### Real Application Examples
-
-**E-commerce Site (500 product icons):**
-- Before: 15MB HTML, 3.2s load time
-- After: 890KB HTML + 45KB CSS, 0.8s load time
-- **75% faster loading**
-
-**Admin Dashboard (200 UI icons):**
-- Before: 8MB repeated SVG code
-- After: 380KB total, cached across all pages  
-- **95% reduction in icon-related bandwidth**
-
 ## Command Line Options
 
 ### Core Options

data/lib/stylicon/batch_transformer.rb

@@ -14,19 +14,40 @@ module Stylicon
 
     def transform
       files = find_svg_files
-      FileUtils.mkdir_p(@output_folder)
+      abort "Error: No SVG files found" if files.empty?
+
+      begin
+        FileUtils.mkdir_p(@output_folder)
+      rescue Errno::EACCES
+        abort "Error: Permission denied creating directory #{@output_folder}"
+      rescue => e
+        abort "Error: Failed to create directory #{@output_folder}: #{e.message}"
+      end
+      
+      failures = []
 
       files.each do |input_file|
         output_file = File.join(@output_folder, File.basename(input_file))
+        begin
+          Stylicon::Transformer.new(
+            input_svg: input_file,
+            output_svg: output_file,
+            **@transform_options
+          ).transform
+        rescue => e
+          failures << { file: input_file, error: e.message }
+        end
+      end
 
-        Stylicon::Transformer.new(
-          input_svg: input_file,
-          output_svg: output_file,
-          **@transform_options
-        ).transform
+      if failures.any?
+        puts "Failed to transform #{failures.length} files:"
+        failures.each do |failure|
+          puts "  #{failure[:file]}: #{failure[:error]}"
+        end
+        abort "Error: Failed to transform some files"
       end
 
-      puts "🎨 Transformed #{files.length} SVG files to #{@output_folder}"
+      puts "🎨 Transformed #{files.length} SVG files to #{@output_folder} successfully"
     end
 
     private

data/lib/stylicon/generator.rb

@@ -10,11 +10,22 @@ module Stylicon
     end
 
     def generate
-      config = YAML.load_file(@config_path)
+      begin
+        config = YAML.load_file(@config_path)
+      rescue Errno::ENOENT
+        abort "Error: Config file not found: #{@config_path}"
+      rescue Psych::SyntaxError => e
+        abort "Error: Config file is not valid YAML: #{@config_path}: #{e.message}"
+      end
+
+      abort "Error: Config file is empty: #{@config_path}" if config.nil? || config.empty?
+
       css = ""
 
       config.each do |name, opts|
         path = opts["path"]
+        abort "Error: No path specified for icon #{name} in config" if path.nil? || path.empty?
+        abort "Error: SVG file not found: #{path}" unless File.exist?(path)
         classes = Array(opts["class"] || ".icon-#{name}")
         background = opts["background"]
 
@@ -22,6 +33,7 @@ module Stylicon
         doc = Nokogiri::XML(svg)
 
         svg_node = doc.at_css("svg")
+        abort "Error: no svg element found in #{path}" if svg_node.nil?
         svg_node.remove_attribute("fill")
         svg_node.remove_attribute("width")
         svg_node.remove_attribute("height")
@@ -43,8 +55,18 @@ module Stylicon
         RULE
       end
 
+      begin
       File.write(@output_path, css)
       puts "✅ stylicon.css written to #{@output_path}"
+      rescue Errno::ENOENT
+        abort "Error: output directory does not exist: #{File.dirname(@output_path)}"
+      rescue Errno::EACCES
+        abort "Error: Permission denied writing to #{@output_path}"
+      rescue Errno::ENOSPC
+        abort "Error: Not enogh space on device when writing to #{@output_path}"
+      rescue => e
+        abort "Error: Failed to write output file: #{e.message}"
+      end
     end
   end
 end

data/lib/stylicon/transformer.rb

@@ -14,8 +14,26 @@ module Stylicon
     end
 
     def transform
-      doc = Nokogiri::XML(File.read(@input_svg))
+      begin
+        svg_content = File.read(@input_svg)
+      rescue Errno::ENOENT
+        abort "Error: Input SVG file not found: #{@input_svg}"
+      rescue Errno::EACCES
+        abort "Error: Permission denied reading file #{@input_svg}"
+      rescue Errno::EISDIR
+        abort "Error: Path is a directory, not a file: #{@input_svg}"
+      rescue => e
+        abort "Error: Failed to read input file: #{e.message}"
+      end
+
+      doc = Nokogiri::XML(svg_content)
+
+      if doc.errors.any?
+        abort "Invalid XML in #{@input_svg}: #{doc.errors.first.message}"
+      end
+
       svg = doc.at_css("svg")
+      abort "Error: No svg element found in #{@input_svg}" if svg.nil?
 
       svg["style"] = [svg["style"], @style].compact.join("; ") if @style
       svg["class"] = [svg["class"], @classes].compact.join(" ") if @classes
@@ -40,7 +58,18 @@ module Stylicon
         end
       end
 
-      File.write(@output_svg, doc.to_xml)
+      begin
+        File.write(@output_svg, doc.to_xml)
+      rescue Errno::ENOENT
+        abort "Error: Output directory does not exist: #{File.dirname(@output_svg)}"
+      rescue Errno::EACCES
+        abort "Error: Permission denied writing to #{@output_svg}"
+      rescue Errno::ENOSPC
+        abort "Error: No space left on device when writing #{@output_svg}"
+      rescue => e
+        abort "Error: Failed to write output file: #{e.message}"
+      end
+      
       puts "🎨 Transformed SVG written to #{@output_svg}"
     end
   end

data/lib/stylicon/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Stylicon
-  VERSION = "0.2.0"
+  VERSION = "0.2.1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: stylicon
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.2.1
 platform: ruby
 authors:
 - JG
@@ -58,7 +58,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.7.1
+rubygems_version: 3.6.9
 specification_version: 4
 summary: Generate performant CSS classes from SVGs using YAML configuration.
 test_files: []