Merge pull request #345 from ckeditor/t/144

Other: Migrated the package styles from SASS to PostCSS to bring theme support and avoid duplicates in some editor builds. Closes #144. Closes ckeditor/ckeditor5#420.

BREAKING CHANGE: The styles are no longer developed in SASS which means the `.scss` files became unavailable. Please refer to the [Theme Customization](https://docs.ckeditor.com/ckeditor5/latest/framework/guides/ui/theme-customization.html) guide to learn more about migration to PostCSS.

Author: oleq

src/button/buttonview.js

@@ -13,6 +13,8 @@ import TooltipView from '../tooltip/tooltipview';
 
 import { getEnvKeystrokeText } from '@ckeditor/ckeditor5-utils/src/keyboard';
 
+import '../../theme/components/button/button.css';
+
 /**
  * The button view class.
  *

src/dropdown/dropdownview.js

@@ -11,6 +11,8 @@ import View from '../view';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 
+import '../../theme/components/dropdown/dropdown.css';
+
 /**
  * The dropdown view class.
  *

src/editorui/boxed/boxededitoruiview.js

@@ -8,6 +8,7 @@
  */
 
 import EditorUIView from '../../editorui/editoruiview';
+import LabelView from '../../label/labelview';
 import uid from '@ckeditor/ckeditor5-utils/src/uid';
 
 /**
@@ -25,7 +26,6 @@ export default class BoxedEditorUIView extends EditorUIView {
 	constructor( locale ) {
 		super( locale );
 
-		const t = this.t;
 		const ariaLabelUid = uid();
 
 		/**
@@ -46,6 +46,15 @@ export default class BoxedEditorUIView extends EditorUIView {
 		 */
 		this.main = this.createCollection();
 
+		/**
+		 * Voice label of the UI.
+		 *
+		 * @protected
+		 * @readonly
+		 * @member {module:ui/view~View} #_voiceLabelView
+		 */
+		this._voiceLabelView = this._createVoiceLabel( ariaLabelUid );
+
 		this.setTemplate( {
 			tag: 'div',
 
@@ -62,17 +71,7 @@ export default class BoxedEditorUIView extends EditorUIView {
 			},
 
 			children: [
-				{
-					tag: 'span',
-					attributes: {
-						id: `cke-editor__aria-label_${ ariaLabelUid }`,
-						class: 'cke-voice-label'
-					},
-					children: [
-						// TODO: Editor name?
-						t( 'Rich Text Editor' )
-					]
-				},
+				this._voiceLabelView,
 				{
 					tag: 'div',
 					attributes: {
@@ -92,4 +91,26 @@ export default class BoxedEditorUIView extends EditorUIView {
 			]
 		} );
 	}
+
+	/**
+	 * Creates a voice label view instance.
+	 *
+	 * @private
+	 * @returns {module:ui/label/labelview~LabelView}
+	 */
+	_createVoiceLabel( ariaLabelUid ) {
+		const t = this.t;
+		const voiceLabel = new LabelView();
+
+		voiceLabel.text = t( 'Rich Text Editor' );
+
+		voiceLabel.extendTemplate( {
+			attributes: {
+				id: `cke-editor__aria-label_${ ariaLabelUid }`,
+				class: 'cke-voice-label'
+			}
+		} );
+
+		return voiceLabel;
+	}
 }

src/editorui/editoruiview.js

@@ -12,6 +12,8 @@
 import View from '../view';
 import Template from '../template';
 
+import '../../theme/components/editorui/editorui.css';
+
 /**
  * The editor UI view class. Base class for the editor main views.
  *

src/icon/iconview.js

@@ -11,6 +11,8 @@
 
 import View from '../view';
 
+import '../../theme/components/icon/icon.css';
+
 /**
  * The icon view class.
  *

src/inputtext/inputtextview.js

@@ -9,6 +9,8 @@
 
 import View from '../view';
 
+import '../../theme/components/inputtext/inputtext.css';
+
 /**
  * The text input view class.
  *

src/label/labelview.js

@@ -9,6 +9,8 @@
 
 import View from '../view';
 
+import '../../theme/components/label/label.css';
+
 /**
  * The label view class.
  *

src/list/listview.js

@@ -12,6 +12,8 @@ import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import FocusCycler from '../focuscycler';
 import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 
+import '../../theme/components/list/list.css';
+
 /**
  * The list view class.
  *

src/panel/balloon/balloonpanelview.js

@@ -14,6 +14,8 @@ import isElement from '@ckeditor/ckeditor5-utils/src/lib/lodash/isElement';
 import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit';
 import global from '@ckeditor/ckeditor5-utils/src/dom/global';
 
+import '../../../theme/components/panel/balloonpanel.css';
+
 const toPx = toUnit( 'px' );
 const defaultLimiterElement = global.document.body;
 

src/panel/sticky/stickypanelview.js

@@ -12,6 +12,8 @@ import View from '../../view';
 import Template from '../../template';
 import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit';
 
+import '../../../theme/components/panel/stickypanel.css';
+
 const toPx = toUnit( 'px' );
 
 /**