apropos 0.1.0

data/spec/apropos/media_query_spec.rb

@@ -0,0 +1,24 @@
+require_relative "../spec_helper.rb"
+
+describe Apropos::MediaQuery do
+  it "wraps query in parens" do
+    css = described_class.new("min-width: 320px").to_css
+    css.should == "(min-width: 320px)"
+  end
+
+  it "combines media queries" do
+    combo = described_class.new("min-width: 320px").combine(described_class.new("max-width: 480px"))
+    combo.to_css.should == "(min-width: 320px) and (max-width: 480px)"
+  end
+
+  it "parses comma-separated media queries" do
+    query = described_class.new("min-width: 320px, min-resolution: 192dpi")
+    query.to_css.should == "(min-width: 320px), (min-resolution: 192dpi)"
+  end
+
+  it "combines complex media query strings" do
+    base = described_class.new("(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)")
+    combo = base.combine(described_class.new("min-width: 320px"))
+    combo.to_css.should == "(-webkit-min-device-pixel-ratio: 2) and (min-width: 320px), (min-resolution: 192dpi) and (min-width: 320px)"
+  end
+end

data/spec/apropos/set_spec.rb

@@ -0,0 +1,34 @@
+require_relative "../spec_helper.rb"
+
+describe Apropos::Set do
+  def subject
+    @subject ||= described_class.new("foo.jpg", "/dir")
+  end
+
+  it "detects paths with indicators before the base file extension" do
+    subject.variant_path_glob.should == Pathname.new("foo.*.jpg")
+  end
+
+  it "generates a list of variant paths and code fragments" do
+    paths = {
+      "ca" => "foo.ca.jpg",
+      "2x" => "foo.2x.jpg",
+      "large.fr" => "foo.large.fr.jpg",
+      "large.2x.ca" => "foo.large.2x.ca.jpg",
+    }
+    globbed = paths.values.map {|path| "/dir/#{path}"}
+    Dir.should_receive(:glob).with(Pathname.new("/dir/foo.*.jpg")).and_return(globbed)
+    subject.variant_paths.should == paths
+  end
+
+  it "creates Variants from variant paths and code fragments" do
+    Dir.should_receive(:glob).and_return(["/dir/foo.ca.jpg"])
+    Apropos::Variant.should_receive(:new).with("ca", "foo.ca.jpg")
+    subject.variants.length.should == 1
+  end
+
+  it "removes the basedir from paths" do
+    set = described_class.new("foo.jpg", "/foo/bar")
+    set.remove_basedir("/Users/bob/foo/bar/foo.fr.jpg").should == "foo.fr.jpg"
+  end
+end

data/spec/apropos/variant_spec.rb

@@ -0,0 +1,74 @@
+require_relative "../spec_helper.rb"
+require 'ostruct'
+
+describe Apropos::Variant do
+  let(:dummy_path) { "foo.jpg" }
+  let!(:dpi_selector) { OpenStruct.new(:sort_value => 0) }
+  let!(:breakpoint_selector) { OpenStruct.new(:sort_value => 1) }
+  let!(:class_selector) { OpenStruct.new(:sort_value => 2) }
+
+  def variant(code_fragment='')
+    described_class.new(code_fragment, dummy_path)
+  end
+
+  before :all do
+    Apropos::ExtensionParser.add_parser('2x') do |match|
+      dpi_selector
+    end
+    Apropos::ExtensionParser.add_parser('medium') do |match|
+      breakpoint_selector
+    end
+    Apropos::ExtensionParser.add_parser(/^([a-z]{2})$/) do |match|
+      class_selector
+    end
+  end
+
+  after :all do
+    Apropos::ExtensionParser.parsers.clear
+  end
+
+  it "extracts codes from code fragment" do
+    variant("2x.medium.fr").codes.should == %w[2x medium fr]
+  end
+
+  it "collects conditions parsed from code fragment" do
+    variant("2x").conditions.should == [dpi_selector]
+    variant("2x.medium.fr").conditions.should == [dpi_selector, breakpoint_selector, class_selector]
+  end
+
+  it "is invalid if no conditions apply" do
+    v = variant("1x")
+    v.conditions.should == []
+    v.should_not be_valid
+    v2 = variant("2x")
+    v2.should be_valid
+  end
+
+  it "combines conditions of the same type" do
+    v = variant
+    v.stub(:conditions) {
+      [
+        Apropos::MediaQuery.new("min-width: 320px"),
+        Apropos::MediaQuery.new("max-width: 640px")
+      ]
+    }
+    v.rule.should == ["media", "(min-width: 320px) and (max-width: 640px)", "foo.jpg"]
+  end
+
+  it "combines conditions of different types" do
+    v = variant
+    v.stub(:conditions) {
+      [
+        Apropos::MediaQuery.new("min-width: 320px"),
+        Apropos::ClassList.new([".foo"])
+      ]
+    }
+    v.rule.should == ["class+media", ".foo", "(min-width: 320px)", "foo.jpg"]
+  end
+
+  it "aggregates the sort value of the rules" do
+    variant("2x").aggregate_sort_value.should == 0
+    variant("2x.medium").aggregate_sort_value.should == 1
+    variant("2x.medium.fr").aggregate_sort_value.should == 3
+  end
+end

