Load modeling styles

[pinussilvestrus]

Related to https://github.com/bpmn-io/internal-docs/issues/590
Closes #3030

• Remove patch CSS fixes
• Load modeling library styles globally (in an ordered manner)

Summary

Find some more context in https://github.com/bpmn-io/internal-docs/issues/590#issuecomment-1181765569 and https://github.com/bpmn-io/internal-docs/issues/590#issuecomment-1185305654.

Instead of loading the camunda-bpmn|dmn-js modeling styles on the editor component level, and causing duplicated style definitions in head, it now loads everything in a central place. This has the advantage that we have full control of when and in which order the styles are loaded.

Note that we do not use the "bundled" modeler styles from the packages, but the individual components to prevent duplicates. This only works under the assumption that we anyway want only one version of library styles in BPMN and DMN.

Artifacts

• https://camunda-modeler-on-demand.s3.eu-central-1.amazonaws.com/load-modeling-styles/camunda-modeler-load-modeling-styles-linux-x64.tar.gz
• https://camunda-modeler-on-demand.s3.eu-central-1.amazonaws.com/load-modeling-styles/camunda-modeler-load-modeling-styles-mac.dmg
• https://camunda-modeler-on-demand.s3.eu-central-1.amazonaws.com/load-modeling-styles/camunda-modeler-load-modeling-styles-mac.zip
• https://camunda-modeler-on-demand.s3.eu-central-1.amazonaws.com/load-modeling-styles/camunda-modeler-load-modeling-styles-win-ia32.zip
• https://camunda-modeler-on-demand.s3.eu-central-1.amazonaws.com/load-modeling-styles/camunda-modeler-load-modeling-styles-win-x64.zip

Todo

• Build artifacts (is running...).
• Gather feedback from the team
• Consider test coverage?

[barmac]

I am wondering if we can automate this so that we don't need to update _modeling.less when a new stylesheet is added to any of camunda-xxxx-js packages. We know upfront that the file names like bpmn-js.css or diagram-js.css should be loaded only once, so perhaps we could filter them out with the webpack configuration. Thus, we could keep camunda-xxxx-js styles as a blackbox. WDYT?

[barmac]

BTW I like the idea of preloading styles in one place instead of lazy-loading with each of the editor tabs.

[pinussilvestrus]

I am wondering if we can automate this so that we don't need to update _modeling.less when a new stylesheet is added to any of camunda-xxxx-js packages. We know upfront that the file names like bpmn-js.css or diagram-js.css should be loaded only once, so perhaps we could filter them out with the webpack configuration. Thus, we could keep camunda-xxxx-js styles as a blackbox. WDYT?

I like this idea; let's try it out. It should be possible around the style-loader#insert configuration. Our used style-loader version is fairly outdated, so let's see how easy it is to make it configurable.

[pinussilvestrus]

Seems like it's a highly needed, but not yet supported feature to identify the generated <style> tags, e.g. to filter duplicates (cf. webpack-contrib/style-loader#216 (comment)).

There might be a workaround though.

[barmac]

IMO the workaround looks more complicated than our workaround. Let's merge this as is.

[pinussilvestrus]

There might be other options using postcss: webpack-contrib/css-loader#1233. But I agree; let's keep things simple for now. If we see the necessity, let's get back to it.