wro4j and bourbon.io

26 views
Skip to first unread message

damien.g...@gmail.com

unread,
Nov 18, 2015, 4:15:20 PM11/18/15
to wro4j
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

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"
        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

unread,
Nov 19, 2015, 4:12:25 AM11/19/15
to wro4j, damien.g...@gmail.com
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

unread,
Nov 19, 2015, 5:39:52 AM11/19/15
to wro4j, 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

unread,
Nov 19, 2015, 12:08:10 PM11/19/15
to wro4j, damien.g...@gmail.com
Hi Alex

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

Thank you
Damien
Reply all
Reply to author
Forward
0 new messages