flat-ui-sass 2.1.3

data/lib/flat-ui-sass/cli.rb

@@ -0,0 +1,56 @@
+require 'optparse'
+require 'tasks/converter'
+require 'flat-ui-sass/version'
+
+module FlatUI
+  class CLI
+    class << self
+      def start(*args)
+        options = parse_options!(*args)
+        Converter.new(options[:type], options[:input], options).process_flat_ui!
+      end
+
+      private
+
+      def parse_options!(*args)
+        options = {
+          type: :pro,
+          input: 'flat-ui-pro',
+          log_level: 1
+        }
+
+        opt_parser = OptionParser.new do |opts|
+          opts.banner = "Usage: fui_convert [options]"
+          opts.separator ""
+          opts.separator "Options:"
+
+          opts.on("--type [TYPE]", "-t", [:free, :pro], "Specify the type of conversion to perform (free or pro).","Default is pro") do |type|
+            if type
+              options[:type] = type.to_sym
+              options[:input] = "flat-ui" if type == :free
+            end
+          end
+          opts.on("--log_level [LEVEL]", "-l", OptionParser::DecimalInteger, "Specify the verbosity of the log output", "Default is 1. Levels are 0-3.") do |level|
+            options[:log_level] = level if level
+          end
+          opts.on("--input [DIR]", "-i", "The Flat-UI root directory.","Default is flat-ui-pro") do |dir|
+            options[:input] = dir if dir
+          end
+          opts.on_tail("-h", "--help", "Show help") do
+            puts opts
+            exit
+          end
+          opts.on_tail("--version", "Show version") do
+            puts "Flat-UI Compatibility:"
+            puts "  Free v#{FlatUI::VERSION}"
+            puts "  Pro v#{FlatUI::PRO_VERSION}"
+            exit
+          end
+        end
+
+        opt_parser.parse!(args)
+        options
+      end
+    end
+  end
+end

data/lib/flat-ui-sass/engine.rb

@@ -0,0 +1,13 @@
+module FlatUI
+  module Rails
+    class Engine < ::Rails::Engine
+      initializer "flat-ui-sass.assets.precompile" do |app|
+        if Dir.exist? File.join(::Rails.root, 'vendor', 'assets', 'fonts', 'flat-ui-pro')
+          app.config.assets.precompile << %r(flat-ui-pro/flat-ui-icons-regular\.(?:eot|svg|ttf|woff)$)
+        else
+          app.config.assets.precompile << %r(flat-ui/flat-ui-icons-regular\.(?:eot|svg|ttf|woff)$)
+        end
+      end
+    end
+  end
+end

data/lib/flat-ui-sass/sass_functions.rb

@@ -0,0 +1,56 @@
+# Based on bootstrap-sass
+# https://github.com/twbs/bootstrap-sass/blob/master/lib/bootstrap-sass/sass_functions.rb
+
+require 'sass'
+
+module Sass::Script::Functions
+  def flat_ui_font_path(source)
+    flat_ui_asset_path source, :font
+  end
+  declare :flat_ui_font_path, [:source]
+
+  def flat_ui_image_path(source)
+    flat_ui_asset_path source, :image
+  end
+  declare :flat_ui_image_path, [:source]
+
+  def flat_ui_asset_path(source, type)
+    return Sass::Script::String.new('', :string) if source.to_s.empty?
+    url = if FlatUI.asset_pipeline? && (context = sprockets_context)
+            context.send(:"#{type}_path", source.value)
+          elsif FlatUI.compass?
+            send(:"#{type}_url", source, Sass::Script::Bool.new(true)).value.sub /url\((.*)\)$/, '\1'
+          end
+
+    # sass-only
+    url ||= source.value.gsub('"', '')
+    Sass::Script::String.new(url, :string)
+  end
+  declare :flat_ui_asset_path, [:source, :type]
+
+  unless Sass::Script::Functions.instance_methods.include?(:tint)
+    def tint(color, percentage)
+      assert_type color, :Color
+      assert_type percentage, :Number
+      white = Sass::Script::Color.new([255, 255, 255])
+      mix(white, color, percentage)
+    end
+  end
+  
+  unless Sass::Script::Functions.instance_methods.include?(:fade)
+    def fade(color, amount)
+      if amount.is_a?(Sass::Script::Number) && amount.unit_str == "%"
+        amount = Sass::Script::Number.new(1 - amount.value / 100.0)
+      end
+      fade_out(color, amount)
+    end
+    declare :fade, [:color, :amount]
+  end
+
+  # Based on https://github.com/edwardoriordan/sass-utilities/blob/master/lib/sass-utilities.rb
+  # For Sass < 3.3.0, just echo back the variable since we can't interpolate it
+  def interpolate_variable(name)
+    assert_type name, :String
+    ::Sass::VERSION >= '3.3.0' ? environment.var(name.value) : name
+  end
+end

