Add support for "Prose" plugin

[justinrassier]

The prose plugin for Tailwind provides some nice opinionated ways to style blocks of text. Adding support would be super useful for anyone who may want to use it with their elm-pages static sites or something with markdown.

https://www.npmjs.com/package/css-selector-parser may be necessary to parse the advanced selectors

[matheus23]

Here's an idea as to how elm-css code should be generated for some parts of the .prose plugin.

This input example:

.prose{
  color: #4a5568;
  max-width: 65ch;
}

.prose [class~="lead"]{
  color: #4a5568;
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}

.prose a{
  color: #1a202c;
  text-decoration: none;
  font-weight: 600;
}

.prose strong{
  color: #1a202c;
  font-weight: 600;
}

.prose ol{
  counter-reset: list-counter;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose ol > li{
  position: relative;
  counter-increment: list-counter;
  padding-left: 1.75em;
}

Should generate a function:

import Css
import Css.Style

prose : Css.Style
prose =
    Debug.todo ""

Adding prose : Css.Style to an html element should then add a generated class (something like _61e600f9), so that it's not a global selector.
The CSS added to the DOM should then look like this:

._61e600f9{
  color: #4a5568;
  max-width: 65ch;
}

._61e600f9 [class~="lead"]{
  color: #4a5568;
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}

._61e600f9 a{
  color: #1a202c;
  text-decoration: none;
  font-weight: 600;
}

._61e600f9 strong{
  color: #1a202c;
  font-weight: 600;
}

._61e600f9 ol{
  counter-reset: list-counter;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

._61e600f9 ol > li{
  position: relative;
  counter-increment: list-counter;
  padding-left: 1.75em;
}

I feel like this is not possible with elm-css at the moment. It would be possible to produce a 'global' stylesheet to include and a value like prose = class "prose", but I'm not sure that'd be satisfying. It wouldn't play well with elm's --optimize, too, as it wouldn't purge the prose css, if unused.

I'm not really knowledgeable when it comes to elm-css. Let me know if I've missed something and it's actually possible!

[justinrassier]

@matheus23 Since the class names are auto-generated, it does add a bit of complexity. Just like how I handled the space-x type helpers, we could parse the "advanced selector" (the part after the Tailwind class name) and be able handle all the child, sibling, element, etc, selectors with native elm-css. The library linked to in the issue description looks promising. I already pull out that selector string, if we just used that library to help parse things, we should have a workable solution.

[matheus23]

Hmm. There's not that much parsing to be done, though, is it?
Most of the selector string can just be put into the selector function from elm-css, right?

[justinrassier]

Correct. It's really just being able to get the right initial Css.Global Combinator (or similar function) that comes after the class name definition. After that first one, the rest can use the generic selector.

This is because selector returns you a Snippet and the only way I can see to get a Snippet into a Style is one of those combinators, to which there doesn't seem to be a nice generic one.

So

.prose a{

would need the descendants combinator which then I could just use selector for the a type selector

.prose [class~="lead"]{

Would need the withAttribute function. No combinator here, but still need to parse out what comes after the class name so I know to use the withAttribute.

[matheus23]

Ah right! Yep. Makes sense.