Fixes #6714 #10330 - wraps theme in themename{}, creates legacy-styles.css, updates themes to support this.

Change-Id: I185b67b2ee74dca2faf48ff2517f24280aff4375

.gitignore

@@ -12,15 +12,19 @@
 
 # /WebContent/VAADIN/themes/base/
 /WebContent/VAADIN/themes/base/styles.css
+/WebContent/VAADIN/themes/base/legacy-styles.css
 
 # /WebContent/VAADIN/themes/chameleon/
 /WebContent/VAADIN/themes/chameleon/styles.css
+/WebContent/VAADIN/themes/chameleon/legacy-styles.css
 
 # /WebContent/VAADIN/themes/liferay/
 /WebContent/VAADIN/themes/liferay/styles.css
+/WebContent/VAADIN/themes/liferay/legacy-styles.css
 
 # /WebContent/VAADIN/themes/reindeer/
 /WebContent/VAADIN/themes/reindeer/styles.css
+/WebContent/VAADIN/themes/reindeer/legacy-styles.css
 
 # /WebContent/VAADIN/themes/reindeer/button/img/
 /WebContent/VAADIN/themes/reindeer/button/img/*-sprites*.png
@@ -30,6 +34,7 @@
 
 # /WebContent/VAADIN/themes/runo/
 /WebContent/VAADIN/themes/runo/styles.css
+/WebContent/VAADIN/themes/runo/legacy-styles.css
 
 # /WebContent/VAADIN/themes/runo/common/img/
 /WebContent/VAADIN/themes/runo/common/img/ajax-loader-red.gif
@@ -62,4 +67,4 @@
 
 # build result folders
 */result
-result
+result

WebContent/VAADIN/themes/base/common/common.scss

@@ -8,18 +8,18 @@
 	margin: 0;
 	overflow: hidden;
 }
