Export internal CSS Parser used to transform editor styles in order for external tools to use it #42727
Labels
Developer Experience
Ideas about improving block and theme developer experience
[Package] Block editor
/packages/block-editor
[Type] Enhancement
A suggestion for improvement.
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
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.The text was updated successfully, but these errors were encountered: