Question about 'styles at a distance' and prose

[zaydek]

Hi, I usually use StyleX for everything but I found there was this one specific case I couldn't seem to use StyleX so I reverted to plain CSS. Here is the code in question:

[data-prose] {
  color: white;
  font-size: 15px;
  line-height: 1.5;
}
[data-prose] > *:first-child {
  margin-block-start: 0 !important;
}
[data-prose] :is(h1, h2, h3, h4, h5, h6) {
  font-weight: 700;
  line-height: 1.25;
  margin-block-start: 2rem;
  position: relative;
  scroll-margin-block-start: 2rem;
}
[data-prose] :is(h1, h2, h3, h4, h5, h6) a[href] {
  opacity: 0;
  color: blue;
  inset-block-start: 0;
  inset-inline-end: 100%;
  padding-inline-end: 0.5ch;
  position: absolute;
  text-decoration: none;
}
[data-prose] :is(h1, h2, h3, h4, h5, h6):hover a[href] {
  opacity: 1;
}

[data-prose] h1 {
  font-size: 1.5rem;
}
[data-prose] h2 {
  font-size: 1.375rem;
}
[data-prose] h3 {
  font-size: 1.25rem;
}
[data-prose] h4 {
  font-size: 1.125rem;
}
[data-prose] h5 {
  font-size: 1rem;
}
[data-prose] h6 {
  font-size: 0.875rem;
}
[data-prose] p {
  margin-block-start: 1rem;
}
[data-prose] ul {
  list-style-type: disc;
  padding-inline-start: 1rem;
}
[data-prose] ol {
  padding-inline-start: 1rem;
}
[data-prose] li {
  margin-block: 0.5em;
}
[data-prose] pre {
  background-color: color-mix(in hsl, transparent, white 10%);
  font-family: "Consolas", monospace;
  font-size: 0.875rem;
  margin-block: 1rem;
  padding: 16px;
}
[data-prose] code:not(pre code) {
  background-color: color-mix(in hsl, transparent, white 10%);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px color-mix(in hsl, transparent, white 25%);
  font-family: "Consolas", monospace;
  font-size: 0.875rem;
  padding: 4px;
}

Which is being used as a side effect by the following:

<div data-prose>
  <ReactMarkdown
    components={{
      h1: ({ node, ...props }) => <AnyHeader {...props} node={node} type="h1" />,
      h2: ({ node, ...props }) => <AnyHeader {...props} node={node} type="h2" />,
      h3: ({ node, ...props }) => <AnyHeader {...props} node={node} type="h3" />,
      h4: ({ node, ...props }) => <AnyHeader {...props} node={node} type="h4" />,
      h5: ({ node, ...props }) => <AnyHeader {...props} node={node} type="h5" />,
      h6: ({ node, ...props }) => <AnyHeader {...props} node={node} type="h6" />,
    }}
  >
    {markdown}
  </ReactMarkdown>
</div>

What I don't understand is how to implement the following pattern using StyleX if possible:

[data-prose] > *:first-child { ...
[data-prose] code:not(pre code) { ...

Because I am deferring to <ReactMarkdown>, it's not obvious to me how to programmatically disable the first margin-block-start or how to prevent <code> from being duplicately styled by the <pre> container.

Am I missing something or is this a legitimate use case for when not to reach for StyleX?

[zaydek]

I'm not sure it's desirable but I'm pretty sure I could make it work if I used some wrapper contexts to detect the presence or non-presence of a container. 🤔

[Jta26]

Sorry if this is oversimplifying your problem here, but to me it seems like you just need to include :first-child as a pseudo-class style in the components that are rendering the markdown blocks like

const styles = stylex.create({
 first: {
    marginBlockStart: {
      ':first-child': 0,
       default: 'unset',
    },
 },
});

This isn't optimal for css size because it adds the selector to the stylesheet, but if it's used frequently (like in markdown) I think it's the optimal solution here in terms of staying within StyleX.

the code tag would also have something similar.

Are components passed to ReactMarkdown going to be used elsewhere where they need to strictly be applied when they are a child of data-prose? In this case I think the best is to contextually apply the style.

[zaydek]

Oh. I thought I tried that. I think at the time I was playing with :first-of-type and couldn't get it to work. Must have been an oversight on my part. Thanks for the correction, this is ideal.

In general does the placement of :first-child before or after default make any functional difference? Out of practice, I always do default first but now I'm curious if there's some other thing I should be aware of.

Thanks, Joel!

[zaydek]

Oh I see the mistake now, I was able to reproduce it.

    ...
    marginBlockStart: {
      default: "2rem",
      ":first-child": null,
    },
    ...

For some reason I thought null would erase the property, thus nullifying margin-block-start completely, but apparently not. If I didn't want to be property-specific, can I put undefined or initial or unset or something always reliably?

[Jta26]

In general does the placement of :first-child before or after default make any functional difference?

It should make no difference because they are objects, but if you have multiple of the same style properties, the last applied style should always win*.

*in most cases, css specificity :|

[Jta26]

For some reason I thought null would erase the property

I think for this there is a setting for StyleX that can do this behavior, but we turn it off because having null properties bloats JS size

[nmn]

Out of practice, I always do default first

This is ideal IMO. We are just fighting with how the eslint sort-keys rule works!

---

Looking at the whole problem generally it looks like most of the problem is solved. But also, when it makes sense, it's ok to use a CSS file.

[zaydek]

In case anyone stumbles onto this, this is what I ended up doing. I don't like writing CSS like this but it seemed to solve the problem the most elegantly. This is in context to MDX.

import stylex from "@stylexjs/stylex";
import React from "react";
import { Sx } from "../../../styles/sx";
import { Theme } from "../../../styles/tokens/theme.stylex";
import { dedent } from "../../../utils/dedent";
import { Contributes } from "./contributes";

// TODO: Probably use the line-height pattern here
const styles = stylex.create({
  wrapper: {
    color: "white",
    fontSize: Theme.BASE_FONT_SIZE_PX,
    lineHeight: 1.5,
  },
});

type WrapperProps = Sx.ComponentProps<"div">;
const Wrapper = Sx.createComponent<WrapperProps>("div", styles.wrapper);

export const contributes: Contributes = {
  wrapper: (props: React.ComponentProps<"div">) => (
    <Wrapper
      _nativeProps={{
        ...props,

        // @ts-expect-error
        "data-wrapper": true,
      }}
      _styles={styles.wrapper}
    >
      <style>
        {dedent(`
          :where([data-wrapper] > :not(style) + *) {
            margin-block-start: ${Theme.SpacingLg};
          }

          /* Heading */
          :where([data-wrapper] > :not(style) + :where(h1, h2, h3, h4, h5, h6)) {
            margin-block-start: ${Theme.SpacingXl};
            scroll-margin-block-start: ${Theme.SpacingXl};
          }
          /* List item */
          :where([data-wrapper] li) {
            margin-block: ${Theme.SpacingMd};
          }
          :where([data-wrapper] li:last-child) {
            margin-block-end: ${Theme.SpacingMdHalfStep};
          }
          /* Preformatted text */
          :where([data-wrapper] [data-pre]) {
            margin-block: ${Theme.SpacingLg};
          }
          /* Horizontal rule */
          :where([data-wrapper] > hr) {
            margin-block: ${Theme.SpacingXl};
          }
        `)}
      </style>
      {props.children}
    </Wrapper>
  ),
};

[nmn]

This is a great solution to this problem.