Bladeren bron

Migrated UI components from SASS to PostCSS. Added theme support.

Aleksander Nowodzinski 8 jaren geleden
bovenliggende
commit
b4e871201f

+ 5 - 0
packages/ckeditor5-build-classic/build-config.js

@@ -54,6 +54,11 @@ module.exports = {
 
 		image: {
 			toolbar: [ 'imageStyleFull', 'imageStyleSide', '|', 'imageTextAlternative' ]
+		},
+
+		cloudServices: {
+			tokenUrl: 'http://token-endpoint',
+			additionalOption: 'some-value'
 		}
 	}
 };

File diff suppressed because it is too large
+ 0 - 0
packages/ckeditor5-build-classic/build/ckeditor.js


File diff suppressed because it is too large
+ 0 - 0
packages/ckeditor5-build-classic/build/ckeditor.js.map


+ 5 - 3
packages/ckeditor5-build-classic/package.json

@@ -29,11 +29,13 @@
     "@ckeditor/ckeditor5-list": "^1.0.0-alpha.1",
     "@ckeditor/ckeditor5-paragraph": "^1.0.0-alpha.1",
     "@ckeditor/ckeditor5-upload": "^1.0.0-alpha.1",
+    "@ckeditor/ckeditor5-theme-lark": "^1.0.0-alpha.1",
     "babel-minify-webpack-plugin": "^0.2.0",
-    "css-loader": "^0.28.7",
-    "node-sass": "^4.5.3",
+    "cssnano": "^3.10.0",
+    "postcss-cssnext": "^3.0.2",
+    "postcss-import": "^11.0.0",
+    "postcss-loader": "^2.0.8",
     "raw-loader": "^0.5.1",
-    "sass-loader": "^6.0.6",
     "style-loader": "^0.18.2",
     "webpack": "^3.6.0"
   },

+ 35 - 0
packages/ckeditor5-build-classic/postcss.config.js

@@ -0,0 +1,35 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+/* eslint-env node */
+
+const path = require( 'path' );
+const postCssImport = require( 'postcss-import' );
+const postCssNext = require( 'postcss-cssnext' );
+const cssnano = require( 'cssnano' );
+const themeImporter = require( './themeimporter' );
+
+module.exports = {
+	plugins: [
+		postCssImport(),
+		themeImporter( {
+			themePath: path.resolve( __dirname, 'node_modules/@ckeditor/ckeditor5-theme-lark' )
+		} ),
+		postCssNext( {
+			// features: {
+				// customProperties: {
+				// 	variables: {
+				// 		fg: "red",
+				// 		bg: "green",
+				// 		foo: "#456"
+				// 	}
+				// }
+			// }
+		} ),
+		// cssnano( { autoprefixer: false } )
+	]
+};

+ 6 - 1
packages/ckeditor5-build-classic/sample/index.html

@@ -28,7 +28,12 @@
 
 <script src="../build/ckeditor.js"></script>
 <script>
-	ClassicEditor.create( document.querySelector( '#editor' ) )
+	ClassicEditor.create( document.querySelector( '#editor' ), {
+			cloudServices: {
+				tokenUrl: 'http://localhost',
+				additionalOption: 'some-value'
+			}
+		} )
 		.then( editor => {
 			window.editor = editor;
 		} )

+ 77 - 0
packages/ckeditor5-build-classic/themeimporter.js

@@ -0,0 +1,77 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+/* eslint-env node */
+
+const fs = require( 'fs' );
+const path = require( 'path' );
+const postcss = require( 'postcss' );
+const postCssImport = require( 'postcss-import' );
+
+module.exports = postcss.plugin( 'postcss-ckeditor-theme-importer', options => {
+	const themeName = options.themePath.split( '/' ).slice( -1 );
+	console.log( `Using theme "${ themeName }".` );
+
+	return root => {
+		const fileName = path.basename( root.source.input.file );
+		const packageName = getPackageName( root.source.input.file );
+		const relativeFilePath = path.relative( __dirname, root.source.input.file );
+		const themeFile = path.resolve( __dirname, options.themePath, 'theme', packageName, fileName );
+
+		if ( fs.existsSync( themeFile ) ) {
+			console.log( `Found a corresponding theme file for ${ relativeFilePath }. Including.` );
+
+			return new Promise( resolve => {
+				fs.readFile( themeFile, 'utf8', ( err, data ) => {
+					const processor = postcss( {
+						plugins: [
+							postCssImport()
+						]
+					} );
+
+					return processor.process( data, { from: themeFile } )
+						.then( result => {
+							root.append( result.css );
+							root.append( '\n' );
+
+							resolve();
+						} );
+				} );
+			} );
+		} else {
+			console.log( `Theme file for ${ relativeFilePath } not found in theme "${ themeName }".` );
+		}
+	};
+} );
+
+function getPackageName( path ) {
+	const match = path.match( /ckeditor5-[^/]+/ );
+
+	if ( match ) {
+		return match[ 0 ];
+	} else {
+		return null;
+	}
+}
+
+// function CKThemeLogger() {
+// 	return ( root ) => {
+// 		root.prepend( `/* ${ root.source.input.file } */` );
+// 	};
+// }
+
+// const CKRaiseSpecificity = postcss.plugin( 'postcss-ck-specificity', ( opts ) => {
+// 	opts = opts || {};
+
+// 	return ( root, result ) => {
+// 		root.walkRules( rule => {
+// 			if ( rule.selector.match( /^\.ck-/g ) ) {
+// 				rule.selector = 'body ' + rule.selector;
+// 			}
+// 		} );
+// 	};
+// } );

+ 11 - 5
packages/ckeditor5-build-classic/webpack.config.js

@@ -47,16 +47,22 @@ module.exports = {
 				use: [ 'raw-loader' ]
 			},
 			{
-				test: /\.scss$/,
+				test: /\.css$/,
 				use: [
-					'style-loader',
 					{
-						loader: 'css-loader',
+						loader: 'style-loader',
 						options: {
-							minimize: true
+							singleton: true
+						}
+					},
+					{
+						loader: 'postcss-loader',
+						options: {
+							config: {
+								path: path.resolve( __dirname, 'postcss.config.js' )
+							}
 						}
 					},
-					'sass-loader'
 				]
 			}
 		]

Some files were not shown because too many files changed in this diff