data/spec/spec_helper.rb

@@ -0,0 +1,8 @@
+require 'simplecov'
+SimpleCov.start do
+  add_filter '/spec/'
+  add_filter '/lib/apropos/sass_functions.rb'
+end
+
+$LOAD_PATH.unshift File.expand_path('../../lib', __FILE__)
+require 'apropos'

data/spec/stylesheets_spec.rb

@@ -0,0 +1,114 @@
+require 'spec_helper'
+
+describe 'stylesheets' do
+  let(:import_options) {
+    {style: :compact, load_paths: [Apropos::STYLESHEETS_DIR], syntax: :scss}
+  }
+  let(:css_file) {
+    Sass::Engine.new(@scss_file, import_options).render
+  }
+
+  def stub_files(*files)
+    Dir.stub(:glob).with(Pathname.new("hero.*.jpg")).and_return(files)
+  end
+
+  it "can be imported" do
+    @scss_file = %Q{
+      @import "apropos";
+      .foo {
+        @include apropos-bg-variants('hero.jpg');
+      }
+    }
+    css_file.strip.should == ".foo { background-image: url('/hero.jpg'); }"
+  end
+
+  describe "hidpi stylesheet" do
+    it "generates default hidpi rules" do
+      stub_files("./hero.2x.jpg")
+      @scss_file = %Q{
+        @import "apropos";
+        .foo {
+          @include apropos-bg-variants('hero.jpg');
+        }
+      }
+      css_file.should include('(-webkit-min-device-pixel-ratio: 1.75), (min-resolution: 168dpi)')
+      css_file.should include("'/hero.2x.jpg'")
+    end
+
+    it "allows customizing hidpi extension and query" do
+      stub_files("./hero.hidpi.jpg")
+      @scss_file = %Q{
+        $apropos-hidpi-extension: 'hidpi';
+        $apropos-hidpi-query: '(min-resolution: 300dpi)';
+        @import "apropos";
+        .foo {
+          @include apropos-bg-variants('hero.jpg');
+        }
+      }
+      css_file.should_not include('(-webkit-min-device-pixel-ratio: 1.75)')
+      css_file.should include('(min-resolution: 300dpi)')
+      css_file.should include("'/hero.hidpi.jpg'")
+    end
+  end
+
+  describe "breakpoints stylesheet" do
+    before :each do
+      stub_files("./hero.medium.jpg", "./hero.large.jpg")
+    end
+
+    it "doesn't generate any defaults" do
+      @scss_file = %Q{
+        @import "apropos";
+        .foo {
+          @include apropos-bg-variants('hero.jpg');
+        }
+      }
+      css_file.should_not include('/hero.medium.jpg')
+      css_file.should_not include('/hero.large.jpg')
+    end
+
+    it "allows setting breakpoints" do
+      stub_files("./hero.medium.jpg", "./hero.large.jpg")
+      @scss_file = %Q{
+        $apropos-breakpoints: (medium, 768px), (large, 1024px);
+        @import "apropos";
+        .foo {
+          @include apropos-bg-variants('hero.jpg');
+        }
+      }
+      css_file.should include("@media (min-width: 768px) { .foo { background-image: url('/hero.medium.jpg'); } }")
+      css_file.should include("@media (min-width: 1024px) { .foo { background-image: url('/hero.large.jpg'); } }")
+    end
+  end
+
+  describe "breakpoints and hidpi" do
+    it "can be combined" do
+      stub_files("./hero.large.2x.jpg", "./hero.medium.2x.jpg")
+      @scss_file = %Q{
+        $apropos-breakpoints: (medium, 768px), (large, 1024px);
+        @import "apropos";
+        .foo {
+          @include apropos-bg-variants('hero.jpg');
+        }
+      }
+      css_file.should include("@media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.75), (min-width: 768px) and (min-resolution: 168dpi) { .foo { background-image: url('/hero.medium.2x.jpg'); } }")
+      css_file.should include("@media (min-width: 1024px) and (-webkit-min-device-pixel-ratio: 1.75), (min-width: 1024px) and (min-resolution: 168dpi) { .foo { background-image: url('/hero.large.2x.jpg'); } }")
+    end
+
+    it "sorts breakpoints vs. retina correctly" do
+      # filesystem sort order
+      files = %w[2x large.2x large medium.2x medium].map {|f| "./hero.#{f}.jpg" }
+      stub_files(*files)
+      @scss_file = %Q{
+        $apropos-breakpoints: (medium, 768px), (large, 1024px);
+        @import "apropos";
+        .foo {
+          @include apropos-bg-variants('hero.jpg');
+        }
+      }
+      images = css_file.scan(/hero.+jpg/)
+      sorted_images = %w[2x medium medium.2x large large.2x].map {|f| "hero.#{f}.jpg" }
+      images.should == ["hero.jpg"] + sorted_images
+    end
+  end
+end

