New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

postcss-fontpath

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

postcss-fontpath - npm Package Compare versions

Comparing version

0.3.0
to
1.0.0

CHANGELOG.md
LICENSE
missing.expected.css

89

index.js
'use strict';
var fs = require('fs');
var objectAssign = require('object-assign');
var path = require('path');
var postcss = require('postcss');
var url = require('url');
var fs = require('fs'),
path = require('path'),
postcss = require('postcss'),
url = require('url');
module.exports = postcss.plugin('postcss-fontpath', function (opts) {
opts = objectAssign({
checkPath: false
}, opts);
var DEFAULT_OPTS = {
checkFiles: false,
ie8Fix: false,
formats: [
{ type: 'embedded-opentype', ext: 'eot' },
{ type: 'woff2', ext: 'woff2' },
{ type: 'woff', ext: 'woff' },
{ type: 'truetype', ext: 'ttf' },
{ type: 'svg', ext: 'svg'}
]
};
return function (css, result) {
module.exports = postcss.plugin('postcss-fontpath', function(opts) {
var config = Object.assign({}, DEFAULT_OPTS, opts || {});
return function (css) {
// Loop through each @rule

@@ -22,26 +31,19 @@ css.walkAtRules('font-face', function(rule) {

// Gather up the components of our new declerations
var fontPath = decl.value.replace(/'/g, ''),
src = '',
ieSrc = 'url("' + fontPath + '.eot")',
formats = [
{ type: 'embedded-opentype', ext: '.eot?#iefix' },
{ type: 'woff', ext: '.woff' },
{ type: 'truetype', ext: '.ttf' },
{ type: 'svg', ext: '.svg' }
];
// Replace single and double quotes with nothing
var fontPath = decl.value.replace(/"/g, '').replace(/'/g, ''),
fonts = [],
ieHack = false,
ext = '';
// Construct the new src value
formats.forEach(function(format, index, array) {
config.formats.forEach(function(format) {
if (opts.checkPath === true) {
// Make the fontPath absolute and normalize it (removes the #iefix hash)
var absoluteFontPath = url.parse(path.resolve(path.dirname(css.source.input.file), fontPath) + format.ext).pathname;
if (config.checkFiles) {
// Best guess at where our fonts might be relative to
var basePath = css.source.input.file || process.cwd(),
absoluteFontPath = url.parse(path.resolve(path.dirname(basePath), fontPath) + '.' + format.ext).pathname;
try {
// Try to see if the font exists
fs.accessSync(absoluteFontPath, fs.F_OK);
} catch (err) {
decl.warn(result, 'Cannot find file "' + fontPath + format.ext + '"');
// Skip the format in the src output
return;

@@ -51,17 +53,29 @@ }

if (index === array.length - 1){
src += 'url("' + fontPath + format.ext + '") format(\'' + format.type + '\')';
} else {
src += 'url("' + fontPath + format.ext + '") format(\'' + format.type + '\'),\n ';
// Set the ext var
ext = format.ext;
if (ext === 'eot' && config.ie8Fix) {
ieHack = true;
ext = 'eot?#iefix';
}
// Add the font to the font-face decl
fonts.push('url("' + fontPath + '.' + ext + '") format(\'' + format.type + '\')');
});
if (src.length > 0) {
if (fonts.length > 0) {
// IE Fix src prop
decl.cloneBefore({ prop: 'src', value: ieSrc });
// If the EOT exists, add the fallback
if (ieHack && config.ie8Fix) {
decl.cloneBefore({
prop: 'src',
value: 'url("' + fontPath + '.eot")'
});
}
// New src prop
decl.cloneBefore({ prop: 'src', value: src });
// Implode the rest of the fonts
decl.cloneBefore({
prop: 'src',
value: fonts.join(',\n ')
});
}

@@ -75,4 +89,3 @@

});
};
});

11

package.json
{
"name": "postcss-fontpath",
"version": "0.3.0",
"version": "1.0.0",
"description": "PostCSS plugin that adds a font-path attribute to @font-face which expands to the FontSpring syntax",

@@ -29,10 +29,9 @@ "keywords": [

"dependencies": {
"object-assign": "^4.0.1",
"postcss": "^5.0.0"
"postcss": "^6.0.0"
},
"devDependencies": {
"chai": "^4.1.0",
"gulp": "^3.8.11",
"gulp-eslint": "^0.12.0",
"gulp-mocha": "^2.0.1",
"chai": "^2.3.0",
"gulp": "^3.8.11"
"gulp-mocha": "^4.3.1"
},

@@ -39,0 +38,0 @@ "scripts": {

76

README.md

@@ -1,10 +0,11 @@

# PostCSS FontPath
[![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][daviddm-image]][daviddm-url]
# PostCSS Fontpath
[![NPM version][npm-badge]][npm-url] [![Build Status][travis-badge]][travis-url] [![Dependency Status][daviddm-badge]][daviddm-url]
[PostCSS][PostCSS] plugin that adds a `font-path` attribute to `@font-face` which expands to the [FontSpring syntax][fontspring].
[PostCSS][PostCSS] plugin that automatically generates `src` values for `@font-face` rules based on the path to your font files. You can manually provide the types of sources to output, or automatically generate sources based on the font files that actually exist in your project.
Part of [Rucksack - CSS Superpowers](http://simplaio.github.io/rucksack).
_Part of [Rucksack - CSS Superpowers](http://simplaio.github.io/rucksack)_
**Input**
```css
/* Note: path must include base filename */
@font-face {

@@ -18,7 +19,9 @@ font-family: 'My Font';

**Output**
```css
@font-face {
font-family: 'My Font';
src: url("/path/to/font/file.eot");
src: url("/path/to/font/file.eot?#iefix") format('embedded-opentype'),
src: url("/path/to/font/file.eot") format('embedded-opentype'),
url("/path/to/font/file.woff") format('woff2'),
url("/path/to/font/file.woff") format('woff'),

@@ -32,8 +35,8 @@ url("/path/to/font/file.ttf") format('truetype'),

--
## Usage
### Usage
```js
var fontpath = require('postcss-fontpath');
```js
postcss([ require('postcss-fontpath') ])
postcss([ fontpath({ ... }) ]);
```

@@ -43,23 +46,56 @@

--
### Formats
### Options
By default postcss-fontpath generates src values for all valid font types. You can change the default sources generated by providing an array of custom src formats in the `formats` option. Each format requires a type and a file extension to map to. The order of the formats in the array determines the ordering of the `src` values outputted.
**checkPath** (boolean, default = `false`)
```js
{
formats: [
{ type: 'woff2', ext: 'woff2' },
{ type: 'embedded-opentype', ext: 'eot' }
]
}
```
If true, the plugin will check if the path to the font file exists. When not found, the file is skipped in the output and a warning is logged.
### File checking
--
Postcss-fontpath can automatically check the path you give it and only generate src values for the files that actually exist in your project with the `checkFiles` option.
### License
> Remember that postcss-fontpath checks paths based on your current directory structure - if your production environment differs from your development setup (eg: transformed in a buildstep) then this method could result in incorrect declarations
### IE8 support
If you need to support IE8 (which doesn't support multiple `src` values or `format()`), postcss-fontpath can generate a [FontSpring style](http://blog.fontspring.com/2011/02/the-new-bulletproof-font-face-syntax/) IE8 hack with the `ie8Fix` option, resulting in an output like this
```css
@font-face {
font-family: 'My Font';
src: url("/path/to/font/file.eot");
src: url("/path/to/font/file.eot?#iefix") format('embedded-opentype'),
url("/path/to/font/file.woff") format('woff2'),
...
font-weight: normal;
font-style: normal;
}
```
## Options
Option | Type | Default | Description
------------ | ------- | ------- | -----------
`formats` | Array | `[ { type: 'embedded-opentype', ext: 'eot' }, { type: 'woff2', ext: 'woff2' }, { type: 'woff', ext: 'woff' }, { type: 'truetype', ext: 'ttf' }, { type: 'svg', ext: 'svg'} ]` | Default font formats to generate `src` values for
`checkFiles` | Boolean | `false` | Whether to generate `src` values based on the font files that actually exist at the given font-path
`ie8Fix` | Boolean | `false` | Whether to generate a hack for IE8 support
***
MIT © [Sean King](https://twitter.com/seaneking)
[npm-image]: https://badge.fury.io/js/postcss-fontpath.svg
[npm-badge]: https://badge.fury.io/js/postcss-fontpath.svg
[npm-url]: https://npmjs.org/package/postcss-fontpath
[travis-image]: https://travis-ci.org/seaneking/postcss-fontpath.svg?branch=master
[travis-badge]: https://travis-ci.org/seaneking/postcss-fontpath.svg?branch=master
[travis-url]: https://travis-ci.org/seaneking/postcss-fontpath
[daviddm-image]: https://david-dm.org/seaneking/postcss-fontpath.svg?theme=shields.io
[daviddm-badge]: https://david-dm.org/seaneking/postcss-fontpath.svg?theme=shields.io
[daviddm-url]: https://david-dm.org/seaneking/postcss-fontpath
[PostCSS]: https://github.com/postcss/postcss
[fontspring]: http://blog.fontspring.com/2011/02/further-hardening-of-the-bulletproof-syntax/