wro4j and bourbon.io

[damien.g...@gmail.com]

Hi 

I want to use the latest version of bourbon.io in my project (v4.2.6)

I want to use wro4j to compile the scss files into a single css file. We are using version 1.7.9 of wro4j

I looked at the following example but I am none the wiser

http://wro4j.readthedocs.org/en/stable/BourbonCssProcessor/?highlight=bourbon#example-wroxml-resource-group-to-load-merge-bourbon-scss-reources

My wro.properties is as follows

debug=true
disableCache=false
jmxEnabled=true
encoding=UTF-8


preProcessors=cssImport, bourbonCss

My wro.xml file is as follows

<?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="bourbon">

<css>/styles/bourbon/settings/_prefixer.scss</css>

<css>/styles/bourbon/settings/_px-to-em.scss</css>

<css>/styles/bourbon/settings/_asset-pipeline.scss</css>

<css>/styles/bourbon/helpers/_convert-units.scss</css>

<css>/styles/bourbon/helpers/_gradient-positions-parser.scss</css>

<css>/styles/bourbon/helpers/_is-num.scss</css>

<css>/styles/bourbon/helpers/_linear-angle-parser.scss</css>

<css>/styles/bourbon/helpers/_linear-gradient-parser.scss</css>

<css>/styles/bourbon/helpers/_linear-positions-parser.scss</css>

<css>/styles/bourbon/helpers/_linear-side-corner-parser.scss</css>

<css>/styles/bourbon/helpers/_radial-arg-parser.scss</css>

<css>/styles/bourbon/helpers/_radial-positions-parser.scss</css>

<css>/styles/bourbon/helpers/_radial-gradient-parser.scss</css>

<css>/styles/bourbon/helpers/_render-gradients.scss</css>

<css>/styles/bourbon/helpers/_shape-size-stripper.scss</css>

<css>/styles/bourbon/helpers/_str-to-num.scss</css>

<css>/styles/bourbon/functions/_assign.scss</css>

<css>/styles/bourbon/functions/_color-lightness.scss</css>

<css>/styles/bourbon/functions/_flex-grid.scss</css>

<css>/styles/bourbon/functions/_golden-ratio.scss</css>

<css>/styles/bourbon/functions/_grid-width.scss</css>

<css>/styles/bourbon/functions/_modular-scale.scss</css>

<css>/styles/bourbon/functions/_px-to-em.scss</css>

<css>/styles/bourbon/functions/_px-to-rem.scss</css>

<css>/styles/bourbon/functions/_strip-units.scss</css>

<css>/styles/bourbon/functions/_tint-shade.scss</css>

<css>/styles/bourbon/functions/_transition-property-name.scss</css>

<css>/styles/bourbon/functions/_unpack.scss</css>

<css>/styles/bourbon/css3/_animation.scss</css>

<css>/styles/bourbon/css3/_appearance.scss</css>

<css>/styles/bourbon/css3/_backface-visibility.scss</css>

<css>/styles/bourbon/css3/_background.scss</css>

<css>/styles/bourbon/css3/_background-image.scss</css>

<css>/styles/bourbon/css3/_border-image.scss</css>

<css>/styles/bourbon/css3/_border-radius.scss</css>

<css>/styles/bourbon/css3/_box-sizing.scss</css>

<css>/styles/bourbon/css3/_calc.scss</css>

<css>/styles/bourbon/css3/_columns.scss</css>

<css>/styles/bourbon/css3/_filter.scss</css>

<css>/styles/bourbon/css3/_flex-box.scss</css>

<css>/styles/bourbon/css3/_font-face.scss</css>

<css>/styles/bourbon/css3/_font-feature-settings.scss</css>

<css>/styles/bourbon/css3/_hyphens.scss</css>

<css>/styles/bourbon/css3/_hidpi-media-query.scss</css>

<css>/styles/bourbon/css3/_image-rendering.scss</css>

<css>/styles/bourbon/css3/_keyframes.scss</css>

<css>/styles/bourbon/css3/_linear-gradient.scss</css>

<css>/styles/bourbon/css3/_perspective.scss</css>

