envygeeks / jekyll-assets

:art: Asset pipelines for Jekyll.
ISC License
1.12k stars 169 forks source link

How to add Compass configuration file config.rb? #4

Closed sectore closed 10 years ago

sectore commented 11 years ago

To add a Compass config file config.rb I have added following line to _plugins/ext.rb

Compass.add_project_configuration('config.rb')

All the changes of the configuration settings seems to be set to Compass, because after that line I can print a new added configuration such as

puts "Compass.configuration.disable_warnings: #{Compass.configuration.disable_warnings}"

However, none of the settings defined in config.rb are used by jekyll-assets (or maybe by Sprockets?) It seems that there are overridden. Any idea?

Thanks!

ixti commented 11 years ago

Basically neither Sprockets nor Jekyll-Assets are not dealing with Compass. Jekyll-Assets just grabs stylesheet paths from frameworks registered on Compass. Some frameworks are modifying SASS to provide some extra features. So in fact any configuration you provide for Compass will be preserved, but it's not guaranteed that it will be used. For example, verbosity level of compass is simply not used due to we compilation process of compass is never run at all.

If I misunderstand the problem, please provide example, so I could better understand where to dig.

sectore commented 11 years ago

The reason why I want to use a custom config.rb is just for using source maps in Chrome Canary. Therefore I have had add to Compass' config.rb

environment = :development

if environment == :development
  line_comments = true
  sass_options = { :debug_info => true }
  output_style = :expanded
  disable_warnings = false
elsif environment == :production
  disable_warnings = true
end

Unfortunately all needed line comments such as @media -sass-debug-info{filename{font- ..., which are generated by SASS (Compass) and needed for using source maps are deleted within new compiled CSS file.

Within _config.yaml I have NOT enable compressing css.

If I compile all SASS files using this Jekyll Generator (https://gist.github.com/2874934) all comments are not removed and the source map feature is available.

ixti commented 11 years ago

Got it. Well first of all I would like to clarify difference between Jekyll Generator and Jekyll Assets. Jekyll generator just processes SASS assets with Compass. While Jekyll Assets processes CoffeeScript, JavaScript, CSS, SASS, LESS and ERB with Sprockets. So the fact that comments are removed is because Sprockets renders SASS with hardcoded options: https://github.com/sstephenson/sprockets/blob/master/lib/sprockets/sass_template.rb#L36

So, generally it's an issue/feature of Sprockets. But I got your point. I'll try to find a way to add this feature to Sprockets. I know that Joshua is planning to add source maps support for JavaScripts, so I think same for CSS would be awesome :D The only thing that I'm not quiet sure is that in this case there would be at least two layers of source maps, one from DirectiveProcessor and another from SASS.

/cc @josh

ixti commented 11 years ago

I tend to close this issue. Compass configuration is not respected at all, as SASS files are processed with Sprockets. You can try this workaround before I'll present a PR and before it will be (if it will be at all) accepted:

require "sass"

class Sass::Engine
  my_options = DEFAULT_OPTIONS.merge({
    :debug_info => true,
    :style => :expanded
  }).freeze

  remove_const :DEFAULT_OPTIONS
  const_set :DEFAULT_OPTIONS, my_options
end
sectore commented 11 years ago

Thanks for the workaround. It works great to enable the source map feature.

Another way to set an option to SASS directly (without the need to override Sass:Engine) could be:

require "sprockets/sass"

Sprockets::Sass.options[:debug_info] = true

Unfortunately there are some more configuration properties used by Compass, which are not part of SASS. That's why Compass recommends its own configuration file config.rb.

ixti commented 11 years ago

Ouch! Thanks. Seems like I've overlooked Sprockets::Sass.options. Good to know about this property.

Well, most of the Compass options are hardly Compass-dependent and are not related to anything else at all. There are few options of compass that can also be set on Sass directly:

Sprockets::Sass.options[:style] = :expanded
ixti commented 11 years ago

Ouch! Thanks. Seems like I've overlooked Sprockets::Sass.options. Good to know about this property.

Well, most of the Compass options are hardly Compass-dependent and are not related to anything else at all. There are few options of compass that can also be set on Sass directly:

# Compass equivalent: `output_style`
Sprockets::Sass.options[:style] = :expanded

# Compass equivalent: `line_comments`
Sprockets::Sass.options[:line_numbers] = true

You can see the full list of SASS options on it's documentation page.

Most of other compass options are useless for jekyll-assets (e.g. files watching etc) as compass is just required as a library (an utility set if you will) and real assets processing is made by Sprockets.

Feel free to open discussion about missing (and really needed) options. I'm totally open to extend Compass integration.

sectore commented 11 years ago

Yep, there are some important options used by Compass only. For example: The option images_dir (directory of images) is used by Compass' helper sprite-map to generate CSS sprites.

Also some Compass URL helpers such as image-url or font-url need custom options (images_dir or fonts_dir), too.

If I'm not mistaken there is no similar option by SASS.

ixti commented 11 years ago

Re: sprite-map I don't know workaround at the moment. There was an issue about Sprockets and Compass a year ago. But it was not solved as far as I can see, though some guys proposed some workarounds. I'll open an issue about sprites for jekyll-assetsm just to be sure I'll take a look on possible solution later.

Re: url helpers, jekyll-assets provides it's own helpers: asset_path, image_path, etc. No configuration is needed. These helpers are provided by Sprockets generally, but you can read about them in my humble jekyll-assets introduction post (see "Helpers available inside assets" section)

sectore commented 11 years ago

Thanks for your article Unleash Mr.Hyde! Introduction of Jekyll-Assets. I have already read it, its well written and very helpfull!!

Re: Compass url helpers vs. jekyll-assets helpers If you have to change to another environment (e.g. Rails or Middleman instead of Jekyll) it would be a pain to change some helpers (from jekyll-assets helpers to Compass helpers) although you are already using Compass in your Jekyll project. So a support of Compass config file config.rb would be just fine.

I know, it might be not as easy as it sound. Maybe compass-rails or a similar project, which uses Sprockets and Compass, includes a solution to adopt by jekyll-assets...? I don't mean another gem dependency, just a way to add Compass' config.rb.

ixti commented 11 years ago

Thanks for info about compass-rails. Looks like it's possible to find some interesting info there.

fcalderan commented 11 years ago

I don't use compass and I was able to set some SASS options placing this code inside _plugins/jekyll-assets.rb (note: I dont know ruby at all, so I'm not sure if this is the best method to achieve the result but above solutions didn't work for me)

require "jekyll-assets"
require "sprockets/sass"

#Set SASS options
module Sprockets
  class SassCompressor
    def evaluate(context, locals, &block)
      ::Sass::Engine.new(data, {
        :syntax => :scss,
        :cache => false,
        :read_cache => false,
        :line_numbers => true,
        :style => :nested
      }).render
    end
  end
end

# Changing markup ouput
Jekyll::AssetsPlugin::Renderer::STYLESHEET = '<link rel="stylesheet" href="%s">'
Jekyll::AssetsPlugin::Renderer::JAVASCRIPT = '<script src="%s"></script>'
ixti commented 11 years ago

I guess I'll put this as configuration options of the plugin. Thanks.

marbiano commented 10 years ago

What's the status of this one? Would love to be able to have a config.rb file just like compass-rails provides.

ixti commented 10 years ago

I still had not time to work on this. Any help is highly appreciated!

ixti commented 10 years ago

Finally fixed in master. At least I believe so :D Now, after you have required jekyll-assets and jekyll-assets/compass you can provide Compass configuration:

Compass.configuration do |compass|
  # ...
end