Using CssResource @def inside some css property with parenthesis not working

177 views
Skip to first unread message

Shaun Tarves

unread,
Mar 8, 2012, 10:43:52 AM3/8/12
to google-we...@googlegroups.com
Hi -

I'm having trouble using a defined constant inside of a css property that has its own parenthetical reference. What I mean is:

@def HEADER_ROW_BACKGROUND_COLOR #b2bbc9;

This works:

background: HEADER_ROW_BACKGROUND_COLOR;

This does not work.
background-image
: linear-gradient(top, HEADER_ROW_BACKGROUND_COLOR literal(" 0%"), HEADER_ROW_BACKGROUND_COLOR literal(" 97%"), #7a808a literal(" 100%"));

The property shows up in web inspector totally fine, EXCEPT that the 2 references to the constant are never translated. They just appear as is, strings in all caps. (see attachment)

Is this a known bug of some kind?

Screen Shot 2012-03-08 at 10.42.49 AM.png

Thomas Broyer

unread,
Mar 8, 2012, 12:25:07 PM3/8/12
to google-we...@googlegroups.com
This is because the gradient "functions" are not valid CSS2, and GWT uses a CSS2 parser for CssResources.

Shaun Tarves

unread,
Mar 8, 2012, 12:27:18 PM3/8/12
to google-we...@googlegroups.com
But using them without the constant definitions works fine. If I put in explicit colors everywhere, my gradients show up.

- Shaun
--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/hd3CACzUzPsJ.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

Joseph Lust

unread,
Mar 13, 2012, 9:21:08 PM3/13/12
to google-we...@googlegroups.com
Shaun,

I had issues with these @def's last fall. Here is what I learned:

1) Make sure the @def's are placed at the very top of the CSS file, anywhere else and they'll be trouble (this face is not documented).
2) Use the @literal() tag to wrap non-CSS2 props. i.e. background-image: @literal( linear-gradient(top, HEADER_ROW_BACKGROUND_COLOR literal(" 0%"), HEADER_ROW_BACKGROUND_COLOR literal(" 97%"), #7a808a literal(" 100%")) );

The GWT team does not want to write a pure Java CSS3 parser, so you need to do this until they do, or someone else writes one for them to implement.

Sincerely,
Joseph
Reply all
Reply to author
Forward
0 new messages