At the moment, the ProseMirror core implicitly inserts the CSS rules it needs into the document, and so do the ProseMirror plugins that need their own CSS rules. I initially made this decision because I had found that people would have trouble manually managing CSS dependencies (as separate files), especially when the corresponding scripts were being pulled in automatically by a module system.
But now that I’m moving to less magic across the board, this is starting to chafe. It is a somewhat unpredictable DOM side effect, doesn’t work very well with shadow DOM, and has caused several people issues (see here and here).
One option would be to just have a prosemirror.css file that you’re expected to load when you use the library. I’m moving all further UI code out of the core library, and don’t care all that much anymore if people have to load menubar.css when they include the example menubar implementation.
Do you know of any other options that would make this more smooth, without introducing scary magic or pulling in big, invasive dependencies?
I can just report that for me it was a non-trivial effort to find out where the CSS was defined and extract it into its own so I can import it (<link rel=…) explicitly, so my designer can fiddle with.
On the other hand, I’ve wasted time chasing bugs of a library, that I brought in as an ECMAScript 2015 module, due to missing CSS it was relying on. That particular library did not mention the CSS in their docs, and I’m sure you will. But the point is, both use cases are valid so you can keep both that would probably ideal from a user perspective: all CSS styles are somehow magically included via the modules, but one can also link to a CSS file that has them as well.
Finally, if I had to choose, I’d say a separate CSS file is perfectly fine, no a big burden if well documented in setup instructions. It’s also something that a serious app will need anyways.
Will it be possible to have some optional npm package that unifies everything that is needed? It would be nice to be able to manage dependencies only through one tool without having to update a CSS manually every now and then.
I’d like to piggyback onto this old-ish thread: now that required styles have been moved into a centralized prosemirror.css stylesheet, I’m curious about the rule-of-thumb for which styles belong here, vs. being included in some kind of “boilerplate” stylesheet.
Specifically: the current stylesheet includes some baseline styles for stuff like ul / ol / blockquote, which a particular ProseMirror instance might conceivably want to opt out of. This stylesheet also includes selection styles, and positioning, which seem genuinely “required” and unlikely to be extended by any given implementation.
This might be a picky CSS question, but: would it be possible to audit the styles included in that sheet, and only include those whose absence interferes with the functionality of corresponding code? e.g. it seems like certain selectors are intimately tied with the code in a way that others are not. One can obviously just override some of these non-essential styles, but it might be slightly cleaner if that weren’t necessary? e.g. if no “reset” was required?
In the future, prefer starting a new thread over adding something to an old, tangentially related thread.
I do agree that the list and blockquote styles don’t really belong in the base stylesheet. I’ve moved them into the example-setup styles instead (patch and patch).
)