Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for CSS Fonts Module level 4 features #7

Merged
merged 6 commits into from
Feb 17, 2020
Merged

Add support for CSS Fonts Module level 4 features #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9b8f7d8
Add .npmrc to disable package-lock.json
papandreou Nov 19, 2018
38fcfcb
Support font-weights that aren't a multiple of 100, and also 1000
papandreou Nov 19, 2018
f2fbd06
Parse oblique followed by an angle
papandreou Nov 19, 2018
b36fb6c
Avoid capture groups in regexps where not needed
papandreou Nov 19, 2018
a137852
Allow fractional font-weights
papandreou Nov 19, 2018
9d2b244
Support exponential notation for font-weight
papandreou Nov 20, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .npmrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
package-lock = false
39 changes: 29 additions & 10 deletions src/parser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@
VARIATION: 1,
LINE_HEIGHT: 2,
FONT_FAMILY: 3,
BEFORE_FONT_FAMILY: 4
BEFORE_FONT_FAMILY: 4,
AFTER_OBLIQUE: 5
};

/**
Expand All @@ -36,8 +37,8 @@
var identifiers = str.replace(/^\s+|\s+$/, '').replace(/\s+/g, ' ').split(' ');

for (var i = 0; i < identifiers.length; i += 1) {
if (/^(-?\d|--)/.test(identifiers[i]) ||
!/^([_a-zA-Z0-9-]|[^\0-\237]|(\\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])?|\\[^\n\r\f0-9a-f]))+$/.test(identifiers[i])) {
if (/^(?:-?\d|--)/.test(identifiers[i]) ||
!/^(?:[_a-zA-Z0-9-]|[^\0-\237]|(?:\\[0-9a-f]{1,6}(?:\r\n|[ \n\r\t\f])?|\\[^\n\r\f0-9a-f]))+$/.test(identifiers[i])) {
return null;
}
}
Expand Down Expand Up @@ -83,24 +84,42 @@
result['font-family'].push(identifier);
}
buffer = '';
} else if (state === states.AFTER_OBLIQUE && c === ' ') {
if (/^(?:\+|-)?(?:[0-9]*\.)?[0-9]+(?:deg|grad|rad|turn)$/.test(buffer)) {
result['font-style'] += ' ' + buffer;
buffer = '';
} else {
// The 'oblique' token was not followed by an angle.
// Backtrack to allow the token to be parsed as VARIATION
i -= 1;
}
state = states.VARIATION;
} else if (state === states.VARIATION && (c === ' ' || c === '/')) {
if (/^((xx|x)-large|(xx|s)-small|small|large|medium)$/.test(buffer) ||
/^(larg|small)er$/.test(buffer) ||
/^(\+|-)?([0-9]*\.)?[0-9]+(em|ex|ch|rem|vh|vw|vmin|vmax|px|mm|cm|in|pt|pc|%)$/.test(buffer)) {
if (/^(?:(?:xx|x)-large|(?:xx|s)-small|small|large|medium)$/.test(buffer) ||
/^(?:larg|small)er$/.test(buffer) ||
/^(?:\+|-)?(?:[0-9]*\.)?[0-9]+(?:em|ex|ch|rem|vh|vw|vmin|vmax|px|mm|cm|in|pt|pc|%)$/.test(buffer)) {
state = c === '/' ? states.LINE_HEIGHT : states.BEFORE_FONT_FAMILY;
result['font-size'] = buffer;
} else if (/^(italic|oblique)$/.test(buffer)) {
} else if (/^italic$/.test(buffer)) {
result['font-style'] = buffer;
} else if (/^oblique$/.test(buffer)) {
result['font-style'] = buffer;
state = states.AFTER_OBLIQUE;
} else if (/^small-caps$/.test(buffer)) {
result['font-variant'] = buffer;
} else if (/^(bold(er)?|lighter|[1-9]00)$/.test(buffer)) {
} else if (/^(?:bold(?:er)?|lighter)$/.test(buffer)) {
result['font-weight'] = buffer;
} else if (/^((ultra|extra|semi)-)?(condensed|expanded)$/.test(buffer)) {
} else if (/^[+-]?(?:[0-9]*\.)?[0-9]+(?:e[+-]?(?:0|[1-9][0-9]*))?$/.test(buffer)) {
var num = parseFloat(buffer);
if (num >= 1 && num <= 1000) {
result['font-weight'] = buffer;
}
} else if (/^(?:(?:ultra|extra|semi)-)?(?:condensed|expanded)$/.test(buffer)) {
result['font-stretch'] = buffer;
}
buffer = '';
} else if (state === states.LINE_HEIGHT && c === ' ') {
if (/^(\+|-)?([0-9]*\.)?[0-9]+(em|ex|ch|rem|vh|vw|vmin|vmax|px|mm|cm|in|pt|pc|%)?$/.test(buffer)) {
if (/^(?:\+|-)?([0-9]*\.)?[0-9]+(?:em|ex|ch|rem|vh|vw|vmin|vmax|px|mm|cm|in|pt|pc|%)?$/.test(buffer)) {
result['line-height'] = buffer;
}
state = states.BEFORE_FONT_FAMILY;
Expand Down
23 changes: 22 additions & 1 deletion test/parser-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,9 @@ describe('CSS Font parser', function () {
it('correctly parses font-style', function () {
expect(parse('italic 12px serif')).to.eql({ 'font-size': '12px', 'font-style': 'italic', 'font-family': ['serif'] });
expect(parse('oblique 12px serif')).to.eql({ 'font-size': '12px', 'font-style': 'oblique', 'font-family': ['serif'] });
expect(parse('oblique 20deg 12px serif')).to.eql({ 'font-size': '12px', 'font-style': 'oblique 20deg', 'font-family': ['serif'] });
expect(parse('oblique 0.02turn 12px serif')).to.eql({ 'font-size': '12px', 'font-style': 'oblique 0.02turn', 'font-family': ['serif'] });
expect(parse('oblique .04rad 12px serif')).to.eql({ 'font-size': '12px', 'font-style': 'oblique .04rad', 'font-family': ['serif'] });
});

it('correctly parses font-variant', function () {
Expand All @@ -142,9 +145,27 @@ describe('CSS Font parser', function () {
expect(parse('bolder 12px serif')).to.eql({ 'font-size': '12px', 'font-weight': 'bolder', 'font-family': ['serif'] });
expect(parse('lighter 12px serif')).to.eql({ 'font-size': '12px', 'font-weight': 'lighter', 'font-family': ['serif'] });

for (var i = 1; i < 10; i += 1) {
for (var i = 1; i <= 10; i += 1) {
expect(parse(i * 100 + ' 12px serif')).to.eql({ 'font-size': '12px', 'font-weight': i * 100, 'font-family': ['serif'] });
}

expect(parse('1 12px serif')).to.eql({ 'font-size': '12px', 'font-weight': '1', 'font-family': ['serif'] });
expect(parse('723 12px serif')).to.eql({ 'font-size': '12px', 'font-weight': '723', 'font-family': ['serif'] });
expect(parse('1000 12px serif')).to.eql({ 'font-size': '12px', 'font-weight': '1000', 'font-family': ['serif'] });
expect(parse('1000.00 12px serif')).to.eql({ 'font-size': '12px', 'font-weight': '1000.00', 'font-family': ['serif'] });
expect(parse('1e3 12px serif')).to.eql({ 'font-size': '12px', 'font-weight': '1e3', 'font-family': ['serif'] });
expect(parse('1e+1 12px serif')).to.eql({ 'font-size': '12px', 'font-weight': '1e+1', 'font-family': ['serif'] });
expect(parse('200e-2 12px serif')).to.eql({ 'font-size': '12px', 'font-weight': '200e-2', 'font-family': ['serif'] });
expect(parse('123.456 12px serif')).to.eql({ 'font-size': '12px', 'font-weight': '123.456', 'font-family': ['serif'] });
expect(parse('+123 12px serif')).to.eql({ 'font-size': '12px', 'font-weight': '+123', 'font-family': ['serif'] });

expect(parse('0 12px serif')).to.eql({ 'font-size': '12px', 'font-family': ['serif'] });
expect(parse('-1 12px serif')).to.eql({ 'font-size': '12px', 'font-family': ['serif'] });
expect(parse('1000. 12px serif')).to.eql({ 'font-size': '12px', 'font-family': ['serif'] });
expect(parse('1000.1 12px serif')).to.eql({ 'font-size': '12px', 'font-family': ['serif'] });
expect(parse('1001 12px serif')).to.eql({ 'font-size': '12px', 'font-family': ['serif'] });
expect(parse('1.1e3 12px serif')).to.eql({ 'font-size': '12px', 'font-family': ['serif'] });
expect(parse('1e-2 12px serif')).to.eql({ 'font-size': '12px', 'font-family': ['serif'] });
});

it('correctly parses font-stretch', function () {
Expand Down