feat(webpack): mark the CSS type for stylable views explicitly (#5257)

We want webpack's uglification to mangle function and class names
but that's what the current implementation of the CSS in {N} relys on
to get the CSS type for each view when targeted by CSS type selectors.

The implementation is changed a little so now the CSS type can be set
directly on the prototype of each View class or for TS, through decorator.

BREAKING CHANGES:


Extending classes requires marking the derived class with @CSSType
The root classes are not marked with CSSType and classes derived from ViewBase and View
will continue to work as expected. More concrete view classes (Button, Label, etc.) are
marked with @CSSType now and store their cssType on the prototype suppressing the previous
implementation that looked up the class function name. So clien classes that derive from one of
our @CSSType decorated classes will now have to be marked with @CSSType.

tns-core-modules/ui/action-bar/action-bar-common.ts

@@ -2,19 +2,20 @@
     ActionBar as ActionBarDefinition,
     ActionItems as ActionItemsDefinition,
     ActionItem as ActionItemDefinition,
-    NavigationButton, IOSActionItemSettings, AndroidActionItemSettings, AndroidActionBarSettings
+    NavigationButton, IOSActionItemSettings, AndroidActionItemSettings, AndroidActionBarSettings,
 } from ".";
 
 import { profile } from "../../profiling";
 
 export * from "../core/view";
 
-import { View, ViewBase, Property, unsetValue, booleanConverter, horizontalAlignmentProperty, verticalAlignmentProperty } from "../core/view";
+import { View, ViewBase, Property, unsetValue, booleanConverter, horizontalAlignmentProperty, verticalAlignmentProperty, CSSType } from "../core/view";
 
 export module knownCollections {
     export var actionItems = "actionItems";
 }
 
