Css3 and gwt in perfect harmony Conference by Julien Dramaix, at GWT Create 2015. Julien Dramaix is LEAD SOFTWARE ENGINEER, BEE-R COOL-ER at Arcbees. You can follow Julien on Twitter @jDramaix

1. CSS3 and GWT
in perfect harmony
GWT.create 2015
JULIEN DRAMAIX

2. Julien Dramaix
Software Engineer
at Arcbees
+JulienDramaix
@jDramaix

3. What is this about?

4. New syntax for
CssResource based on GSS
What is this about ?

5. Why?

6. DRY principle
is missing with CSS.
Why ?

7. Missing
CSS3 support.
Why ?

8. What is Closure-
stylesheets?

9. What is Closure-stylesheets?
It’s an extension
to CSS

10. What is Closure-stylesheets?
Write gss
and compile
to CSS
It’s an extension
to CSS

11. Support variables,
conditionals, mixing...
What is Closure-stylesheets?

12. Support minification,
linting, RTL flipping,
renaming
What is Closure-stylesheets?

13. Full CSS3
support!
What is Closure-stylesheets?

14. Open Source project
written and maintained
by Google!
What is Closure-stylesheets?

15. Example:
@def BG_COLOR rgb(235, 239, 249);
@defmixin size(WIDTH, HEIGHT) {
width: WIDTH;
height: HEIGHT;
}
body {
background-color: BG_COLOR;
}
.logo {
@mixin size(150px, 55px);
background-image: url('http://www.google.com/images/logo_sm.gif');
}

