Skip to content

Commit

Permalink
Add Sass Bourbon to wro4j
Browse files Browse the repository at this point in the history
  • Loading branch information
Simon van der Sluis committed May 16, 2012
1 parent 889fa73 commit 290d411
Show file tree
Hide file tree
Showing 105 changed files with 2,467 additions and 26 deletions.
6 changes: 2 additions & 4 deletions .gitignore
View file
@@ -1,10 +1,8 @@
target
.classpath

.settings

.project

.idea

*.iml
.sass-cache

26 changes: 16 additions & 10 deletions wro4j-extensions/pom.xml
View file
Expand Up @@ -58,16 +58,22 @@
<artifactId>dojo-shrinksafe</artifactId>
<version>1.7.2</version>
</dependency>
<dependency>
<groupId>org.jruby</groupId>
<artifactId>jruby-complete</artifactId>
<version>1.6.7</version>
</dependency>
<dependency>
<groupId>me.n4u.sass</groupId>
<artifactId>sass-gems</artifactId>
<version>3.1.15</version>
</dependency>
<dependency>
<groupId>org.jruby</groupId>
<artifactId>jruby-complete</artifactId>
<version>1.6.7</version>
</dependency>
<dependency>
<groupId>me.n4u.sass</groupId>
<artifactId>sass-gems</artifactId>
<version>3.1.16</version>
</dependency>
<!-- TODO - proper name for bourbon-gems -->
<dependency>
<groupId>me.n4u.bourbon</groupId>
<artifactId>bourbon-gems</artifactId>
<version>2.1.0</version>
</dependency>
<!-- <dependency> <groupId>org.codehaus.groovy.maven.runtime</groupId>
<artifactId>gmaven-runtime-default</artifactId> <version>1.0-rc-3</version>
</dependency> -->
Expand Down
39 changes: 39 additions & 0 deletions wro4j-extensions/src/main/java/ro/isdc/wro/extensions/processor/css/BourbonCssProcessor.java
View file
@@ -0,0 +1,39 @@
/*
* Copyright (C) 2012.
* All rights reserved.
*/
package ro.isdc.wro.extensions.processor.css;

import ro.isdc.wro.extensions.processor.support.sass.RubySassEngine;
import ro.isdc.wro.model.resource.ResourceType;
import ro.isdc.wro.model.resource.SupportedResourceType;
import ro.isdc.wro.model.resource.processor.ResourcePostProcessor;
import ro.isdc.wro.model.resource.processor.ResourcePreProcessor;

