Export internal CSS Parser used to transform editor styles in order for external tools to use it

[fabiankaegy]

What problem does this address?

WordPress uses a forked version of reworkcss/css in order to parse the editor CSS stylesheet. You can find the fork here in the codebase.

gutenberg/packages/block-editor/src/utils/transform-styles/ast/parse.js

Lines 3 to 10 in ddd61e4

	// Adapted from https://github.com/reworkcss/css
	// because we needed to remove source map support.
	// http://www.w3.org/TR/CSS21/grammar.htm
	// https://github.com/visionmedia/css-parse/pull/49#issuecomment-30088027
	const commentre = /\/\*[^*]*\*+([^/*][^*]*\*+)*\//g;
	export default function ( css, options ) {

A few issues with this parser are currently getting tracked in #40444.

Because of these issues, it can currently easily happen that a CSS rule that is technically valid causes the parser to choke and therefore leads to an unstyled editor experience. Since the CSS that is output by build tools like webpack is technically valid these issues often only show themselves in the actual production build when the files are minified etc.

Whilst the end goal should always be to improve the parser to fail more gracefully and not choke on valid CSS, it would be great to allow for external tooling to catch any problematic CSS in their build step instead of only seeing these issues in production.

What is your proposed solution?

In order to allow for external build tooling to catch these issues, we would like to create a Webpack plugin that runs the output CSS file through the parser to see that it doesn't produce any errors. You can find more details about our plans in 10up/10up-toolkit#214. Currently, we have to manually copy the parser from the Gutenberg repository since it is not getting exported to the public anywhere.

It would be great to add the parser to the exports of the @wordpress/block-editor package so that external use cases like the one described above can use it for their needs.

[strarsis]

New editor styles transformation approach using PostCSS is now merged (many thanks @zaguiini)!
PostCSS can be used anywhere in Gutenberg, offering full and well-tested style manipulation capabilities.