-.v-app {
+&.v-app {
 	height: 100%;
 }
 /* Force arrow cursor for all elements inside the app */
-.v-app,
+&.v-app,
 .v-window,
 .v-popupview-popup,
 .v-label,
 .v-caption {
 	cursor: default;
 }
-div.v-app-loading {
+body &.v-app-loading {
 	/* You can use this to provide indication for the user that the application is loading. */
 	/* It is applied to the same element as .v-app */
 	background-image: url(img/loading-indicator.gif);
@@ -65,7 +65,7 @@ div.v-app-loading {
 .v-ui:focus {
 	outline: none;
 }
-.v-app select,
+&.v-app select,
 .v-window select {
 	margin: 0;
 }
@@ -77,10 +77,10 @@ div.v-app-loading {
 .v-disabled * {
 	cursor: default;
 }
-* html .v-disabled {
+* html & .v-disabled {
 	zoom: 1;
 }
-*+html .v-disabled {
+*+html & .v-disabled {
 	zoom: 1;
 }
 .v-disabled .v-disabled {
@@ -217,16 +217,16 @@ div.v-app-loading {
 	font-size: xx-small;
 }
 /* Debug style */
-.v-app .invalidlayout,
-.v-app .invalidlayout * {
+&.v-app .invalidlayout,
+&.v-app .invalidlayout * {
 	background: #f99 !important;
 }
 /* Fix for Liferay, issue #2384 */
-.v-app input[type="text"],
-.v-app input[type="password"],
-.v-app input[type="reset"],
-.v-app select,
-.v-app textarea ,
+&.v-app input[type="text"],
+&.v-app input[type="password"],
+&.v-app input[type="reset"],
+&.v-app select,
+&.v-app textarea ,
 .v-window input[type="text"],
 .v-window input[type="password"],
 .v-window input[type="reset"],

WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.scss

@@ -40,7 +40,7 @@
 	background-color: transparent;
 	padding: 2px;
 }
-.v-app .#{$name}-over-top,
+&.v-app .#{$name}-over-top,
 .v-window .#{$name}-over-top,
 .v-popupview-popup .#{$name}-over-top {
 	border: none;
@@ -52,7 +52,7 @@
 	-webkit-border-radius: 0;
 	border-radius: 0;
 }
-.v-app .#{$name}-over-bottom,
+&.v-app .#{$name}-over-bottom,
 .v-window .#{$name}-over-bottom,
 .v-popupview-popup .#{$name}-over-bottom {
 	border: none;
@@ -64,7 +64,7 @@
 	-webkit-border-radius: 0;
 	border-radius: 0;
 }
-.v-app .#{$name}-over-left,
+&.v-app .#{$name}-over-left,
 .v-window .#{$name}-over-left,
 .v-popupview-popup .#{$name}-over-left {
 	border: none;
@@ -76,7 +76,7 @@
 	-webkit-border-radius: 0;
 	border-radius: 0;
 }
-.v-app .#{$name}-over-right,
+&.v-app .#{$name}-over-right,
 .v-window .#{$name}-over-right,
 .v-popupview-popup .#{$name}-over-right {
 	border: none;
@@ -90,16 +90,16 @@
 }
 .#{$name},
 .#{$name}-over,
-.v-app .#{$name}-over-top,
+&.v-app .#{$name}-over-top,
 .v-window .#{$name}-over-top,
 .v-popupview-popup .#{$name}-over-top,
-.v-app .#{$name}-over-bottom,
+&.v-app .#{$name}-over-bottom,
 .v-window .#{$name}-over-bottom,
 .v-popupview-popup .#{$name}-over-bottom,
-.v-app .#{$name}-over-left,
+&.v-app .#{$name}-over-left,
 .v-window .#{$name}-over-left,
 .v-popupview-popup .#{$name}-over-left,
-.v-app .#{$name}-over-right,
+&.v-app .#{$name}-over-right,
 .v-window .#{$name}-over-right,
 .v-popupview-popup .#{$name}-over-right {
 	border-color: rgba(0,109,232,.6);

WebContent/VAADIN/themes/base/legacy-styles.scss

@@ -0,0 +1,6 @@
+@import "base.scss";
+// For legacy themes; does not wrap styles in .themename
+// Creates legacy-styles.css that can be imported into non-sass themes.
+// NOTE: can not be used in scenarios where multiple themes are used on the
+// same page (e.g portals).
+@include base;

WebContent/VAADIN/themes/base/select/select.scss

@@ -63,7 +63,7 @@
 .v-filterselect .v-icon {
 	float: left;
 }
-.v-app .v-filterselect-input,
+&.v-app .v-filterselect-input,
 .v-window .v-filterselect-input,
 .v-popupview-popup .v-filterselect-input {
 	margin: 0;

WebContent/VAADIN/themes/base/styles.scss

@@ -1,2 +1,4 @@
 @import "base.scss";
-@include base;
+.base {
+	@include base;
+}

WebContent/VAADIN/themes/base/tree/tree.scss

@@ -99,43 +99,44 @@ div.#{$name}-node-leaf {
 }
 
 // tree-connectors.css
+// This could be (and was) wrapped in a nested block instead of prefixing each 
+// row, but #10309 prevents us from doing that right now.
 
-.#{$name}-connectors {
 	// Make item caption height an even number (so that the connector dots overlap nicely)
-	.#{$name}-node-caption {
+	.#{$name}-connectors .#{$name}-node-caption {
 		padding-top: 1px;
 	}
-	.#{$name}-node {
+	.#{$name}-connectors .#{$name}-node {
 		background: transparent url(img/connector-expand.png) no-repeat 2px -52px;
 	}
-	.#{$name}-node-expanded {
+	.#{$name}-connectors .#{$name}-node-expanded {
 		background: transparent url(img/connector-collapse.png) no-repeat 2px -52px;
 	}
-	.#{$name}-node-last {
+	.#{$name}-connectors .#{$name}-node-last {
 		background: transparent url(img/connector-expand-last.png) no-repeat 2px -52px;
 	}
-	.#{$name}-node-expanded.#{$name}-node-last {
+	.#{$name}-connectors .#{$name}-node-expanded.#{$name}-node-last {
 		background: transparent url(img/connector-collapse-last.png) no-repeat 2px -52px;
 	}
-	.#{$name}-node-leaf {
+	.#{$name}-connectors .#{$name}-node-leaf {
 		background: transparent url(img/connector-leaf.png) repeat-y 2px 50%;
 	}
