livingstyleguide 0.0.0 → 0.1.0

data/Rakefile

@@ -1 +1,11 @@
-require "bundler/gem_tasks"
+require 'bundler/gem_tasks'
+require 'rake/testtask'
+
+Rake::TestTask.new :test do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  test_files = FileList['test/**/*_test.rb']
+  t.test_files = test_files
+  t.verbose = true
+end
+

data/lib/livingstyleguide.rb

@@ -1,5 +1,14 @@
-require "livingstyleguide/version"
+require 'livingstyleguide/version'
+require 'livingstyleguide/sass_extensions'
+require 'livingstyleguide/variables_importer'
+require 'livingstyleguide/markdown_extensions'
+require 'sass/plugin'
 
 module LivingStyleGuide
-  # Your code goes here...
 end
+
+Compass.configuration.add_import_path LivingStyleGuide::VariablesImporter.new
+
+base_directory = File.join(File.dirname(__FILE__), '..')
+Compass::Frameworks.register 'livingstyleguide', path: base_directory
+

data/lib/livingstyleguide/markdown_extensions.rb

@@ -0,0 +1,107 @@
+require 'redcarpet'
+require 'tilt'
+require 'minisyntax'
+require "erb"
+
+module LivingStyleGuide
+  class RedcarpetTemplate < ::Tilt::RedcarpetTemplate::Redcarpet2
+    RENDER_OPTIONS = {
+      autolink: true,
+      fenced_code_blocks: true,
+      tables: true,
+      strikethrough: true,
+      space_after_headers: true,
+      superscript: true
+    }
+
+    def generate_renderer
+      RedcarpetHTML.new(RENDER_OPTIONS)
+    end
+
+    def prepare
+      @engine = ::Redcarpet::Markdown.new(generate_renderer, RENDER_OPTIONS)
+      @output = nil
+    end
+
+    def evaluate(context, locals, &block)
+      @context ||= context
+
+      if @engine.renderer.respond_to? :middleman_app=
+        @engine.renderer.middleman_app = @context
+      end
+      super
+    end
+  end
+
+  class RedcarpetHTML < ::Redcarpet::Render::HTML
+    attr_accessor :middleman_app
+
+    def image(link, title, alt_text)
+      middleman_app.image_tag(link, :title => title, :alt => alt_text)
+    end
+
+    def link(link, title, content)
+      middleman_app.link_to(content, link, :title => title)
+    end
+
+    def header(text, header_level)
+      klass = %w(page-title headline sub-headline)[header_level]
+      header_level += 1
+      %Q(<h#{header_level} class="livingstyleguide--#{klass}">#{text}</h#{header_level}>\n)
+    end
+
+    def paragraph(text)
+      if text =~ /^\{\{variables:(.+)\}\}$/
+        uri = $1
+        result = %Q(<ul class="livingstyleguide--color-swatches">\n)
+        VariablesImporter.variables(uri).each do |variable|
+          result << %Q(<li class="livingstyleguide--color-swatch $#{variable}">$#{variable}</li>\n)
+        end
+        result << "</ul>\n"
+      elsif text =~ /^\{\{font-example:(.+)\}\}$/
+        font = $1
+        <<-HTML.gsub('          ', '')
+          <div class="livingstyleguide--font-example" style="font: #{font}">
+            ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+            abcdefghijklmnopqrstuvwxyz<br>
+            0123456789<br>
+            !&/()$=@;:,.
+          </div>
+        HTML
+      else
+        %Q(<p class="livingstyleguide--paragraph">#{text}</p>\n)
+      end
+    end
+
+    def list(contents, list_type)
+      tag_name = "#{list_type[0]}l"
+      %Q(<#{tag_name} class="livingstyleguide--#{list_type}-list">\n#{contents}</#{tag_name}>\n)
+    end
+
+    def list_item(text, list_type)
+      %Q(<li class="livingstyleguide--#{list_type}-list-item">#{text.strip}</li>\n)
+    end
+
+    def block_code(code, language)
+      if %w(example layout-example).include?(language)
+        html = code.gsub(/\*\*\*(.+?)\*\*\*/m, '\\1')
+        %Q(<div class="livingstyleguide--#{language}">\n  #{html}\n</div>) + "\n" + block_code(code, 'html')
+      else
+        code = ERB::Util.html_escape(code).gsub(/&quot;/, '"')
+        code = ::MiniSyntax.highlight(code.strip, language.to_s.strip.to_sym)
+        code.gsub! /^\s*\*\*\*\n(.+?)\n\s*\*\*\*\n/m, %Q(<strong class="livingstyleguide--code-highlight-block">\\1</strong>)
+        code.gsub! /\*\*\*(.+?)\*\*\*/, %Q(<strong class="livingstyleguide--code-highlight">\\1</strong>)
+        %Q(<pre class="livingstyleguide--code-block"><code class="livingstyleguide--code">#{code}</code></pre>)
+      end
+    end
+
+    def codespan(code)
+      code = ERB::Util.html_escape(code)
+      %Q(<code class="livingstyleguide--code-span livingstyleguide--code">#{code}</code>)
+    end
+
+  end
+
+  ::Tilt.register RedcarpetTemplate, 'markdown', 'mkd', 'md'
+end
+

data/lib/livingstyleguide/sass_extensions.rb

@@ -0,0 +1,9 @@
+module LivingStyleGuide::SassExtensions
+end
+
+require 'livingstyleguide/sass_extensions/functions'
+require 'sass'
+
+module Sass::Script::Functions
+  include LivingStyleGuide::SassExtensions::Functions
+end

data/lib/livingstyleguide/sass_extensions/functions.rb

@@ -0,0 +1,12 @@
+module LivingStyleGuide::SassExtensions::Functions
+
+  def list_variables(uri)
+    uri = uri.value
+    variables = LivingStyleGuide::VariablesImporter.variables(uri)
+    variables.map! do |name|
+      Sass::Script::String.new(name)
+    end
+    Sass::Script::List.new(variables, :space)
+  end
+
+end

data/lib/livingstyleguide/variables_importer.rb

@@ -0,0 +1,81 @@
+require 'erb'
+require 'ostruct'
+require 'compass'
+
+module LivingStyleGuide
+  class VariablesImporter < Sass::Importers::Base
+    VAILD_FILE_NAME = /\A#{Sass::SCSS::RX::IDENT}\Z/
+    VARIABLE_IMPORTER_REGEX = %r{^variables:(((.+/)?([^\*.]+))/(.+?)(\.s[ac]ss)?)$}
+    VALID_EXTENSIONS = %w(*.sass *.scss)
+
+    TEMPLATE_FOLDER = File.join(File.expand_path('../', __FILE__), 'variables_importer')
+    CONTENT_TEMPLATE_FILE = File.join(TEMPLATE_FOLDER, 'content.erb')
+    CONTENT_TEMPLATE = ERB.new(File.read(CONTENT_TEMPLATE_FILE))
+
+    def find(uri, options)
+      if uri =~ VARIABLE_IMPORTER_REGEX
+        uri = $1
+        return self.class.sass_engine(uri, self.class.variables(uri), self, options)
+      end
+      nil
+    end
+
+    def find_relative(uri, base, options)
+      nil
+    end
+
+    def to_s
+      self.class.name
+    end
+
+    def hash
+      self.class.name.hash
+    end
+
+    def eql?(other)
+      other.class == self.class
+    end
+
+    def key(uri, options={})
+      [self.class.name + ":variables:" + File.dirname(File.expand_path(uri)), File.basename(uri)]
+    end
+
+    def self.variables(uri)
+      uri += '.s?ss' unless uri =~ /\.s[ac]ss$/
+      uri.gsub! %r{^(.*)/(.+)$}, '\1/{_,}\2'
+      variables = []
+      paths = [Compass.configuration.sass_path, Compass.configuration.additional_import_paths].flatten
+      paths.each do |path|
+        if path.is_a? String
+          Dir.glob(File.join(path, uri)).each do |file|
+            sass = File.read(file)
+            variables << sass.scan(%r(\$([a-z\-_]+)\s*:))
+          end
+        end
+      end
+      variables.flatten!
+      variables.uniq!
+      variables
+    end
+
+    def self.sass_options(uri, importer, options)
+      options.merge! filename: uri.gsub(%r{\*/},"*\\/"), syntax: :scss, importer: importer
+    end
+
+    def self.sass_engine(uri, name, importer, options)
+      content = content_for_images(uri, name, options[:skip_overrides])
+      Sass::Engine.new(content, sass_options(uri, importer, options))
+    end
+
+    def self.content_for_images(uri, variables, skip_overrides = false)
+      binder = LivingStyleGuide::Binding.new(variables: variables)
+      CONTENT_TEMPLATE.result(binder.get_binding)
+    end
+  end
+
+  class Binding < OpenStruct
+    def get_binding
+      binding
+    end
+  end
+end

data/lib/livingstyleguide/variables_importer/content.erb

@@ -0,0 +1,19 @@
+<% variables.each do |variable| %>
+  .\$<%= variable %> {
+    @if type-of($<%= variable %>) == color {
+      @extend %livingstyleguide--color-swatch !optional;
+      @if (lightness($<%= variable %>) < lightness($livingstyleguide--color)) {
+        color: $livingstyleguide--background-color;
+      }
+
+      &:before {
+        background: $<%= variable %>;
+      }
+    }
+
+    &:after {
+      @extend %livingstyleguide--code !optional;
+      content: "#{$<%= variable %>}";
+    }
+  }
+<% end %>

data/lib/livingstyleguide/version.rb

@@ -1,3 +1,3 @@
 module LivingStyleGuide
-  VERSION = "0.0.0"
+  VERSION = "0.1.0"
 end

data/livingstyleguide.gemspec

@@ -16,4 +16,10 @@ Gem::Specification.new do |gem|
   gem.executables   = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f) }
   gem.test_files    = gem.files.grep(%r{^(test|spec|features)/})
   gem.require_paths = ["lib"]
+
+  gem.add_dependency 'minisyntax'
+  gem.add_dependency 'middleman', '>= 3.0.9'
+  gem.add_dependency 'compass'
+  gem.add_dependency 'sass'
+  gem.add_dependency 'redcarpet'
 end

data/stylesheets/_livingstyleguide.scss

@@ -0,0 +1,52 @@
+//// INTEGRATION ////
+
+$livingstyleguide--layout-selector: body !default;
+
+//// TYPOGRAPHY ////
+
+$livingstyleguide--base-font: 'Georgia', 'Times New Roman', serif !default;
+$livingstyleguide--base-font-size: 14px !default;
+$livingstyleguide--base-font-weight: normal !default;
+$livingstyleguide--base-line-height: 1.4 !default;
+$livingstyleguide--headline-font: $livingstyleguide--base-font !default;
+$livingstyleguide--page-title-font-size: 30px !default;
+$livingstyleguide--headline-font-size: 22px !default;
+$livingstyleguide--sub-headline-font-size: 16px !default;
+$livingstyleguide--headline-font-weight: bold !default;
+$livingstyleguide--headline-line-height: 1.1 !default;
+$livingstyleguide--code-font: Courier, "Courier New", monospace !default;
+$livingstyleguide--code-font-size: 12px !default;
+$livingstyleguide--code-font-weight: normal !default;
+$livingstyleguide--code-line-height: 1.5 !default;
+
+//// STYLING ////
+
+$livingstyleguide--background-color: #f7f7f7 !default;
+$livingstyleguide--border-width: 1px !default;
+$livingstyleguide--border-color: silver !default;
+$livingstyleguide--border-radius: 0 !default;
+$livingstyleguide--color: #505050 !default;
+$livingstyleguide--width: 640px !default;
+$livingstyleguide--gap-width: 10px !default;
+
+$livingstyleguide--code-background-color: #505050 !default;
+$livingstyleguide--code-color: white !default;
+$livingstyleguide--code-border-width: $livingstyleguide--border-width !default;
+$livingstyleguide--code-border-color: $livingstyleguide--border-color !default;
+$livingstyleguide--code-border-radius: $livingstyleguide--border-radius !default;
+
+$livingstyleguide--color-swatch-color: black !default;
+$livingstyleguide--color-swatch-border-width: $livingstyleguide--border-width !default;
+$livingstyleguide--color-swatch-border-color: $livingstyleguide--border-color !default;
+$livingstyleguide--color-swatch-border-radius: $livingstyleguide--border-radius !default;
+$livingstyleguide--color-swatches-per-line: 2 !default;
+
+$livingstyleguide--highlight-color: #f6ffa3 !default;
+$livingstyleguide--highlight-border-radius: 2px;
+
+//// IMPORTS ////
+
+@import "livingstyleguide/layout";
+@import "livingstyleguide/content";
+@import "livingstyleguide/code";
+@import "livingstyleguide/color-swatches";

data/stylesheets/livingstyleguide/_code.scss

@@ -0,0 +1,86 @@
+.livingstyleguide--code-span,
+.livingstyleguide--code-block {
+  background: $livingstyleguide--code-background-color;
+  color: $livingstyleguide--code-color;
+  font-family: $livingstyleguide--code-font;
+  font-size: $livingstyleguide--code-font-size;
+  font-weight: $livingstyleguide--code-font-weight;
+  overflow: scroll;
+  padding: 0 3px;
+  -webkit-font-smoothing: subpixel-antialiased;
+  @include border-radius($livingstyleguide--code-border-radius);
+
+  kbd {
+    display: block;
+    font-weight: bold;
+
+    &:before {
+      content: "> ";
+    }
+  }
+
+  em {
+    color: lighten($livingstyleguide--code-color, 10%);
+    font-style: normal;
+    font-weight: bold;
+    text-decoration: underline;
+  }
+
+  b {
+    color: lighten($livingstyleguide--code-color, 20%);
+    font-weight: bold;
+  }
+
+  i {
+    color: lighten($livingstyleguide--code-color, 30%);
+  }
+
+  q {
+    color: lighten($livingstyleguide--code-color, 30%);
+  }
+
+  var {
+    text-decoration: underline;
+  }
+}
+
+.livingstyleguide--code-block {
+  display: block;
+  line-height: $livingstyleguide--code-line-height;
+  padding: 3px 6px;
+  width: $livingstyleguide--width - 2 * 6px;
+}
+
+.livingstyleguide--example + .livingstyleguide--code-block {
+  margin-top: 0;
+  @include border-top-radius(0);
+}
+
+.livingstyleguide--layout-example + .livingstyleguide--code-block {
+  background: $livingstyleguide--code-background-color;
+  margin: 0 0 $livingstyleguide--gap-width;
+  padding: $livingstyleguide--gap-width 0;
+  width: 100%;
+  @include border-radius(0);
+
+  .livingstyleguide--code {
+    display: block;
+    margin: auto;
+    width: $livingstyleguide--width;
+  }
+}
+
+.livingstyleguide--font-example {
+  @extend .livingstyleguide--example;
+}
+
+.livingstyleguide--code-highlight {
+  background-color: $livingstyleguide--highlight-color;
+  @include border-radius($livingstyleguide--highlight-border-radius);
+}
+
+.livingstyleguide--code-highlight-block {
+  @extend .livingstyleguide--code-highlight;
+  display: block;
+}
+

data/stylesheets/livingstyleguide/_color-swatches.scss

@@ -0,0 +1,50 @@
+%livingstyleguide--color-swatch {
+  color: $livingstyleguide--color-swatch-color;
+  float: left;
+  font-family: $livingstyleguide--code-font;
+  font-size: $livingstyleguide--code-font-size;
+  font-weight: bold;
+  height: 4em * $livingstyleguide--base-line-height;
+  line-height: $livingstyleguide--base-line-height;
+  list-style: none;
+  margin: 0 $livingstyleguide--gap-width $livingstyleguide--gap-width 0;
+  padding-top: 1em * $livingstyleguide--base-line-height;
+  position: relative;
+  text-align: center;
+  width: floor(
+      ($livingstyleguide--width - ($livingstyleguide--color-swatches-per-line - 1) * $livingstyleguide--gap-width)
+      /
+      $livingstyleguide--color-swatches-per-line
+    );
+  z-index: 1;
+  @include box-sizing(border-box);
+
+  &:nth-child(#{$livingstyleguide--color-swatches-per-line}n) {
+    margin-right: 0;
+  }
+
+  &:before {
+    border: $livingstyleguide--color-swatch-border-width $livingstyleguide--code-border-color solid;
+    content: "";
+    display: block;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: -1;
+    @include border-radius($livingstyleguide--color-swatch-border-radius);
+    @include box-sizing(border-box);
+  }
+
+  &:after {
+    display: block;
+    font-weight: normal;
+  }
+}
+
+.livingstyleguide--color-swatches {
+  margin: $livingstyleguide--gap-width auto (-$livingstyleguide--gap-width) auto;
+  width: $livingstyleguide--width;
+  @include clearfix;
+}

data/stylesheets/livingstyleguide/_content.scss

@@ -0,0 +1,58 @@
+.livingstyleguide--paragraph,
+.livingstyleguide--code-block,
+.livingstyleguide--unordered-list,
+.livingstyleguide--ordered-list {
+  font-family: $livingstyleguide--base-font;
+  font-size: $livingstyleguide--base-font-size;
+  font-weight: $livingstyleguide--base-font-weight;
+  line-height: $livingstyleguide--base-line-height;
+  margin: $livingstyleguide--gap-width auto;
+  width: $livingstyleguide--width;
+  -webkit-font-smoothing: antialiased;
+}
+
+.livingstyleguide--unordered-list-item,
+.livingstyleguide--ordered-list-item {
+  list-style: disc;
+  margin: ceil($livingstyleguide--gap-width / 2) 0 ceil($livingstyleguide--gap-width / 2) (2 * $livingstyleguide--gap-width);
+}
+
+.livingstyleguide--page-title,
+.livingstyleguide--headline,
+.livingstyleguide--sub-headline {
+  font-family: $livingstyleguide--headline-font;
+  font-size: $livingstyleguide--headline-font-size;
+  font-weight: $livingstyleguide--headline-font-weight;
+  line-height: $livingstyleguide--headline-line-height;
+  margin: (3 * $livingstyleguide--gap-width) auto $livingstyleguide--gap-width;
+  width: $livingstyleguide--width;
+  -webkit-font-smoothing: antialiased;
+}
+
+.livingstyleguide--page-title {
+  font-size: $livingstyleguide--page-title-font-size;
+}
+
+.livingstyleguide--sub-headline {
+  font-size: $livingstyleguide--sub-headline-font-size;
+}
+
+.livingstyleguide--example {
+  background: white;
+  margin: $livingstyleguide--gap-width auto 0;
+  padding: $livingstyleguide--gap-width;
+  width: $livingstyleguide--width;
+  @include box-sizing(border-box);
+  @include border-top-radius($livingstyleguide--border-radius);
+
+  .livingstyleguide--layout-example & {
+    margin: 0 auto;
+    width: 100%;
+    @include border-radius(0);
+  }
+}
+
+.livingstyleguide--layout-example {
+  @extend #{$livingstyleguide--layout-selector} !optional;
+  padding: $livingstyleguide--gap-width;
+}

data/stylesheets/livingstyleguide/_layout.scss

@@ -0,0 +1,4 @@
+.livingstyleguide {
+  background: $livingstyleguide--background-color;
+  color: $livingstyleguide--color;
+}

data/test/fixtures/markdown/code-with-highlight-block.md

@@ -0,0 +1,6 @@
+~~~ html
+***
+<p>Block example</p>
+***
+~~~
+

data/test/fixtures/markdown/code-with-highlight.md

@@ -0,0 +1,4 @@
+~~~ html
+<img class="inline ***example***">
+~~~
+

data/test/fixtures/markdown/code.md

@@ -0,0 +1,6 @@
+~~~ css
+.my-class {
+  color: red;
+}
+~~~
+

data/test/fixtures/markdown/example-with-highlight.md

@@ -0,0 +1,5 @@
+~~~ example
+<img class="inline ***example***">
+<img class="inline ***ex-1*** ***ex-2***">
+~~~
+

data/test/fixtures/markdown/example.md

@@ -0,0 +1,4 @@
+~~~ example
+<button class="button">Test</button>
+~~~
+

data/test/fixtures/markdown/font-example.md

@@ -0,0 +1 @@
+{{font-example:16px Courier}}

data/test/fixtures/markdown/layout-example.md

@@ -0,0 +1,4 @@
+~~~ layout-example
+<button class="button">Test</button>
+~~~
+

data/test/fixtures/markdown/text.md

@@ -0,0 +1,13 @@
+# Hello World
+
+Lorem ipsum **dolor** sit amet, `<consectetur> adipiscing` elit. Sed a pulvinar turpis.
+
+* Lorem
+* Ipsum
+* Dolor
+
+## More Lorem
+
+1. Lorem
+2. Ipsum
+3. Dolor

data/test/fixtures/markdown/variables.md

@@ -0,0 +1 @@
+{{variables:variables/other-colors}}

data/test/fixtures/stylesheets/variables/_more-other-colors.sass

@@ -0,0 +1,2 @@
+$blue: blue
+$green: green

data/test/fixtures/stylesheets/variables/colors.scss

@@ -0,0 +1,2 @@
+$my-wonderful_red: red;
+  $blue : "blue";

data/test/fixtures/stylesheets/variables/other-colors.sass

@@ -0,0 +1,2 @@
+$blue: blue
+$green: green

data/test/integration/markdown_test.rb

@@ -0,0 +1,107 @@
+require 'test_helper'
+require 'tilt'
+
+class MarkdownTest < Test::Unit::TestCase
+
+  def render(file)
+    template = Tilt.new(file)
+    template.render
+  end
+
+  def assert_markdown(expected, file)
+    expected = expected.gsub(/\s+/m, ' ').gsub(/([\$\(\)\[\]])/) { |s| "\\#{s}" }.strip
+    given    = render(File.join(%W(test fixtures markdown #{file})))
+    given    = given.gsub(/\s+/m, ' ').strip
+    assert_match /#{expected}/, given
+  end
+
+  def test_examples
+    assert_markdown <<-HTML, 'example.md'
+      <div class="livingstyleguide--example">
+        <button class="button">Test</button>
+      </div>
+      <pre class="livingstyleguide--code-block"><code class="livingstyleguide--code">.+button.+Test.+button.+</code></pre>
+    HTML
+  end
+
+  def test_layout_examples
+    assert_markdown <<-HTML, 'layout-example.md'
+      <div class="livingstyleguide--layout-example">
+        <button class="button">Test</button>
+      </div>
+      <pre class="livingstyleguide--code-block"><code class="livingstyleguide--code">.+button.+Test.+button.+</code></pre>
+    HTML
+  end
+
+  def test_text
+    assert_markdown <<-HTML, 'text.md'
+      <h2 class="livingstyleguide--headline">Hello World</h2>
+      <p class="livingstyleguide--paragraph">Lorem ipsum <strong>dolor</strong> sit amet,
+        <code class="livingstyleguide--code-span livingstyleguide--code">&lt;consectetur&gt; adipiscing</code> elit.
+        Sed a pulvinar turpis.</p>
+      <ul class="livingstyleguide--unordered-list">
+        <li class="livingstyleguide--unordered-list-item">Lorem</li>
+        <li class="livingstyleguide--unordered-list-item">Ipsum</li>
+        <li class="livingstyleguide--unordered-list-item">Dolor</li>
+      </ul>
+      <h3 class="livingstyleguide--sub-headline">More Lorem</h3>
+      <ol class="livingstyleguide--ordered-list">
+        <li class="livingstyleguide--ordered-list-item">Lorem</li>
+        <li class="livingstyleguide--ordered-list-item">Ipsum</li>
+        <li class="livingstyleguide--ordered-list-item">Dolor</li>
+      </ol>
+    HTML
+  end
+
+  def test_code
+    assert_markdown <<-HTML, 'code.md'
+      <pre class="livingstyleguide--code-block"><code class="livingstyleguide--code"><b><i>.my-class</i></b> {
+        <b>color:</b> <b>red</b>;
+      }</code></pre>
+    HTML
+  end
+
+  def test_code_with_highlight
+    assert_markdown <<-HTML, 'code-with-highlight.md'
+      <pre class="livingstyleguide--code-block"><code class="livingstyleguide--code">.+<strong class="livingstyleguide--code-highlight">example</strong>.+</code></pre>
+    HTML
+  end
+
+  def test_code_with_highlight_block
+    assert_markdown <<-HTML, 'code-with-highlight-block.md'
+      <pre class="livingstyleguide--code-block"><code class="livingstyleguide--code"><strong class="livingstyleguide--code-highlight-block">.+Block example.+</strong></code></pre>
+    HTML
+  end
+
+  def test_example_with_highlight
+    assert_markdown <<-HTML, 'example-with-highlight.md'
+      <div class="livingstyleguide--example">
+        <img class="inline example">
+        <img class="inline ex-1 ex-2">
+      </div>
+      <pre class="livingstyleguide--code-block"><code class="livingstyleguide--code">.+<strong class="livingstyleguide--code-highlight">example</strong>.+
+      <strong class="livingstyleguide--code-highlight">ex-1</strong> <strong class="livingstyleguide--code-highlight">ex-2</strong>.+</code></pre>
+    HTML
+  end
+
+  def test_variables
+    assert_markdown <<-HTML, 'variables.md'
+      <ul class="livingstyleguide--color-swatches">
+        <li class="livingstyleguide--color-swatch $blue">$blue</li>
+        <li class="livingstyleguide--color-swatch $green">$green</li>
+      </ul>
+    HTML
+  end
+
+  def test_font_example
+    assert_markdown <<-HTML, 'font-example.md'
+      <div class="livingstyleguide--font-example" style="font: 16px Courier">
+        ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+        abcdefghijklmnopqrstuvwxyz<br>
+        0123456789<br>
+        !&/()$=@;:,.
+      </div>
+    HTML
+  end
+
+end

data/test/integration/variables_test.rb

@@ -0,0 +1,65 @@
+require 'test_helper'
+require 'fileutils'
+require 'compass'
+require 'compass/logger'
+require 'sass/plugin'
+
+class VariablesImporterTest < Test::Unit::TestCase
+
+  def setup
+    Compass.configure_sass_plugin!
+  end
+
+  def render(scss)
+    scss    = %Q(@import "compass"; #{scss})
+    options = Compass.sass_engine_options
+    options[:line_comments]      = false
+    options[:style]              = :expanded
+    options[:syntax]             = :scss
+    options[:compass]          ||= {}
+    options[:compass][:logger] ||= Compass::NullLogger.new
+    css = Sass::Engine.new(scss, options).render
+    format_css(css)
+  end
+
+  def format_css(css)
+    css.gsub! %Q(@charset "UTF-8";), ''
+    css.gsub! %r(\n), "\n      "
+    css.gsub! %r( +$), ''
+    css.gsub! %r(\n\n+), "\n"
+    css.strip!
+    %Q(      #{css}\n)
+  end
+
+  def test_output_of_variables
+    css = render <<-SCSS
+      $livingstyleguide--color: black;
+      %livingstyleguide--code {
+        test: code;
+      }
+      %livingstyleguide--color-swatch {
+        test: color;
+      }
+      @import "variables/colors";
+      @import "variables:variables/colors";
+    SCSS
+
+    assert_equal <<-CSS, css
+      .\\$my-wonderful_red:after, .\\$blue:after {
+        test: code;
+      }
+      .\\$my-wonderful_red {
+        test: color;
+      }
+      .\\$my-wonderful_red:before {
+        background: red;
+      }
+      .\\$my-wonderful_red:after {
+        content: "red";
+      }
+      .\\$blue:after {
+        content: "blue";
+      }
+    CSS
+  end
+end

data/test/test_helper.rb

@@ -0,0 +1,5 @@
+require 'compass'
+require 'livingstyleguide'
+require 'test/unit'
+
+Compass.configuration.add_import_path File.join(%w(test fixtures stylesheets))

data/test/unit/sass_extensions_test.rb

@@ -0,0 +1,28 @@
+require 'test_helper'
+
+class SassExtensionsTest < Test::Unit::TestCase
+  def test_list_variables_for_file
+    assert_equal 'my-wonderful_red blue', evaluate(%Q(list-variables("variables/colors.scss")))
+  end
+
+  def test_list_variables_for_scss_files_without_extension
+    assert_equal 'my-wonderful_red blue', evaluate(%Q(list-variables("variables/colors")))
+  end
+
+  def test_list_variables_for_sass_files_without_extension
+    assert_equal 'blue green', evaluate(%Q(list-variables("variables/other-colors")))
+  end
+
+  def test_list_variables_for_files_starting_with_underscore
+    assert_equal 'blue green', evaluate(%Q(list-variables("variables/more-other-colors")))
+  end
+
+  def test_list_variables_for_directories
+    assert_equal 'blue green my-wonderful_red', evaluate(%Q(list-variables("variables/*")))
+  end
+
+protected
+  def evaluate(value)
+    Sass::Script::Parser.parse(value, 0, 0).perform(Sass::Environment.new).to_s
+  end
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: livingstyleguide
 version: !ruby/object:Gem::Version
-  version: 0.0.0
+  version: 0.1.0
   prerelease: 
 platform: ruby
 authors:
@@ -9,8 +9,88 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-12-20 00:00:00.000000000 Z
-dependencies: []
+date: 2013-02-03 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: minisyntax
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: middleman
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 3.0.9
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 3.0.9
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: redcarpet
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
 description: Living Style Guide
 email:
 - nico@hagenburger.net
@@ -24,8 +104,34 @@ files:
 - README.md
 - Rakefile
 - lib/livingstyleguide.rb
+- lib/livingstyleguide/markdown_extensions.rb
+- lib/livingstyleguide/sass_extensions.rb
+- lib/livingstyleguide/sass_extensions/functions.rb
+- lib/livingstyleguide/variables_importer.rb
+- lib/livingstyleguide/variables_importer/content.erb
 - lib/livingstyleguide/version.rb
 - livingstyleguide.gemspec
+- stylesheets/_livingstyleguide.scss
+- stylesheets/livingstyleguide/_code.scss
+- stylesheets/livingstyleguide/_color-swatches.scss
+- stylesheets/livingstyleguide/_content.scss
+- stylesheets/livingstyleguide/_layout.scss
+- test/fixtures/markdown/code-with-highlight-block.md
+- test/fixtures/markdown/code-with-highlight.md
+- test/fixtures/markdown/code.md
+- test/fixtures/markdown/example-with-highlight.md
+- test/fixtures/markdown/example.md
+- test/fixtures/markdown/font-example.md
+- test/fixtures/markdown/layout-example.md
+- test/fixtures/markdown/text.md
+- test/fixtures/markdown/variables.md
+- test/fixtures/stylesheets/variables/_more-other-colors.sass
+- test/fixtures/stylesheets/variables/colors.scss
+- test/fixtures/stylesheets/variables/other-colors.sass
+- test/integration/markdown_test.rb
+- test/integration/variables_test.rb
+- test/test_helper.rb
+- test/unit/sass_extensions_test.rb
 homepage: ''
 licenses: []
 post_install_message: 
@@ -50,4 +156,21 @@ rubygems_version: 1.8.23
 signing_key: 
 specification_version: 3
 summary: Living Style Guide
-test_files: []
+test_files:
+- test/fixtures/markdown/code-with-highlight-block.md
+- test/fixtures/markdown/code-with-highlight.md
+- test/fixtures/markdown/code.md
+- test/fixtures/markdown/example-with-highlight.md
+- test/fixtures/markdown/example.md
+- test/fixtures/markdown/font-example.md
+- test/fixtures/markdown/layout-example.md
+- test/fixtures/markdown/text.md
+- test/fixtures/markdown/variables.md
+- test/fixtures/stylesheets/variables/_more-other-colors.sass
+- test/fixtures/stylesheets/variables/colors.scss
+- test/fixtures/stylesheets/variables/other-colors.sass
+- test/integration/markdown_test.rb
+- test/integration/variables_test.rb
+- test/test_helper.rb
+- test/unit/sass_extensions_test.rb
+has_rdoc: