Nested selectors with RTL

[AlinCiocan]

Hi,

It seems there is an issue with nested selectors. For example:

label: {  
 display: 'none',  
},  
active: {  
 color: 'red',  
 '& $label': {  // <-- here nested selector
  display: 'inline',  
 }  
}  

Expected behavior: As in the example above, the label should not be visible, unless it's parent is activeand you would expect to have the following code generate: [dir] .active .label { display: 'inline'; }

Actual behavior: Unfortunately it adds an extra [dir] which makes the selector invalid:

[dir] .active [dir] .label { display: 'inline'; }

The label does not have another parent with [dir] attribute.

Workaround: To not use a nested class, but a tag:

label: {  
 display: 'none',  
},  
active: {  
 color: 'red',  
 '& span: {  // <-- here is the tag and now will not be added the extra [dir] in selector
  display: 'inline',  
 }  
}  

[alitaheri]

@AlinCiocan does it only happen with jss-rtl added to the plugins? this is very weird, the logic of the code is very simple I don't understand where it could have gone wrong.

Can you provide a simple and small code that reproduces this? From what I can see, each key is getting a [dir] beside it. have you in anyway overridden the generateId or the createGenerateClassName from material-ui?

[AlinCiocan]

@alitaheri You were right. Thanks!

I was adding myself the extra [dir] for all rules.

You can safely close the ticket. Many thanks again.

const customRtlPlugin = {
  onProcessRule: (rule) => {
    if (rule.type !== 'style') {
      return;
    }

    const { selectorText } = rule;
    /* eslint-disable no-param-reassign */
      rule.selectorText = selectorText.indexOf('[dir]') >= 0 ? selectorText : `[dir] ${selectorText}`;
  },
};
// Configure JSS
const jss = create({
  plugins: [
    customRtlPlugin,
    ...jssPreset().plugins,
    rtl(),
  ],
});