-	.#{$name}-node-leaf-last {
+	.#{$name}-connectors .#{$name}-node-leaf-last {
 		background: transparent url(img/connector-leaf-last.png) repeat-y 2px 50%;
 	}
-	.#{$name}-node-children {
+	.#{$name}-connectors .#{$name}-node-children {
 		background: transparent url(img/connector.png) repeat-y 2px 0;
 	}
-	.#{$name}-node-children-last {
+	.#{$name}-connectors .#{$name}-node-children-last {
 		background: transparent;
 	}
-	.#{$name}-node-drag-top,
-	.#{$name}-node-expanded.#{$name}-node-drag-top {
+	.#{$name}-connectors .#{$name}-node-drag-top,
+	.#{$name}-connectors .#{$name}-node-expanded.#{$name}-node-drag-top {
 		background-position: 2px -53px;
 	}
-	.#{$name}-node-drag-top.#{$name}-node-leaf {
+	.#{$name}-connectors .#{$name}-node-drag-top.#{$name}-node-leaf {
 		background-position: 2px 50%;
 	}
-}
+
 
 }

WebContent/VAADIN/themes/chameleon/common/common.scss

@@ -10,7 +10,7 @@ $chameleon-line-height: 1.4;
 // rules on the application level, above theme selection
 @mixin chameleon-app {
 	// App background & tooltip
-	.v-app {
+	&.v-app {
 		background: transparent;
 		overflow: hidden;
 		}
@@ -48,14 +48,14 @@ $chameleon-line-height: 1.4;
 	// Then come all other overlay elements, that do not have other arbitrary 
 	// components inside them (from v-filterselect-suggestpopup onwards)
 	
-	.v-app,
+	&.v-app,
 	.v-window,
 	.v-popupview-popup,
 	.v-tooltip,
-	.v-app input,
-	.v-app select,
-	.v-app button,
-	.v-app textarea,
+	&.v-app input,
+	&.v-app select,
+	&.v-app button,
+	&.v-app textarea,
 	.v-window input,
 	.v-window select,
 	.v-window button,

WebContent/VAADIN/themes/chameleon/legacy-styles.scss

@@ -0,0 +1,6 @@
+@import "chameleon.scss";
+// For legacy themes; does not wrap styles in .themename
+// Creates legacy-styles.css that can be imported into non-sass themes.
+// NOTE: can not be used in scenarios where multiple themes are used on the
+// same page (e.g portals).
+@include chameleon;

WebContent/VAADIN/themes/chameleon/styles.scss

@@ -1,3 +1,4 @@
 @import "chameleon.scss";
-
-@include chameleon;
+.chameleon {
+	@include chameleon;
+}

WebContent/VAADIN/themes/liferay/common/common.scss

@@ -1,6 +1,6 @@
 @mixin liferay-common {
 
-div.v-app {
+body &.v-app {
 	background-color: transparent;
 }
 

WebContent/VAADIN/themes/liferay/legacy-styles.scss

@@ -0,0 +1,6 @@
+@import "liferay.scss";
+// For legacy themes; does not wrap styles in .themename
+// Creates legacy-styles.css that can be imported into non-sass themes.
+// NOTE: can not be used in scenarios where multiple themes are used on the
+// same page (e.g portals).
+@include liferay;

WebContent/VAADIN/themes/liferay/select/select.scss

@@ -1,6 +1,6 @@
 @mixin liferay-select {
 
-.v-app select,
+&.v-app select,
 .v-window select {
 	padding: 1px;	
 }

WebContent/VAADIN/themes/liferay/styles.scss

@@ -1,3 +1,4 @@
 @import "liferay.scss";
-
-@include liferay;
+.liferay {
+	@include liferay;
+}

WebContent/VAADIN/themes/liferay/textfield/textfield.scss

@@ -1,9 +1,9 @@
 @mixin liferay-textfield {
 
-.v-app input[type="text"],
-.v-app input[type="password"],
-.v-app input[type="reset"],
-.v-app textarea ,
+&.v-app input[type="text"],
+&.v-app input[type="password"],
+&.v-app input[type="reset"],
+&.v-app textarea ,
 .v-window input[type="text"],
 .v-window input[type="password"],
 .v-window input[type="reset"],

WebContent/VAADIN/themes/reindeer-tests/styles.css

@@ -1,4 +1,4 @@
-@import url(../reindeer/styles.css);
+@import url(../reindeer/legacy-styles.css);
 
 .table-equal-rowheight .v-table-row {height: 30px;}
 .table-equal-rowheight .v-table-row-odd {height: 30px;}

WebContent/VAADIN/themes/reindeer/common/common.scss

@@ -1,18 +1,18 @@
 @mixin reindeer-common {
 
 .v-generated-body,
-.v-app {
+&.v-app {
 	background: #f5f5f5;
 }
 /* Global font styles */
-.v-app,
+&.v-app,
 .v-window,
 .v-popupview-popup,
 .v-tooltip,
-.v-app input,
-.v-app select,
-.v-app button,
-.v-app textarea,
+&.v-app input,
+&.v-app select,
+&.v-app button,
+&.v-app textarea,
 .v-window input,
 .v-window select,
 .v-window button,
@@ -34,7 +34,7 @@
 	color: #222;
 }
 /* Fonts on black background */
-.v-app .black,
+&.v-app .black,
 .v-window-black,
 .v-window .black,
 .v-popupview-popup .black {
@@ -110,13 +110,13 @@
 }
 
 /* Fixes for Liferay 6.0 */
-.portlet .v-app {
+.portlet &.v-app {
 	background: transparent;
 }
-.portlet .v-app .v-radiobutton input,
+.portlet &.v-app .v-radiobutton input,
 .portlet .v-window .v-radiobutton input,
 .portlet .v-popupview-popup .v-radiobutton input,
-.portlet .v-app .v-checkbox input,
+.portlet &.v-app .v-checkbox input,
 .portlet .v-window .v-checkbox input,
 .portlet .v-popupview-popup .v-checkbox input {
 	margin-right: 3px;

WebContent/VAADIN/themes/reindeer/label/label.scss

@@ -41,9 +41,9 @@
 /**********************
  * Blue styles
  **********************/
-.v-app .white,
+&.v-app .white,
 .v-window .white,
-.v-app .blue,
+&.v-app .blue,
 .v-window .blue {
 	color: #222;
 	text-shadow: none;

WebContent/VAADIN/themes/reindeer/legacy-styles.scss

@@ -0,0 +1,6 @@
+@import "reindeer.scss";
+// For legacy themes; does not wrap styles in .themename
+// Creates legacy-styles.css that can be imported into non-sass themes.
+// NOTE: can not be used in scenarios where multiple themes are used on the
+// same page (e.g portals).
+@include reindeer;

WebContent/VAADIN/themes/reindeer/select/select.scss

@@ -7,7 +7,7 @@
 	padding-left: 2px;
 	padding-right: 25px; /* Space for the button */
 }
-.v-app .#{$name}-input,
+&.v-app .#{$name}-input,
 .v-window .#{$name}-input,
 .v-popupview-popup .#{$name}-input {
 	background: transparent repeat-x;
@@ -16,7 +16,7 @@
 	height: 24px;
 }
 /* More specific selector to override padding */
-.v-app input.#{$name}-input,
+&.v-app input.#{$name}-input,
 .v-window input.#{$name}-input,
 .v-popupview-popup input.#{$name}-input {
 	padding: 4px 0 4px 2px;
@@ -211,7 +211,7 @@
 .black .#{$name} {
 	background-image: url(img/black/left-black.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
 }
-.v-app .black .#{$name}-input,
+&.v-app .black .#{$name}-input,
 .v-window .black .#{$name}-input,
 .v-window-black .#{$name}-input,
 .v-popupview-popup .black .#{$name}-input {

WebContent/VAADIN/themes/reindeer/styles.scss

@@ -1,3 +1,5 @@
 @import "reindeer.scss";
 
-@include reindeer;	
+.reindeer {
+	@include reindeer;	
+}

WebContent/VAADIN/themes/reindeer/textfield/textfield.scss

@@ -31,20 +31,20 @@
 	height: auto;
 }
 /* Need more specific selector because of #2384 fixes in base/common/common.css */
-.v-app input.#{$name},
+&.v-app input.#{$name},
 .v-window input.#{$name},
-.v-app textarea.v-textarea,
+&.v-app textarea.v-textarea,
 .v-window textarea.v-textarea  {
 	padding: 3px 3px 4px;
 }
-.v-app input.#{$name}.v-widget,
+&.v-app input.#{$name}.v-widget,
 .v-window input.#{$name}.v-widget {
 	height: 24px;
 }
-.v-app .#{$name}-focus,
+&.v-app .#{$name}-focus,
 .v-window .#{$name}-focus,
 .v-popupview-popup .#{$name}-focus,
-.v-app .v-textarea-focus,
+&.v-app .v-textarea-focus,
 .v-window .v-textarea-focus,
 .v-popupview-popup .v-textarea-focus {
 	border-color: #5b97d0;
@@ -59,16 +59,16 @@ textarea.v-textarea-prompt {
 	color: #999;
 }
 /* Small style textfield */
-.v-app input.#{$name}-small {
+&.v-app input.#{$name}-small {
 	font-size: 11px;
 	line-height: normal;
 	height: auto;
 	padding: 2px;
 }
-.v-app textarea.v-textarea-small {
+&.v-app textarea.v-textarea-small {
 	font-size: 11px;
 }
-.v-app .v-table  input.#{$name}.v-widget,
+&.v-app .v-table  input.#{$name}.v-widget,
 .v-window .v-table input.#{$name}.v-widget {
 	padding: 1px 2px;
 	height: auto;
@@ -92,11 +92,11 @@ textarea.v-textarea-prompt {
 .black .v-textarea {
 	background-image: none;
 }
-.v-app .black .#{$name}-focus,
+&.v-app .black .#{$name}-focus,
 .v-window-black .#{$name}-focus,
 .v-window .black .#{$name}-focus,
 .v-popupview-popup .black .#{$name}-focus,
-.v-app .black .v-textarea-focus,
+&.v-app .black .v-textarea-focus,
 .v-window-black .v-textarea-focus,
 .v-window .black .v-textarea-focus,
 .v-popupview-popup .black .v-textarea-focus {

WebContent/VAADIN/themes/runo/common/common.scss

@@ -3,7 +3,7 @@
 .v-generated-body {
 	background: #e9eced;
 }
-.v-app {
+&.v-app {
 	background: #e9eced url(img/main-bg.png) repeat-x;
 	font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", geneva, helvetica, arial, tahoma, verdana, sans-serif;
 	color: #464f52;
@@ -11,14 +11,14 @@
 	line-height: 18px;
 }
 /* Global font styles */
-.v-app,
+&.v-app,
 .v-window,
 .v-popupview-popup,
 .v-tooltip,
-.v-app input,
-.v-app select,
-.v-app button,
-.v-app textarea,
+&.v-app input,
+&.v-app select,
+&.v-app button,
+&.v-app textarea,
 .v-window input,
 .v-window select,
 .v-window button,
@@ -37,7 +37,7 @@
 	color: #464f52;
 	font-size: 13px;
 }
-.v-app select,
+&.v-app select,
 .v-window select {
 	padding: 0;
 }

WebContent/VAADIN/themes/runo/legacy-styles.scss

@@ -0,0 +1,6 @@
+@import "runo.scss";
+// For legacy themes; does not wrap styles in .themename
+// Creates legacy-styles.css that can be imported into non-sass themes.
+// NOTE: can not be used in scenarios where multiple themes are used on the
+// same page (e.g portals).
+@include runo;

WebContent/VAADIN/themes/runo/select/select.scss

@@ -19,7 +19,7 @@
 	background: transparent url(img/bg-left-filter.png) no-repeat;
 	padding-left: 4px;
 }
-.v-app .v-filterselect .v-filterselect-input,
+&.v-app .v-filterselect .v-filterselect-input,
 .v-window .v-filterselect .v-filterselect-input,
 .v-popupview-popup .v-filterselect .v-filterselect-input {
 	background: transparent url(img/bg-center-filter.png) no-repeat 1px 0;

WebContent/VAADIN/themes/runo/styles.scss

@@ -1,2 +1,4 @@
 @import "runo.scss";
-@include runo;
+.runo {
+	@include runo;
+}

WebContent/VAADIN/themes/tests-book/styles.css

@@ -1,4 +1,4 @@
-@import url(../runo/styles.css);
+@import url(../runo/legacy-styles.css);
 
 /*****************************************************************************/
 /* Styling for tests.magi application.                                       */

WebContent/VAADIN/themes/tests-components/styles.css

@@ -1,4 +1,4 @@
-@import url(../reindeer/styles.css);
+@import url(../reindeer/legacy-styles.css);
 
 .missing {
 	color: red;

WebContent/VAADIN/themes/tests-tickets/styles.css

@@ -1,4 +1,4 @@
-@import url(../runo/styles.css);
+@import url(../runo/legacy-styles.css);
 
 /* DO NOT ADD GENERIC RULES LIKE .v-table IN THIS FILE */
 

client/src/com/vaadin/client/ui/ui/UIConnector.java

@@ -303,7 +303,7 @@ public class UIConnector extends AbstractSingleComponentContainerConnector
                 .getThemeName();
         // Remove chars that are not suitable for style names
         themeName = themeName.replaceAll("[^a-zA-Z0-9]", "");
-        root.addStyleName("v-theme-" + themeName);
+        root.addStyleName(themeName);
 
         root.add(getWidget());
 

server/src/com/vaadin/server/BootstrapHandler.java

@@ -314,7 +314,7 @@ public abstract class BootstrapHandler implements RequestHandler {
          *      .v-app-loading
          *      .v-app-<simpleName for app class>
          *- Additionally added from javascript:
-         *      .v-theme-<themeName, remove non-alphanum>
+         *      <themeName, remove non-alphanum>
          */
 
         List<Node> fragmentNodes = context.getBootstrapResponse()

theme-compiler/src/com/vaadin/buildhelpers/CompileTheme.java

@@ -45,17 +45,31 @@ public class CompileTheme {
         String themeFolder = params.getOptionValue("theme-folder");
         String themeVersion = params.getOptionValue("theme-version");
 
+        // Regular theme
         try {
-            processSassTheme(themeFolder, themeName, themeVersion);
-            System.out.println("Compiling theme " + themeName + " successful");
+            processSassTheme(themeFolder, themeName, "styles", themeVersion);
+            System.out.println("Compiling theme " + themeName
+                    + " styles successful");
         } catch (Exception e) {
-            System.err.println("Compiling theme " + themeName + " failed");
+            System.err.println("Compiling theme " + themeName
+                    + " styles failed");
+            e.printStackTrace();
+        }
+        // Legacy theme w/o .themename{} wrapping
+        try {
+            processSassTheme(themeFolder, themeName, "legacy-styles",
+                    themeVersion);
+            System.out.println("Compiling theme " + themeName
+                    + " legacy-styles successful");
+        } catch (Exception e) {
+            System.err.println("Compiling theme " + themeName
+                    + " legacy-styles failed");
             e.printStackTrace();
         }
     }
 
     private static void processSassTheme(String themeFolder, String themeName,
-            String version) throws Exception {
+            String variant, String version) throws Exception {
 
         StringBuffer cssHeader = new StringBuffer();
 
@@ -66,10 +80,12 @@ public class CompileTheme {
 
         String stylesCssDir = themeFolder + File.separator + themeName
                 + File.separator;
-        String stylesCssName = stylesCssDir + "styles.css";
+
+        String stylesCssName = stylesCssDir + variant + ".css";
 
         // Process as SASS file
-        String sassFile = stylesCssDir + "styles.scss";
+        String sassFile = stylesCssDir + variant + ".scss";
+
         ScssStylesheet scss = ScssStylesheet.get(sassFile);
         if (scss == null) {
             throw new IllegalArgumentException("SASS file: " + sassFile
@@ -87,7 +103,7 @@ public class CompileTheme {
 
         createSprites(themeFolder, themeName);
         File oldCss = new File(stylesCssName);
-        File newCss = new File(stylesCssDir + "styles-sprite.css");
+        File newCss = new File(stylesCssDir + variant + "-sprite.css");
 
         if (newCss.exists()) {
             // Theme contained sprites. Renamed "styles-sprite.css" ->
@@ -100,6 +116,7 @@ public class CompileTheme {
                         + " failed");
             }
         }
+
     }
 
     private static void createSprites(String themeFolder, String themeName)