data/lib/flat-ui-sass/version.rb

@@ -0,0 +1,4 @@
+module FlatUI
+  VERSION      = '2.1.3'
+  PRO_VERSION  = '1.2.5'
+end

data/lib/tasks/converter.rb

@@ -0,0 +1,99 @@
+# encoding: utf-8
+#
+# Based on the conversion script used for bootstrap-sass
+# https://github.com/twbs/bootstrap-sass/blob/master/tasks/converter.rb
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this work except in compliance with the License.
+# You may obtain a copy of the License in the LICENSE file, or at:
+#
+#    http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+require 'json'
+require 'fileutils'
+require 'forwardable'
+require 'sass'
+
+# Pull in stuff from bootstrap-sass
+spec = Gem::Specification.find_by_name('bootstrap-sass')
+%w{char_string_scanner less_conversion}.each do |file|
+  require File.join(spec.gem_dir, 'tasks', 'converter', file)
+end
+
+require_relative 'converter/flat_ui_less_conversion'
+require_relative 'converter/flat_ui_js_conversion'
+require_relative 'converter/flat_ui_fonts_conversion'
+require_relative 'converter/flat_ui_images_conversion'
+require_relative 'converter/filesystem'
+require_relative 'converter/logger'
+
+class Converter
+  extend Forwardable
+  include FileSystem
+  include FlatUILessConversion
+  include FlatUIJsConversion
+  include FlatUIFontsConversion
+  include FlatUIImageConversion
+
+  def initialize(type = :free, src_path = './flat-ui', options = {})
+    @logger     = Logger.new(options[:log_level])
+    @src_path = File.expand_path(src_path)
+    @type = type
+    @output_dir = type == :free ? 'flat-ui' : 'flat-ui-pro'
+    @dest_path = {
+      js: File.join('vendor/assets/javascripts', @output_dir),
+      scss: File.join('vendor/assets/stylesheets', @output_dir),
+      fonts: File.join('vendor/assets/fonts', @output_dir),
+      images: File.join('vendor/assets/images', @output_dir)
+    }
+  end
+
+  def_delegators :@logger, :log, :log_status, :log_processing, :log_transform, :log_file_info, :log_processed
+
+  def process_flat_ui!
+    log_status 'Convert Flat UI from LESS to SASS'
+    log "   type: #{@output_dir}"
+    log "  input: #{@src_path}"
+    log " output:"
+    log "     js: #{@dest_path[:js]}"
+    log "   scss: #{@dest_path[:scss]}"
+    log "  fonts: #{@dest_path[:fonts]}"
+    log " images: #{@dest_path[:images]}"
+
+    setup_file_structure!
+
+    process_flat_ui_stylesheet_assets!
+    process_flat_ui_javascript_assets!
+    process_flat_ui_font_assets!
+    process_flat_ui_image_assets!
+  end
+
+  def save_file(path, content, mode='w')
+    File.open(path, mode) { |file| file.write(content) }
+  end
+
+  def free?
+    !pro?
+  end
+
+  def pro?
+    @type == :pro
+  end
+
+  private
+  
+  def setup_file_structure!
+    @dest_path.each do |_, v|
+      FileUtils.rm_rf(v)
+      FileUtils.mkdir_p(v)
+    end
+
+    FileUtils.mkdir_p("#{@dest_path[:scss]}/modules")
+  end
+end

data/lib/tasks/converter/filesystem.rb

@@ -0,0 +1,16 @@
+class Converter
+  module FileSystem
+    def read_files(path, files)
+      contents = {}
+
+      full_path = File.join(@src_path, path)
+
+      if File.directory?(full_path)
+        files.each do |file|
+          contents[file] = File.read(File.join(full_path, file), mode: 'rb') || ''
+        end
+        contents
+      end
+    end
+  end
+end

