alitaheri / jss-rtl Goto Github PK

JSS is working on a v10 version. It's still in the alpha state. It would be great to prepare the support for this version. I doubt there is a lot to do. cc @kof.

It has been working great so far with JSS v10-alpha on the Material-UI documentation.

Hi

My webapp is fully RTL so I don't need to flip my styles, I just need mui's own components to flip. I'm using jss.use(rtl({ opt: 'in' })); as mentioned in docs. But that makes no difference and flipping persists.

A JavaScript delete operator is used here
this operator is super slow specially in V8 engine and it has just recently improved a little (take look here).
This creates a serious performance bottleneck for large applications with hundreds of classes and styles.
I'd be happy to contribute if you please explain the reason of deleteing the flip property.
Can we simply assign undefined to it? using lodash.omit is also another option. Also I think there is a isProcessed property on the rule parameter. Can we use it if delete is only for preventing duplicate flip?

Expected behavior:

The rtl plugin should switch the styles.

Describe the bug:

The rtl plugin doesn't switch all the styles.

const useStyles = createUseStyles({
  myButton1: {
    paddingLeft: "16px" ✅
  },
  myButton2: {
    paddingRight: ({ isMobile }) => (isMobile ? 0 : "26px") ❌
  },
  myLabel: props => ({
    paddingRight: "8px" ✅
  })
});

Codesandbox link:

https://codesandbox.io/s/react-jss-playground-37lqs

I use Material-UI and Jss. For rtl support I use jss-rtl. My problem is that sometimes I want some part of ui to be left-to-right (i.e. email input box) in this case I set the direction of the input to ltr but the jss-rtl convert it to 'rtl' so I have to opt out of it by flip: false as follow:

emailInput: {
  flip: false,
  direction: 'ltr',
}

I workaround it this way, but I want to know what is the use case of this conversion? I thought that it might be a bug.

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',  
 }  
}  

If I use a theme like this

const darkTheme = createMuiTheme({
    palette: {
        type: "dark"
    }
})

I followed Material UI steps to switch to RTL and it switches successfully in light theme type, but fails in dark theme type

Can I disable and enable the plugin dynamically? I tried this command but it didn't work.

jss.use(rtl({ enabled: false }));

Hi,

on line 31 of ./lib/main.js there seems to be a problem with a sourceMap url

...
            }
            var flip = opt === 'out'; // If it's set to opt-out, then it should flip by default
            if (typeof sheet.options.flip === 'boolean') {
                flip = sheet.options.flip;
            }
            if (typeof style.flip === 'boolean') {
                flip = style.flip;
                delete style.flip;
            }
            if (!flip) {
                return style;
            }
            return convert(style);
        },
    };
}
exports.default = jssRTL;
//# sourceMappingURL=main.js.map <----- 

when running this through source-map-loader I get the following error:

(Emitted value instead of an instance of Error) Cannot find source file '../src/main.ts': Error: Can't resolve '../src/main.ts' in '/Users/anonymous/workspace/sylc/webapp/node_modules/jss-rtl/lib'
NonErrorEmittedError: (Emitted value instead of an instance of Error) Cannot find source file '../src/main.ts': Error: Can't resolve '../src/main.ts' in '/Users/anonymous/workspace/sylc/webapp/node_modules/jss-rtl/lib'```

if we use some special key instead of flip is better. for example: __flip__

Dear Ali,

Unfortunately, jss-rtl not working on material v4 take a look at this

on this case margin-left should be change to margin-right

sample is here