Style Children Elements with Selector

[eduveks]

Describe the feature request

Hi there,

How can I apply styles in children's elements?

There is nothing about it in the documentation.

The situation is that I have many components with dynamic HTML content given by the API, and then I need to format them to a correct visualization.

Or if I have many paragraphs, how can I apply a style to all without assigning a pseudo-class to each one?

This project was in LESS working very well, and we want to give it a shot to see how StyleX works.

I tried many things, but here is what I think maybe has more logic:

const styles = stylex.create({
  container: {
    position: 'absolute',
    height: '100px',
    '> p': {
      marginBottom: {
        default: '1.2em',
        '@media only screen and (max-width: 768px)': '1em'
      }
    }
  },

Anything I try raises the error: Invalid pseudo or at-rule.

Thanks a lot.

[nedjulius]

I think this is a duplicate of #373

based on the issue above (and the docs), this selector is not supported and there are no plans to support it in the future.

[eduveks]

This is very basic, and shockingly, the limitation is impossible to support even in the future.

It is a killer limitation because it is very useful to style inner elements, even more so with dynamic content.

As the example in the #373:

.parent .child {
  background-color: blue;
}

Very, very necessary! I hope this feature can be done. 🙏

[eduveks]

To be more clear, how to style the inner content like this:

<div dangerouslySetInnerHTML={{__html: content}}></div>

Based on the (encapsulation documentation)[https://stylexjs.com/docs/learn/thinking-in-stylex/#encapsulation]:

• "styles fragile"
• "less predictable"

But we have some situations where it is very useful and necessary.

We clearly need a hack or workaround for a complex StyleX project in real life because it is a very common situation.

[shawngustaw]

You can style children using a bit of a hack by setting a css var on an element and consuming it in the child:

# vars.stylex.ts
import * as stylex from '@stylexjs/stylex';

export const vars = stylex.defineVars({
  opacity: '1',
});

export const styles = stylex.create({
  parent: {
    [vars.opacity]: {
      default: '1',
      ':active': '0.6',
    },
  },
  child: {
    opacity: vars.opacity,
  },
});

export const ChildrenOpacityOnPress = () => (
  <button {...stylex.props(styles.parent)}>
    <span {...stylex.props(styles.child)>click</span>
  </button>
)

[ShaneYu]

This works well when you are creating base only styles for a component with child components. But when you throw in variant styles that need to affect the child components too, you're screwed.

From what I can tell it's almost impossible to support doing this and is a deal breaker when you think about how 90% of component/design-system libraries out there build their components.

For example:

<Alert variant="danger">
  <AlertHeading>Oh dear</AlertHeading>
  <AlertDescription>This isn't supported by StyleX!</AlertDescription>
</Alert>

Where you would want to apply styles.container to the Alert component, styles.heading to the AlertHeading component and styles.description to the AlertDescription component.

The danger variant passed in should then apply the variant styles to each of these components but you cannot have nested component names under a variant name within the create styles method; bit of a bummer.

What you can do though is create an entirely new styles object specifically for a single variant and use that. It just means you now need a styles object per variant you want to support and then have to switch between them all with some code in your component; not as simple as just doing say ...stylex.props(styles.container, variantStyles[variant].container) 😢

I used a context in the end to share what variant was used on the container component for the heading and description components to know what variant styles to include etc.

[eduveks]

@shawngustaw, many thanks for the suggestion, but it is not applicable.

The situation is when you can't assign directly the child style because it is content injected dynamically; the child is not a React element.

To be more precise is like, imagine the content is dynamic and comes from an API; then the simplification:

const content = '<p>blah 1</p><p>blah 2</p><p>blah 3</p>';
return <div {...stylex.props(styles.parent)} dangerouslySetInnerHTML={{__html: content}}></div>;

How in StyleX can we apply some style in the paragraphs!?

Or, in other situations, we have a component with 100 or more paragraphs, like the texts in Terms and Conditions, Privacy Policy, etc... why need to apply the style to each paragraph when in pure CSS/LESS/SASS/SCSS, we can style all paragraphs at once without code repetition...

I think there are so many cases where StyleX applies a giant limitation to real-life scenarios if it has no hack to work around these needs.

And it is very strange to me to see this renomable project not supporting this basic feature.

I do not see how, in an important project, we can live without styling the children at once.

[necolas]

We explain why in great detail in the documentation, as StyleX does not allow patterns that can break component style encapsulation. This is a fundamental feature - missing in almost every other styling library - that has become essential for Meta's web apps to remain performant and maintainable. When we have HTML content generated or provided by other systems, those systems must provide a way to add attributes to the HTML elements so that libraries like StyleX can add styles, accessibility props, logging attributes, etc. For example, Lexical has an API for doing this, so a rich text editor can be styled with StyleX. If your system doesn't support this, you won't be able to style the elements with StyleX and can continue to use whatever CSS/LESS/SASS/SCSS setup you've been using to set styles on an element that wraps all that content.

[derekjwilliams]

I know that this is an old thread, but I'm super intrigued by what you said about StyleX with Lexical. We are using StyleX, and loving it; we just started implementing Lexical (also awesome). Does Meta have any examples of using the Lexical API along with StyleX? That is the direction that we would like to go, but don't have a good starting point for doing so.

Thanks so much

[eduveks]

Many thanks @necolas! So, in some cases, we cannot use StyleX for everything, but a mix with CSS/LESS/SASS/SCSS is a way to go...

I was convinced that it is better to focus on using only pure StyleX without another approach.

But yes, we can mix techs; it is not the perfect way, but it is like a hack to work around in extreme conditions.

Anyway, thank you again for your enlightenment over this.

[nmn]

StyleX is for component styling. If you're styling arbitrary content where you cannot set classes, use CSS/LESS/SASS/SCSS. This is by design.

As long as you're not applying both kind of styles on the same HTML elements, you'll be fine.

[ZhuHuaijun]

I have tried :not() pseudo-classes. It worked. @eduveks

const styles = stylex.create({
  container: {
    position: 'absolute',
    height: '100px',
    ':not(#__unused__) > p': {
      marginBottom: {
        default: '1.2em',
        '@media only screen and (max-width: 768px)': '1em'
      }
    }
  }

[nmn]

this is a known escape hatch for now while we implement a first-class API. Feel free to use it in the mean time.

[piotrblasiak]

this is a known escape hatch for now while we implement a first-class API. Feel free to use it in the mean time.

Does this mean you have changed your mind and child selection will be possible?

[nmn]

No it will never be possible in this form. You won't be able to style children from the parent. But we will look into allowing conditional styling by reading the state of the parent from the child. It's a subtle, but important difference that eliminates "styling at a distance".