data/lib/tasks/converter/flat_ui_fonts_conversion.rb

@@ -0,0 +1,19 @@
+# encoding: UTF-8
+
+class Converter
+  module FlatUIFontsConversion
+    def process_flat_ui_font_assets!
+      log_status 'Processing fonts...'
+      save_to = @dest_path[:fonts]
+      flat_ui_font_files.each do |file|
+        FileUtils.cp "#{@src_path}/fonts/#{file}", "#{save_to}/#{file}"
+      end
+    end
+
+    def flat_ui_font_files
+      @flat_ui_font_files ||= Dir.chdir "#{@src_path}/fonts" do
+        Dir['*.{eot,svg,ttf,woff}'].reject{|f| f =~ /\.dev/}
+      end
+    end
+  end
+end

data/lib/tasks/converter/flat_ui_images_conversion.rb

@@ -0,0 +1,19 @@
+class Converter
+  module FlatUIImageConversion
+    def process_flat_ui_image_assets!
+      log_status 'Processing images...'
+      save_to = @dest_path[:images]
+      flat_ui_image_files.each do |file|
+        new_file = "#{save_to}/#{file}"
+        FileUtils.mkdir_p(File.dirname(new_file))
+        FileUtils.cp "#{@src_path}/images/#{file}", new_file
+      end
+    end
+
+    def flat_ui_image_files
+      @flat_ui_image_files ||= Dir.chdir "#{@src_path}/images" do
+        Dir['{switch,tile,todo,icons,login,video}/**/*.*']
+      end
+    end
+  end
+end

data/lib/tasks/converter/flat_ui_js_conversion.rb

@@ -0,0 +1,28 @@
+class Converter
+  module FlatUIJsConversion
+    def process_flat_ui_javascript_assets!
+      log_status 'Processing javascripts...'
+      save_to = @dest_path[:js]
+      read_files('js', flat_ui_js_files).each do |name, file|
+        save_file("#{save_to}/#{name}", file)
+      end
+      log_processed "#{flat_ui_js_files * ' '}"
+
+      log_status 'Updating javascript manifest'
+      content = ''
+      flat_ui_js_files.each do |name|
+        name = name.gsub(/\.js$/, '')
+        content << "//= require #{@output_dir}/#{name}\n"
+      end
+      manifest = File.expand_path(File.join(@dest_path[:js], '..', "#{@output_dir}.js"))
+      save_file(manifest, content)
+      log_processed manifest
+    end
+
+    def flat_ui_js_files
+      @flat_ui_js_files ||= Dir.chdir "#{@src_path}/js" do
+        Dir['flatui-*.js']
+      end
+    end
+  end
+end

data/lib/tasks/converter/flat_ui_less_conversion.rb

