alitaheri / jss-rtl

Flip styles using rtl-css-js
MIT License
83 stars 5 forks source link

Add support for multiple font-face rules #3

Closed dastoori closed 6 years ago

dastoori commented 6 years ago

Multiple font faces syntax uses an array instead of object but rtl-css-js doesn't know that and it converts the array to an object.

Example:

import { create } from 'jss';
import preset from 'jss-preset-default';
import rtl from 'jss-rtl';

const jss = create({ plugins: [...preset().plugins, rtl()] });

const styles = {
  '@global': {
    '@font-face': [
      {
        fontFamily: 'Vazir',
        fontStyle: 'normal',
        fontWieght: 'normal',
        src: 'url(https://cdn.rawgit.com/rastikerdar/vazir-font/61a73a5c/dist/Vazir.woff2) format("woff2")',
      },
      {
        fontFamily: 'Vazir',
        fontStyle: 'normal',
        fontWieght: 300,
        src: 'url(https://cdn.rawgit.com/rastikerdar/vazir-font/61a73a5c/dist/Vazir-Light.woff2) format("woff2")',
      },
    ]
  }
}

console.log(
  jss.createStyleSheet(styles).toString()
);
/*
@font-face {
  0: [object Object];
  1: [object Object];
}

---
it should be this instead:

@font-face {
  font-family: Vazir;
  font-style: normal;
  font-weight: nomal;
  src: url(https://cdn.rawgit.com/rastikerdar/vazir-font/61a73a5c/dist/Vazir.woff2) format("woff2");
}
@font-face {
  font-family: Vazir;
  font-style: normal;
  font-weight: 300;
  src: url(https://cdn.rawgit.com/rastikerdar/vazir-font/61a73a5c/dist/Vazir-Light.woff2) format("woff2");
}
*/