Issues using RubySassCssProcessor in v1.7.1

368 views
Skip to first unread message

ajb...@gmail.com

unread,
Oct 8, 2013, 8:16:29 AM10/8/13
to wr...@googlegroups.com
Hi,

I am able to setup a group of .scss files that are combined into a single .Css at runtime but none of the Variables are processed.
I am deploying a .WAR file to JBoss EAP 6.1.
I am using wro4j version: 1.7.1 and Maven to build my app.

Please assist me to track the cause of the issue.

Here are my configuration files:


------------- wro.xml -------------
<?xml version="1.0" encoding="UTF-8"?>
<groups xmlns="http://www.isdc.ro/wro"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://www.isdc.ro/wro wro.xsd">

  <group name="group1">
    <css>/css/mixins.scss</css>
    <css>/css/global.scss</css>
    <css>/css/meta.scss</css>
  </group>

</groups>

------------- wro.properties -------------
cacheUpdatePeriod=0
modelUpdatePeriod=0
debug=true
disableCache=false
gzipResources=true
ignoreMissingResources=false
jmxEnabled=true
managerFactoryClassName=ro.isdc.wro.extensions.manager.ExtensionsConfigurableWroManagerFactory
encoding=UTF-8

uriLocators=servletContext
preProcessors=cssUrlRewriting, cssImport, semicolonAppender
postProcessors=rubySassCss, cssMin

------------- web.xml -------------

<filter>
         <filter-name>WebResourceOptimizer</filter-name>
         <filter-class>
           ro.isdc.wro.http.WroFilter
         </filter-class>
    </filter>
   
    <filter-mapping>
      <filter-name>WebResourceOptimizer</filter-name>
      <url-pattern>/wro/*</url-pattern>
    </filter-mapping>
   
    <listener>
        <listener-class>ro.isdc.wro.http.WroServletContextListener</listener-class>
    </listener>


Output of  http://localhost:8080/my-app/wro/group1.css  (Combination of mixins.scss , global.scss and meta.scss ) :

/* Global Vars */
$spriteBg: url(../images/sprite.png);
$spriteBgx2: url(../images/spr...@x2.png);
$btnImgB64: "";
$btnBg-start-colour: #f9f9f9;
$btnBg-end-colour: #e6e6e6;

//@mixin background-gradient($from, $to){ background: $from; @include background-image(linear-gradient($from, $to)); }
@mixin background-gradient($from, $to){ background-color: $from; @include filter-gradient($from, $to, vertical); $experimental-support-for-svg: true; @include background-image(linear-gradient(top,  $from 0%, $to 100%)); }
@mixin box-sizing($type){ -webkit-box-sizing: $type; -moz-box-sizing: $type; box-sizing: $type; }
@mixin item-span-defaults {
  span {
          &.img { float: left; margin: 11px 16px;
            img { @include border-radius(5px); }
          }
          &.details { float: left; padding: 10px 0; font-size: 14px; }
          &.date { float: right; padding: 10px 10px 0 ; font-size: 13px; }
          &.bold { font-weight: bold; }
          &.italic { font-weight: normal; font-style: italic; color: #b2b4b5; }
          &.line { float: left; clear: both; }
  }
}
/*! normalize.css v1.1.0 | MIT License | git.io/normalize */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}

/**
 * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
 * Known issue: no IE 6 support.
 */

