omacranger / fontawesome-subset

Creates subsets of FontAwesome fonts for optimized use on the web.
GNU General Public License v3.0
66 stars 15 forks source link

a code for generating all.css #14

Closed roeycohen closed 2 years ago

roeycohen commented 2 years ago

hoping that this will save time to the one after me, here's my code for generating the all.css files only with the necessary stuff like font-awsome subsetter app does :)

//sets is the same as the object you pass to fontawesomeSubset

const all_icons = Object.values(sets).flat(1);

const vars = fs.readFileSync('node_modules/@fortawesome/fontawesome-pro/scss/_variables.scss', 'utf8').split('\n')
    .filter(l => l.startsWith('$fa-var-'))
    .map(l => l.match(/\$fa-var-([^:]+): \\([^:]+);/).slice(1, 3)); //[ico, code]

const css = [];
css.push(`/*!
 * Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license (Commercial License)
 */
.fa, .fab, .fad, .fal, .far, .fas {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1
}

.fa-lg {
    font-size: 1.33333em;
    line-height: .75em;
    vertical-align: -.0667em
}

.fa-xs {
    font-size: .75em
}

.fa-sm {
    font-size: .875em
}

.fa-1x {
    font-size: 1em
}

.fa-2x {
    font-size: 2em
}

.fa-3x {
    font-size: 3em
}

.fa-4x {
    font-size: 4em
}

.fa-5x {
    font-size: 5em
}

.fa-6x {
    font-size: 6em
}

.fa-7x {
    font-size: 7em
}

.fa-8x {
    font-size: 8em
}

.fa-9x {
    font-size: 9em
}

.fa-10x {
    font-size: 10em
}

.fa-fw {
    text-align: center;
    width: 1.25em
}

.fa-ul {
    list-style-type: none;
    margin-left: 2.5em;
    padding-left: 0
}

.fa-ul > li {
    position: relative
}

.fa-li {
    left: -2em;
    position: absolute;
    text-align: center;
    width: 2em;
    line-height: inherit
}

.fa-border {
    border: .08em solid #eee;
    border-radius: .1em;
    padding: .2em .25em .15em
}

.fa-pull-left {
    float: left
}

.fa-pull-right {
    float: right
}

.fa.fa-pull-left, .fab.fa-pull-left, .fal.fa-pull-left, .far.fa-pull-left, .fas.fa-pull-left {
    margin-right: .3em
}

.fa.fa-pull-right, .fab.fa-pull-right, .fal.fa-pull-right, .far.fa-pull-right, .fas.fa-pull-right {
    margin-left: .3em
}

.fa-spin {
    -webkit-animation: fa-spin 2s linear infinite;
    animation: fa-spin 2s linear infinite
}

.fa-pulse {
    -webkit-animation: fa-spin 1s steps(8) infinite;
    animation: fa-spin 1s steps(8) infinite
}

@-webkit-keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

.fa-rotate-90 {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.fa-rotate-180 {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.fa-rotate-270 {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg)
}

.fa-flip-horizontal {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1)
}

.fa-flip-vertical {
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1)
}

.fa-flip-both, .fa-flip-horizontal.fa-flip-vertical, .fa-flip-vertical {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"
}

.fa-flip-both, .fa-flip-horizontal.fa-flip-vertical {
    -webkit-transform: scale(-1);
    transform: scale(-1)
}

:root .fa-flip-both, :root .fa-flip-horizontal, :root .fa-flip-vertical, :root .fa-rotate-90, :root .fa-rotate-180, :root .fa-rotate-270 {
    -webkit-filter: none;
    filter: none
}

.fa-stack {
    display: inline-block;
    height: 2em;
    line-height: 2em;
    position: relative;
    vertical-align: middle;
    width: 2.5em
}

.fa-stack-1x, .fa-stack-2x {
    left: 0;
    position: absolute;
    text-align: center;
    width: 100%
}

.fa-stack-1x {
    line-height: inherit
}

.fa-stack-2x {
    font-size: 2em
}

.fa-inverse {
    color: #fff
}
`);

