You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Jon Williams <wi...@gmail.com> on 2013/11/04 20:44:54 UTC
Question about .less to .css transformation T5CONDUIT library for
Tapestry 5.3.7
Hi Tapsters.
Sorry for posting to the Tap users list, but there's hardly any
documentation available for this. t5conduit SNAPSHOT 0.8 seems to be
misbehaving a bit for me.
I have a general question regarding t5conduit-0.8SNAPSHOT.
Kindly ignore this message if you're not interested in .less to .css
transforms in Tapestry 5.3.7.
I have t5conduit hooked up in my app as per the scant documentation at
github...
https://github.com/cezary-biernacki/t5conduit
In my component I have...
@Import(stylesheet="context:css/treeMods.less")
private void afterRender() {}
My understanding is that t5conduit should take a stylesheet import in .less
format and then end up generating a static .css file for use in rendering
the resource for use in your Tapestry-generated page.
*Why??* is tapestry generating a style sheet with a .less file extension?
in this case the resource string "treeMods.less" gets rendered in my page
header. That's the file that tapestry serves up...
<link type="text/css" rel="stylesheet" href="
/assets/0.5-SNAPSHOT-DEV/ctx/css/treeMods.less<http://localhost:8886/assets/0.5-SNAPSHOT-DEV/ctx/css/treeMods.less>
"/>
When I examine the contents of treeMods.less it is the generated general
css that I desire except for 1 thing.
it has improper line breaks. the file has a bunch of /n escape chars
littering it....
DIV.t-tree-container {\n background: transparent;\n padding: 0;\n
margin: 0;\n}\nDIV.t-tree-container UL {\n list-style-type: none;\n
background-image:
url("/assets/0.5-SNAPSHOT-DEV/ctx/img/tree-vpipe.png");\n
background-repeat: no-repeat;\n margin: 0 0 0 12px;\n padding:
0;\n}\nDIV.t-tree-container UL UL {\n /* Line up the nested list's
vertical bar under the element's folder icon. */
\n /*background: rgba(0,0,0,0.5);*/
\n margin: 0 0 0 24px;\n}\nDIV.t-tree-container LI {\n margin: 0;\n
padding: 0 0 0 16px;\n background: transparent;\n /*background:
rgba(255,255,255,0.1);*/
\n background-image:
url("/assets/0.5-SNAPSHOT-DEV/ctx/img/tree-vpipe.png");\n
background-repeat: repeat-y;\n line-height:
1.5;\n}\nDIV.t-tree-container LI.t-last {\n background:
transparent;\n background-image:
url("/assets/0.5-SNAPSHOT-DEV/ctx/img/tree-branchend.png");\n
background-repeat: no-repeat;\n}\n/* Assume its a collapsed, but
expandable, tree node. Later CSS rules overwrite this. */
SPAN.t-tree-icon {\n display: inline-block;\n width: 32px;\n
height: 16px;\n cursor: pointer;\n background-image:
url("/assets/0.5-SNAPSHOT-DEV/ctx/img/tree-sprites.png");\n
background-position: 0px 0px;\n}\nSPAN.t-tree-icon.t-leaf-node {\n
cursor: default;\n background-position: -32px
-16px;\n}\nSPAN.t-tree-label.t-selectable {\n cursor:
pointer;\n}\nSPAN.t-tree-label.t-selected-leaf-node-label {\n
font-weight: bold;\n}\nSPAN.t-tree-icon.t-empty-node {\n cursor:
default;\n background-position: -32px 0px
!important;\n}\nSPAN.t-tree-expanded {\n background-position: 0px
-16px;\n}\nSPAN.t-ajax-wait {\n width: 16px;\n height: 16px;\n
display: inline-block;\n background-image:
url("/assets/0.5-SNAPSHOT-DEV/ctx/img/ajax-loader.gif");\n}\nSPAN.t-tree-icon.t-expand
{\n width: 16px;\n height: 16px;\n background: transparent;\n
background-image:
url("/assets/0.5-SNAPSHOT-DEV/ctx/img/expand.png");\n display:
inline-block;\n cursor: pointer;\n}\nSPAN.t-tree-icon.t-collapse {\n
width: 16px;\n height: 16px;\n background: transparent;\n
background-image:
url("/assets/0.5-SNAPSHOT-DEV/ctx/img/collapse.png");\n display:
inline-block;\n cursor: pointer;\n}\n.selected {\n color: black;\n
font-size: 1.1em;\n font-weight: bold;\n font-style: oblique;\n
text-decoration: underline;\n}\n
You can see my context's for the images are being rendered correctly
by less. but it's adding this nasty formatting with \n escapes all
over the place.
Can someone with experience with t5conduit .less transformation to
.css explain what's going on here?
thanks
Jon
Re: Question about .less to .css transformation T5CONDUIT library for
Tapestry 5.3.7
Posted by Jon Williams <wi...@gmail.com>.
Hi Cezary,
I backed up to the 0.7 version of t5conduit and was still seeing the \n
char all over my transformed css.
This breaks the css functionality in the browser as my (polluted with \n
chars) less to css transform output is invalid css that the browser was
unable to render.
I had to find a way to get rid of the \n chars, so i ended adding a line of
code to the less to css transform class's transform method...
String result = this.compile(b.toString(), resource, dependencies);
*new* result = result.replaceAll("\\\\n", "");
return new ByteArrayInputStream(result.getBytes("UTF-8"));
That fixed the problem and t5conduit less to css transforms are now working
properly for all my test cases.
FYI I'm running oracle's jdk1.7.0_45 on osx 10.9 using jetty
version 8.1.11.v20130520 as my dev. container.
I'm good now. Thanks for your help.
Jon
On Mon, Nov 4, 2013 at 7:31 PM, Cezary Biernacki <ce...@gmail.com>wrote:
> Hi Jon,
> regarding file extension, it is expected behaviour. T5conduit library uses
> Tapestry's resource transformers mechanism normally intended for things
> like JavaScript minification. It just installs a transformer that
> translates .less files using original Less compiler. Please note that no
> new file is created, translation happens on the first access and it is
> cached in memory (file changes are monitor so retranslation is performed
> when necessary).
>
> Regarding \n characters, I have no clue why they appear. Are you sure that
> they are really in the generated content as backslash and "n" character,
> not just an artefact of the tool you use to see it? If it actually the
> case, please send more information about your environment (e.g. OS, servlet
> container).
>
> BTW, does your browser seems to apply generated stylesheets?
>
> Best regards,
> Cezary
> On 4 Nov 2013 19:45, "Jon Williams" <wi...@gmail.com> wrote:
>
> > Hi Tapsters.
> >
> > Sorry for posting to the Tap users list, but there's hardly any
> > documentation available for this. t5conduit SNAPSHOT 0.8 seems to be
> > misbehaving a bit for me.
> >
> > I have a general question regarding t5conduit-0.8SNAPSHOT.
> > Kindly ignore this message if you're not interested in .less to .css
> > transforms in Tapestry 5.3.7.
> >
> > I have t5conduit hooked up in my app as per the scant documentation at
> > github...
> > https://github.com/cezary-biernacki/t5conduit
> >
> > In my component I have...
> > @Import(stylesheet="context:css/treeMods.less")
> > private void afterRender() {}
> >
> >
> > My understanding is that t5conduit should take a stylesheet import in
> .less
> > format and then end up generating a static .css file for use in rendering
> > the resource for use in your Tapestry-generated page.
> >
> > *Why??* is tapestry generating a style sheet with a .less file extension?
> > in this case the resource string "treeMods.less" gets rendered in my page
> > header. That's the file that tapestry serves up...
> >
> > <link type="text/css" rel="stylesheet" href="
> > /assets/0.5-SNAPSHOT-DEV/ctx/css/treeMods.less<
> > http://localhost:8886/assets/0.5-SNAPSHOT-DEV/ctx/css/treeMods.less>
> > "/>
> >
> >
> >
> > When I examine the contents of treeMods.less it is the generated general
> > css that I desire except for 1 thing.
> > it has improper line breaks. the file has a bunch of /n escape chars
> > littering it....
> >
> > DIV.t-tree-container {\n background: transparent;\n padding: 0;\n
> > margin: 0;\n}\nDIV.t-tree-container UL {\n list-style-type: none;\n
> > background-image:
> > url("/assets/0.5-SNAPSHOT-DEV/ctx/img/tree-vpipe.png");\n
> > background-repeat: no-repeat;\n margin: 0 0 0 12px;\n padding:
> > 0;\n}\nDIV.t-tree-container UL UL {\n /* Line up the nested list's
> > vertical bar under the element's folder icon. */
> > \n /*background: rgba(0,0,0,0.5);*/
> > \n margin: 0 0 0 24px;\n}\nDIV.t-tree-container LI {\n margin: 0;\n
> > padding: 0 0 0 16px;\n background: transparent;\n /*background:
> > rgba(255,255,255,0.1);*/
> > \n background-image:
> > url("/assets/0.5-SNAPSHOT-DEV/ctx/img/tree-vpipe.png");\n
> > background-repeat: repeat-y;\n line-height:
> > 1.5;\n}\nDIV.t-tree-container LI.t-last {\n background:
> > transparent;\n background-image:
> > url("/assets/0.5-SNAPSHOT-DEV/ctx/img/tree-branchend.png");\n
> > background-repeat: no-repeat;\n}\n/* Assume its a collapsed, but
> > expandable, tree node. Later CSS rules overwrite this. */
> > SPAN.t-tree-icon {\n display: inline-block;\n width: 32px;\n
> > height: 16px;\n cursor: pointer;\n background-image:
> > url("/assets/0.5-SNAPSHOT-DEV/ctx/img/tree-sprites.png");\n
> > background-position: 0px 0px;\n}\nSPAN.t-tree-icon.t-leaf-node {\n
> > cursor: default;\n background-position: -32px
> > -16px;\n}\nSPAN.t-tree-label.t-selectable {\n cursor:
> > pointer;\n}\nSPAN.t-tree-label.t-selected-leaf-node-label {\n
> > font-weight: bold;\n}\nSPAN.t-tree-icon.t-empty-node {\n cursor:
> > default;\n background-position: -32px 0px
> > !important;\n}\nSPAN.t-tree-expanded {\n background-position: 0px
> > -16px;\n}\nSPAN.t-ajax-wait {\n width: 16px;\n height: 16px;\n
> > display: inline-block;\n background-image:
> >
> >
> url("/assets/0.5-SNAPSHOT-DEV/ctx/img/ajax-loader.gif");\n}\nSPAN.t-tree-icon.t-expand
> > {\n width: 16px;\n height: 16px;\n background: transparent;\n
> > background-image:
> > url("/assets/0.5-SNAPSHOT-DEV/ctx/img/expand.png");\n display:
> > inline-block;\n cursor: pointer;\n}\nSPAN.t-tree-icon.t-collapse {\n
> > width: 16px;\n height: 16px;\n background: transparent;\n
> > background-image:
> > url("/assets/0.5-SNAPSHOT-DEV/ctx/img/collapse.png");\n display:
> > inline-block;\n cursor: pointer;\n}\n.selected {\n color: black;\n
> > font-size: 1.1em;\n font-weight: bold;\n font-style: oblique;\n
> > text-decoration: underline;\n}\n
> >
> >
> > You can see my context's for the images are being rendered correctly
> > by less. but it's adding this nasty formatting with \n escapes all
> > over the place.
> >
> > Can someone with experience with t5conduit .less transformation to
> > .css explain what's going on here?
> >
> >
> > thanks
> >
> > Jon
> >
>
Re: Question about .less to .css transformation T5CONDUIT library for
Tapestry 5.3.7
Posted by Cezary Biernacki <ce...@gmail.com>.
Hi Jon,
regarding file extension, it is expected behaviour. T5conduit library uses
Tapestry's resource transformers mechanism normally intended for things
like JavaScript minification. It just installs a transformer that
translates .less files using original Less compiler. Please note that no
new file is created, translation happens on the first access and it is
cached in memory (file changes are monitor so retranslation is performed
when necessary).
Regarding \n characters, I have no clue why they appear. Are you sure that
they are really in the generated content as backslash and "n" character,
not just an artefact of the tool you use to see it? If it actually the
case, please send more information about your environment (e.g. OS, servlet
container).
BTW, does your browser seems to apply generated stylesheets?
Best regards,
Cezary
On 4 Nov 2013 19:45, "Jon Williams" <wi...@gmail.com> wrote:
> Hi Tapsters.
>
> Sorry for posting to the Tap users list, but there's hardly any
> documentation available for this. t5conduit SNAPSHOT 0.8 seems to be
> misbehaving a bit for me.
>
> I have a general question regarding t5conduit-0.8SNAPSHOT.
> Kindly ignore this message if you're not interested in .less to .css
> transforms in Tapestry 5.3.7.
>
> I have t5conduit hooked up in my app as per the scant documentation at
> github...
> https://github.com/cezary-biernacki/t5conduit
>
> In my component I have...
> @Import(stylesheet="context:css/treeMods.less")
> private void afterRender() {}
>
>
> My understanding is that t5conduit should take a stylesheet import in .less
> format and then end up generating a static .css file for use in rendering
> the resource for use in your Tapestry-generated page.
>
> *Why??* is tapestry generating a style sheet with a .less file extension?
> in this case the resource string "treeMods.less" gets rendered in my page
> header. That's the file that tapestry serves up...
>
> <link type="text/css" rel="stylesheet" href="
> /assets/0.5-SNAPSHOT-DEV/ctx/css/treeMods.less<
> http://localhost:8886/assets/0.5-SNAPSHOT-DEV/ctx/css/treeMods.less>
> "/>
>
>
>
> When I examine the contents of treeMods.less it is the generated general
> css that I desire except for 1 thing.
> it has improper line breaks. the file has a bunch of /n escape chars
> littering it....
>
> DIV.t-tree-container {\n background: transparent;\n padding: 0;\n
> margin: 0;\n}\nDIV.t-tree-container UL {\n list-style-type: none;\n
> background-image:
> url("/assets/0.5-SNAPSHOT-DEV/ctx/img/tree-vpipe.png");\n
> background-repeat: no-repeat;\n margin: 0 0 0 12px;\n padding:
> 0;\n}\nDIV.t-tree-container UL UL {\n /* Line up the nested list's
> vertical bar under the element's folder icon. */
> \n /*background: rgba(0,0,0,0.5);*/
> \n margin: 0 0 0 24px;\n}\nDIV.t-tree-container LI {\n margin: 0;\n
> padding: 0 0 0 16px;\n background: transparent;\n /*background:
> rgba(255,255,255,0.1);*/
> \n background-image:
> url("/assets/0.5-SNAPSHOT-DEV/ctx/img/tree-vpipe.png");\n
> background-repeat: repeat-y;\n line-height:
> 1.5;\n}\nDIV.t-tree-container LI.t-last {\n background:
> transparent;\n background-image:
> url("/assets/0.5-SNAPSHOT-DEV/ctx/img/tree-branchend.png");\n
> background-repeat: no-repeat;\n}\n/* Assume its a collapsed, but
> expandable, tree node. Later CSS rules overwrite this. */
> SPAN.t-tree-icon {\n display: inline-block;\n width: 32px;\n
> height: 16px;\n cursor: pointer;\n background-image:
> url("/assets/0.5-SNAPSHOT-DEV/ctx/img/tree-sprites.png");\n
> background-position: 0px 0px;\n}\nSPAN.t-tree-icon.t-leaf-node {\n
> cursor: default;\n background-position: -32px
> -16px;\n}\nSPAN.t-tree-label.t-selectable {\n cursor:
> pointer;\n}\nSPAN.t-tree-label.t-selected-leaf-node-label {\n
> font-weight: bold;\n}\nSPAN.t-tree-icon.t-empty-node {\n cursor:
> default;\n background-position: -32px 0px
> !important;\n}\nSPAN.t-tree-expanded {\n background-position: 0px
> -16px;\n}\nSPAN.t-ajax-wait {\n width: 16px;\n height: 16px;\n
> display: inline-block;\n background-image:
>
> url("/assets/0.5-SNAPSHOT-DEV/ctx/img/ajax-loader.gif");\n}\nSPAN.t-tree-icon.t-expand
> {\n width: 16px;\n height: 16px;\n background: transparent;\n
> background-image:
> url("/assets/0.5-SNAPSHOT-DEV/ctx/img/expand.png");\n display:
> inline-block;\n cursor: pointer;\n}\nSPAN.t-tree-icon.t-collapse {\n
> width: 16px;\n height: 16px;\n background: transparent;\n
> background-image:
> url("/assets/0.5-SNAPSHOT-DEV/ctx/img/collapse.png");\n display:
> inline-block;\n cursor: pointer;\n}\n.selected {\n color: black;\n
> font-size: 1.1em;\n font-weight: bold;\n font-style: oblique;\n
> text-decoration: underline;\n}\n
>
>
> You can see my context's for the images are being rendered correctly
> by less. but it's adding this nasty formatting with \n escapes all
> over the place.
>
> Can someone with experience with t5conduit .less transformation to
> .css explain what's going on here?
>
>
> thanks
>
> Jon
>
Re: Question about .less to .css transformation T5CONDUIT library for
Tapestry 5.3.7
Posted by Jon Williams <wi...@gmail.com>.
Just checked and I see the same problem running with t5conduit *0.7* also.
On Mon, Nov 4, 2013 at 1:44 PM, Jon Williams <wi...@gmail.com>wrote:
> Hi Tapsters.
>
> Sorry for posting to the Tap users list, but there's hardly any
> documentation available for this. t5conduit SNAPSHOT 0.8 seems to be
> misbehaving a bit for me.
>
> I have a general question regarding t5conduit-0.8SNAPSHOT.
> Kindly ignore this message if you're not interested in .less to .css
> transforms in Tapestry 5.3.7.
>
> I have t5conduit hooked up in my app as per the scant documentation at
> github...
> https://github.com/cezary-biernacki/t5conduit
>
> In my component I have...
> @Import(stylesheet="context:css/treeMods.less")
> private void afterRender() {}
>
>
> My understanding is that t5conduit should take a stylesheet import in
> .less format and then end up generating a static .css file for use in
> rendering the resource for use in your Tapestry-generated page.
>
> *Why??* is tapestry generating a style sheet with a .less file extension?
> in this case the resource string "treeMods.less" gets rendered in my page
> header. That's the file that tapestry serves up...
>
> <link type="text/css" rel="stylesheet" href="
> /assets/0.5-SNAPSHOT-DEV/ctx/css/treeMods.less<http://localhost:8886/assets/0.5-SNAPSHOT-DEV/ctx/css/treeMods.less>
> "/>
>
>
>
> When I examine the contents of treeMods.less it is the generated general
> css that I desire except for 1 thing.
> it has improper line breaks. the file has a bunch of /n escape chars
> littering it....
>
> DIV.t-tree-container {\n background: transparent;\n padding: 0;\n margin: 0;\n}\nDIV.t-tree-container UL {\n list-style-type: none;\n background-image: url("/assets/0.5-SNAPSHOT-DEV/ctx/img/tree-vpipe.png");\n background-repeat: no-repeat;\n margin: 0 0 0 12px;\n padding: 0;\n}\nDIV.t-tree-container UL UL {\n /* Line up the nested list's vertical bar under the element's folder icon. */
> \n /*background: rgba(0,0,0,0.5);*/
> \n margin: 0 0 0 24px;\n}\nDIV.t-tree-container LI {\n margin: 0;\n padding: 0 0 0 16px;\n background: transparent;\n /*background: rgba(255,255,255,0.1);*/
> \n background-image: url("/assets/0.5-SNAPSHOT-DEV/ctx/img/tree-vpipe.png");\n background-repeat: repeat-y;\n line-height: 1.5;\n}\nDIV.t-tree-container LI.t-last {\n background: transparent;\n background-image: url("/assets/0.5-SNAPSHOT-DEV/ctx/img/tree-branchend.png");\n background-repeat: no-repeat;\n}\n/* Assume its a collapsed, but expandable, tree node. Later CSS rules overwrite this. */
> SPAN.t-tree-icon {\n display: inline-block;\n width: 32px;\n height: 16px;\n cursor: pointer;\n background-image: url("/assets/0.5-SNAPSHOT-DEV/ctx/img/tree-sprites.png");\n background-position: 0px 0px;\n}\nSPAN.t-tree-icon.t-leaf-node {\n cursor: default;\n background-position: -32px -16px;\n}\nSPAN.t-tree-label.t-selectable {\n cursor: pointer;\n}\nSPAN.t-tree-label.t-selected-leaf-node-label {\n font-weight: bold;\n}\nSPAN.t-tree-icon.t-empty-node {\n cursor: default;\n background-position: -32px 0px !important;\n}\nSPAN.t-tree-expanded {\n background-position: 0px -16px;\n}\nSPAN.t-ajax-wait {\n width: 16px;\n height: 16px;\n display: inline-block;\n background-image: url("/assets/0.5-SNAPSHOT-DEV/ctx/img/ajax-loader.gif");\n}\nSPAN.t-tree-icon.t-expand {\n width: 16px;\n height: 16px;\n background: transparent;\n background-image: url("/assets/0.5-SNAPSHOT-DEV/ctx/img/expand.png");\n display: inline-block;\n cursor: pointer;\n}\nSPAN.t-tree-icon.t-collapse {\n width: 16px;\n height: 16px;\n background: transparent;\n background-image: url("/assets/0.5-SNAPSHOT-DEV/ctx/img/collapse.png");\n display: inline-block;\n cursor: pointer;\n}\n.selected {\n color: black;\n font-size: 1.1em;\n font-weight: bold;\n font-style: oblique;\n text-decoration: underline;\n}\n
>
>
> You can see my context's for the images are being rendered correctly by less. but it's adding this nasty formatting with \n escapes all over the place.
>
> Can someone with experience with t5conduit .less transformation to .css explain what's going on here?
>
>
> thanks
>
> Jon
>
>
>
>
>
>
>
>
>