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

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;
  }
}

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

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

({ selector, style }: IGlamorRulePair): IGlamorRulePair => (
      {
        selector,
        style: getRTL() ? rtlify(style) : style
      }
    ));
}

entries(styleHash).forEach(([styleKey, styleDef]) => {
      styleHashRTL[styleKey] = rtlCSSJS(styleDef);
    });

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;
}

const proccess = (props) => {
  const filtered = filterProps(props);

  return {
    '[dir="ltr"] &': {
      ...filtered,
    },
    '[dir="rtl"] &': {
      ...rtlCSSJS(filtered),
    },
  };
};

return (
    style: Object,
    type: StyleType,
    renderer: DOMRenderer,
    props: Object
  ) => {
    if (props && props.theme && props.theme.direction === 'ltr') {
      return style
    }

    return transformStyle(style)
  }
}