rework-font-names v0.1.1

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
}