data/stylesheets/_apropos.sass

@@ -0,0 +1,3 @@
+@import "apropos/core"
+@import "apropos/hidpi"
+@import "apropos/breakpoints"

data/stylesheets/apropos/_breakpoints.sass

@@ -0,0 +1,6 @@
+$apropos-breakpoints: () !default
+
+$_count: 1
+@each $_breakpoint in $apropos-breakpoints
+  $_: add_breakpoint_image_variant(nth($_breakpoint, 1), "(min-width: #{nth($_breakpoint, 2)})", $_count)
+  $_count: $_count + 1

data/stylesheets/apropos/_core.sass

@@ -0,0 +1,40 @@
+// apropos-bg-variants automatically generates rules for applying image
+// variants as CSS backgrounds.
+//
+// Arguments:
+//   $path: path to base image
+//   $generate-height: true to have height properties generated for all
+//     non-hidpi variants.
+// ===========================================================================
+=apropos-bg-variants($path, $generate-height: false)
+  +apropos-bg-image-with-height($path, $generate-height)
+  @each $_variant in image-variants($path)
+    $_type: nth-polyfill($_variant, 1)
+    $_path: nth-polyfill($_variant, -1)
+    $_class: nth-polyfill($_variant, 2)
+    $_query: nth-polyfill($_variant, -2)
+    @if $_type == "class+media"
+      @media #{$_query}
+        #{nest($_class, "&")}
+          +apropos-bg-image-with-height($_path, $generate-height, $_query)
+    @else if $_type == media
+      @media #{$_query}
+        +apropos-bg-image-with-height($_path, $generate-height, $_query)
+    @else if $_type == class
+      #{nest($_class, "&")}
+        background-image: image-url($_path)
+
+// apropos-bg-image-with-height generates a background-image property and
+// optionally generates a height property calculated from the image, if the
+// query argument is not hidpi.
+//
+// Arguments:
+//   $path: path to base image
+//   $generate-height: true to have height properties generated
+//   $query: media query that this image will be used with (height will not be
+//     generated if the query is hidpi)
+// ===========================================================================
+=apropos-bg-image-with-height($path, $generate-height, $query: "")
+  background-image: image-url($path)
+  @if $generate-height and not (str-index($query, "dpi") > 0 or str-index($query, "pixel-ratio") > 0)
+    height: image-height($path)

data/stylesheets/apropos/_hidpi.sass

@@ -0,0 +1,4 @@
+$apropos-hidpi-extension: "2x" !default
+$apropos-hidpi-query: "(-webkit-min-device-pixel-ratio: 1.75), (min-resolution: 168dpi)" !default
+
+$_: add_dpi_image_variant($apropos-hidpi-extension, $apropos-hidpi-query, 0.5)

metadata

@@ -0,0 +1,169 @@
+--- !ruby/object:Gem::Specification
+name: apropos
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Gabriel Gilder
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2013-08-21 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1.3'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1.3'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: rspec
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '2.13'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '2.13'
+- !ruby/object:Gem::Dependency
+  name: cane
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: simplecov
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+description: Apropos helps your site serve up the appropriate image for every visitor.
+  Serving multiple versions of an image in responsive and/or localized web sites can
+  be a chore, but Apropos simplifies and automates this task. Instead of manually
+  writing a lot of CSS rules to swap different images, Apropos generates CSS for you
+  based on a simple file naming convention.
+email:
+- gabriel@squareup.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- .gitignore
+- CHANGELOG.md
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- apropos.gemspec
+- doc-src/customization.md
+- lib/apropos.rb
+- lib/apropos/class_list.rb
+- lib/apropos/extension_parser.rb
+- lib/apropos/functions.rb
+- lib/apropos/media_query.rb
+- lib/apropos/sass_functions.rb
+- lib/apropos/set.rb
+- lib/apropos/variant.rb
+- lib/apropos/version.rb
+- spec/apropos/class_list_spec.rb
+- spec/apropos/extension_parser_spec.rb
+- spec/apropos/functions_spec.rb
+- spec/apropos/media_query_spec.rb
+- spec/apropos/set_spec.rb
+- spec/apropos/variant_spec.rb
+- spec/spec_helper.rb
+- spec/stylesheets_spec.rb
+- stylesheets/_apropos.sass
+- stylesheets/apropos/_breakpoints.sass
+- stylesheets/apropos/_core.sass
+- stylesheets/apropos/_hidpi.sass
+homepage: https://github.com/square/apropos
+licenses:
+- Apache 2.0
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.0.2
+signing_key: 
+specification_version: 4
+summary: Apropos helps your site serve up the appropriate image for every visitor.
+test_files:
+- spec/apropos/class_list_spec.rb
+- spec/apropos/extension_parser_spec.rb
+- spec/apropos/functions_spec.rb
+- spec/apropos/media_query_spec.rb
+- spec/apropos/set_spec.rb
+- spec/apropos/variant_spec.rb
+- spec/spec_helper.rb
+- spec/stylesheets_spec.rb