From 2d4e0e400ff72af164e00aa28ebbd276a641f3b6 Mon Sep 17 00:00:00 2001 From: Michael Schubert & Sam Obukwelu Date: Thu, 8 Mar 2012 10:58:25 -0500 Subject: [PATCH 1/3] Fix for Compass.shared_extension_paths when HOME is a relative path. This should fully resolve https://github.com/chriseppstein/compass/issues/364 for when HOME is not just nil but also "." (or any other relative path). Added a complete set of unit tests around the method as well. --- lib/compass.rb | 2 ++ test/units/compass_module_test.rb | 36 +++++++++++++++++++++++++++++++ 2 files changed, 38 insertions(+) create mode 100644 test/units/compass_module_test.rb diff --git a/lib/compass.rb b/lib/compass.rb index 2d097fcb..1ac47c13 100644 --- a/lib/compass.rb +++ b/lib/compass.rb @@ -21,6 +21,8 @@ module Compass else [] end + rescue ArgumentError # If HOME is relative + [] end end module_function :base_directory, :lib_directory, :shared_extension_paths diff --git a/test/units/compass_module_test.rb b/test/units/compass_module_test.rb new file mode 100644 index 00000000..0e9e530b --- /dev/null +++ b/test/units/compass_module_test.rb @@ -0,0 +1,36 @@ +require File.join(File.dirname(__FILE__), "..", "test_helper") + +class CompassModuleTest < Test::Unit::TestCase + + def setup + Compass.reset_configuration! + Compass.instance_variable_set("@shared_extension_paths", nil) + @original_home = ENV["HOME"] + end + + def teardown + ENV["HOME"] = @original_home + Compass.reset_configuration! + end + + def test_shared_extension_paths_with_valid_home + ENV["HOME"] = "/" + assert_equal ["/.compass/extensions"], Compass.shared_extension_paths + end + + def test_shared_extension_paths_with_nil_home + ENV["HOME"] = nil + assert_equal [], Compass.shared_extension_paths + end + + def test_shared_extension_paths_with_file_home + ENV["HOME"] = __FILE__ + assert_equal [], Compass.shared_extension_paths + end + + def test_shared_extension_paths_with_relative_home + ENV["HOME"] = "." + assert_equal [], Compass.shared_extension_paths + end + +end From 70423373935db54deee49f8c38caf8baf950c57d Mon Sep 17 00:00:00 2001 From: Andrew Pietsch Date: Sun, 11 Mar 2012 19:44:13 +1100 Subject: [PATCH 2/3] Replaced all references to "icons" in the tutorial with "my-icons" to make it clearer that the @include all-icon-sprites is dependent on the directory name. Updated the naming in the magic selectors section to be more clear. Conflicts: doc-src/content/help/tutorials/spriting.markdown --- .../content/help/tutorials/spriting.markdown | 52 +++++++------- .../spriting/magic-selectors.markdown | 67 +++++++++---------- 2 files changed, 59 insertions(+), 60 deletions(-) diff --git a/doc-src/content/help/tutorials/spriting.markdown b/doc-src/content/help/tutorials/spriting.markdown index 235777ef..fa411b6f 100644 --- a/doc-src/content/help/tutorials/spriting.markdown +++ b/doc-src/content/help/tutorials/spriting.markdown @@ -19,10 +19,10 @@ of several convenient ways. For this tutorial, let's imagine that in your project's image folder there are four icons: -* `images/icon/new.png` -* `images/icon/edit.png` -* `images/icon/save.png` -* `images/icon/delete.png` +* `images/my-icons/new.png` +* `images/my-icons/edit.png` +* `images/my-icons/save.png` +* `images/my-icons/delete.png` Each is an icon that is 32px square. @@ -32,23 +32,23 @@ Each is an icon that is 32px square. The simplest way to use these icon sprites is to let compass give you a class for each sprite: - @import "icon/*.png"; - @include all-icon-sprites; + @import "my-icons/*.png"; + @include all-my-icons-sprites; And you'll get the following CSS output: - .icon-sprite, - .icon-delete, - .icon-edit, - .icon-new, - .icon-save { background: url('/images/icon-s34fe0604ab.png') no-repeat; } + .my-icons-sprite, + .my-icons-delete, + .my-icons-edit, + .my-icons-new, + .my-icons-save { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; } - .icon-delete { background-position: 0 0; } - .icon-edit { background-position: 0 -32px; } - .icon-new { background-position: 0 -64px; } - .icon-save { background-position: 0 -96px; } + .my-icons-delete { background-position: 0 0; } + .my-icons-edit { background-position: 0 -32px; } + .my-icons-new { background-position: 0 -64px; } + .my-icons-save { background-position: 0 -96px; } -You can now apply the `icon-XXX` classes to your markup as needed. +You can now apply the `my-icons-XXX` classes to your markup as needed. Let's go over what happened there. The import statement told compass to [generate a stylesheet that is customized for your sprites](https://gist.github.com/729507). This @@ -77,25 +77,25 @@ Example: ****Note**: The use of `icon` is only for this example, "icon" represents the folder name that contains your sprites. If you want control over what selectors are generated, it is easy to do. In this example, -this is done by using the magic `icon-sprite` mixin. Note that the mixin's name is dependent +this is done by using the magic `my-icons-sprite` mixin. Note that the mixin's name is dependent on the name of the folder in which you've placed your icons. - @import "icon/*.png"; + @import "my-icons/*.png"; .actions { - .new { @include icon-sprite(new); } - .edit { @include icon-sprite(edit); } - .save { @include icon-sprite(save); } - .delete { @include icon-sprite(delete); } + .new { @include my-icons-sprite(new); } + .edit { @include my-icons-sprite(edit); } + .save { @include my-icons-sprite(save); } + .delete { @include my-icons-sprite(delete); } } And your stylesheet will compile to: - .icon-sprite, + .my-icons-sprite, .actions .new, .actions .edit, .actions .save, - .actions .delete { background: url('/images/icon-s34fe0604ab.png') no-repeat; } + .actions .delete { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; } .actions .new { background-position: 0 -64px; } .actions .edit { background-position: 0 -32px; } @@ -136,7 +136,7 @@ magic, some people are scared by it, and others are curious about how the magic you would like to avoid the magic, you can use compass to generate an import for you. On the command line: - compass sprite "images/icon/*.png" + compass sprite "images/my-icons/*.png" This will create file using your project's preferred syntax, or you can specify the output filename using the `-f` option and the syntax will be inferred from the extension. @@ -176,4 +176,4 @@ Or install the Rubygem: gem install oily_png -Compass will automatically detect its presence. \ No newline at end of file +Compass will automatically detect its presence. diff --git a/doc-src/content/help/tutorials/spriting/magic-selectors.markdown b/doc-src/content/help/tutorials/spriting/magic-selectors.markdown index a0d4cb9b..a47c1331 100644 --- a/doc-src/content/help/tutorials/spriting/magic-selectors.markdown +++ b/doc-src/content/help/tutorials/spriting/magic-selectors.markdown @@ -5,70 +5,69 @@ crumb: Magic Selectors classnames: - tutorial --- -#Sprite Tutorial +# Sprite Tutorial <%= sprite_tutorial_links %> ## Magic Selectors If you want to add selectors for your sprites, it's easy todo by adding `_active` `_target` or `_hover` to the file name, In the example below we have a sprite directory that looks like: -* `selectors/ten-by-ten.png` -* `selectors/ten-by-ten_hover.png` -* `selectors/ten-by-ten_active.png` -* `selectors/ten-by-ten_target.png` - +* `my-buttons/glossy.png` +* `my-buttons/glossy_hover.png` +* `my-buttons/glossy_active.png` +* `my-buttons/glossy_target.png` + Now in our sass file we add: - @import "selectors/*.png"; + @import "my-buttons/*.png"; a { - @include selectors-sprite(ten-by-ten) + @include my-buttons-sprite(glossy) } - + And your stylesheet will compile to: - .selectors-sprite, a { - background: url('/selectors-sedfef809e2.png') no-repeat; + .my-buttons-sprite, a { + background: url('/my-buttons-sedfef809e2.png') no-repeat; } a { background-position: 0 0; } - a:hover, a.ten-by-ten_hover, a.ten-by-ten-hover { - background-position: 0 -20px; + a:hover, a.glossy_hover, a.glossy-hover { + background-position: 0 -40px; } - a:target, a.ten-by-ten_target, a.ten-by-ten-target { - background-position: 0 -30px; + a:target, a.glossy_target, a.glossy-target { + background-position: 0 -60px; } - a:active, a.ten-by-ten_active, a.ten-by-ten-active { - background-position: 0 -10px; + a:active, a.glossy_active, a.glossy-active { + background-position: 0 -20; } -Alternatively you can use the `@include all-selectors-sprites;` after the import and get the following output: +Alternatively you can use the `@include all-my-buttons-sprites;` after the import and get the following output: - .selectors-sprite, .selectors-ten-by-ten { - background: url('/selectors-sedfef809e2.png') no-repeat; + .my-buttons-sprite, .my-buttons-glossy { + background: url('/my-buttons-sedfef809e2.png') no-repeat; } - .selectors-ten-by-ten { + .my-buttons-glossy { background-position: 0 0; } - .selectors-ten-by-ten:hover, .selectors-ten-by-ten.ten-by-ten_hover, .selectors-ten-by-ten.ten-by-ten-hover { + .my-buttons-glossy:hover, .my-buttons-glossy.glossy_hover, .my-buttons-glossy.glossy-hover { + background-position: 0 -40px; + } + .my-buttons-glossy:target, .my-buttons-glossy.glossy_target, .my-buttons-glossy.glossy-target { + background-position: 0 -60px; + } + .my-buttons-glossy:active, .my-buttons-glossy.glossy_active, .my-buttons-glossy.glossy-active { background-position: 0 -20px; } - .selectors-ten-by-ten:target, .selectors-ten-by-ten.ten-by-ten_target, .selectors-ten-by-ten.ten-by-ten-target { - background-position: 0 -30px; - } - .selectors-ten-by-ten:active, .selectors-ten-by-ten.ten-by-ten_active, .selectors-ten-by-ten.ten-by-ten-active { - background-position: 0 -10px; - } - + ## Disabling - To disable this feature set `$disable-magic-sprite-selectors` to true before calling the sprite mixin - + +To disable this feature set `$disable-magic-sprite-selectors` to true before calling the sprite mixin + a { $disable-magic-sprite-selectors:true; - @include selectors-sprite(ten-by-ten) + @include my-buttons-sprite(glossy) } - - From c1eedc721d7dc65561f02a55bb3227246ea8f332 Mon Sep 17 00:00:00 2001 From: Chris Eppstein Date: Sun, 11 Mar 2012 20:04:58 -0700 Subject: [PATCH 3/3] Fix failing test for compass stats. --- features/command_line.feature | 29 ++++++++++++++--------------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/features/command_line.feature b/features/command_line.feature index f0ffbba3..841f46e1 100644 --- a/features/command_line.feature +++ b/features/command_line.feature @@ -267,21 +267,20 @@ Feature: Command Line Given I am using the existing project in test/fixtures/stylesheets/compass When I run: compass stats Then I am told statistics for each file: - | Filename | Rules | Properties | Mixins Defs | Mixins Used | CSS Selectors | CSS Properties | - | sass/border_radius.scss | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ | - | sass/box.sass | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ | - | sass/fonts.sass | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ | - | sass/gradients.sass | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ | - | sass/image_size.sass | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ | - | sass/images.scss | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ | - | sass/layout.sass | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ | - | sass/legacy_clearfix.scss | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ | - | sass/lists.scss | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ | - | sass/print.sass | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ | - | sass/reset.sass | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ | - | sass/utilities.scss | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ | - | ------------------------- | ----- | ---------- | -------------- | ----------- | ------------- | -------------- | - | Total.* | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ | + | Filename | Rules | Properties | Mixins Defs | Mixins Used | Filesize | CSS Selectors | CSS Properties | CSS Filesize | + | sass/border_radius.scss | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B | + | sass/box.sass | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B | + | sass/fonts.sass | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B | + | sass/gradients.sass | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B | + | sass/image_size.sass | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B | + | sass/images.scss | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B | + | sass/layout.sass | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B | + | sass/legacy_clearfix.scss | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B | + | sass/lists.scss | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B | + | sass/print.sass | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B | + | sass/reset.sass | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B | + | sass/utilities.scss | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B | + | Total.* | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B | @listframeworks Scenario: List frameworks registered with compass