alitaheri / jss-rtl Goto Github PK
View Code? Open in Web Editor NEWFlip styles using rtl-css-js
License: MIT License
Flip styles using rtl-css-js
License: MIT License
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:
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?
if we use some special key instead of flip
is better. for example: __flip__
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.
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,
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'```
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.
Can I disable and enable the plugin dynamically? I tried this command but it didn't work.
jss.use(rtl({ enabled: false }));
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 active
and 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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.