Merge pull request #1949 from ckeditor/t/1945

Other: Bumped style-loader to v1.0.0. Aligned configurations and documentation to the new loader API. Closes #1945.

Author: Reinmar

docs/builds/guides/frameworks/react.md

@@ -70,7 +70,7 @@ The `<CKEditor>` component supports the following properties:
 * `onInit` &ndash; A function called when the editor was initialized. It receives the initialized {@link module:core/editor/editor~Editor `editor`} as a parameter.
 * `disabled` &ndash; A boolean. The {@link module:core/editor/editor~Editor `editor`} is being switched to read-only mode if the property is set to `true`.
 * `onChange` &ndash; A function called when the editor's data has changed. See the {@link module:engine/model/document~Document#event:change:data `editor.model.document#change:data`} event.
-* `onBlur` &ndash; A function called when the editor was blurred. See the {@link module:engine/view/document~Document#event:blur `editor.editing.view.document#blur`} event. 
+* `onBlur` &ndash; A function called when the editor was blurred. See the {@link module:engine/view/document~Document#event:blur `editor.editing.view.document#blur`} event.
 * `onFocus` &ndash; A function called when the editor was focused. See the {@link module:engine/view/document~Document#event:focus `editor.editing.view.document#focus`} event.
 
 The editor events callbacks (`onChange`, `onBlur`, `onFocus`) receive two parameters:
@@ -175,7 +175,7 @@ Before you start modifying the webpack configuration, first install some CKEdito
 
 ```bash
 yarn add \
-	raw-loader \
+	raw-loader@3 \
 	@ckeditor/ckeditor5-dev-utils \
 	@ckeditor/ckeditor5-theme-lark \
 	@ckeditor/ckeditor5-react \
@@ -208,7 +208,7 @@ Then, add two new elements to the exported object under the `module.rules` array
 		{
 			loader: 'style-loader',
 			options: {
-				singleton: true
+				injectType: 'singletonStyleTag'
 			}
 		},
 		{
@@ -453,7 +453,7 @@ Then add two new elements to the exported object under the `module.rules` array
 		{
 			loader: 'style-loader',
 			options: {
-				singleton: true
+				injectType: 'singletonStyleTag'
 			}
 		},
 		{

docs/builds/guides/frameworks/vuejs.md

@@ -192,7 +192,7 @@ npm install --save \
     @ckeditor/ckeditor5-vue \
     @ckeditor/ckeditor5-dev-webpack-plugin \
     @ckeditor/ckeditor5-dev-utils \
-    postcss-loader \
+    postcss-loader@3 \
     [email protected]
 ```
 

docs/builds/guides/integration/advanced-setup.md

@@ -99,9 +99,9 @@ The second step is to install dependencies needed to build the editor. The list
 npm install --save \
 	@ckeditor/ckeditor5-dev-webpack-plugin \
 	@ckeditor/ckeditor5-dev-utils \
-	postcss-loader \
-	raw-loader \
-	style-loader \
+	postcss-loader@3 \
+	raw-loader@3 \
+	style-loader@1 \
 	webpack@4 \
 	webpack-cli@3 \
 ```
@@ -147,7 +147,7 @@ module.exports = {
 					{
 						loader: 'style-loader',
 						options: {
-							singleton: true
+							injectType: 'singletonStyleTag'
 						}
 					},
 					{

docs/framework/guides/quick-start.md

@@ -26,9 +26,9 @@ First, install packages needed to build CKEditor 5:
 
 ```bash
 npm install --save \
-	postcss-loader \
-	raw-loader \
-	style-loader \
+	postcss-loader@3 \
+	raw-loader@3 \
+	style-loader@1 \
 	webpack@4 \
 	webpack-cli@3
 ```
@@ -71,7 +71,7 @@ module.exports = {
 					{
 						loader: 'style-loader',
 						options: {
-							singleton: true
+							injectType: 'singletonStyleTag'
 						}
 					},
 					{

docs/framework/guides/tutorials/implementing-a-block-widget.md

@@ -5,7 +5,7 @@ order: 10
 
 # Implementing a block widget
 
-In this tutorial, you will learn how to implement a more complex CKEditor 5 plugin. 
+In this tutorial, you will learn how to implement a more complex CKEditor 5 plugin.
 
 You will build a "Simple box" feature which will allow the user to insert a custom box with a title and body fields into the document. You will use the widget utilities and work with the model-view conversion in order to properly set up the behavior of this feature. Later on, you will create a UI which will allow for inserting new simple boxes into the document with the toolbar button.
 
@@ -29,9 +29,9 @@ First, install packages needed to build and set up a basic CKEditor 5 instance.
 
 ```bash
 npm install --save \
-	postcss-loader \
-	raw-loader \
-	style-loader \
+	postcss-loader@3 \
+	raw-loader@3 \
+	style-loader@1 \
 	webpack@4 \
 	webpack-cli@3 \
 	@ckeditor/ckeditor5-dev-utils \
@@ -74,7 +74,7 @@ module.exports = {
 					{
 						loader: 'style-loader',
 						options: {
-							singleton: true
+							injectType: 'singletonStyleTag'
 						}
 					},
 					{

docs/framework/guides/tutorials/implementing-an-inline-widget.md

@@ -25,9 +25,9 @@ First, install required dependencies:
 
 ```bash
 npm install --save \
-	postcss-loader \
-	raw-loader \
-	style-loader \
+	postcss-loader@3 \
+	raw-loader@3 \
+	style-loader@1 \
 	webpack@4 \
 	webpack-cli@3 \
 	@ckeditor/ckeditor5-basic-styles \
@@ -75,7 +75,7 @@ module.exports = {
 					{
 						loader: 'style-loader',
 						options: {
-							singleton: true
+							injectType: 'singletonStyleTag'
 						}
 					},
 					{

package.json

@@ -72,7 +72,7 @@
     "@ckeditor/ckeditor5-comments": "^3.2.0",
     "@ckeditor/ckeditor5-dev-docs": "^11.0.5",
     "@ckeditor/ckeditor5-dev-env": "^15.0.3",
-    "@ckeditor/ckeditor5-dev-tests": "^16.6.0",
+    "@ckeditor/ckeditor5-dev-tests": "^16.7.1",
     "@ckeditor/ckeditor5-dev-utils": "^12.0.3",
     "@ckeditor/ckeditor5-dev-webpack-plugin": "^8.0.3",
     "@ckeditor/ckeditor5-inspector": "^1.3.0",
@@ -89,12 +89,12 @@
     "minimatch": "^3.0.4",
     "postcss-loader": "^3.0.0",
     "progress-bar-webpack-plugin": "^1.12.1",
-    "raw-loader": "^1.0.0",
-    "style-loader": "^0.23.0",
+    "raw-loader": "^3.1.0",
+    "style-loader": "^1.0.0",
     "svgo": "^1.1.0",
-    "uglifyjs-webpack-plugin": "^1.2.7",
+    "uglifyjs-webpack-plugin": "^1.3.0",
     "umberto": "^1.0.0",
-    "webpack": "^4.15.0"
+    "webpack": "^4.39.1"
   },
   "engines": {
     "node": ">=8.0.0",