css.push(...vars.filter(([ico]) => all_icons.includes(ico)).map(([ico, code]) => `.fa-${ico}:before{content:"\\${code}"}`));

css.push(`.sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.sr-only-focusable:active, .sr-only-focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto
}

@font-face {
    font-family: "Font Awesome 5 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(../webfonts/fa-brands-400.eot);
    src: url(../webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"), url(../webfonts/fa-brands-400.woff2) format("woff2"), url(../webfonts/fa-brands-400.woff) format("woff"), url(../webfonts/fa-brands-400.ttf) format("truetype"), url(../webfonts/fa-brands-400.svg#fontawesome) format("svg")
}

.fab {
    font-family: "Font Awesome 5 Brands";
    font-weight: 400
}

@font-face {
    font-family: "Font Awesome 5 Duotone";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url(../webfonts/fa-duotone-900.eot);
    src: url(../webfonts/fa-duotone-900.eot?#iefix) format("embedded-opentype"), url(../webfonts/fa-duotone-900.woff2) format("woff2"), url(../webfonts/fa-duotone-900.woff) format("woff"), url(../webfonts/fa-duotone-900.ttf) format("truetype"), url(../webfonts/fa-duotone-900.svg#fontawesome) format("svg")
}

.fad {
    position: relative;
    font-family: "Font Awesome 5 Duotone";
    font-weight: 900
}

.fad:before {
    position: absolute;
    color: var(--fa-primary-color, inherit);
    opacity: 1;
    opacity: var(--fa-primary-opacity, 1)
}

.fad:after {
    color: var(--fa-secondary-color, inherit)
}

.fa-swap-opacity .fad:before, .fad.fa-swap-opacity:before, .fad:after {
    opacity: .4;
    opacity: var(--fa-secondary-opacity, .4)
}

.fa-swap-opacity .fad:after, .fad.fa-swap-opacity:after {
    opacity: 1;
    opacity: var(--fa-primary-opacity, 1)
}

.fad.fa-inverse {
    color: #fff
}

.fad.fa-stack-1x, .fad.fa-stack-2x {
    position: absolute
}

.fad.fa-fw:before, .fad.fa-stack-1x:before, .fad.fa-stack-2x:before {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}
`);

css.push(...vars.filter(([ico]) => sets.duotone.includes(ico)).map(([ico, code]) => `.fad.fa-${ico}:after{content:"\\10${code}"}`));

css.push(`@font-face {
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: 300;
    font-display: block;
    src: url(../webfonts/fa-light-300.eot);
    src: url(../webfonts/fa-light-300.eot?#iefix) format("embedded-opentype"), url(../webfonts/fa-light-300.woff2) format("woff2"), url(../webfonts/fa-light-300.woff) format("woff"), url(../webfonts/fa-light-300.ttf) format("truetype"), url(../webfonts/fa-light-300.svg#fontawesome) format("svg")
}

.fal {
    font-weight: 300
}

@font-face {
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(../webfonts/fa-regular-400.eot);
    src: url(../webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"), url(../webfonts/fa-regular-400.woff2) format("woff2"), url(../webfonts/fa-regular-400.woff) format("woff"), url(../webfonts/fa-regular-400.ttf) format("truetype"), url(../webfonts/fa-regular-400.svg#fontawesome) format("svg")
}

.fal, .far {
    font-family: "Font Awesome 5 Pro"
}

.far {
    font-weight: 400
}

@font-face {
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url(../webfonts/fa-solid-900.eot);
    src: url(../webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"), url(../webfonts/fa-solid-900.woff2) format("woff2"), url(../webfonts/fa-solid-900.woff) format("woff"), url(../webfonts/fa-solid-900.ttf) format("truetype"), url(../webfonts/fa-solid-900.svg#fontawesome) format("svg")
}

.fa, .fas {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900
}
`);

const cssStr = css.map(c => c.replaceAll("\n\n", "\n")).join("\n");
omacranger commented 2 years ago

That's cool! I'm not sure an issue on this repo is the right place for it, but I do think it would pair well as a related repo or gist. Ideally it would pull from the SCSS partials and generate that dynamically so you wouldn't have to update it whenever the upstream fontawesome file changes as well.