16. Compile to:
body {
background-color: #ebeff9;
}
.logo {
width: 150px;
height: 55px;
background-image: url('http://www.google.
com/images/logo_sm.gif');
}

17. How to use it?

18. 1. Create
a GSS file.
How to use it ?

19. myFirstGss.gss:
@def BG_COLOR rgb(235, 239, 249);
@defmixin size(WIDTH, HEIGHT) {
width: WIDTH;
height: HEIGHT;
}
body {
background-color: BG_COLOR;
}
.logo {
@mixin size(150px, 55px);
background-image: url('http://www.google.com/images/logo_sm.gif');
}

20. 2. Create your CssResource
interface as usual.
How to use it ?

21. public interface MyFirstGss extends CssResource {
String foo();
}
public interface Resources extends ClientBundle {
MyFirstGss myFirstGss();
}

22. public interface MyFirstGss extends CssResource {
String foo();
}
public interface Resources extends ClientBundle {
@Source("myFirstGss.gss")
MyFirstGss css();
}

23. 3. Enable GSS
in your GWT module file.
How to use it ?

24. <set-configuration-property name="CssResource.enableGss" value="true"
/>

25. 4. For UiBinder,
use the attribute GSS
in your inline style.
How to use it ?

26. <ui:style gss="true">
/* Constants*/
@def PADDING_RIGHT 50px;
@def PADDING_LEFT 50px;
/*mixin */
@defmixin size(WIDTH, HEIGHT) {
width: WIDTH;
height: HEIGHT;
}
/* … */
</ui:style>

27. GSS will be the default
syntax in GWT 2.8.
How to use it ?

28. Features and syntax.

29. Constants.
Features and syntax

30. @def BG_COLOR rgb(235, 239, 249);
@def PADDING_RIGHT 15px;
@def CONTAINER_COLOR BG_COLOR;

31. @def BG_COLOR rgb(235, 239, 249);
@def PADDING_RIGHT 15px;
@def CONTAINER_COLOR BG_COLOR;
Constant name
in UPPERCASE !

32. Runtime evaluation.
Features and syntax

33. @def BLUE eval("com.foo.bar.client.resource.Colors.BLUE");
.red {
color: eval("com.foo.bar.client.resource.Colors.RED");
}

34. @def BLUE eval("com.foo.bar.client.resource.Colors.BLUE");
.red {
color: eval("com.foo.bar.client.resource.Colors.RED");
}
Any valid Java expression

35. Functions.
Features and syntax

36. .content {
position: absolute;
margin-left: add(LEFT_PADDING, /* padding left */
LEFT_HAND_NAV_WIDTH,
RIGHT_PADDING); /* padding right */
}

37. ➔ add()
➔ sub()
➔ mult()
➔ divide()
➔ min()
➔ max()
FUNCTIONS
Built-in
arithmetic
functions

38. ➔ blendColorsHsb(startColor, endColor)
➔ blendColorsRgb(startColor, endColor)
➔ makeMutedColor(backgroundColor,
foregroundColor [, saturationLoss])
➔ addHsbToCssColor(baseColor, hueToAdd,
saturationToAdd, brightnessToAdd)
➔ makeContrastingColor(color,
similarityIndex)
➔ adjustBrightness(color, brightness)
FUNCTIONS
Built-in color
manipulation
function

39. FUNCTIONS
You can define
your own
function...

40. FUNCTIONS
… or not.

41. FUNCTIONS
… or not.
Should be available in GWT 2.8
Stay tuned!

42. Mixins.
Features and syntax

43. @defmixin size(WIDTH, HEIGHT) {
width: WIDTH;
height: HEIGHT;
}
.container {
@mixin size(550px, 500px);
}

44. Compile to:
.container {
width: 550px;
height: 500px;
}

45. @defmixin borderradius(TOP_RIGHT, BOTTOM_RIGHT, BOTTOM_LEFT, TOP_LEFT) {
-webkit-border-top-right-radius: TOP_RIGHT;
-webkit-border-bottom-right-radius: BOTTOM_RIGHT;
-webkit-border-bottom-left-radius: BOTTOM_LEFT;
-webkit-border-top-left-radius: TOP_LEFT;
-moz-border-radius-topright: TOP_RIGHT;
-moz-border-radius-bottomright: BOTTOM_RIGHT;
-moz-border-radius-bottomleft: BOTTOM_LEFT;
-moz-border-radius-topleft: TOP_LEFT;
border-top-right-radius: TOP_RIGHT;
border-bottom-right-radius: BOTTOM_RIGHT;
border-bottom-left-radius: BOTTOM_LEFT;
border-top-left-radius: TOP_LEFT;
}
.foo {
@mixin borderradius(5px, 0, 5px, 0)
}

46. http://dev.arcbees.com/gsss/mixins/

47. Css animations done with GSSS:
visit http://www.arcbees.com

48. Conditional CSS.
Features and syntax

49. CONDITIONAL CSS
Compile time conditional
versus
Runtime conditional.

50. CONDITIONAL CSS
Conditional
evaluated at
compile time.

51. CONDITIONAL CSS
Conditional
evaluated at
compile time.
Based on permutations
or properties you define
in your module file.

52. @if (is("ie8") || is("ie9") && !is("locale", "en")) {
.foo{ /* … */ }
}
@elseif (is("safari")) {
.foo{ /* … */ }
}
@elseif is("customProperty", "customValue") {
.foo{ /* … */ }
}
@else {
.foo{ /* … */ }
}

53. CONDITIONAL CSS
Special case: single boolean
value configuration property
defined in uppercase.

54. <define-configuration-property name="USE_EXTERNAL" is-multi-valued="false"/>
<set-configuration-property name="USE_EXTERNAL" value="false" />

55. @if (USE_EXTERNAL) {
@external '*';
}

56. CONDITIONAL CSS
Conditional evaluated
at runtime.

57. @if (eval("com.foo.Bar.FOO")) {
/* ... */
}
@elseif (eval('com.foo.Bar.foo("foo")')) {
/* ... */
}

58. @if (eval("com.foo.Bar.FOO")) {
/* ... */
}
@elseif (eval('com.foo.Bar.foo("foo")')) {
/* ... */
}
Any valid Java expression
returning a boolean.

59. CONDITIONAL CSS
Differences between
runtime and compile-time
conditionals.

60. This is valid
@if (is("ie8") || is("ie9")) {
@def PADDING 15px;
}
@else {
@def PADDING 0;
}

61. This is not
@if (eval("com.foo.Bar.useLargePadding()")) {
@def PADDING 15px;
}
@else {
@def PADDING 0;
}

62. This is valid
@if (USE_EXTERNAL) {
@external '*';
}

63. This is not
@if (eval("com.foo.Bar.useExternal()")) {
@external '*';'
}

64. CONDITIONAL CSS
Runtime conditionals
can only contain
CSS rules.

65. Resources Url
Features and syntax

66. public interface Resources extends ClientBundle {
ImageResource iconPrintWhite();
ImageResource logout();
DataResource iconsEot();
// ...
}

67. @def ICONS_EOT resourceUrl("iconsEot");
@def ICON_PRINT_WHITE resourceUrl("iconPrintWhite");
@font-face {
font-family: 'icons';
src: ICONS_EOT;
/* ... */
}
.print {
background-image: ICON_PRINT_WHITE;
}
.logout {
background-image: resourceUrl("logout");
}

68. /*@altenate*/
Features and syntax

69. .logo {
width: 150px;
height: 55px;
border-color: #DCDCDC;
border-color: rgba(0, 0, 0, 0.1);
}

70. .logo {
width: 150px;
height: 55px;
border-color: #DCDCDC;
border-color: rgba(0, 0, 0, 0.1);
}

71. .logo {
width: 150px;
height: 55px;
border-color: #DCDCDC;
/* @alternate */ border-color: rgba(0, 0, 0, 0.1);
}

72. Disable
RTL Flipping.
Features and syntax

73. RTL:
.logo {
margin-right: 10px;
border-left: 2px solid #ccc;
padding: 0 4px 0 2px;
}

74. LTR:
.logo {
margin-left: 10px;
border-right: 2px solid #ccc;
padding: 0 2px 0 4px;
}

75. .logo {
/* @noflip */ margin-right: 10px;
border-left: 2px solid #ccc;
padding: 0 4px 0 2px;
}

76. Sprite
support.
Features and syntax

77. .logout {
gwt-sprite: "iconLogin";
display: block;
cursor: pointer;
}

78. External
classes
Features and syntax

79. @external myLegacyClass 'gwt-*'

80. ➔ Don’t use ‘.’ in front of your classes
➔ Use quotes if you use the star suffix
@external myLegacyClass 'gwt-*'

81. How to migrate

82. The converter:
Css2Gss.java
How to migrate

83. Usage :
java com.google.gwt.resources.converter.Css2Gss [Options] [file or directory]
Options:
➔ -r > Recursively convert all css files on the given
directory(leaves .css files in place)
➔ -condition list_of_condition > Specify a comma-separated
list of variables that are used in conditionals and that will be mapped
to configuration properties. The converter will not use the is() function
when it will convert these conditions
➔ -scope list_of_files > Specify a comma-separated list of css files
to be used in this conversion to determine all defined variables

84. THE CONVERTER
Single file
conversion.

85. $ CONVERTER_CLASS_PATH="/path/to/gwt-user.jar:/path/to/gwt-
dev.jar"
$ java -cp $CONVERTER_CLASS_PATH com.google.gwt.resources.
converter.Css2Gss /path/to/cssFileToconvert.css

86. THE CONVERTER
Batch
conversion.

87. $ CONVERTER_CLASS_PATH="/path/to/gwt-user.jar:/path/to/gwt-dev.
jar"
$ java -cp $CONVERTER_CLASS_PATH
com.google.gwt.resources.converter.Css2Gss -r /path/to/project

88. THE CONVERTER
Converter Web
Application:
http://css2gss.appspot.com

89. Support of legacy?
How to migrate

90. <set-configuration-property name="CssResource.conversionMode"
value="strict"/>

91. SUPPORT OF LEGACY
Two conversion modes:
strict
or lenient

92. SUPPORT OF LEGACY
Two conversion
mode: strict or lenient
=> Use strict only

93. Migration path.
How to migrate

94. MIGRATION PATH
➔ Enable GSS and the auto-conversion
in strict mode.
➔ Fix issues.
➔ Use the converter
and convert all your css files
➔ Set back auto-conversion to off.

95. Configuration

96. CssResource.obfuscationPrefix
CONFIGURATION

97. <define-configuration-property name="CssResource.obfuscationPrefix"
is-multi-valued="false" />
<set-configuration-property name="CssResource.obfuscationPrefix"
value="default" />

98. CssResource.obfuscationPrefix
Disable the obfuscation prefix
if your page contains
only one GWT application.

99. <set-configuration-property name="CssResource.
obfuscationPrefix" value="empty" />

100. CssResource.allowedAtRules
CONFIGURATION

101. <!-- A multi-valued configuration property that defines the list of allowed non standard -->
<!-- at-rules in the css files -->
<define-configuration-property name="CssResource.allowedAtRules"
is-multi-valued="true" />

102. <!-- A multi-valued configuration property that defines the list of allowed non standard -->
<!-- at-rules in the css files →
<define-configuration-property name="CssResource.allowedAtRules" is-multi-valued="true" />
<extend-configuration-property name="CssResource.allowedAtRules"
value="-moz-document" />
<extend-configuration-property name="CssResource.allowedAtRules"
value="supports" />

103. CssResource.allowedFunctions
CONFIGURATION

104. <!-- A multi-valued configuration property that defines the list of allowed non standard -->
<!-- functions in the css files →
<define-configuration-property name="CssResource.allowedFunctions"
is-multi-valued="true" />

105. <extend-configuration-property name="CssResource.allowedFunctions"
value="-webkit-sin" />
<extend-configuration-property name="CssResource.allowedFunctions"
value="-webkit-cos" />

106. Roadmap

107. GWT 2.7: GSS flagged as
experimental and disabled
by default
ROADMAP

108. GWT 2.8: Enable
by default.
Old syntax deprecated.
ROADMAP

109. GWT 3.0: Remove the
support for the old syntax
and the auto converter.
ROADMAP

110. Don't wait!
It's time to migrate
to GSS!!
ROADMAP

111. Most of the Google GWT
application have migrated
to GSS with success!
ROADMAP

112. THANK YOU

113. THANK YOU
please rate this presentation at
gwtcreate.com/agenda

114. Julien Dramaix
Software Engineer
at Arcbees
+JulienDramaix
@jDramaix

115. QUESTIONS ?