Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to select tags in a stylesheet #237

Open
leleogere opened this issue May 17, 2022 · 1 comment
Open

How to select tags in a stylesheet #237

leleogere opened this issue May 17, 2022 · 1 comment

Comments

@leleogere
Copy link

leleogere commented May 17, 2022

I might be missing something, but I can't figure out how to select tags (not classes) in a stylesheet.

I managed to get that working for classes:

object Style extends StyleSheet {
  initStyleSheet()
  val date = cls(color := "red")
}

val document = html(
  head(
    scalatags.Text.tags2.style(Style.styleSheetText)
  ),
  h1("Report"),
  h2(Style.date)("2022-05-17")
)

But how do I select the h1 tag for example? How do I generate something like the following in the stylesheet generated by my Style object?

h1 {
  color: blue;
}

I feel like I'm missing something very obvious but I can't find anything working.

@seoethereal
Copy link
Contributor

seoethereal commented May 23, 2022

I do not think it is possible to select or generate tags with custom stylesheets as the intention is to either pass them yourselves inline (e.g. h1(color := "red")("My Title")) or to make stylesheets as prescribed via extending StyleSheet or CascadingStyleSheet. The closest you can do, I think, is to make a list of CSS modifiers that you want to include and then pass them directly into the tag itself.

/* Things I want to apply to `h1` tags. Can just be a plain value; I only created a companion object for
 * demonstration purposes.
 */
object StyleForH1TagsOnly:
  val css = List(
    color := "blue",
    backgroundColor := "green"
  )

/* Apply the styles to the tag using the spread operator. */
...
h1(StyleForH1TagsOnly.css*)("My custom title")
...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants