CODEWITHSUNDEEP
ruby-on-railsruby-on-rails-3sasssprockets
jachenry
jachenry

Reputation: 137

Dynamic CSS using Sprockets

I'm working on a site builder in rails and I would like to render the sites css using Sprockets SCSS processors. Since the user can change colors and logos, I can't use Sprockets precompilation so I've started working on a Rails SCSS template handler to handle dynamic views.

The goal is to compile 'app/views/sites/show.css.scss' any time /sites/43543.css is requested. Here's what I have so far. You'll notice I first run the template through the ERB processor and then attempt to run it through Sprockets.

https://gist.github.com/3870095

Manuel Meurer came up with an alternative solution that writes the ERB output to a path and then triggers the Asset Pipeline to compile it. I was able to get his solution to work locally but it wont work on heroku because the asset path is not writable. Files can only be written to the tmp directory and those files are only guaranteed for a single request.

http://www.krautcomputing.com/blog/2012/03/27/how-to-compile-custom-sass-stylesheets-dynamically-during-runtime/

Upvotes: 0

Views: 1703

Answers (1)

jachenry
jachenry

Reputation: 137

After a long day I was able to solve my problem thanks to John Feminella and his post on google. The challenging part for me was figuring out how to create a new Sprockets::Context. Luckily John's solution doesn't require a Context.

Updated gist here

Attempt #1

This code does not allow importing css files from the asset pipeline.

@import "foundation"; works because foundation is loaded as a compass module

@import "custom_css"; results in an error message saying the file could not be found 

def call(template)
  erb = ActionView::Template.registered_template_handler(:erb).call(template)

  %{ 
    options = Compass.configuration.to_sass_engine_options.merge(
      :syntax => :scss,
      :custom => {:resolver => ::Sass::Rails::Resolver.new(CompassRails.context)},
    )
    Sass::Engine.new((begin;#{erb};end), options).render
  }
end

Attempt #2

This code fails to embed base64 urls using asset-data-url

  def call(template)
    erb = ActionView::Template.registered_template_handler(:erb).call(template)

    %{
      compiler = Compass::Compiler.new *Compass.configuration.to_compiler_arguments
      options  = compiler.options.merge({
        :syntax => :scss,
        :custom => {:resolver => ::Sass::Rails::Resolver.new(CompassRails.context)},
      })
      Sass::Engine.new((begin;#{erb};end), options).render
    } 
  end

Attempt 3

Turns out you can use empty values while creating the context. Code below works in development but throws an error in production.

ActionView::Template::Error (can't modify immutable index)

It appears the error occurs in Sprockets::Index which is used instead of Sprockets::Environment in production. Switching to Sprockets::Environment doesn't solve the problem either.

  def call(template)
    erb = ActionView::Template.registered_template_handler(:erb).call(template)

    %{
      context = CompassRails.context.new(::Rails.application.assets, '', Pathname.new(''))
      resolver = ::Sass::Rails::Resolver.new(context)

      compiler = Compass::Compiler.new *Compass.configuration.to_compiler_arguments
      options  = compiler.options.merge({
        :syntax => :scss,
        :custom => {:resolver => resolver}
      })

      Sass::Engine.new((begin;#{erb};end), options).render
    }
  end

Upvotes: 2

Related Questions