[hidden] {
    display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */

/**
 * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    font-size: 100%; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
}

/**
 * Address `font-family` inconsistency between `textarea` and other form
 * elements.
 */

html,
button,
input,
select,
textarea {
    font-family: sans-serif;
}

/**
 * Address margins handled incorrectly in IE 6/7.
 */

body {
    margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
    outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

/**
 * Address font sizes and margins set differently in IE 6/7.
 * Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
 * and Chrome.
 */

abbr[title] {
    border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
 */

b,
strong {
    font-weight: bold;
}

blockquote {
    margin: 1em 40px;
}

/**
 * Address styling not present in Safari 5 and Chrome.
 */

dfn {
    font-style: italic;
}

/**
 * Address differences between Firefox and other browsers.
 * Known issue: no IE 6/7 normalization.
 */

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

/**
 * Address styling not present in IE 6/7/8/9.
 */

mark {
    background: #ff0;
    color: #000;
}

/**
 * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
 */

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    _font-family: 'courier new', monospace;
    font-size: 1em;
}

/**
 * Improve readability of pre-formatted text in all browsers.
 */

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/**
 * Address CSS quotes not supported in IE 6/7.
 */

q {
    quotes: none;
}

/**
 * Address `quotes` property not supported in Safari 4.
 */

q:before,
q:after {
    content: '';
    content: none;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* ==========================================================================
   Lists
   ========================================================================== */

/**
 * Address margins set differently in IE 6/7.
 */

dl,
menu,
ol,
ul {
    margin: 0;
}

dd {
    margin: 0;
}

/**
 * Address paddings set differently in IE 6/7.
 */

menu,
ol,
ul {
    padding: 0;
}

/**
 * Correct list images handled incorrectly in IE 7.
 */

nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */

/**
 * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
 * 2. Improve image quality when scaled in IE 7.
 */

img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}

/**
 * Correct overflow displayed oddly in IE 9.
 */

svg:not(:root) {
    overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */

/**
 * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
 */

figure {
    margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */

/**
 * Correct margin displayed oddly in IE 6/7.
 */

form {
    margin: 0;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct color not being inherited in IE 6/7/8/9.
 * 2. Correct text not wrapping in Firefox 3.
 * 3. Correct alignment displayed oddly in IE 6/7.
 */

legend {
    border: 0; /* 1 */
    padding: 0;
    white-space: normal; /* 2 */
    *margin-left: -7px; /* 3 */
}

/**
 * 1. Correct font size not being inherited in all browsers.
 * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
 *    and Chrome.
 * 3. Improve appearance and consistency in all browsers.
 */

button,
input,
select,
textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}

/**
 * Address Firefox 3+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input {
    line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */

button,
select {
    text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
    *overflow: visible;  /* 4 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
    cursor: default;
}

/**
 * 1. Address box sizing set to content-box in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 * 3. Remove excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 3+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 6/7/8/9.
 * 2. Improve readability and alignment in all browsers.
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

/* ==========================================================================
   Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* ==========================================================================
   Clearfix
   ========================================================================== */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
.clear { clear: both; font-size: 1px; line-height: 0; }


@import "mixins";

/* GENERAL */

@font-face{
  font-family:"Univers";
  src:url("../fonts/aefefc4e-9cb8-4e8e-8599-dda705456734.eot?#iefix");
  src:url("../fonts/aefefc4e-9cb8-4e8e-8599-dda705456734.eot?#iefix") format("eot"),
  url("../fonts/1eaf27c0-f4de-4273-9f4c-1b3236ad2f3c.woff") format("woff"),
  url("../fonts/9b913baf-b1f0-47d2-8c76-42f59650058f.ttf") format("truetype"),
  url("../fonts/0abcce12-2274-4ee7-b6d5-0066b5f5f670.svg#0abcce12-2274-4ee7-b6d5-0066b5f5f670") format("svg");
}
@font-face{
font-family:"Univers Bold";
src:url("../fonts/076b8d7a-91b5-4c89-86a1-546b980072c7.eot?#iefix");
src:url("../fonts/076b8d7a-91b5-4c89-86a1-546b980072c7.eot?#iefix") format("eot"),
url("../fonts/21decb60-b395-4de2-bd04-e38eb2a56d2f.woff") format("woff"),
url("../fonts/091058d4-36b2-43f6-80d3-16c88e098061.ttf") format("truetype"),
url("../fonts/827d22bc-e38b-4ccf-8a21-1f9aaa76e402.svg#827d22bc-e38b-4ccf-8a21-1f9aaa76e402") format("svg");
}
@font-face{
font-family:"Trade Gothic";
src:url("../fonts/413d9688-00d4-47c4-bb55-656a0cd396e9.eot?#iefix");
src:url("../fonts/413d9688-00d4-47c4-bb55-656a0cd396e9.eot?#iefix") format("eot"),
url("../fonts/c4aef0d4-bfcf-4790-acf5-909881f411e8.woff") format("woff"),
url("../fonts/e741f29c-bc18-4343-bff3-db2465a0be3e.ttf") format("truetype"),
url("../fonts/853e2a9b-4057-42a5-ad7e-0762cda0b13c.svg#853e2a9b-4057-42a5-ad7e-0762cda0b13c") format("svg");
}

@font-face{
  font-family:"Trade Gothic Bold";
  src:url("../fonts/bb3aa0a7-2585-4e89-ad82-658fd561751a.eot?#iefix");
  src:url("../fonts/bb3aa0a7-2585-4e89-ad82-658fd561751a.eot?#iefix") format("eot"),
  url("../fonts/1454a71d-cdbb-429c-8092-122f4493e0c7.woff") format("woff"),
  url("../fonts/d5ea405c-2180-4ff0-bd51-3e19fb280be4.ttf") format("truetype"),
  url("../fonts/70ac6679-cf48-4a0e-a909-d1e3bb4a1aa9.svg#70ac6679-cf48-4a0e-a909-d1e3bb4a1aa9") format("svg");
}

@font-face{
  font-family:"Trade Gothic Italic";
  src:url("../fonts/b1721311-de06-4277-8dcb-bf39e072b75e.eot?#iefix");
  src:url("../fonts/b1721311-de06-4277-8dcb-bf39e072b75e.eot?#iefix") format("eot"),
  url("../fonts/c357a65e-dd87-4d11-8063-db04802d44c0.woff") format("woff"),
  url("../fonts/6b9ca17d-cb9d-43bb-8b43-93670b45b83f.ttf") format("truetype"),
  url("../fonts/198ed3e2-0cdf-496f-a0ef-86da8d4dde55.svg#198ed3e2-0cdf-496f-a0ef-86da8d4dde55") format("svg");
}

body { font-family: "Univers", Calibri, Arial, sans-serif; color: #414141; background: #293c57 url(../images/bg_blue.gif) left top repeat; }
body.has_popup { overflow: hidden !important; overflow-x: hidden !important; overflow-y: hidden !important; }
.wrapper { float: left; width: 99.9%; padding: 0; min-width: 980px; } /* was 1024 */
.inner { max-width: 1015px; margin: 0 auto; padding: 0 3px; }
button, input { font-family: "Univers", Calibri, Arial, sans-serif; padding: 5px; }
ul, li { list-style: none; }

.content { float: left; position: relative; width: 100%; }

.bbtn { display: inline-block; position:relative; text-decoration: none; border: 1px solid #d7dbdc; height:28px; @include border-radius(5px); @include background-gradient(#f9f9f9, #e6e6e6); @include box-shadow(rgba(0, 0, 0, 0.6) 0px 1px 1px 0px); cursor: pointer;
  span { cursor: pointer;
    &.text { float:left; padding: 0 11px; font-size: 14px; line-height: 28px; text-decoration: none; color: #293142; }
    &.ico { float:left; width: 18px; height: 18px; margin: 5px 7px; }
    &.ico_bk { width:10px; height:13px; margin:7px 0px 7px 11px; }
    &.ico_fw { width:10px; height:13px; margin:7px 11px 7px 0px; }
  }
  &:hover { @include background-gradient(#e6e6e6, #f9f9f9); }
  &:active { @include background-gradient(#e6e6e6, #f9f9f9); border:1px solid #a4a4a4; @include box-shadow(rgba(0, 0, 0, 0.4) 0px 0px 10px 0px inset); }
}

.bbtn_white { display: inline-block; position:relative; text-decoration: none; border: 1px solid #d3e2ea; background:#fff; @include border-radius(5px); cursor: pointer;
  span { cursor: pointer;
    &.text { float:left; padding: 0 11px; font-size: 13px; line-height: 27px; text-decoration: none; color: #293142; }
    &.ico { float:right; width: 18px; height: 18px; margin: 5px 7px 0 0; }
    &.ico_preview { background: $spriteBg -340px -119px no-repeat; }
  }
  &:hover { background: #3394d7; color:#fff; border:1px solid #d3e2ea; 
    span { color:#fff; 
      &.ico_preview { background: $spriteBg -358px -119px no-repeat; }
    }
  }
  &:active { background: #3394d7; color:#fff; border:1px solid #d3e2ea; @include box-shadow(rgba(0, 0, 0, 0.4) 0px 0px 10px 0px inset); 
    span { color:#fff; 
      &.ico_preview { background: $spriteBg -358px -119px no-repeat; }
    }
  }
}

.bbtn_red { @extend .bbtn; @include background-gradient(#e85944, #b5382a); 
  span { color: #fff !important; }
  &:hover { @include background-gradient(#b5382a, #e85944); }
  &:active { @include background-gradient(#b5382a, #e85944); @include box-shadow(rgba(0, 0, 0, 0.4) 0px 0px 10px 0px inset); }
}

.ybtn { @extend .bbtn; @include background-gradient(#fbe900, #e8d800); 
  span { color: #434343 !important; }
  &:hover { @include background-gradient(#e9d800, #f9e800); }
  &:active { @include background-gradient(#e9d800, #f9e800); @include box-shadow(rgba(0, 0, 0, 0.4) 0px 0px 10px 0px inset); }
}

span {
  &.ico_add { background: $spriteBg -110px -90px no-repeat; }
  &.ico_list { background: $spriteBg -130px -90px no-repeat; }  
  &.ico_prev { background: $spriteBg -221px -86px no-repeat; width: 23px !important; height: 26px !important; margin: 5px 9px !important; }
  &.ico_next { background: $spriteBg -237px -86px no-repeat; width: 23px !important; height: 26px !important;}
  &.ico_close { background: $spriteBg -179px -78px no-repeat; width: 44px !important; height: 46px !important; margin: 2px 1px 0 !important; }
  &.ico_refresh { background: $spriteBg -148px -84px no-repeat; width: 32px !important; height: 32px !important; margin: 2px 0 !important; }
  &.ico_back { background: $spriteBg -258px -86px no-repeat; padding: 3px 0px; margin: 3px 5px !important; width: 12px !important;
    .text { line-height: 18px !important; padding: 0 20px !important; width: 40px !important; height: 40px !important;}
  }
  &.ico_preview { }
  &.ico_file { @extend .ico_preview; background: $spriteBg -41px -172px no-repeat; width: 26px !important; height: 24px !important; }
  &.ico_download { @extend .ico_file; background: $spriteBg -75px -170px no-repeat; margin-top: 3px !important }
  &.ico_delete   { @extend .ico_file; background: $spriteBg -106px -172px no-repeat; }
  &.ico_move { @extend .ico_file; background: $spriteBg -131px -170px no-repeat; margin: 3px 20px 5px 0 !important; }
  &.ico_copy { @extend .ico_move;  background: $spriteBg -159px -170px no-repeat; }
  &.ico_unread { @extend .ico_move; background: $spriteBg -185px -170px no-repeat; }
  &.ico_print { @extend .ico_move;  background: $spriteBg -218px -170px no-repeat; }
  &.ico_bk { background: $spriteBg -259px -91px no-repeat; }
  &.ico_fw { background: $spriteBg -269px -91px no-repeat; }

}

/* Scroll Bars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; }
::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); background: #4494d3; }

/* DROPDOWN MENUS */
.ddmenu { display: inline-block; text-decoration: none; position: relative; border: 1px solid #d7dbdc; cursor: pointer; @include border-radius(5px); background: $btnImgB64; @include background-gradient($btnBg-start-colour, $btnBg-end-colour); @include box-shadow(rgba(0, 0, 0, 0.6) 0px 1px 1px 0px);
  span {
    &.top { display: inline-block; padding: 0 43px 0 11px; font-size: 12px; line-height: 28px; text-decoration: none; color: #293142; background: url(../images/bg_ddmenu.png) right top no-repeat; }
    &.wrap { display: none; float: left; width: 169px; position: absolute; top: 33px; left: -1px; z-index: 10; padding: 0px; border: 1px solid #d7dbdc; background: #fff; 
      a { display: inline-block; float: none; width: 100%; margin: 0 !important; line-height: 28px; font-size: 13px; text-transform:capitalize; text-decoration: none; color: #293142; text-align: left;
        span {
          &.text { float: left; text-decoration: none; color: #293142; padding: 6px 15px; }
          &.ico { float: left; width: 18px; height: 18px; margin: 11px 11px 0px 10px; }
        }
        &:hover { background: #d8e7f5; }
      }
    }
  }
}

.ddmenu-hover { @include background-gradient(#e6e6e6, #f9f9f9); 
  span.top { background: url(../images/bg_ddmenu.png) right -30px no-repeat; }
}

.ddmenu-active { z-index: 20; @include border-radius(5px 5px 0 0); @include background-gradient(#e6e6e6, #f9f9f9); border:1px solid #a4a4a4; @include box-shadow(rgba(0, 0, 0, 0.4) 0px 0px 10px 0px inset); 
  span {
    &.top { background: url(../images/bg_ddmenu.png) right -60px no-repeat; }
    &.wrap { display: inline-block; float: left; z-index: 40; }
  }
}

/* ddmenu white extends ddmenu in html */
.ddmenu_white { background: #fff; background-image:none; border: 1px solid #d3e2ea; filter:none; @include box-shadow(none); 
  span {
    &.top { line-height:27px; padding:0 34px 0 11px; background: url(../images/bg_ddmenu_white.png) right top no-repeat; }
    &.wrap { top: 26px; }
  }
}

.ddmenu-white-hover { background: #3394d7 !important; color:#fff; border:1px solid #d3e2ea; filter:none;
  span {
    &.top { color:#fff; background: url(../images/bg_ddmenu_white.png) right -30px no-repeat !important; }
  }
}

.ddmenu-white-active { background: #3394d7 !important; color:#fff; border:1px solid #d3e2ea; filter:none;
  span {
    &.top { color:#fff; background: url(../images/bg_ddmenu_white.png) right -60px no-repeat !important; }
  }
}


/* verification images */
.simage { float:left; 
  span.simage { float:left; width: 108px; height: 108px; padding: 0; margin: 0; background: url(../images/simages.png) 0 0 no-repeat; @include border-radius(3px); }
  a { float:left; margin:0 12px 12px 0; border:3px solid #fff; @include border-radius(3px); 
    &.active { border:3px solid #1ba0e1; }
    &:hover { border:3px solid #1ba0e1; 
      span.simage { @include border-radius(0px); }
    }
  }
  span.i-1 { background-position: 0px 0px !important; }
  span.i-2 { background-position: -108px 0px !important; }
  span.i-3 { background-position: -216px 0px !important; }
  span.i-4 { background-position: -324px 0px !important; }
  span.i-5 { background-position: -432px 0px !important; }
  span.i-6 { background-position: -540px 0px !important; }
  span.i-7 { background-position: -648px 0px !important; }
  span.i-8 { background-position: -756px 0px !important; }
  span.i-9 { background-position: -864px 0px !important; }
}

/* Frame */
.frame { float: left; width: 100%; background: url(../images/bg_box_tb.png) left top repeat-x; margin:3px 0 0 0;
  .bgbtm { float: left; width: 100%; background: url(../images/bg_box_tb.png) left bottom repeat-x; }
  .bgltile { float: left; width: 100%; background: url(../images/bg_box_lr_tile.png) left top repeat-y; }
  .bgrtile { float: left; width: 100%; background: url(../images/bg_box_lr_tile.png) right top repeat-y; }
  .bgl { float: left; width: 100%; background: url(../images/bg_box_lr.png) left top no-repeat; }
  .bgr { float: left; width: 100%; background: url(../images/bg_box_lr.png) right top no-repeat; }
  .bgctl { float: left; width: 100%; background: url(../images/bg_crn_tl.png) left top no-repeat; }
  .bgctr { float: left; width: 100%; background: url(../images/bg_crn_tr.png) right top no-repeat; }
  .bgcbl { float: left; width: 100%; background: url(../images/bg_crn_bl.png) left bottom no-repeat; }
  .bgcbr { float: left; width: 100%; background: url(../images/bg_crn_br.png) right bottom no-repeat; }
  .box_content { margin: 15px; background: #fff; }
}

/* Header */
$activeMenuBg-start: #438cd1;
$activeMenuBg-end: #4395d3;

.main_header { float: left; position: relative; z-index: 30; width: 100%; height: 60px; background: #394b60; @include box-shadow(rgba(0, 0, 0, 0.5) 0 0 1px 0);
  .inner { max-width: 1020px; margin: 0 auto;
   .logo { float: left; padding: 0 0 0 10px; }
    h1 { float: right; color: #54b8fe; font-size: 18px; font-weight: normal; padding: 0 10px 0 0; line-height: 36px;
      a { color: #54b8fe;
        &:visited, &:clicked, &:visited { text-decoration: underline; }
        &:hover { text-decoration: none; }
      }
    }
    .logo a { float: left; width: 222px; height: 30px; margin: 10px 0 0 0; padding: 5px; text-indent: -999px; overflow: hidden; background: $spriteBg left top no-repeat; }
    ul.main-menu { float: right; margin: 13px 17px 0 0; list-style: none;
      li { float: right; margin-left: 14px; position: relative !important; height:auto;
        a { float: left; height: 35px; width: 36px; }
        &.menushelf a { background: $spriteBg 0px -42px no-repeat; }
        &.inbox a { background: $spriteBg -348px -43px no-repeat; }
        &.analysis a { background: $spriteBg -103px -42px no-repeat; }
        &.xanalysis a { background: $spriteBg -317px 7px no-repeat; }
        &.settings a { background: $spriteBg -155px -42px no-repeat; }
        &.help a { background: $spriteBg -255px -42px no-repeat; }
        &.logout a { background: $spriteBg -297px -42px no-repeat; }
        &.active { @include border-radius(3px); background-color: #3390d6; @include background-image(linear-gradient(bottom,  #194c6c 0%,#3397d8 5%,#3397d8 98%,#115378 98%,#115378 100%)); position: relative; @include box-shadow(rgba(0, 0, 0, 0.5) 0 0 5px 0 inset); 
          &:hover { @include border-radius(3px); background-color: #3390d6; @include background-image(linear-gradient(bottom,  #194c6c 0%,#3397d8 5%,#3397d8 98%,#115378 98%,#115378 100%)); position: relative; @include box-shadow(rgba(0, 0, 0, 0.5) 0 0 5px 0 inset); }
        }
        &:hover { @include border-radius(3px); background-color: #3390d6; @include background-image(linear-gradient(top, #163341 0%,#2798db 2%,#2798db 98%,#52aee2 100%)); position: relative; @include box-shadow(rgba(29, 151, 221, 1) 0 0 5px 0); }
      }
    }
    .actions { float: right; margin: 13px 17px 0 0; 
      .bbtn_red { border:none; margin:4px 0 0 10px; }
    }
  }
}

// ie symfony toolbar fix
.lt-ie9 .sf-toolbar { display:none !important; } 
@import "mixins";

.box_content { padding:10px 0; position:relative; min-height:400px; 
  .mid_content { width:500px; margin:0 auto; }
  .central_content { width:90%; margin:0 auto; }
  .left_content { float:left; width:57%; padding:0; position:relative; margin:0 0 0 5%; }
  .right_content { float:left; width:35%; padding:20px 0 0 0; 
    .inner { background:#f5f9fc; padding: 10px; border:1px solid #c9e4ef; 
      h2 { display:block; float:none; padding:0 0 25px 0; }
      p { display:block; float:none; padding:0 0 10px 0; }
    }
  }
  .msg_content { float:left; width:500px; padding:0 0 40px 0; 
    .inner { background:#f5f9fc; padding: 10px; border:1px solid #c9e4ef; 
      h2 { display:block; float:none; padding:0 0 25px 0; }
      p { display:block; float:none; padding:0 0 10px 0; }
    }
  }
  .separator { float:left; width:100%; border-bottom:1px dotted #aaa; margin:15px 0 15px -25px; }
  h2 { float:left; width:100%; margin:0px; padding:10px 0 15px 0; font-size:22px; }
  h3 { float:left; width:100%; margin:0px; padding:0 0 10px 0; font-size:25px; }
  .login_error { float: left; width: 500px; top:30px; padding: 14px 0 30px 0; color:#b5382a; font-weight:bold; font-size: 17px; }
  .main_error { float: left; width: 100%; padding: 14px 0 30px 0; color:#b5382a; font-weight:bold; font-size: 17px; }
  .form_section { float:left; width:100%; padding:20px 0 0 0; 
    form { float:left; width:500px; padding-top: 5px;
      .element { float:left; clear:both; width:430px; padding:5px 0px; 
        label { float:left; font-size:15px; line-height:40px; width:150px; margin: 0; 
          &.error { float:right; width:275px; color:#b5382a; padding:10px 0 10px 0; line-height:15px; height:auto; }
        }
        input.text { width:255px; line-height:36px; height:36px; padding:0px 10px; @include border-radius(3px); border:1px solid #b2b2b2; @include box-shadow(rgba(200, 200, 200, 1) 0px 0px 8px 0px inset); position:relative; }
        input.narrow { width:25px; }
        input.postcode { width:100px; float:left; }
        input.pin { text-align: center; width: 25px; margin: 0 10px 0 0; }
        input.checkbox { margin:14px 0 0 0; }
        span.hint { float:left; padding:10px 0 5px 153px; font-size:14px; }
        span.lhint { padding-left:0px; }
        &.narrow { width:200px; clear:none; }
        &.pins { position:relative; padding:40px 0 0 0; }
        &.top-padding { padding:20px 0 0 0; }
        input[type=password] { letter-spacing: 4px; }
      }
      .terms { padding:20px 0 0 0; 
        input { float:left; margin:14px 20px  0 0; }
        label { float:left; width:auto; margin-left: 5px; }
      }
      .actions { float:left; clear:both; padding: 30px 0 40px 150px;
        &.lactions { padding-left:0px; }
        #signup { padding: 21px 17px; font-size: 21px; line-height: 0px; }
        input { padding: 21px 17px; font-size: 21px; line-height: 0px;text-decoration: none; color: #293142; }
      }
      #chrome_frame { display: none;
        input { float: left; }
        label { position: absolute; width: 700px; margin-left: 5px; }
      }
    }
  }
  .completed { line-height:25px; text-align:center; margin-top: 30px; }
  .top_element { float: left; width: 100%; padding: 0; border-bottom: 1px dotted #cfcdca; margin: 0 0 10px 0; }
  p { padding:0 0 10px 0; margin:0px; }
  a { color: #5a9cd6; text-decoration: none;
    &:hover { text-decoration:underline; }
  }
  .failed-verification .hide { display:none; padding:10px 0 0 0; }
  .validation-status { display: none; padding: 20px; position: absolute; right: 30px; margin-top: -2px; 
    &.success { display: block; background: url(../images/validation-feedback.png) 0 0 no-repeat; }
    &.fail { display: block; background: url(../images/validation-feedback.png) 0 -40px no-repeat; }
  }
  .vmethods { float:left; width:100%; padding:15px 0 0 0; margin:15px 0 0 0; border-top:1px dotted #cfcdca; 
    .simage { background-size: 326px; }
  }
  .simage { float: left; clear: none; width: 108px; height: 108px; padding: 0; margin: 0 15px 15px 0; background: url(../images/simage.png) 0 0 no-repeat; background-size: 244px; }
  .simage_01 { background-position: top left; }
  .simage_02 { background-position: top center; }
  .simage_03 { background-position: top right; }
  .simage_04 { background-position: center left; }
  .simage_05 { background-position: center center; }
  .simage_06 { background-position: center right; }
  .simage_07 { background-position: bottom left; }
  .simage_08 { background-position: bottom center; }
  .simage_09 { background-position: bottom right; }
  .si_wrap { float:left; width:390px; padding:10px 0 20px 0; 
    a { float:left; margin:10px 10px 3px 3px; 
      &:hover { margin:7px 7px 0 0; border:3px solid #5a9cd6; }
      &.selected { margin:7px 7px 0 0; border:3px solid #5a9cd6; }
    }
    .simage { margin:0px; }
    &.smwrap { width:280px; 
      a span { width:80px; height:80px; }
    }
  }
  .phrase { float: right; clear: none; width: 350px; height: 108px; padding: 0 10px; margin: 0px 0px 15px 0;
    table { width:100%;
      td { width: 100%; text-align: center; font-size: 15px; color: #414141; vertical-align: middle; height: 108px; }
    }
  }
  .pins {
    span.num1 { float:left; position:absolute; left: 160px; top:8px; }
    span.num2 { float:left; position:absolute; left: 225px; top:8px; }
  }
  .captcha { float:left; width:277px; 
    img { margin:0 0 5px 0; }
  }
}

.popup_terms { display:none; width:980px; background:#fff; background-color: #fff; @include border-radius(5px); 
  .header { float:left; width:100%; background:#f5f9fc; position:relative; @include border-radius(5px 5px 0 0); 
    h1 { font-size:14px; margin:0px; padding:15px 0 15px 30px;  }
    .bClose { float:left; cursor: pointer; position: absolute; right: -18px; top: -17px; 
      span { float:left; }
    }
  }
  .inner { float:left; width:920px; padding:30px; height:500px; overflow:auto; border-top:1px solid #c9e4ef; 
    h1 { font-size:20px; margin:0px; padding:0 0 20px 0; background:none; }
    h2 { font-size:19px; margin:0px; padding:0 0 20px 0; }
    h3 { font-size:18px; margin:0px; padding:0 0 20px 0; }
    h4 { font-size:17px; margin:0px; padding:0 0 20px 0; }
    h5 { font-size:16px; margin:0px; padding:0 0 20px 0; }
    h6 { font-size:15px; margin:0px; padding:0 0 20px 0; }
    p { margin:0; padding:0 0 20px 0; }
  }
}


.generic_form {
  div { float:left; width:400px; padding:5px 0px;
    label { float:left; font-size:15px; line-height:40px; width:120px; margin: 0; height:40px; overflow:hidden; 
      &.terms { float:right; width:230px; }
    }
    input.text { float:right; margin:0px; width:255px; line-height:36px; height:36px; padding:0px 10px; @include border-radius(3px); border:1px solid #b2b2b2; @include box-shadow(rgba(200, 200, 200, 1) 0px 0px 8px 0px inset); position:relative; }
    input.postcode { float:left; width:100px; margin:0 0 0 3px; }
    input.checkbox { margin:14px 27px 0 0; float:right; }
    label.error { float:right; width:275px; color:#b5382a; padding:10px 0 10px 0; line-height:15px; height:auto; }
    ul { float:right; width:275px;
      li { color:#b5382a; padding:10px 0 10px 0; }
    }
  }
  .actions { float:left; width:100%; padding: 30px 0 20px 0px;
    input { padding: 0 11px; font-size: 14px; line-height: 28px; text-decoration: none; color: #293142; }
  }
}


--------------------------------------

Kind Regards
Ajit

Alex Objelean

unread,
Oct 8, 2013, 8:26:28 AM10/8/13
to wr...@googlegroups.com
Hi Ajit,

could you create a quick start project to reproduce the issue? To simplify this task, just for this project from wro4j-examples repo: https://github.com/wro4j/wro4j-examples/tree/master/custom-processors

Btw, the ExtensionsConfigurableWroManagerFactory is deprecated. Use ro.isdc.wro.manager.factory.ConfigurableWroManagerFactory instead.

Cheers,
Alex


--
You received this message because you are subscribed to the Google Groups "wro4j" group.
To unsubscribe from this group and stop receiving emails from it, send an email to wro4j+un...@googlegroups.com.
To post to this group, send email to wr...@googlegroups.com.
Visit this group at http://groups.google.com/group/wro4j.
For more options, visit https://groups.google.com/groups/opt_out.

Ajit Bawa

unread,
Oct 8, 2013, 8:51:19 AM10/8/13
to wr...@googlegroups.com
Hi Alex,

Thanks for the prompt response - I tried the change to ConfigureableWroManagerFactory with no change in output.

I have attached a .zip of my project from Eclipse - all the source and exact config is in the .zip.

Regards
Ajit
mas-frontend.zip

Alex Objelean

unread,
Oct 8, 2013, 9:16:54 AM10/8/13
to wr...@googlegroups.com
You have a listener defined in your xml:
<listener-class>ro.isdc.wro.http.WroServletContextListener</listener-class>

Do you need it? The problem is that this listener uses by default a different wroManagerFactory and as result the application doesn't work as you would expect.
The listener is useful, but you must know the reason for using it.

After you'll remove listener, you'll notice other problems with your current configuration. But I will assist you with those problems after you'll remove the listner.

Cheers,
Alex



Ajit Bawa

unread,
Oct 8, 2013, 10:02:39 AM10/8/13
to wr...@googlegroups.com
Hi Alex,

I removed the <listener-class>ro.isdc.wro.http.WroServletContextListener</listener-class> entry from the web.xml.
I have good reason to configure the listener - I followed the examples.

It now appears that no processing occurs.
I get the following errors:

 ERROR [ro.isdc.wro.model.group.processor.PreProcessorExecutor] (http-/127.0.0.1:8080-4)  Cannot ignore missing resource:  ro.isdc.wro.model.resource.Resource@7a58606b[CSS,/css/mixins,true]

ERROR [ro.isdc.wro.model.resource.processor.decorator.ExceptionHandlingProcessorDecorator] (http-/127.0.0.1:8080-4) Failed to process the resource: ro.isdc.wro.model.resource.Resource@65c69914[CSS,/css/global.scss,true] using processor: ro.isdc.wro.model.resource.processor.impl.css.CssImportPreProcessor@62bd8dc8. Reason: Exception while reading resource from /css/mixins

I gather the servlet filter is not picking requests for the .css ?
Please advise how to get the filter and processors working?

Kind regards
Ajit

Ajit Bawa

unread,
Oct 8, 2013, 10:45:07 AM10/8/13
to wr...@googlegroups.com
Hi Alex,

Apologies it is processing the .css files but there seems to be a problem with the @import statement:

16:07:13,028 ERROR [org.apache.catalina.core.ContainerBase.[jboss.web].[default-host].[/mas-frontend].[default]] (http-/127.0.0.1:8080-1)
JBWEB000236: Servlet.service() for servlet default threw exception: java.io.FileNotFoundException: JBWEB000088: The requested resource (/mas-frontend/css/mixins) is not available


I gather this is a syntax issue maybe?

Kind Regards
Ajit

Alex Objelean

unread,
Oct 8, 2013, 10:46:59 AM10/8/13
to wr...@googlegroups.com
The listener is useful when you need to access wro4j related data outside of WroFilter. Otherwise, you don't need it.

now the error says that the imported resource is invalid, since there is no such resource called mixin (with no extension). This is because the CssUrlRewriting processor cannot have any assumption about extension used by imported resource. There are two possible solutions:
1) update import statement and add extension to imported resource (ex: mixin.scss)
2) extend the CssUrlRewritingProcessor and implement the logic which appends the implicit "scss" extension to the imported source name. 
In one of the future release there will be implemented such a processor, but until there is one, you can easily create your own.

I suggest using option 1, since it is the easiest one to apply.

Cheers,
Alex

Ajit Bawa

unread,
Oct 8, 2013, 11:08:20 AM10/8/13
to wr...@googlegroups.com
Hi Alex,

I updated the @import statement to include the file extension but I now get the following error:

ERROR [stderr] (http-/127.0.0.1:8080-4) LoadError: no such file to load -- sass/plugin
ERROR [stderr] (http-/127.0.0.1:8080-4)   require at org/jruby/RubyKernel.java:1054
ERROR [stderr] (http-/127.0.0.1:8080-4)   require at classpath:/META-INF/jruby.home/lib/ruby/shared/rubygems/custom_require.rb:36
ERROR [stderr] (http-/127.0.0.1:8080-4)    (root) at <script>:2

ERROR [ro.isdc.wro.model.resource.processor.decorator.ExceptionHandlingProcessorDecorator] (http-/127.0.0.1:8080-4) Failed to process the
 resource: ro.isdc.wro.model.resource.Resource@13b311a[CSS,group1,true] using processor: ro.isdc.wro.extensions.processor.css.RubySassCssProcessor@58ad2815.
Reason: org.jruby.embed.EvalFailedException: (LoadError) no such file to load -- sass/plugin

What do I do now? This appears to be a 'ruby' dependency issue?

Kind regards
Ajit

Alex Objelean

unread,
Oct 8, 2013, 11:47:32 AM10/8/13
to wr...@googlegroups.com
Do you use maven to resolve dependencies? 
If not, than probably you don't have required dependency added.

Cheers,
Alex

Ajit Bawa

unread,
Oct 8, 2013, 11:53:02 AM10/8/13
to wr...@googlegroups.com

Hi Alex, I am using maven and the dependencies for the wro4j-extensions are there?

You received this message because you are subscribed to a topic in the Google Groups "wro4j" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/wro4j/7skBGANPQ6s/unsubscribe.
To unsubscribe from this group and all its topics, send an email to wro4j+un...@googlegroups.com.

Alex Objelean

unread,
Oct 8, 2013, 12:07:38 PM10/8/13
to wr...@googlegroups.com
I have created a project based on what you have provided in the attachment, and everything seems to work as expected. You can see the project here: https://github.com/wro4j/wro4j-examples/tree/master/sass-example
Are you sure all maven dependencies were added properly?

Alex

Ajit Bawa

unread,
Oct 8, 2013, 12:10:45 PM10/8/13
to wr...@googlegroups.com

I will double check - I think my local maven repo might have a problem. I will confirm again tomorrow if l managed to resolve the issue.
Regards
Ajit

Ajit Bawa

unread,
Oct 9, 2013, 9:32:52 AM10/9/13
to wr...@googlegroups.com
Hi Alex,

I am not winning. I have done the following:
1) Cleared out my maven repository of all org.jruby jars.
2) Cloned your sass example project and fixed all the compile errors in the .scss file and built and deployed the app. A /wro/group1.css does get created during the compilation.
  I still get the following error at runtime (had to remove your log4j.properties files for the error to display on the console):
    
15:13:37,344 INFO  [org.jboss.as.server] (HttpManagementService-threads - 7) JBAS018559: Deployed "sass-example-1.0-SNAPSHOT.war" (runtime-name : "sas
s-example-1.0-SNAPSHOT.war")
15:13:47,685 ERROR [stderr] (http-/127.0.0.1:8080-4) LoadError: no such file to load -- sass/plugin
15:13:47,686 ERROR [stderr] (http-/127.0.0.1:8080-4)   require at org/jruby/RubyKernel.java:1054
15:13:47,686 ERROR [stderr] (http-/127.0.0.1:8080-4)   require at classpath:/META-INF/jruby.home/lib/ruby/shared/rubygems/custom_require.rb:36
15:13:47,687 ERROR [stderr] (http-/127.0.0.1:8080-4)    (root) at <script>:2


I had to switch to using  wro4j.version: 1.7.1 though - I couldn't use the SNAPSHOT

Any other suggestions to fix this ?
I would love to use the wr04j library at runtime.

Regards
Ajit

Alex Objelean

unread,
Oct 9, 2013, 9:40:23 AM10/9/13
to wr...@googlegroups.com
Try downgrading the jruby version to 1.6.8. Add the following dependency in dependencyManagement section of your pom.xml:

<dependency>
    <groupId>org.jruby</groupId>
    <artifactId>jruby-core</artifactId>
    <version>1.6.8</version>
</dependency>

Apparently this issue was reproduced by others in another  (similar) project: https://github.com/Jasig/sass-maven-plugin/issues/14

Let me know if that works.

Cheers,
Alex


Alex Objelean

unread,
Oct 9, 2013, 9:42:13 AM10/9/13
to wr...@googlegroups.com
Also, you could try upgrading to a newer version 1.7.5 of jruby-core. I'm not sure this problem is fixed there, but at least you could try.

Thanks,
Alex

Ajit Bawa

unread,
Oct 9, 2013, 10:28:09 AM10/9/13
to wr...@googlegroups.com
Hi Alex,

After switching to jruby-core 1.6.8 and 1.7.5 I get a similar error :

16:22:32,509 ERROR [stderr] (http-/127.0.0.1:8080-3) LoadError: no such file to load -- rubygems
16:22:32,509 ERROR [stderr] (http-/127.0.0.1:8080-3)   require at org/jruby/RubyKernel.java:1082
16:22:32,509 ERROR [stderr] (http-/127.0.0.1:8080-3)    (root) at <script>:1
16:22:32,512 ERROR [ro.isdc.wro.model.resource.processor.decorator.ExceptionHandlingProcessorDecorator] (http-/127.0.0.1:8080-3)
Failed to process the resource: ro.isdc.wro.model.resource.Resource@5a1a844c[CSS,group1,true] using processor: ro.isdc.wro.extensions.processor.css.RubySassCssProcessor@66b891b4.
Reason: org.jruby.embed.EvalFailedException: (LoadError) no such file to load -- rubygems


I am not sure what to do next to fix this?
Thank you for all the effort.
I will have to include the compile time generated 'group1.css' in my app.

Kind Regards
Ajit

Alex Objelean

unread,
Oct 9, 2013, 10:31:58 AM10/9/13
to wr...@googlegroups.com
I think this has something to do with your local environment: http://stackoverflow.com/questions/2896485/no-such-file-to-load-rubygems-loaderror
If it doesn't help, try other solutions posted on stackoverflow.
Let me know when you find a fix for this issue.

Cheers,
Alex

Alex Objelean

unread,
Oct 9, 2013, 10:33:50 AM10/9/13
to wr...@googlegroups.com
One more suggestion:


Alex
Reply all
Reply to author
Forward
0 new messages