jednano / parse-css-font

Parses the CSS font property value.

parse-css-font

Parses the CSS font property.

Installation

$ npm install parse-css-font [--save[-dev]]

Usage

const parseCSSFont = require('parse-css-font')
parseCSSFont('1rem "Roboto Condensed", sans-serif;')
/*
{
	size: '1rem',
	family: ['Roboto Condensed', 'sans-serif'],
	style: 'normal',
	variant: 'normal',
	weight: 'normal',
	stretch: 'normal',
	lineHeight: 'normal'
}
*/

See the tests for more scenarios.

ES6/2015 import

import parseCSSFont from 'parse-css-font'

Testing

$ npm test

This will run tests and generate a code coverage report. Anything less than 100% coverage will throw an error.

parse-css-font's Issues

`10px / 1.2` not being handled properly

parse('1rem / 1.2 serif')

parses family as '/ 1.2 serif' and lineHeight as 'normal'. Same time browsers handle spaces around slash well.

ES module being exported instead of function

Readme example does not work:

var parseCSSFont = require('parse-css-font');

parseCSSFont is {default: parse, __esModule: true} object.
Is that possible to rebundle it to be a real function? Appreciate @jedmao!

58kb bundle size

Bundle of the package browserify node_modules/parse-css-font gives 58kb of code, mostly not related to direct font parsing (some timeout polyfills, data structures, process/environment code etc).

@jedmao would you consider optimizing the code so to reduce it to bare minimum? I hoped to use it in upcoming regl-text component, rendering text in webgl, but with the state of affairs font parsing itself is going to be bigger than the whole regl-text package.

In all, package has ideal API.

UPD. tcomb itself adds 52kb of code. Replacing it would suffice.

UPD2. Moreover type checking values are not user friendly, consider TypeError: [tcomb] Invalid value 123 supplied to [String]/0: String, compared to Font argument must be a string.

If "font" property doesn't have "font-size" or "font-family" error

using something like this will trough an error

a { font: bold; }
a { font: 12px; }

Error: [parse-css-font] Missing required font-family.

Doesn't unescape escaped characters

parse('1rem Courier\000020New')

should yield results containing unescaped font name, 'Courier New'

Error parsing `font: inherit`

Parsing font: inherit throws an error, as no value is provided for font-size. Is this to be expected?

For context, @signal-noise/stylelint-scales uses parse-css-font, and has a workaround to bypass parse-css-font in place in case of font: inherit declarations. See issue: jeddy3/stylelint-scales#36

Font style is overriden by font-variant or font-weight

Given a font 'italic normal normal 18px/1.4em "open sans",sans-serif;' the following section - https://github.com/jedmao/parse-css-font/blob/master/src/index.ts#L53-L59 will recognize the second and third tokens as "normal" and will set 'style', 'variant', 'weight' and 'stretch' to normal, even though the style was already set as italic (it is being overriden).
I suppose that you should keep track of which tokens you already set and filter them out, so you are not overriding them by a later 'normal' token.
What is the logic around this check and setting of these font properties?

Parse random font variant

var parse = require('parse-css-font').default
console.log(parse('foo 1rem serif'))
// { variant: 'foo', ... }

I wonder why is that allowed for variant to be any value? According to the spec that can be only small-caps or normal https://developer.mozilla.org/en-US/docs/Web/CSS/font#font-variant-css21. Is that done so for the future?