+@CSSType("ActionBar")
 export class ActionBarBase extends View implements ActionBarDefinition {
     private _actionItems: ActionItems;
     private _navigationButton: NavigationButton;

tns-core-modules/ui/activity-indicator/activity-indicator-common.ts

@@ -1,8 +1,9 @@
 import { ActivityIndicator as ActivityIndicatorDefinition } from ".";
-import { View, Property, booleanConverter } from "../core/view";
+import { View, Property, booleanConverter, CSSType } from "../core/view";
 
 export * from "../core/view";
 
+@CSSType("ActivityIndicator")
 export class ActivityIndicatorBase extends View implements ActivityIndicatorDefinition {
     public busy: boolean;
 }

tns-core-modules/ui/border/border.ts

@@ -1,7 +1,8 @@
 import { Border as BorderDefinition } from ".";
-import { ContentView, View, layout } from "../content-view";
+import { ContentView, View, layout, CSSType } from "../content-view";
 
 @Deprecated
+@CSSType("Border")
 export class Border extends ContentView implements BorderDefinition {
     get cornerRadius(): number {
         if (typeof this.borderRadius === "number") {

tns-core-modules/ui/button/button-common.ts

@@ -1,8 +1,9 @@
 import { Button as ButtonDefinition } from ".";
-import { TextBase, booleanConverter } from "../text-base";
+import { TextBase, booleanConverter, CSSType } from "../text-base";
 
 export * from "../text-base";
 
+@CSSType("Button")
 export abstract class ButtonBase extends TextBase implements ButtonDefinition {
     public static tapEvent = "tap";
 

tns-core-modules/ui/core/view/view-common.ts

@@ -33,6 +33,12 @@ function ensureAnimationModule() {
     }
 }
 
+export function CSSType(type: string): ClassDecorator {
+    return (cls) => {
+        cls.prototype.cssType = type;
+    };
+}
+
 export function PseudoClassHandler(...pseudoClasses: string[]): MethodDecorator {
     const stateEventNames = pseudoClasses.map(s => ":" + s);
     const listeners = Symbol("listeners");
@@ -580,6 +586,9 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
         }
         return this._cssType;
     }
+    set cssType(type: string) {
+        this._cssType = type.toLowerCase();
+    }
 
     get isLayoutRequired(): boolean {
         return true;

tns-core-modules/ui/core/view/view.d.ts

@@ -13,6 +13,22 @@ export * from "../../styling/style-properties";
 
 export function PseudoClassHandler(...pseudoClasses: string[]): MethodDecorator;
 
+/**
+ * Specifies the type name for the instances of this View class,
+ * that is used when matching CSS type selectors.
+ * 
+ * Usage:
+ * ```
+ * @CSSType("Button")
+ * class Button extends View {
+ * }
+ * ```
+ * 
+ * Internally the decorator set `Button.prototype.cssType = "Button"`.
+ * @param type The type name, e. g. "Button", "Label", etc.
+ */
+export function CSSType(type: string): ClassDecorator;
+
 /**
  * Denotes a length number that is in device independent pixel units.
  */
@@ -339,8 +355,8 @@ export abstract class View extends ViewBase {
     /**
      * This is called to find out how big a view should be. The parent supplies constraint information in the width and height parameters.
      * The actual measurement work of a view is performed in onMeasure(int, int), called by this method. Therefore, only onMeasure(int, int) can and must be overridden by subclasses.
-     * @param widthMeasureSpec	Horizontal space requirements as imposed by the parent
-     * @param heightMeasureSpec	Vertical space requirements as imposed by the parent
+     * @param widthMeasureSpec    Horizontal space requirements as imposed by the parent
+     * @param heightMeasureSpec    Vertical space requirements as imposed by the parent
      */
     public measure(widthMeasureSpec: number, heightMeasureSpec: number): void;
 
@@ -370,8 +386,8 @@ export abstract class View extends ViewBase {
     /**
      * Measure the view and its content to determine the measured width and the measured height. This method is invoked by measure(int, int) and should be overriden by subclasses to provide accurate and efficient measurement of their contents.
      * When overriding this method, you must call setMeasuredDimension(int, int) to store the measured width and height of this view. Failure to do so will trigger an exception, thrown by measure(int, int).
-     * @param widthMeasureSpec	horizontal space requirements as imposed by the parent. The requirements are encoded with View.MeasureSpec.
-     * @param heightMeasureSpec	vertical space requirements as imposed by the parent. The requirements are encoded with View.MeasureSpec.
+     * @param widthMeasureSpec    horizontal space requirements as imposed by the parent. The requirements are encoded with View.MeasureSpec.
+     * @param heightMeasureSpec    vertical space requirements as imposed by the parent. The requirements are encoded with View.MeasureSpec.
      */
     public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void;
 
@@ -380,14 +396,14 @@ export abstract class View extends ViewBase {
      * @param left      Left position, relative to parent
      * @param top       Top position, relative to parent
      * @param right     Right position, relative to parent
-     * @param bottom	Bottom position, relative to parent
+     * @param bottom    Bottom position, relative to parent
      */
     public onLayout(left: number, top: number, right: number, bottom: number): void;
 
     /**
      * This method must be called by onMeasure(int, int) to store the measured width and measured height. Failing to do so will trigger an exception at measurement time.
-     * @param measuredWidth	    The measured width of this view. May be a complex bit mask as defined by MEASURED_SIZE_MASK and MEASURED_STATE_TOO_SMALL.
-     * @param measuredHeight	The measured height of this view. May be a complex bit mask as defined by MEASURED_SIZE_MASK and MEASURED_STATE_TOO_SMALL.
+     * @param measuredWidth        The measured width of this view. May be a complex bit mask as defined by MEASURED_SIZE_MASK and MEASURED_STATE_TOO_SMALL.
+     * @param measuredHeight    The measured height of this view. May be a complex bit mask as defined by MEASURED_SIZE_MASK and MEASURED_STATE_TOO_SMALL.
      */
     public setMeasuredDimension(measuredWidth: number, measuredHeight: number): void;
 
@@ -397,7 +413,7 @@ export abstract class View extends ViewBase {
      * @param left      Left position, relative to parent
      * @param top       Top position, relative to parent
      * @param right     Right position, relative to parent
-     * @param bottom	Bottom position, relative to parent
+     * @param bottom    Bottom position, relative to parent
      */
     public layoutNativeView(left: number, top: number, right: number, bottom: number): void;
 
@@ -405,8 +421,8 @@ export abstract class View extends ViewBase {
      * Measure a child by taking into account its margins and a given measureSpecs.
      * @param parent            This parameter is not used. You can pass null.
      * @param child             The view to be measured.
-     * @param measuredWidth	    The measured width that the parent layout specifies for this view.
-     * @param measuredHeight	The measured height that the parent layout specifies for this view.
+     * @param measuredWidth        The measured width that the parent layout specifies for this view.
+     * @param measuredHeight    The measured height that the parent layout specifies for this view.
      */
     public static measureChild(parent: View, child: View, widthMeasureSpec: number, heightMeasureSpec: number): { measuredWidth: number; measuredHeight: number };
 
@@ -416,7 +432,7 @@ export abstract class View extends ViewBase {
      * @param left      Left position, relative to parent
      * @param top       Top position, relative to parent
      * @param right     Right position, relative to parent
-     * @param bottom	Bottom position, relative to parent
+     * @param bottom    Bottom position, relative to parent
      */
     public static layoutChild(parent: View, child: View, left: number, top: number, right: number, bottom: number): void;
 
@@ -787,4 +803,4 @@ export namespace ios {
     export class UILayoutViewController {
         public static initWithOwner(owner: WeakRef<View>): UILayoutViewController;
     }
-}
+}

tns-core-modules/ui/date-picker/date-picker-common.ts

@@ -1,11 +1,12 @@
 import { DatePicker as DatePickerDefinition } from ".";
-import { View, Property } from "../core/view";
+import { View, Property, CSSType } from "../core/view";
 
 export * from "../core/view";
 
 const defaultDate = new Date();
 const dateComparer = (x: Date, y: Date): boolean => (x <= y && x >= y);
 
+@CSSType("DatePicker")
 export class DatePickerBase extends View implements DatePickerDefinition {
     public year: number;
     public month: number;

tns-core-modules/ui/frame/frame-common.ts

@@ -3,7 +3,7 @@ import { Frame as FrameDefinition, NavigationEntry, BackstackEntry, NavigationTr
 import { Page } from "../page";
 
 // Types.
-import { View, CustomLayoutView, isIOS, isAndroid, traceEnabled, traceWrite, traceCategories, EventData, Property } from "../core/view";
+import { View, CustomLayoutView, isIOS, isAndroid, traceEnabled, traceWrite, traceCategories, EventData, Property, CSSType } from "../core/view";
 import { resolveFileName } from "../../file-system/file-name-resolver";
 import { knownFolders, path } from "../../file-system";
 import { parse, createViewFromEntry } from "../builder";
@@ -35,6 +35,7 @@ export interface NavigationContext {
     isBackNavigation: boolean;
 }
 
+@CSSType("Frame")
 export class FrameBase extends CustomLayoutView implements FrameDefinition {
     public static androidOptionSelectedEvent = "optionSelected";
 

tns-core-modules/ui/html-view/html-view-common.ts

@@ -1,8 +1,9 @@
 import { HtmlView as HtmlViewDefinition } from ".";
-import { View, Property } from "../core/view";
+import { View, Property, CSSType } from "../core/view";
 
 export * from "../core/view";
 
+@CSSType("HtmlView")
 export class HtmlViewBase extends View implements HtmlViewDefinition {
     public html: string;
 }

tns-core-modules/ui/image/image-common.ts

@@ -1,5 +1,5 @@
 import { Image as ImageDefinition, Stretch } from ".";
-import { View, Property, InheritedCssProperty, Length, Style, Color, isIOS, booleanConverter } from "../core/view";
+import { View, Property, InheritedCssProperty, Length, Style, Color, isIOS, booleanConverter, CSSType } from "../core/view";
 import { ImageAsset } from "../../image-asset";
 import { ImageSource, fromAsset, fromNativeSource, fromUrl } from "../../image-source";
 import { isDataURI, isFileOrResourcePath, RESOURCE_PREFIX } from "../../utils/utils";
@@ -7,6 +7,7 @@ import { isDataURI, isFileOrResourcePath, RESOURCE_PREFIX } from "../../utils/ut
 export * from "../core/view";
 export { ImageSource, ImageAsset, fromAsset, fromNativeSource, fromUrl, isDataURI, isFileOrResourcePath, RESOURCE_PREFIX };
 
+@CSSType("Image")
 export abstract class ImageBase extends View implements ImageDefinition {
     public imageSource: ImageSource;
     public src: string | ImageSource;

tns-core-modules/ui/label/label.android.ts

@@ -1,11 +1,12 @@
 import { Label as LabelDefinition } from ".";
-import { TextBase, WhiteSpace, whiteSpaceProperty, booleanConverter } from "../text-base";
+import { TextBase, WhiteSpace, whiteSpaceProperty, booleanConverter, CSSType } from "../text-base";
 import { profile } from "../../profiling";
 
 export * from "../text-base";
 
 let TextView: typeof android.widget.TextView;
 
+@CSSType("Label")
 export class Label extends TextBase implements LabelDefinition {
     nativeViewProtected: android.widget.TextView;
 

tns-core-modules/ui/label/label.ios.ts

@@ -4,7 +4,7 @@ import {
     TextBase, View, layout,
     borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty,
     paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty, whiteSpaceProperty,
-    Length, WhiteSpace, booleanConverter
+    Length, WhiteSpace, booleanConverter, CSSType
 } from "../text-base";
 
 import { ios } from "../styling/background";
@@ -18,6 +18,7 @@ enum FixedSize {
     BOTH = 3
 }
 
+@CSSType("Label")
 export class Label extends TextBase implements LabelDefinition {
     nativeViewProtected: TNSLabel;
     private _fixedSize: FixedSize;

tns-core-modules/ui/layouts/absolute-layout/absolute-layout-common.ts

@@ -1,5 +1,5 @@
 import { AbsoluteLayout as AbsoluteLayoutDefinition } from ".";
-import { LayoutBase, View, Property, Length, zeroLength } from "../layout-base";
+import { LayoutBase, View, Property, Length, zeroLength, CSSType } from "../layout-base";
 
 export * from "../layout-base";
 
@@ -13,6 +13,7 @@ function validateArgs(element: View): View {
     return element;
 }
 
+@CSSType("AbsoluteLayout")
 export class AbsoluteLayoutBase extends LayoutBase implements AbsoluteLayoutDefinition {
     // TODO: Do we still need this? it can be get like view.left
     public static getLeft(element: View): Length {

tns-core-modules/ui/layouts/dock-layout/dock-layout-common.ts

@@ -1,5 +1,5 @@
 import { DockLayout as DockLayoutDefinition, Dock } from ".";
-import { LayoutBase, View, Property, isIOS, booleanConverter, makeValidator, makeParser } from "../layout-base";
+import { LayoutBase, View, Property, isIOS, booleanConverter, makeValidator, makeParser, CSSType } from "../layout-base";
 
 function validateArgs(element: View): View {
     if (!element) {
@@ -10,6 +10,7 @@ function validateArgs(element: View): View {
 
 export * from "../layout-base";
 
+@CSSType("DockLayout")
 export class DockLayoutBase extends LayoutBase implements DockLayoutDefinition {
 
     public static getDock(element: View): Dock {

tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout-common.ts

@@ -1,4 +1,4 @@
-import { LayoutBase, View, Style, CssProperty, isIOS, ShorthandProperty, makeValidator, makeParser, unsetValue } from "../layout-base";
+import { LayoutBase, View, Style, CssProperty, isIOS, ShorthandProperty, makeValidator, makeParser, unsetValue, CSSType } from "../layout-base";
 
 export * from "../layout-base";
 
@@ -137,6 +137,7 @@ function validateArgs(element: View): View {
 /**
  * A common base class for all cross platform flexbox layout implementations.
  */
+@CSSType("FlexboxLayout")
 export abstract class FlexboxLayoutBase extends LayoutBase {
     get flexDirection(): FlexDirection {
         return this.style.flexDirection;

tns-core-modules/ui/layouts/grid-layout/grid-layout-common.ts

@@ -1,5 +1,5 @@
 import { GridLayout as GridLayoutDefinition, ItemSpec as ItemSpecDefinition } from ".";
-import { LayoutBase, View, Observable, Property, makeParser, makeValidator } from "../layout-base";
+import { LayoutBase, View, Observable, Property, makeParser, makeValidator, CSSType } from "../layout-base";
 
 export * from "../layout-base";
 
@@ -125,6 +125,7 @@ export class ItemSpec extends Observable implements ItemSpecDefinition {
     }
 }
 
+@CSSType("GridLayout")
 export class GridLayoutBase extends LayoutBase implements GridLayoutDefinition {
     private _rows: Array<ItemSpec> = new Array<ItemSpec>();
     private _cols: Array<ItemSpec> = new Array<ItemSpec>();

tns-core-modules/ui/layouts/stack-layout/stack-layout-common.ts

@@ -1,8 +1,9 @@
 import { StackLayout as StackLayoutDefinition, Orientation } from ".";
-import { LayoutBase, Property, isIOS, makeValidator, makeParser } from "../layout-base";
+import { LayoutBase, Property, isIOS, makeValidator, makeParser, CSSType } from "../layout-base";
 
 export * from "../layout-base";
 
+@CSSType("StackLayout")
 export class StackLayoutBase extends LayoutBase implements StackLayoutDefinition {
     public orientation: Orientation;
 }

tns-core-modules/ui/layouts/wrap-layout/wrap-layout-common.ts

@@ -1,8 +1,9 @@
 import { WrapLayout as WrapLayoutDefinition, Orientation } from ".";
-import { LayoutBase, Property, isIOS, Length, makeValidator, makeParser } from "../layout-base";
+import { LayoutBase, Property, isIOS, Length, makeValidator, makeParser, CSSType } from "../layout-base";
 
 export * from "../layout-base";
 
+@CSSType("WrapLayout")
 export class WrapLayoutBase extends LayoutBase implements WrapLayoutDefinition {
     public orientation: Orientation;
     public itemWidth: Length;

tns-core-modules/ui/list-picker/list-picker-common.ts

@@ -1,8 +1,9 @@
 import { ListPicker as ListPickerDefinition, ItemsSource } from ".";
-import { View, Property, CoercibleProperty } from "../core/view";
+import { View, Property, CoercibleProperty, CSSType } from "../core/view";
 
 export * from "../core/view";
 
+@CSSType("ListPicker")
 export class ListPickerBase extends View implements ListPickerDefinition {
 
     public selectedIndex: number;

tns-core-modules/ui/list-view/list-view-common.ts

@@ -1,5 +1,5 @@
 import { ListView as ListViewDefinition, ItemsSource, ItemEventData } from ".";
-import { CoercibleProperty, CssProperty, Style, View, Template, KeyedTemplate, Length, Property, Color, Observable, EventData } from "../core/view";
+import { CoercibleProperty, CssProperty, Style, View, Template, KeyedTemplate, Length, Property, Color, Observable, EventData, CSSType } from "../core/view";
 import { parse, parseMultipleTemplates } from "../builder";
 import { Label } from "../label";
 import { ObservableArray, ChangedData } from "../../data/observable-array";
@@ -18,6 +18,7 @@ export module knownMultiTemplates {
 
 const autoEffectiveRowHeight = -1;
 
+@CSSType("ListView")
 export abstract class ListViewBase extends View implements ListViewDefinition {
     public static itemLoadingEvent = "itemLoading";
     public static itemTapEvent = "itemTap";

tns-core-modules/ui/page/page-common.ts

@@ -1,7 +1,7 @@
 import { Page as PageDefinition, NavigatedData, ShownModallyData } from ".";
 import {
     ContentView, View, eachDescendant, Property, CssProperty, Color, isIOS,
-    booleanConverter, resetCSSProperties, Style, EventData
+    booleanConverter, resetCSSProperties, Style, EventData, CSSType
 } from "../content-view";
 import { Frame, topmost as topmostFrame } from "../frame";
 import { ActionBar } from "../action-bar";
@@ -11,6 +11,7 @@ import { profile } from "../../profiling";
 
 export * from "../content-view";
 
+@CSSType("Page")
 export class PageBase extends ContentView implements PageDefinition {
 
     public static navigatingToEvent = "navigatingTo";

tns-core-modules/ui/placeholder/placeholder.android.ts

@@ -1,6 +1,7 @@
 import { Placeholder as PlaceholderDefinition, CreateViewEventData } from "."
-import { View, EventData } from "../core/view"
+import { View, EventData, CSSType } from "../core/view"
 
+@CSSType("Placeholder")
 export class Placeholder extends View implements PlaceholderDefinition {
     public static creatingViewEvent = "creatingView";
 

tns-core-modules/ui/progress/progress-common.ts

@@ -1,8 +1,9 @@
 import { Progress as ProgressDefinition } from ".";
-import { View, Property, CoercibleProperty } from "../core/view";
+import { View, Property, CoercibleProperty, CSSType } from "../core/view";
 
 export * from "../core/view";
 
+@CSSType("Progress")
 export class ProgressBase extends View implements ProgressDefinition {
     public value: number;
     public maxValue: number;

tns-core-modules/ui/proxy-view-container/proxy-view-container.ts

@@ -1,5 +1,5 @@
 import { ProxyViewContainer as ProxyViewContainerDefinition } from ".";
-import { LayoutBase, View, traceEnabled, traceWrite, traceCategories } from "../layouts/layout-base";
+import { LayoutBase, View, traceEnabled, traceWrite, traceCategories, CSSType } from "../layouts/layout-base";
 /**
  * Proxy view container that adds all its native children directly to the parent. 
  * To be used as a logical grouping container of views.
@@ -9,13 +9,14 @@ import { LayoutBase, View, traceEnabled, traceWrite, traceCategories } from "../
 // * Proxy (with children) is added to the DOM. In _addViewToNativeVisualTree _addViewToNativeVisualTree recursively when the proxy is added to the parent.
 // * Child is removed from attached proxy. Handled in _removeViewFromNativeVisualTree.
 // * Proxy (with children) is removed form the DOM. In _removeViewFromNativeVisualTree recursively when the proxy is removed from its parent.
+@CSSType("ProxyViewContainer")
 export class ProxyViewContainer extends LayoutBase implements ProxyViewContainerDefinition {
 
     constructor() {
         super();
         this.nativeViewProtected = undefined;
     }
-    
+
     // No native view for proxy container.
     get ios(): any {
         return null;

tns-core-modules/ui/repeater/repeater.ts

@@ -1,6 +1,6 @@
 import { Repeater as RepeaterDefinition, ItemsSource } from ".";
 import { Label } from "../label";
-import { LayoutBase, CustomLayoutView, View, Template, Property, layout } from "../layouts/layout-base";
+import { LayoutBase, CustomLayoutView, View, Template, Property, layout, CSSType } from "../layouts/layout-base";
 import { StackLayout } from "../layouts/stack-layout";
 import { ObservableArray, ChangedData } from "../../data/observable-array";
 import { addWeakEventListener, removeWeakEventListener } from "../core/weak-event-listener";
@@ -13,6 +13,7 @@ export module knownTemplates {
     export const itemTemplate = "itemTemplate";
 }
 
+@CSSType("Repeater")
 export class Repeater extends CustomLayoutView implements RepeaterDefinition {
     private _isDirty = false;
     public ios;

tns-core-modules/ui/scroll-view/scroll-view-common.ts

@@ -1,9 +1,10 @@
 import { ScrollView as ScrollViewDefinition, Orientation, ScrollEventData } from ".";
-import { ContentView, Property, makeParser, makeValidator, EventData, booleanConverter } from "../content-view";
+import { ContentView, Property, makeParser, makeValidator, EventData, booleanConverter, CSSType } from "../content-view";
 import { profile } from "../../profiling";
 
 export * from "../content-view";
 
+@CSSType("ScrollView")
 export abstract class ScrollViewBase extends ContentView implements ScrollViewDefinition {
     private _scrollChangeCount: number = 0;
     public static scrollEvent = "scroll";

tns-core-modules/ui/search-bar/search-bar-common.ts

@@ -1,8 +1,9 @@
 import { SearchBar as SearchBarDefinition } from ".";
-import { View, Property, Color, isIOS } from "../core/view";
+import { View, Property, Color, isIOS, CSSType } from "../core/view";
 
 export * from "../core/view";
 
+@CSSType("SearchBar")
 export abstract class SearchBarBase extends View implements SearchBarDefinition {
     public static submitEvent = "submit";
     public static clearEvent = "clear";

tns-core-modules/ui/segmented-bar/segmented-bar-common.ts

@@ -1,7 +1,7 @@
 import { SegmentedBar as SegmentedBarDefinition, SegmentedBarItem as SegmentedBarItemDefinition, SelectedIndexChangedEventData } from ".";
 import {
     ViewBase, View, AddChildFromBuilder, AddArrayFromBuilder,
-    Property, CoercibleProperty, InheritedCssProperty, Color, Style, EventData
+    Property, CoercibleProperty, InheritedCssProperty, Color, Style, EventData, CSSType
 } from "../core/view";
 
 export * from "../core/view";
@@ -10,6 +10,7 @@ export module knownCollections {
     export var items = "items";
 }
 
+@CSSType("SegmentedBarItem")
 export abstract class SegmentedBarItemBase extends ViewBase implements SegmentedBarItemDefinition {
     private _title: string = "";
 
@@ -27,6 +28,7 @@ export abstract class SegmentedBarItemBase extends ViewBase implements Segmented
     public abstract _update();
 }
 
+@CSSType("SegmentedBar")
 export abstract class SegmentedBarBase extends View implements SegmentedBarDefinition, AddChildFromBuilder, AddArrayFromBuilder {
     public static selectedIndexChangedEvent = "selectedIndexChanged";
 
@@ -89,6 +91,7 @@ export abstract class SegmentedBarBase extends View implements SegmentedBarDefin
         }
     }
 }
+
 export interface SegmentedBarBase {
     on(eventNames: string, callback: (data: EventData) => void, thisArg?: any);
     on(event: "selectedIndexChanged", callback: (args: SelectedIndexChangedEventData) => void, thisArg?: any);

tns-core-modules/ui/slider/slider-common.ts

@@ -1,9 +1,10 @@
 import { Slider as SliderDefinition } from ".";
-import { View, Property, CoercibleProperty, isIOS } from "../core/view";
+import { View, Property, CoercibleProperty, isIOS, CSSType } from "../core/view";
 
 export * from "../core/view";
 
 // TODO: Extract base Range class for slider and progress
+@CSSType("SliderBase")
 export class SliderBase extends View implements SliderDefinition {
     public value: number;
     public minValue: number;

tns-core-modules/ui/switch/switch-common.ts

@@ -1,8 +1,9 @@
 import { Switch as SwitchDefinition } from ".";
-import { View, Property, booleanConverter } from "../core/view";
+import { View, Property, booleanConverter, CSSType } from "../core/view";
 
 export * from "../core/view";
 
+@CSSType("Switch")
 export class SwitchBase extends View implements SwitchDefinition {
     public checked: boolean;
 }

tns-core-modules/ui/tab-view/tab-view-common.ts

@@ -1,7 +1,7 @@
 import { TabView as TabViewDefinition, TabViewItem as TabViewItemDefinition, SelectedIndexChangedEventData, TabViewItem } from ".";
 import {
     View, ViewBase, Style, Property, CssProperty, CoercibleProperty,
-    Color, isIOS, AddArrayFromBuilder, AddChildFromBuilder, EventData
+    Color, isIOS, AddArrayFromBuilder, AddChildFromBuilder, EventData, CSSType
 } from "../core/view";
 
 export * from "../core/view";
@@ -9,6 +9,7 @@ import { TextTransform } from "../text-base";
 
 export const traceCategory = "TabView";
 
+@CSSType("TabViewItem")
 export abstract class TabViewItemBase extends ViewBase implements TabViewItemDefinition, AddChildFromBuilder {
     private _title: string = "";
     private _view: View;
@@ -85,6 +86,7 @@ export module knownCollections {
     export const items = "items";
 }
 
+@CSSType("TabView")
 export class TabViewBase extends View implements TabViewDefinition, AddChildFromBuilder, AddArrayFromBuilder {
     public static selectedIndexChangedEvent = "selectedIndexChanged";
 

tns-core-modules/ui/text-field/text-field-common.ts

@@ -1,8 +1,9 @@
 import { TextField as TextFieldDefinition } from ".";
-import { EditableTextBase, Property, booleanConverter } from "../editable-text-base";
+import { EditableTextBase, Property, booleanConverter, CSSType } from "../editable-text-base";
 
 export * from "../editable-text-base";
 
+@CSSType("TextField")
 export class TextFieldBase extends EditableTextBase implements TextFieldDefinition {
     public static returnPressEvent = "returnPress";
     public secure: boolean;

tns-core-modules/ui/text-view/text-view.android.ts

@@ -1,8 +1,9 @@
 import { TextView as TextViewDefinition } from ".";
-import { EditableTextBase } from "../editable-text-base";
+import { EditableTextBase, CSSType } from "../editable-text-base";
 
 export * from "../text-base";
 
+@CSSType("TextView")
 export class TextView extends EditableTextBase implements TextViewDefinition {
 
     public _configureEditText(editText: android.widget.EditText) {

tns-core-modules/ui/text-view/text-view.ios.ts

@@ -4,7 +4,8 @@ import {
     EditableTextBase, editableProperty, hintProperty, textProperty, colorProperty, placeholderColorProperty,
     borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty,
     paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty,
-    Length, _updateCharactersInRangeReplacementString, Color, layout
+    Length, _updateCharactersInRangeReplacementString, Color, layout,
+    CSSType
 } from "../editable-text-base";
 
 import { ios } from "../../utils/utils";
@@ -95,6 +96,7 @@ class UITextViewDelegateImpl extends NSObject implements UITextViewDelegate {
     }
 }
 
+@CSSType("TextView")
 export class TextView extends EditableTextBase implements TextViewDefinition {
     private _ios: UITextView;
     private _delegate: UITextViewDelegateImpl;

tns-core-modules/ui/time-picker/time-picker-common.ts

@@ -1,5 +1,5 @@
 import { TimePicker as TimePickerDefinition } from ".";
-import { View, Property } from "../core/view";
+import { View, Property, CSSType } from "../core/view";
 
 export * from "../core/view";
 
@@ -86,6 +86,7 @@ function getErrorMessage(picker: TimePickerDefinition, propertyName: string, new
     return `${propertyName} property value (${toString(newValue)}:${toString(picker.minute)}) is not valid. ${getMinMaxTimeErrorMessage(picker)}.`;
 }
 
+@CSSType("TimePicker")
 export abstract class TimePickerBase extends View implements TimePickerDefinition {
     public hour: number;
     public minute: number;

tns-core-modules/ui/web-view/web-view-common.ts

@@ -1,5 +1,5 @@
 import { WebView as WebViewDefinition, LoadEventData, NavigationType } from ".";
-import { View, Property, EventData } from "../core/view";
+import { View, Property, EventData, CSSType } from "../core/view";
 import { File, knownFolders, path } from "../../file-system";
 
 export { File, knownFolders, path, NavigationType };
@@ -7,6 +7,7 @@ export * from "../core/view";
 
 export const srcProperty = new Property<WebViewBase, string>({ name: "src" });
 
+@CSSType("WebView")
 export abstract class WebViewBase extends View implements WebViewDefinition {
     public static loadStartedEvent = "loadStarted";
     public static loadFinishedEvent = "loadFinished";