CSS attribute selectors in media queries

[redbar0n]

In styled-components, you can use CSS attribute selectors in media queries, like in regular CSS:

@media screen and (min-width: 1024px){
  #componentId[data-responsive=“true”] {
    padding-top: 100px;
    background-color: red;
  }
}

Is this possible in rs-css?

[Sharcoux]

Well, we could hack a way to make this possible, but that would impact perfs, and I don't see why you would need this. Why not just putting the media-query in the component denoted by "ComponentId"

[redbar0n]

It's a long story. Just to clarify first: Will rn-css output all component styles to a className prop, like styled-component does, when used on web? (context: React Native for Web)

[Sharcoux]

Your question makes sense for web but not so much for native... The thing that you could do is creating an high order component that would map the components to their ids or to a className, and use a context to keep it accessible to the descending components. That's how I would implement it in rn-css if I had too, but I don't think that it should be done as it would mean that you have to create your descending component using rn-css, and from what you say, this seems impossible.
So, asked like that, the answer is "it's impossible" because of the way react native handles style. Now if you more details, we can probably find a workaround.

[redbar0n]

Ah, I see now that rn-css uses the RNW style prop to pass styles to components. That's good! I was worried about RNW's deprecation of using the className prop in favor of using "a data-* attribute and target that with your CSS", which I was attempting to do above. I worried it would affect this library, as it does if you use styled-components to generate the media queries for web. I was just a bit confused about this library's similarity with styled-components. Luckily rn-css doesn't carry the same limitation!

(Sidenote maybe useful for someone's future reference: Why not set data-* attributes with attr, which is supported in rn-css or styled-components? Because RNW as of Jun 2020 also no longer supports forwarding of data-* attributes not explicitly set with the dataSet prop. So using attr in rn-css or styled-components for setting CSS attributes wouldn't work anyway. It's dataSet all the way. If you follow my initial example it would be <View id="componentId" dataSet={{ responsive: "true" }} />, in case the CSS couldn't be targeted directly to the component, as in the className case. Luckily, it is not needed in rn-css since it uses the style prop to directly target CSS to components.)

[Sharcoux]

Well... I'm not 100% sure I understood your message but you seem happy, so I guess that I can close this thread? 🙂

[redbar0n]

Yes, hehe. :) No need for me at this time. You could always reopen it if someone needs it later.