/**
* A processor to support the bourbon (http://thoughtbot.com/bourbon/) mixins library for sass.
* Using this processor automatically provides sass support, so there is no need to use both this one and
* the {@link RubySassCssProcessor}.
* <p/>
* @author Simon van der Sluis
* @created 16/05/12
*/
@SupportedResourceType(ResourceType.CSS)
public class BourbonCssProcessor extends RubySassCssProcessor implements ResourcePreProcessor, ResourcePostProcessor {

public static final String ALIAS = "bourbonCss";

private static final String BOURBON_GEM_REQUIRE = "bourbon";

/**
* A getter used for lazy loading, overrides RubySassEngine#getEngine() and ensure the
* bourbon gem is imported (required).
*/
@Override
protected RubySassEngine getEngine() {
RubySassEngine engine = super.getEngine();
engine.addRequire(BOURBON_GEM_REQUIRE);
return engine;
}

}
2 changes: 1 addition & 1 deletion ...j-extensions/src/main/java/ro/isdc/wro/extensions/processor/css/RubySassCssProcessor.java
View file
Expand Up @@ -68,7 +68,7 @@ protected void onException(final WroRuntimeException e) {
/**
* A getter used for lazy loading.
*/
private RubySassEngine getEngine() {
protected RubySassEngine getEngine() {
if (engine == null) {
engine = new RubySassEngine();
}
Expand Down
65 changes: 54 additions & 11 deletions ...xtensions/src/main/java/ro/isdc/wro/extensions/processor/support/sass/RubySassEngine.java
View file
Expand Up @@ -2,6 +2,9 @@

import java.io.PrintWriter;
import java.io.StringWriter;
import java.util.LinkedHashSet;
import java.util.Set;
import java.util.TreeSet;

import javax.script.ScriptEngine;
import javax.script.ScriptEngineManager;
Expand All @@ -18,19 +21,45 @@

/**
* A Sass processor using ruby gems.
*
*
* @author Dmitry Erman
* @created 12 Feb 2012
* @since 1.4.4
*/
public class RubySassEngine {

private static final Logger LOG = LoggerFactory.getLogger(RubySassEngine.class);


private static final String RUBY_GEM_REQUIRE = "rubygems";
private static final String SASS_PLUGIN_REQUIRE = "sass/plugin";
private static final String SASS_ENGINE_REQUIRE = "sass/engine";


private LinkedHashSet<String> requires;

public RubySassEngine() {
super();
requires = new LinkedHashSet<String>();
requires.add(RUBY_GEM_REQUIRE);
requires.add(SASS_PLUGIN_REQUIRE);
requires.add(SASS_ENGINE_REQUIRE);
}

/**
* Adds a ruby require to the ruby script to be run by this RubySassEngine. It's safe to add
* the same require twice.
* @param require The name of the require, e.g. bourbon
*/
public void addRequire(String require) {
if (require != null && require.trim().length() > 0) {
requires.add(require.trim());
}
}

/**
* Transforms a sass content into css using Sass ruby engine.
*
* @param content
* the Sass content to process.
*
* @param content the Sass content to process.
*/
public String process(final String content) {
if (StringUtils.isEmpty(content)) {
Expand All @@ -48,21 +77,35 @@ public String process(final String content) {
throw new WroRuntimeException(e.getMessage(), e);
}
}

private String buildUpdateScript(final String content) {
Validate.notNull(content);
final StringWriter raw = new StringWriter();
final PrintWriter script = new PrintWriter(raw);
final StringBuilder sb = new StringBuilder();
sb.append(":syntax => :scss");

script.println(" require 'rubygems' ");
script.println(" require 'sass/plugin' ");
script.println(" require 'sass/engine' ");
script.println(" source = '" + content.replace("'", "\"") + "' ");

for (String require : requires) {
script.println(" require '" + require + "' ");
}
// if (LOG.isDebugEnabled()) {
// debugRubyEnvironment(script);
// }
script.println(" source = '" + content.replace("'", "\"") + "' ");
script.println(" engine = Sass::Engine.new(source, {" + sb.toString() + "}) ");
script.println(" result = engine.render ");
script.flush();
return raw.toString();
}

private void debugRubyEnvironment(PrintWriter script) {
script.println(" dir_contents = Dir.entries(Dir.pwd) ");
script.println(" puts dir_contents ");
script.println(" puts '--classpath--' ");
script.println(" puts $: ");
script.println(" puts '--classpath--' ");
script.println(" puts '--working dir--' ");
script.println(" puts Dir.pwd ");
script.println(" puts '--working dir--' ");
}
}
55 changes: 55 additions & 0 deletions wro4j-extensions/src/test/java/ro/isdc/wro/extensions/processor/TestBourbonCssProcessor.java
View file
@@ -0,0 +1,55 @@
/*
* Copyright (c) 2010. All rights reserved.
*/
package ro.isdc.wro.extensions.processor;

import org.junit.Before;
import org.junit.Test;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import ro.isdc.wro.WroRuntimeException;
import ro.isdc.wro.extensions.processor.css.BourbonCssProcessor;
import ro.isdc.wro.extensions.processor.css.RubySassCssProcessor;
import ro.isdc.wro.util.WroTestUtils;

import java.io.*;
import java.net.URL;


/**
* Test ruby sass css processor.
*
* @author Simon van der Sluis
* @created Created on Apr 21, 2010
*/
public class TestBourbonCssProcessor
{

private static final Logger LOG = LoggerFactory.getLogger(TestBourbonCssProcessor.class);

/** Location (base) of bourbon sass css with bourbon test resources. */
private final URL url = getClass().getResource("bourboncss");

/** A RubySassEngine to test */
private BourbonCssProcessor bourbonCss;

@Before
public void initEngine() {
bourbonCss = new BourbonCssProcessor() {
@Override
protected void onException(final WroRuntimeException e) {
LOG.debug("[FAIL] Exception message is: {}", e.getMessage());
throw e;
}
};
}

@Test
public void testFromFolder() throws Exception {
final File testFolder = new File(url.getFile(), "test");
final File expectedFolder = new File(url.getFile(), "expected");
WroTestUtils.compareFromDifferentFoldersByName(testFolder, expectedFolder, "scss", "css", bourbonCss);
}


}
138 changes: 138 additions & 0 deletions ...src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/addon-buttons.css
View file
@@ -0,0 +1,138 @@
button.normal {
border: 1px solid #076fe4;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 0 0 #8ebcf1;
-moz-box-shadow: inset 0 1px 0 0 #8ebcf1;
box-shadow: inset 0 1px 0 0 #8ebcf1;
color: white;
display: inline-block;
font-size: 11px;
font-weight: bold;
background-color: #4294f0;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4294f0), color-stop(100%, #0776f3));
background-image: -webkit-linear-gradient(top, #4294f0, #0776f3);
background-image: -moz-linear-gradient(top, #4294f0, #0776f3);
background-image: -ms-linear-gradient(top, #4294f0, #0776f3);
background-image: -o-linear-gradient(top, #4294f0, #0776f3);
background-image: linear-gradient(top, #4294f0, #0776f3);
padding: 7px 18px;
text-decoration: none;
text-shadow: 0 1px 0 #0065d6;
-webkit-background-clip: padding-box; }
button.normal:hover:not(:disabled) {
-webkit-box-shadow: inset 0 1px 0 0 #60a2ec;
-moz-box-shadow: inset 0 1px 0 0 #60a2ec;
box-shadow: inset 0 1px 0 0 #60a2ec;
cursor: pointer;
background-color: #2f87ea;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2f87ea), color-stop(100%, #086fe3));
background-image: -webkit-linear-gradient(top, #2f87ea, #086fe3);
background-image: -moz-linear-gradient(top, #2f87ea, #086fe3);
background-image: -ms-linear-gradient(top, #2f87ea, #086fe3);
background-image: -o-linear-gradient(top, #2f87ea, #086fe3);
background-image: linear-gradient(top, #2f87ea, #086fe3); }
button.normal:active:not(:disabled) {
border: 1px solid #076fe4;
-webkit-box-shadow: inset 0 0 8px 4px #0868d3, inset 0 0 8px 4px #0868d3, 0 1px 1px 0 #eeeeee;
-moz-box-shadow: inset 0 0 8px 4px #0868d3, inset 0 0 8px 4px #0868d3, 0 1px 1px 0 #eeeeee;
box-shadow: inset 0 0 8px 4px #0868d3, inset 0 0 8px 4px #0868d3, 0 1px 1px 0 #eeeeee; }
button.normal:disabled {
opacity: 0.5;
cursor: not-allowed; }

button.pill {
border: 1px solid #3371b2;
border-color: #3371b2 #2457a3 #164297;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
-webkit-box-shadow: inset 0 1px 0 0 #64a9f2, 0 1px 2px 0 #b3b3b3;
-moz-box-shadow: inset 0 1px 0 0 #64a9f2, 0 1px 2px 0 #b3b3b3;
box-shadow: inset 0 1px 0 0 #64a9f2, 0 1px 2px 0 #b3b3b3;
color: white;
display: inline-block;
font-size: 11px;
font-weight: normal;
line-height: 1;
background-color: #4294f0;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4294f0), color-stop(100%, #0156fe));
background-image: -webkit-linear-gradient(top, #4294f0, #0156fe);
background-image: -moz-linear-gradient(top, #4294f0, #0156fe);
background-image: -ms-linear-gradient(top, #4294f0, #0156fe);
background-image: -o-linear-gradient(top, #4294f0, #0156fe);
background-image: linear-gradient(top, #4294f0, #0156fe);
padding: 5px 16px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px #2762bf;
-webkit-background-clip: padding-box; }
button.pill:hover:not(:disabled) {
border: 1px solid #2062a7;
border-color: #2062a7 #0e479a #01318e;
-webkit-box-shadow: inset 0 1px 0 0 #519cf0;
-moz-box-shadow: inset 0 1px 0 0 #519cf0;
box-shadow: inset 0 1px 0 0 #519cf0;
cursor: pointer;
background-color: #2d88ee;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2d88ee), color-stop(100%, #1554ce));
background-image: -webkit-linear-gradient(top, #2d88ee, #1554ce);
background-image: -moz-linear-gradient(top, #2d88ee, #1554ce);
background-image: -ms-linear-gradient(top, #2d88ee, #1554ce);
background-image: -o-linear-gradient(top, #2d88ee, #1554ce);
background-image: linear-gradient(top, #2d88ee, #1554ce);
text-shadow: 0 -1px 1px #134faf;
-webkit-background-clip: padding-box; }
button.pill:active:not(:disabled) {
background: #226edd;
border: 1px solid #0d3c8c;
border-bottom: 1px solid #062d8d;
-webkit-box-shadow: inset 0 0 6px 3px #0c44b8, 0 1px 0 0 white;
-moz-box-shadow: inset 0 0 6px 3px #0c44b8, 0 1px 0 0 white;
box-shadow: inset 0 0 6px 3px #0c44b8, 0 1px 0 0 white;
text-shadow: 0 -1px 1px #1a52aa; }
button.pill:disabled {
opacity: 0.5;
cursor: not-allowed; }

button.shiny {
border: 1px solid #8a0000;
border-bottom: 1px solid #810000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0 1px 0 0 #ff1d0c;
-moz-box-shadow: inset 0 1px 0 0 #ff1d0c;
box-shadow: inset 0 1px 0 0 #ff1d0c;
color: white;
display: inline-block;
font-size: 14px;
font-weight: bold;
background-color: red;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, red), color-stop(50%, #c70000), color-stop(50%, #a90000), color-stop(100%, #b00000));
background-image: -webkit-linear-gradient(top, red 0%, #c70000 50%, #a90000 50%, #b00000 100%);
background-image: -moz-linear-gradient(top, red 0%, #c70000 50%, #a90000 50%, #b00000 100%);
background-image: -ms-linear-gradient(top, red 0%, #c70000 50%, #a90000 50%, #b00000 100%);
background-image: -o-linear-gradient(top, red 0%, #c70000 50%, #a90000 50%, #b00000 100%);
background-image: linear-gradient(top, red 0%, #c70000 50%, #a90000 50%, #b00000 100%);
padding: 8px 20px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px #730000; }
button.shiny:hover:not(:disabled) {
cursor: pointer;
background-color: #f20000;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f20000), color-stop(50%, #bd0000), color-stop(50%, #a20000), color-stop(100%, #a90000));
background-image: -webkit-linear-gradient(top, #f20000 0%, #bd0000 50%, #a20000 50%, #a90000 100%);
background-image: -moz-linear-gradient(top, #f20000 0%, #bd0000 50%, #a20000 50%, #a90000 100%);
background-image: -ms-linear-gradient(top, #f20000 0%, #bd0000 50%, #a20000 50%, #a90000 100%);
background-image: -o-linear-gradient(top, #f20000 0%, #bd0000 50%, #a20000 50%, #a90000 100%);
background-image: linear-gradient(top, #f20000 0%, #bd0000 50%, #a20000 50%, #a90000 100%); }
button.shiny:active:not(:disabled) {
-webkit-box-shadow: inset 0 0 20px 0 #900000, 0 1px 0 white;
-moz-box-shadow: inset 0 0 20px 0 #900000, 0 1px 0 white;
box-shadow: inset 0 0 20px 0 #900000, 0 1px 0 white; }
button.shiny:disabled {
opacity: 0.5;
cursor: not-allowed; }

0 comments on commit 290d411

Please sign in to comment.