@@ -0,0 +1,328 @@
+class Converter
+  module FlatUILessConversion
+    include Converter::LessConversion
+
+    # Mixins that are added by FlatUI
+    FLAT_UI_MIXINS = %w{placeholder-height mask background-clip dropdown-arrow form-controls-corners-reset
+                       label-variant navbar-vertical-align social-button-variant}
+
+    # Mixins that FlatUI has modified
+    FLAT_UI_OVERRIDE_MIXINS = %w{placeholder text-hide scale animation horizontal
+                                vertical directional horizontal-three-colors vertical-three-colors
+                                radial striped button-variant input-size form-control
+                                form-control-focus}
+
+    # Modules missing from Flat UI Pro that are in Flat UI Free
+    FLAT_UI_PRO_MISSING_MODULES = %w{}
+
+    # This is similar to the process_stylesheet_assets
+    # utilized by bootstrap-sass except it is specific to
+    # flatui
+    def process_flat_ui_stylesheet_assets!
+      log_status 'Processing stylesheets...'
+      files = read_files('less', flat_ui_less_files)
+
+      log_status '  Converting LESS files to Scss:'
+      files.each do |name, file|
+        log_processing name
+
+        # apply common conversions
+        # icon-font bombs on this so skip it
+        file = convert_less(file) unless name =~ /flat-ui|glyphicons/
+        file = replace_file_imports(file)
+        file = cleanup_whitespace(file)
+        case name
+          when 'flat-ui.less'
+            lines = file.split "\n"
+            lines.reject! {|line|
+              #kill the fonts lines, those are up to the user
+              #kill variables since those need to be manually imported before bootstrap
+              line =~ /fonts|url|variables/
+            }
+
+            # Add a comment for the icon font
+            icon_font_import = lines.index {|line| line =~ /glyphicons/}
+            lines.insert(icon_font_import, '// Flat-UI-Icons')
+            lines.delete_at(icon_font_import+2)
+
+            file = lines.join "\n"
+          when 'mixins.less'
+            NESTED_MIXINS.each do |selector, prefix|
+              file = flatten_mixins(file, selector, prefix)
+            end
+            file = varargify_mixin_definitions(file, *VARARG_MIXINS)
+            file = deinterpolate_vararg_mixins(file)
+            %w(responsive-(in)?visibility input-size text-emphasis-variant bg-variant).each do |mixin|
+              file = parameterize_mixin_parent_selector file, mixin
+            end
+            file = replace_ms_filters(file)
+            if pro?
+              file = replace_all file, /(?<=[.-])\$state/, '#{$state}'
+            else
+              # calc-color mixin only exists in Flat-UI free
+              file = replace_all file, /-(\$.+-color)/, '-#{\1}'
+              file = replace_all file, /#\{\$\$\{(.+)\}\}/, 'interpolate_variable($\1)'
+            end
+            file = replace_rules(file, '  .list-group-item-') { |rule| extract_nested_rule rule, 'a&' }
+            file = replace_all file, /,\s*\.open \.dropdown-toggle& \{(.*?)\}/m,
+                               " {\\1}\n  .open & { &.dropdown-toggle {\\1} }"
+            file = replace_all file, '$ratio, $ratio-y', '$scale-args'
+            file = convert_grid_mixins file
+          when 'variables.less'
+            file = insert_default_vars(file)
+            if ::Sass::VERSION >= '3.3.0'
+              file = unindent <<-SCSS + file, 14
+              // a flag to toggle asset pipeline / compass integration
+              $flat-ui-sass-asset-helper: function-exists(flat-ui-font-path) !default;
+
+              SCSS
+            else
+              file = unindent <<-SCSS + file, 14
+              // a flag to toggle asset pipeline / compass integration
+              // defaults to true if flat-ui-font-path function is present (no function => twbs-font-path('') parsed as string == right side)
+              $flat-ui-sass-asset-helper: (flat-ui-font-path("") != unquote('flat-ui-font-path("")')) !default;
+
+              SCSS
+            end
+            file = fix_variable_declaration_order file
+            file = replace_all file, /(\$icon-font-path:\s+).*(!default)/, '\1"'+@output_dir+'/" \2'
+          when 'modules/buttons.less'
+            file = extract_nested_rule file, '.btn-xs&'
+            file = extract_nested_rule file, '.btn-hg&'
+          when 'modules/forms.less'
+            # Fix mixin regex not supporting non-variable arguments
+            file.gsub! /@include input-size\((?:\$.+)\);/ do |match|
+              match.gsub /; /, ', '
+            end
+            file = apply_mixin_parent_selector(file, '\.input-(?:sm|lg|hg)')
+          when 'modules/input-groups.less'
+            file = replace_rules(file, '.input-group-rounded') do |rule|
+              extract_and_combine_nested_rules rule
+            end
+          when 'modules/glyphicons.less'
+            file = replace_vars(file)
+            file = replace_escaping(file)
+            file = replace_all file, /\#\{(url\(.*?\))}/, '\1'
+            file = replace_rules(file, '@font-face') { |rule|
+              rule = replace_all rule, /(\$icon-font(?:-\w+)+)/, '#{\1}'
+              replace_asset_url rule, :font
+            }
+          when 'modules/login.less'
+            file = fix_flat_ui_image_assets file
+          when 'modules/navbar.less'
+            # Fix mixin regex not supporting non-variable arguments
+            file.gsub! /@include input-size\((?:\$.+)\);/ do |match|
+              match.gsub /; /, ', '
+            end
+            file = apply_mixin_parent_selector(file, '\.navbar-input')
+          when 'modules/palette.less'
+            file.gsub! /@include calc-color\((.+)\);/ do |match|
+              match.gsub /#\{([\w\-]+)\}/, '"\1"'
+            end
+          when 'modules/select.less'
+            # Fix the include that the converter makes an extend
+            file = replace_all file, /@extend \.caret/, '@include caret'
+          when 'modules/spinner.less'
+            # Fix mixin regex not supporting non-variable arguments
+            file.gsub! /@include spinner-variant\((?:\$?.+)\);/ do |match|
+              match.gsub /; /, ', '
+            end
+          when 'modules/switch.less'
+            file = fix_flat_ui_image_assets file
+          when 'modules/tile.less'
+            file = fix_flat_ui_image_assets file
+          when 'modules/todo.less'
+            file = fix_flat_ui_image_assets file
+          when 'modules/thumbnails.less'
+            file = extract_nested_rule file, 'a&'
+          when 'modules/type.less'
+            # Since .bg-primary has a color associated with it we need to divide it into
+            # two selectors
+            file = replace_rules(file, '.bg-primary') do |rule|
+              parts = rule.split "\n"
+              selector = parts.index {|line| line =~ /\.bg-primary/}
+              mixin = parts.index {|line| line =~ /@include/}
+              parts.insert(mixin, "}\n#{parts[selector]}")
+              rule = parts.join "\n"
+            end
+            file = apply_mixin_parent_selector(file, '\.(text|bg)-(success|primary|info|warning|danger)')
+          when 'modules/video.less'
+            file = replace_rules(file, /\s*\.vjs(?:-(?:control|time))?(?!-\w+)/) do |rule|
+              selector = get_selector(rule).scan(/\.vjs(?:-(?:control|time))?(?!-\w+)/).first
+              convert_arbitrary_less_ampersand(rule, selector)
+            end
+            file = fix_flat_ui_image_assets file
+        end
+
+        name    = name.sub(/\.less$/, '.scss')
+        base = File.basename(name)
+        name.gsub!(base, "_#{base}") unless base == 'flat-ui.scss'
+        path    = File.join(@dest_path[:scss], name)
+        save_file(path, file)
+        log_processed File.basename(path)
+      end
+
+      manifest = File.join(@dest_path[:scss], '..', "#{@output_dir}.scss")
+      save_file(manifest, "@import \"#{@output_dir}/flat-ui\";")
+    end
+
+    def flat_ui_less_files
+      @flat_ui_less_files ||= Dir.chdir "#{@src_path}/less" do
+        Dir['**/*.less'].reject{|f| f =~ /(?:demo|docs)\.less$/ }
+      end
+    end
+
+    # Set load_shared to read from mixins.less again since bootstrap converted to
+    # modular mixins.
+    def load_shared
+      @shared_mixins ||= begin
+        log_status '  Reading shared mixins from mixins.less'
+        read_mixins read_files('less', ['mixins.less'])['mixins.less'], nested: NESTED_MIXINS
+      end
+    end
+
+    def extract_and_combine_nested_rules(file)
+      matches = Hash.new {|k,v| k[v] = []}
+      file = file.dup
+      file.scan(/\.[\w-]+&/x) do |selector|
+        #first find the rules, and remove them
+        file  = replace_rules(file, "\s*#{selector}") do |rule, pos, css|
+          selector = selector.gsub(/&$/, '')
+          styles = rule.split(/[{}]/).last.strip
+          parent = selector_for_pos(css, pos.begin).split('{').last.strip
+          matches[selector] << create_rule(parent, styles)
+
+          # Return an empty string to blank out this rule
+          ""
+        end
+      end
+
+      # Generate the combined nested rules
+      rules = matches.inject("") do |s, (rule, children)|
+        s += create_rule "&#{rule}", *children
+      end
+      close = close_brace_pos file, 0
+
+      file.insert(close, indent(rules))
+    end
+
+    def create_rule(name, *styles)
+      rule = "#{unindent(name)} {\n"
+      styles.each {|s| rule += indent "#{s}\n"}
+      rule += "}\n"
+    end
+
+    # TODO this method is on the brittle side
+    # look into make it more robust
+    def fix_variable_declaration_order(file)
+      # Spinner needs to be moved after Buttons
+      # since it depends on $btn-default-bg
+      #
+      # also spinner-btn-hover-bg needs to be
+      # before spinner-up-btn-border
+      if file.include? 'Spinner'
+        lines = file.split "\n"
+        spinner_start = lines.index {|l| l =~ /Spinner/}
+        spinner_end = lines.index {|l| l =~ /Pagination/} - 1
+        buttons_end = lines.index {|l| l =~ /Navs/} - 1
+
+        (spinner_end - spinner_start).times do
+          lines.insert(buttons_end, lines.delete_at(spinner_start))
+        end
+
+        spinner_btn_bg = lines.index {|l| l =~ /spinner-btn-bg:/}-1
+        3.times do
+          lines.insert(spinner_btn_bg+5, lines.delete_at(spinner_btn_bg))
+        end
+
+        file = lines.join("\n")
+      end
+      file
+    end
+
+    def fix_relative_asset_url(rule, type)
+      # Use a really naive pluralization
+      replace_all rule, /url\(['"]?\.\.\/#{type}s\/([a-zA-Z0-9\-\/\.\?#]+)['"]?\)/, "url(\"#{@output_dir}/\\1\")"
+    end
+
+    def fix_flat_ui_image_assets(file)
+      file = replace_all file, /\#\{(url\(.*?\).*?)}/, '\1'
+      file = fix_relative_asset_url file, :image
+      file = replace_asset_url file, :image
+    end
+
+    def cleanup_whitespace(file)
+      file.gsub(/\r|\t/, "")
+    end
+
+    # Based on the original convert_less_ampersand but modified
+    # for flat_ui_sass
+    def convert_arbitrary_less_ampersand(less, selector)
+      return less unless less.include?(selector)
+
+      styles = less.dup
+      tmp = "\n"
+      less.scan(/^(\s*&)(-[\w\[\]-]+\s*\{.+?})/m) do |ampersand, css|
+        tmp << "#{selector}#{unindent(css)}\n"
+        styles.gsub! "#{ampersand}#{css}", ""
+      end
+
+      if tmp.length > 1
+        styles.gsub!(/\s*#{"\\"+selector}\s*\{\s*}/m, '')
+        styles << tmp
+      else
+        styles = less
+      end
+
+      styles
+    end
+
+    #
+    # Methods overridden from the bootstrap-sass converter
+    #
+
+    def replace_asset_url(rule, type)
+      replace_all rule, /url\((.*?)\)/, "url(if($flat-ui-sass-asset-helper, flat-ui-#{type}-path(\\1), \\1))"
+    end
+
+    # @import "file" to "#{@output_dir)}/file"
+    def replace_file_imports(file)
+      file.gsub %r([@\$]import ["|'](.*)["|'];),
+                %Q(@import "#{@output_dir}/\\1";)
+    end
+
+    # Regex will match things like spinner-input-width
+    # by default.
+    #
+    # Fix the first lookaround to be a positive
+    # lookaround and also check for word chars
+    # after the word 'spin'
+    def replace_spin(less)
+      less.gsub(/(?<![\-$@.])spin(?![\-\w])/, 'adjust-hue')
+    end
+
+    # Fix to support replacing mixin definitions with default args
+    # https://github.com/twbs/bootstrap-sass/blob/master/tasks/converter/less_conversion.rb#L293
+    #
+    # @mixin a() { tr& { color:white } }
+    # to:
+    # @mixin a($parent) { tr#{$parent} { color: white } }
+    def parameterize_mixin_parent_selector(file, rule_sel)
+      log_transform rule_sel
+      param = '$parent'
+      replace_rules(file, '^\s*@mixin\s*' + rule_sel) do |mxn_css|
+        mxn_css.sub! /(?=@mixin)/, "// [converter] $parent hack\n"
+        # insert param into mixin def
+        mxn_css.sub!(/(@mixin [\w-]+)\(([\$\w\-:,\s]*)\)/) { "#{$1}(#{param}#{', ' if $2 && !$2.empty?}#{$2})" }
+        # wrap properties in #{$parent} { ... }
+        replace_properties(mxn_css) { |props|
+          next props if props.strip.empty?
+          spacer = ' ' * indent_width(props)
+          "#{spacer}\#{#{param}} {\n#{indent(props.sub(/\s+\z/, ''), 2)}\n#{spacer}}"
+        }
+        # change nested& rules to nested#{$parent}
+        replace_rules(mxn_css, /.*&[ ,:]/) { |rule| replace_in_selector rule, /&/, "\#{#{param}}" }
+      end
+    end
+  end
+end