How to use rtl-css-js - 8 common examples

To help you get started, we’ve selected a few rtl-css-js examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github milesj / aesthetic / packages / core / src / Ruleset.ts View on Github external
toObject(): Block {
    const props = isRTL(this.root.options.dir) ? convertRTL(this.properties) : this.properties;
    const compounds: { [key: string]: unknown } = {};

    // Compound properties are a list of rulesets that have already been cast to block objects.
    // We shouldn't convert to RTL, otherwise it would flip back to the original state.
    this.compoundProperties.forEach((compound, key) => {
      compounds[key] = compound;
    });

    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
    return {
      ...props,
      ...compounds,
      ...toObjectRecursive(this.nested),
    } as Block;
  }
}
github milesj / aesthetic / packages / core / src / testing.ts View on Github external
const props: UnknownObject = {};
  const nested: UnknownObject = {};

  Object.keys(value).forEach(key => {
    const prop = value[key];

    if (isObject(prop) || Array.isArray(prop)) {
      nested[key] = convertDirection(prop as UnknownObject, dir);
    } else {
      props[key] = prop;
    }
  });

  return {
    ...convertRTL(props),
    ...nested,
  };
}
github airbnb / react-with-styles-interface-aphrodite / src / utils / generateDirectionalStyles.js View on Github external
export default function generateDirectionalStyles(originalStyles) {
  const directionalStyles = separateDirectionalStyles(originalStyles, rtlCSSJS(originalStyles));
  if (!directionalStyles) return null;

  const { sharedStyles, ltrStyles, rtlStyles } = directionalStyles;
  return {
    ...sharedStyles,
    [LTR_SELECTOR]: ltrStyles,
    [RTL_SELECTOR]: rtlStyles,
  };
}
github OfficeDev / office-ui-fabric-react / packages / styling / src / glamorExports.ts View on Github external
({ selector, style }: IGlamorRulePair): IGlamorRulePair => (
      {
        selector,
        style: getRTL() ? rtlify(style) : style
      }
    ));
}
github airbnb / react-with-styles-interface-aphrodite / src / aphroditeInterfaceFactory.js View on Github external
entries(styleHash).forEach(([styleKey, styleDef]) => {
      styleHashRTL[styleKey] = rtlCSSJS(styleDef);
    });
github airbnb / react-with-styles-interface-aphrodite / src / utils / resolveRTL.js View on Github external
export default function resolveRTL(css, styles) {
  const flattenedStyles = flat(styles, Infinity);

  const {
    aphroditeStyles,
    hasInlineStyles,
    inlineStyles,
  } = separateStyles(flattenedStyles);

  const result = {};
  if (aphroditeStyles.length > 0) {
    result.className = css(...aphroditeStyles);
  }

  if (hasInlineStyles) {
    result.style = rtlCSSJS(inlineStyles);
  }

  return result;
}
github ShadOoW / web-starter-kit / src / utils / css-direction.js View on Github external
const proccess = (props) => {
  const filtered = filterProps(props);

  return {
    '[dir="ltr"] &': {
      ...filtered,
    },
    '[dir="rtl"] &': {
      ...rtlCSSJS(filtered),
    },
  };
};
github robinweser / fela / packages / fela-plugin-rtl / src / index.js View on Github external
return (
    style: Object,
    type: StyleType,
    renderer: DOMRenderer,
    props: Object
  ) => {
    if (props && props.theme && props.theme.direction === 'ltr') {
      return style
    }

    return transformStyle(style)
  }
}

rtl-css-js

Right To Left conversion for CSS in JS objects

MIT
Latest version published 1 year ago

Package Health Score

70 / 100
Full package analysis

Popular rtl-css-js functions