Command for printing content styles

[pomek]

Suggested merge commit message (convention)

Other: Added an npm script docs:content-styles which build an editor with all plugins and save all occurrence of.ck-content class into a separate CSS file. Closes #773.

[oleq]

Two issues I found so far when I ran the task:

Variables

This piece of CSS does not make sense without variable declarations:

.ck-content .image-style-align-right {
	float: right;
	margin-left: var(--ck-image-style-spacing);
}

we must figure out how to include them in the output content styles.

Comments

Comments in the output should not contain the path to ckeditor5 (root). The prefix does not make sense for developers when the content-styles.css is uploaded to the server (production).

/* /Users/oleq/ck/5/ckeditor5/packages/ckeditor5-image/theme/image.css */
.ck-content .image {
	display: table;
	clear: both;
	text-align: center;
	margin: 1em auto
}

should be

/* ckeditor5/packages/ckeditor5-image/theme/image.css */
.ck-content .image {
	display: table;
	clear: both;
	text-align: center;
	margin: 1em auto
}

[pomek]

@oleq, could you look on this once again?

[oleq]

ATM the script outputs custom properties that do not concern content styles. For instance

	--ck-color-button-default-background: transparent;
	--ck-color-button-default-hover-background: hsl(0, 0%, 90%);
	--ck-color-button-default-active-background: hsl(0, 0%, 85%);
	--ck-color-button-default-active-shadow: hsl(0, 0%, 75%);

these are UI–related custom properties and have no value in the context of content styles. They are just noise and they bloat the code.

Some way to include only those variables that are related to .ck-content must be found. Since we already know the full list I guess the best option would be collecting .ck-content ... rules that use custom properties in PostCSS and outputting an intersection between the full list and these few relevant cases.

[pomek]

@oleq, fixed.

[oleq]

1. I got

   --ck-color-upload-bar-background: hsl(209, 92%, 70%);

   but it's not used anywhere in the content styles. Wondering where did it come from?

2. Also, let's ditch the ckeditor5/packages/ prefix from the comments maybe. It does not say much, I suppose.

3. A header would be awesome so developers know what this file is (they're gonna upload it to their servers) and whether it is outdated or not:

   /*
    * CKEditor 5 (v12.3.1) content styles.
    * Generated on Tue Jul 30 15:36:18 CEST 2019.
    * For more information, check out https://ckeditor.com/docs/ckeditor5/latest...
    */

4. We need the documentation.

   • We're gonna explain how to generate these styles, what they are (or not) and what to do with them. It could be in the "Integration" section of the "Builds". Or as a tutorial in the "Framework"
   • We can link to the page in the header.

[pomek]

[pomek]

• (1) – Command for printing content styles #1805 (comment)
• (2) and (3) – fixed.
• (4) could be reported as a follow-up.

[oleq]

I posted some thought on the tool in #773 (comment).

[oleq]

@Reinmar Can you please take a look at the docs I created?

[Reinmar]

That's a very good start. I've got one proposal, though – we could move "By generating it using the yarn docs:content-styles script in the root package of the editor" to framework/guides/contributing/development-environment.html because it's mainly for us. I'm not sure why would anyone else be interested in that. In the "content styles" guide we may have a short link to that, but I don't think that even this is necessary.

[Reinmar]

As commented.

[Reinmar]

BTW, the other option after adding .ck-content to your container would be to replace .ck-content with something custom. It should be fairly straightforward and safe.