parent selector reference not working with registerRule

[Arpad Borsos]

The readme explicitly states that registerRule does not support interpolation.
Is that what is meant by that? If so then just ignore this issue :-) I will have to find a local workaround for this anyway.

[Blake Embrey]

Yes, that's what it means. Interpolation is with the & sign.

[Arpad Borsos]

Oh, its not only the interpolation with & that does not work. Any kind of nested element won’t work.

[Blake Embrey]

The structure is literal. What are you trying to do? It doesn't sound like whatever your doing is what I had in mind 😄

[Arpad Borsos]

My usecase is to override the styles I have created with registerStyle. I save a mapping internally to the className and want to reuse that using registerRule. So anything I use with registerStyle should also work with registerRule.

[Blake Embrey]

Can you share an example? That's definitely not an intended use-case. I don't know that it actually makes sense to try enabling interpolation for registerRule, it makes things quite complex. For example, I would then have to understand CSS structure to make sure keys aren't interpolated inside keyframes and other CSS rules.

[Arpad Borsos]

So this definition:

style.registerRule('body', {
    height: '100%',
    a: {
        color: 'red',
    },
});

leads to the following generated css:

body{height:100%a{color:red}}

which is clearly wrong.

I think the problem here is that you are using the same function for three different usecases as stated in the readme:

• @rules with nesting (@media) has nested rules/selectors not separated by semicolons
• @rules without nesting (@font-face) has properties with no nesting but separated by semicolons
• generic selectors such as body should essentially work the same as registerStyle. with nested rules/selectors, interpolation and normal semicolon separated properties.

[Blake Embrey]

Feel free to submit a PR, but you're using it for something that is completely unsupported - seems expected to me. Use CSS selectors and don't rely on interpolation which it does say isn't supported.

[Blake Embrey]

I think the problem here is that you are using the same function for three different usecases as stated in the readme

I don't understand this, sorry. What do you mean the same function?

[Blake Embrey]

You mean https://github.com/blakeembrey/free-style#rules? Those are all rules, not a combination of rules like you're trying to do. According to how CSS rules are structured, they all happen to be valid, so I understand what you're talking about. However, you'll need to make a PR if you want an interpolation version. I decided not to support that as it was unnecessary code for something that would be deterministic in your own code anyway.

[Blake Embrey]

By the way, feel free to continue the discussion to come to a reasonable solution - especially if you think not supporting it is unreasonable. The logical reason to support interpolation in registerStyle is that the hash is not deterministic for you so it's required if you wish to nest styles. However, with registerRule, nothing is calculated so you should be able to do without interpolation (as a result, I also don't need to be doing hash calculations, etc).

[Arpad Borsos]

Thanks for explaining the reasoning here. I already have a dirty workaround in place that more or less does the interpolation I need, which is good enough for now.

[Blake Embrey]

What I could also do is throw an error if you're using both style format and nested style format when using registerRule, that may help if people trying to do the same thing here.

[Arpad Borsos]

Yes, a warning would help avoid this pitfall.