Early dev stage, not ready to be used.
Styled-System-Direction
Provides a direction function to add direction (RTL/LTR) aware props to your component, in the same way you would use style-system functions like position or display.
npm i styled-system-directionTry It Out
Usage
import { flexbox, position } from 'styled-system';
import { direction } from 'styled-system-direction';
const Flex = styled.div`
display: flex;
${flexbox}
${position}
${direction}
`
function App() {
return (
// A parent should have dir prop,
// in a real app, you would add it to the html tag
<ParentComponent dir='rtl'>
<Flex
position="absolute"
dirRight={0}
dirBorderRight='1px solid red'
></Box>
</Flex>
);
};dirRight and dirBorderRight will create 2 css classes that will look like this:
[dir="ltr"] .dLtAKS {
right: 0px;
border-right: 1px solid red;
}
[dir="rtl"] .dLtAKS {
left: 0px;
border-left: 1px solid red;
}As you can see the css selectors targets the element dependending on the dir prop of the parent.
