Ligature fonts for atom

styles.less

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;
  }
  .source.js.jsx > .keyword.control.flow.js,
  .storage, .type .function {
    vertical-align: baseline;
    font-family: 'flottflott';
    height: inherit;
    font-size: 1.5em;
    line-height: 1rem;
  }
  .source.js.jsx,
  .storage.type.function.arrow.js,
  .variable {
    font-family: 'Fira Code';
    font-style: normal;
  }
  .string.unquoted.js {
    color: #CDD3DE;
  }
  .entity.name {
    font-weight: bold;
  }
}

This is my version after trying to make it dynamic to other font-size, and make arrow function size to normal.

@fontsize: 16px;

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;
  }
  .source.js.jsx > .keyword.control.flow.js,
  .storage, .type .function {
    vertical-align: baseline;
    font-family: 'flottflott';
    height: inherit;
    font-size: 1.5 * @fontsize;
    line-height: @fontsize;
  }
  .source.js.jsx,
  .storage.type.function.arrow.js,
  .indent-guide,
  .variable {
    font-family: 'Fira Code';
    font-style: normal;
    font-size: @fontsize;
    line-height: 1.5 * @fontsize;
  }
  .string.unquoted.js {
    color: #CDD3DE;
  }
  .entity.name {
    font-weight: bold;
  }
}