浏览代码

content-style.css contains variables definitions.

Kamil Piechaczek 6 年之前
父节点
当前提交
276862053d
共有 2 个文件被更改,包括 43 次插入4 次删除
  1. 33 2
      scripts/docs/build-content-styles.js
  2. 10 2
      scripts/docs/content-styles/list-content-styles.js

+ 33 - 2
scripts/docs/build-content-styles.js

@@ -11,14 +11,43 @@ const webpack = require( 'webpack' );
 const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
 
 const DESTINATION_DIRECTORY = path.join( __dirname, '..', '..', 'build', 'content-styles' );
+const VARIABLE_REGEXP = /(--[\w-]+):\s+(.*);/g;
+
+const contentRules = {
+	selector: [],
+	variables: []
+};
 
-const contentRules = [];
 const webpackConfig = getWebpackConfig();
 const parentCwd = path.join( process.cwd(), '..' );
 
 runWebpack( webpackConfig )
 	.then( () => {
-		const data = contentRules
+		// All variables are placed inside `:root` selector.
+		const variablesCss = contentRules.variables
+			.map( rule => {
+				// Let's extract all of them as an array of simple strings.
+				const allRules = [];
+				let match;
+
+				while ( ( match = VARIABLE_REGEXP.exec( rule.css ) ) ) {
+					allRules.push( `${ match[ 1 ] }: ${ match[ 2 ] };` );
+				}
+
+				return allRules;
+			} )
+			.reduce( ( previousValue, currentValue ) => {
+				// And simplify nested arrays as a single array.
+				previousValue.push( ...currentValue );
+
+				return previousValue;
+			}, [] )
+			.map( rule => {
+				return `\t${ rule }`;
+			} )
+			.join( '\n' );
+
+		const selectorCss = contentRules.selector
 			.map( rule => {
 				// Removes all comments from the rule definition.
 				const cssAsArray = rule.css.replace( /\/\*[^*]+\*\//g, '' ).split( '\n' );
@@ -48,6 +77,8 @@ runWebpack( webpackConfig )
 			} )
 			.join( '\n' );
 
+		const data = `:root {\n${ variablesCss }\n}\n\n${ selectorCss }`;
+
 		return writeFile( path.join( DESTINATION_DIRECTORY, 'content-styles.css' ), data );
 	} )
 	.then( () => {

+ 10 - 2
scripts/docs/content-styles/list-content-styles.js

@@ -10,13 +10,21 @@
 const postcss = require( 'postcss' );
 
 module.exports = postcss.plugin( 'list-content-styles', function( options ) {
-	const contentRules = options.contentRules || [];
+	const selectorStyles = options.contentRules.selector;
+	const variables = options.contentRules.variables;
 
 	return root => {
 		root.walkRules( rule => {
 			rule.selectors.forEach( selector => {
+				if ( selector.match( ':root' ) ) {
+					variables.push( {
+						file: root.source.input.file,
+						css: rule.toString()
+					} );
+				}
+
 				if ( selector.match( '.ck-content' ) ) {
-					contentRules.push( {
+					selectorStyles.push( {
 						file: root.source.input.file,
 						css: rule.toString()
 					} );