rework-font-names

    0.1.1 • Public • Published

    Rework Font Names in CSS

    Font names plugin for Rework

    Allows for CSS to modify font-names in 'font' and 'font-family' rules

    Options

    Pass in an options object to configure the plugin. Possible options:

    • replace: replaces old value by new one (can be a string, array or function)
    • prepend: prepends new font(s) to font list (can be a string, array or function)
    • append: appends font(s) to font list (can be a string, array or function)
    • ignore: if rule has in font stack at least one font from ignore list, replace/prepend/append options can't be applied to this rule. Can be a string, array or function. You can also add '!important' and 'inherit' as option values, and all fonts stacks with '!important' or 'inherit' will be ignored. Default value forn ignore option is ['inherit']
    • important: how to rework !important; possible values:
      • keep: default value, keeps !important where they are
      • add: adds !important for all acceptable font stacks (i.e. all ones except ignored ones)
      • remove: removes !important from all acceptable font stacks (i.e. all ones except ignored ones)

    Functions for replace, prepend and apppend options can have four params:

    • value: raw value of font-family or font property
    • fonts: a normalized list of fonts
    • important: true if font-stack has !important; false if font-stack doesn't have !important

    Example

    The following gulp snippet

    var rework = require('gulp-rework');
    rework.fontNames = require('rework-font-names');
    
    return gulp.src('app/styles/main.css')
        .pipe(rework(rework.fontNames({
            replace: function(v,f,i){ return v.replace(/Ariel/gi, 'Arial');  },
            prepend: ["PT Sans", 'Helvetica Neue'],
            append: 'sans-serif',
            ignore: ['Courier New', '!important', 'inherit'],
        })))
        .pipe(gulp.dest('dist/css'))
    

    Will turn

    html {
      font: bold 16px/1.4em Ariel, "Helvetica";
    }
    
    body {
      font-family: Ariel; 
    }
    
    #wrapper {
      font: 'courier new';
    }
    
    .button {
      font-family: Tahoma !important;
    }
    

    Into

    html {
      font: bold 16px/1.4em "PT Sans", "Helvetica Neue", Arial, "Helvetica", sans-serif;
    }
    
    body {
      font-family: "PT Sans", "Helvetica Neue", Arial, sans-serif; 
    }
    
    #wrapper {
      font: 'courier new';
    }
    
    .button {
      font-family: Tahoma !important
    }

    Install

    npm i rework-font-names

    DownloadsWeekly Downloads

    1

    Version

    0.1.1

    License

    MIT

    Last publish

    Collaborators

    • pvoznyuk