Review PostCSS intergration in webpack configs

[Reinmar]

1. Check whether the way we share configuration utils is easy to use.
2. Update documentation for building CKEditor.

[Reinmar]

I also need to read through ckeditor5/build/docs/ckeditor5/1.0.0-alpha.2/framework/guides/ui/theme-customization.html which I haven't seen so far :D

[oleq]

A related issue #688.

[Reinmar]

I asked @jodator to check this because it requires creating an example project in which CKEditor 5 is used as a dependency. We should check how the rules.test property can be used to apply only to CKEditor 5 stuff and whether PostCSS can be used with a different configuration to build the base application's CSS.

[Reinmar]

Also, once we have some output and understanding how it works, then http://localhost/ckeditor5/build/docs/ckeditor5/1.0.0-alpha.2/framework/guides/quick-start.html can be updated with proper regexps. We may also have a section in http://localhost/ckeditor5/build/docs/ckeditor5/1.0.0-alpha.2/builds/guides/integration/advanced-setup.html about this and a link from the Quick start guide to that section.

Also, let's simplify this bit:

const { bundler } = require( '@ckeditor/ckeditor5-dev-utils' );
const { getPostCssConfig } = require( '@ckeditor/ckeditor5-dev-utils' ).styles;

By exporting all the necessary parts directly from @ckeditor/ckeditor5-dev-utils.

[jodator]

So far so good. The mentioned test was wrong as it does not allowed for nested directories. In other words only theme/file.css was true but theme/some/dir/file.css was not.

So you can use different post-css setups as you with as long as they will not interfere with CKEdfitor 5 ones.

ie.

{
	test: /ckeditor5-[^/]+\/theme\/[\w-/]+\.css$/,
	use: [
		'style-loader',
		{
			loader: 'postcss-loader', options: { /**/ }
		},
	]
},
{
	test: /app.css$/,
	// test /.css$/, // will not work as it will try to parse CKEdtior5 files again
	use: [
		'style-loader',
		{
			loader: 'postcss-loader', options: { parser: 'sugarss' }
		},
	]
},

[jodator]

Also, let's simplify this bit:

const { bundler } = require( '@ckeditor/ckeditor5-dev-utils' );
const { getPostCssConfig } = require( '@ckeditor/ckeditor5-dev-utils' ).styles;

By exporting all the necessary parts directly from @ckeditor/ckeditor5-dev-utils.

I can see that @ckeditor/ckeditor5-dev-utils. exports many things that are not used. For the styles namespace I can see only getPostCssConfig is being used. The simples solution would be to modify exports:

const styles = require( './styles/index' );

module.exports = {
	git: require( './git' ),
	logger: require( './logger' ),
	tools: require( './tools' ),
	stream: require( './stream' ),
	workspace: require( './workspace' ),
	translations: require( './translations/index' ),
	bundler: require( './bundler/index' ),
	styles,
	getPostCssConfig: styles.getPostCssConfig
};

But it looks weird. I'm OK with this as the mostly used options are bundler, getPostCssConfig and sometimes other:

[Reinmar]

So, maybe we could only change the usage of this pkg in build pkgs. To import { bunlder, styles } and then use styles.getPostCssConfig()?

[jodator]

👍 I think that it would be a bit cleaner. I'll prepare a PR do dev-utils,

[Reinmar]

Do we need a PR there? Unless I miss something, it seems that we just need to change ckeditor5-build-*s?

[jodator]

Sorry I've ment PR to the ckeditor5-* repos.