Atom stylesheet with ligatures - JS/JSX

js-jsx.png

styles.less

// Requirements:
//    language-babel: https://atom.io/packages/language-babel
//    Fira Code: https://github.com/tonsky/FiraCode
//    FlottFlott: http://www.dafont.com/flottflott.font

atom-text-editor {
  font-family: 'Fira Code';
  font-style: normal;
  text-rendering: optimizeLegibility;
}
atom-text-editor::shadow {
  .string.quoted,
  .string.regexp {
    -webkit-font-feature-settings: "liga" off, "calt" off;
  }
  .string.unquoted {
    color: #CDD3DE;
  }
  .entity.name {
    font-weight: bold;
  }
  .source.js.jsx {
    .keyword.control.flow.js,
    .keyword.control.js,
    .variable.language.this,
    .entity.other.attribute-name,
    .storage,
    .type.function {
      vertical-align: baseline;
      font-family: 'flottflott';
      height: inherit;
      font-size: 1.5em;
      line-height: 1rem;
    }

    .storage.type.function.arrow.js,
    .variable {
      font-family: 'Fira Code';
      font-style: normal;
    }
  }
}

I believe they are removing the shadow DOM so the selectors will change