<css>/styles/bourbon/css3/_radial-gradient.scss</css>

<css>/styles/bourbon/css3/_transform.scss</css>

<css>/styles/bourbon/css3/_transition.scss</css>

<css>/styles/bourbon/css3/_user-select.scss</css>

<css>/styles/bourbon/css3/_placeholder.scss</css>

<css>/styles/bourbon/addons/_button.scss</css>

<css>/styles/bourbon/addons/_clearfix.scss</css>

<css>/styles/bourbon/addons/_directional-values.scss</css>

<css>/styles/bourbon/addons/_ellipsis.scss</css>

<css>/styles/bourbon/addons/_font-family.scss</css>

<css>/styles/bourbon/addons/_hide-text.scss</css>

<css>/styles/bourbon/addons/_html5-input-types.scss</css>

<css>/styles/bourbon/addons/_position.scss</css>

<css>/styles/bourbon/addons/_prefixer.scss</css>

<css>/styles/bourbon/addons/_retina-image.scss</css>

<css>/styles/bourbon/addons/_size.scss</css>

<css>/styles/bourbon/addons/_timing-functions.scss</css>

<css>/styles/bourbon/addons/_triangle.scss</css>

<css>/styles/bourbon/addons/_word-wrap.scss</css>

<css>/styles/bourbon/_bourbon-deprecated-upcoming.scss</css>                    

</group>

</groups> 

When I run wro4j as part of my maven build I get errors like the following

Sass::SyntaxError: Invalid CSS after "/": expected identifier, was "// Helper for l..."

              expected at uri:classloader:/gems/sass-3.2.1/lib/sass/scss/parser.rb:1129

              expected at uri:classloader:/gems/sass-3.2.1/lib/sass/scss/parser.rb:1066

                 expr! at uri:classloader:/gems/sass-3.2.1/lib/sass/scss/parser.rb:1048

  reference_combinator at uri:classloader:/gems/sass-3.2.1/lib/sass/scss/parser.rb:643

            combinator at uri:classloader:/gems/sass-3.2.1/lib/sass/scss/parser.rb:637

             _selector at uri:classloader:/gems/sass-3.2.1/lib/sass/scss/parser.rb:623

              selector at uri:classloader:/gems/sass-3.2.1/lib/sass/scss/parser.rb:602

     selector_sequence at uri:classloader:/gems/sass-3.2.1/lib/sass/scss/parser.rb:586

and the following if I try and remove the above errors from my .scss files

Sass::SyntaxError: Invalid CSS after "      webkit-image": expected ")", was ": -webkit- + $p..."

            expected at uri:classloader:/gems/sass-3.2.1/lib/sass/scss/parser.rb:1129

           expected! at uri:classloader:/gems/sass-3.2.1/lib/sass/script/lexer.rb:199

          assert_tok at uri:classloader:/gems/sass-3.2.1/lib/sass/script/parser.rb:476

               paren at uri:classloader:/gems/sass-3.2.1/lib/sass/script/parser.rb:426

         special_fun at uri:classloader:/gems/sass-3.2.1/lib/sass/script/parser.rb:411

Obviously going through scss files and updating them is not ideal as if I want to change the version of bourbon going forward - ill have the same tasks

I guess I have a few questions

1. Has anyone used wro4j with the current version of bourbon - or are they compatible
2. Have I set up the correct pre/postProcessors 
3. Is my xml correct?
4. Is wro4j the correct tool to use here?

The same setup I have works 100% with the bootstrap scss files

Any help on this is greatly appreciated

Thank you

Damien

[Alex Objelean]

Hi Damien,

could you try updating sass gem dependency version as described here. 

Let me know if that helps.

Cheers,

Alex

[damien.g...@gmail.com]

Hi Alex

Thanks for that.

Will it be ok to just exclude the current sass-gems dependency from the wro4j extensions and import the new sass-gems lib?

I am using Maven

Thanks

Damien

[damien.g...@gmail.com]

Hi Alex

I tried this but unfortunately with no joy - it did not work for me

Thank you

Damien