Skip to content

Commit 37460e9

Browse files
fidianfidian
authored
Merge pull request #44 from popcodeorg/flexbox
Basic support for Flexbox
2 parents 490e90a + d7d1167 commit 37460e9

12 files changed

Lines changed: 419 additions & 0 deletions

‎lib/css/declarations/rule.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,10 @@ var propertyMapping = {
134134
'empty-cells': 'empty-cells',
135135
'filter': base.browserOnly('filter', 'ie'),
136136
'-ms-filter': base.wrongProperty('filter', 'filter'), // IE supports filter better than -ms-filter
137+
'flex': 'flex',
138+
'flex-basis': 'flex-basis',
139+
'flex-grow': 'flex-resize',
140+
'flex-shrink': 'flex-resize',
137141
'float': 'float',
138142
'font': 'font',
139143
'font-family': 'font-family',

‎lib/css/valuebucket.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,10 @@ exports['display-type'] = require('./values/display-type');
7676
exports['empty-cells'] = require('./values/empty-cells');
7777
exports['expression'] = require('./values/expression');
7878
exports['filter'] = require('./values/filter');
79+
exports['flex'] = require('./values/flex');
80+
exports['flex-basis'] = require('./values/flex-basis');
81+
exports['flex-resize'] = require('./values/flex-resize');
82+
exports['flex-resize-pair'] = require('./values/flex-resize-pair');
7983
exports['float'] = require('./values/float');
8084
exports['font-face-annotation'] = require('./values/font-face-annotation');
8185
exports['font-face-ascent'] = require('./values/font-face-ascent');

‎lib/css/values/display-type.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,14 @@ util.extend(DisplayType.prototype, base.base, {
7070
values: [
7171
"inline-block"
7272
]
73+
},
74+
{
75+
validation: [
76+
validate.minimumCss(3)
77+
],
78+
values: [
79+
"flex"
80+
]
7381
}
7482
]
7583
});

‎lib/css/values/flex-basis.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/* <flex-basis>
2+
*
3+
* CSS3: <length> | <percentage> | inherit | initial | unset
4+
*/
5+
6+
"use strict";
7+
8+
var base = require('./base');
9+
var util = require('../../util');
10+
var validate = require('./validate');
11+
12+
var FlexBasis = base.baseConstructor();
13+
14+
util.extend(FlexBasis.prototype, base.base, {
15+
name: "flex-basis",
16+
17+
allowed: [
18+
{
19+
validation: [
20+
validate.minimumCss(3),
21+
validate.browserUnsupported('ie10'),
22+
validate.positiveValue()
23+
],
24+
valueObjects: [
25+
'length',
26+
'percentage'
27+
]
28+
},
29+
{
30+
validation: [
31+
validate.minimumCss(3),
32+
validate.browserUnsupported('ie10'),
33+
],
34+
values: [
35+
'auto',
36+
'inherit'
37+
]
38+
}
39+
]
40+
});
41+
42+
exports.parse = base.simpleParser(FlexBasis);

‎lib/css/values/flex-resize-pair.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/* flex-resize-pair
2+
*
3+
* Used for matching pairs of <flex-grow> <flex-shrink>? for flex property
4+
*
5+
* CSS3: <flex-resize>{1,2} | inherit | initial | unset
6+
*/
7+
8+
"use strict";
9+
10+
var base = require('./base');
11+
var util = require('../../util');
12+
var validate = require('./validate');
13+
14+
var FlexResizePair = base.baseConstructor();
15+
16+
util.extend(FlexResizePair.prototype, base.base, {
17+
name: "flex-resize-pair"
18+
});
19+
20+
21+
exports.parse = function (unparsedReal, bucket, container) {
22+
var flexResizePair = new FlexResizePair(bucket, container, unparsedReal);
23+
flexResizePair.debug('parse', unparsedReal);
24+
25+
var hits = flexResizePair.repeatParser(bucket['flex-resize'], 2);
26+
27+
if (! hits) {
28+
flexResizePair.debug('parse fail - too few widths');
29+
return null;
30+
}
31+
32+
validate.call(flexResizePair, 'minimumCss', flexResizePair.firstToken(), 3);
33+
34+
flexResizePair.warnIfInherit();
35+
flexResizePair.debug('parse success', flexResizePair.unparsed);
36+
return flexResizePair;
37+
};
38+

‎lib/css/values/flex-resize.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/* <flex-resize>
2+
*
3+
* Used for matching flex-grow, flex-shrink, and flex properties
4+
*
5+
* CSS3: <number> | inherit | initial | unset
6+
*/
7+
8+
"use strict";
9+
10+
var base = require('./base');
11+
var util = require('../../util');
12+
var validate = require('./validate');
13+
14+
var FlexResize = base.baseConstructor();
15+
16+
util.extend(FlexResize.prototype, base.base, {
17+
name: "flex-resize",
18+
19+
allowed: [
20+
{
21+
validation: [
22+
validate.minimumCss(3),
23+
validate.browserUnsupported('ie10'),
24+
validate.positiveValue()
25+
],
26+
valueObjects: [
27+
'number'
28+
]
29+
},
30+
{
31+
validation: [
32+
validate.minimumCss(3),
33+
validate.browserUnsupported('ie10'),
34+
],
35+
values: [
36+
'inherit'
37+
]
38+
}
39+
]
40+
});
41+
42+
exports.parse = base.simpleParser(FlexResize);

‎lib/css/values/flex.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
/* <flex>
2+
*
3+
* CSS3: none | [ <flex-resize> <flex-resize>? || <flex-basis> ]
4+
*/
5+
6+
"use strict";
7+
8+
var base = require('./base');
9+
var util = require('../../util');
10+
var validate = require('./validate');
11+
12+
var Flex = base.baseConstructor();
13+
14+
util.extend(Flex.prototype, base.base, {
15+
name: "flex"
16+
});
17+
18+
exports.parse = function (unparsedReal, bucket, container) {
19+
var flex = new Flex(bucket, container, unparsedReal);
20+
var unparsed = flex.unparsed.clone();
21+
flex.debug('parse', unparsedReal);
22+
23+
if (flex.handleInherit(function (obj) {
24+
validate.call(obj, 'minimumCss', obj.firstToken(), 3);
25+
validate.call(obj, 'browserUnsupported', obj.firstToken(), 'ie10');
26+
})) {
27+
return flex;
28+
}
29+
30+
if (unparsed.isContent('none')) {
31+
flex.add(flex.unparsed.advance());
32+
} else {
33+
var hits = unparsed.matchAnyOrder([
34+
bucket['flex-resize-pair'],
35+
bucket['flex-basis'],
36+
], flex);
37+
38+
if (! hits) {
39+
flex.debug('parse fail');
40+
return null;
41+
}
42+
}
43+
44+
validate.call(flex, 'minimumCss', flex.firstToken(), 3);
45+
validate.call(flex, 'browserUnsupported', flex.firstToken(), 'ie10');
46+
47+
flex.debug('parse success', flex.unparsed);
48+
return flex;
49+
};

‎test/css/values/display-type-test.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,12 @@ exports.batch = util.makeVows('display-type', {
3232
'unparsed': [],
3333
'warnings': ['css-minimum:2.1']
3434
},
35+
'flex': {
36+
'tokens': ['IDENT'],
37+
'toString': 'flex',
38+
'unparsed': [],
39+
'warnings': ['css-minimum:3']
40+
},
3541
'inherit pinkeye 27': {
3642
'tokens': ['IDENT', 'S', 'IDENT', 'S', 'UNIT' ],
3743
'toString': 'inherit',

‎test/css/values/flex-basis-test.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
"use strict";
2+
var util = require('./util');
3+
4+
exports.batch = util.makeVows('flex-basis', {
5+
'10px': {
6+
'tokens': ['UNIT'],
7+
'toString': '10px',
8+
'unparsed': [],
9+
'warnings': ['css-minimum:3', 'browser-unsupported:ie10']
10+
},
11+
'50%': {
12+
'tokens': ['UNIT'],
13+
'toString': '50%',
14+
'unparsed': [],
15+
'warnings': ['css-minimum:3', 'browser-unsupported:ie10']
16+
},
17+
'1': {
18+
'tokens': ['UNIT'],
19+
'toString': null,
20+
'unparsed': ['UNIT'],
21+
'warnings': null
22+
},
23+
'-10px': {
24+
'tokens': ['UNIT'],
25+
'toString': '-10px',
26+
'unparsed': [],
27+
'warnings': ['css-minimum:3', 'browser-unsupported:ie10', 'require-positive-value']
28+
},
29+
'auto': {
30+
'tokens': ['IDENT'],
31+
'toString': 'auto',
32+
'unparsed': [],
33+
'warnings': ['css-minimum:3', 'browser-unsupported:ie10']
34+
},
35+
'inherit': {
36+
'tokens': ['IDENT'],
37+
'toString': 'inherit',
38+
'unparsed': [],
39+
'warnings': ['css-minimum:3', 'browser-unsupported:ie10']
40+
},
41+
'invalidValue': {
42+
'tokens': ['IDENT'],
43+
'toString': null,
44+
'unparsed': ['IDENT'],
45+
'warnings': null
46+
}
47+
});
48+
49+

‎test/css/values/flex-resize-pair-test.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
"use strict";
2+
var util = require('./util');
3+
4+
exports.batch = util.makeVows('flex-resize-pair', {
5+
'1': {
6+
'tokens': ['UNIT'],
7+
'toString': '1',
8+
'unparsed': [],
9+
'warnings': ['css-minimum:3']
10+
},
11+
'0.4': {
12+
'tokens': ['UNIT'],
13+
'toString': '0.4',
14+
'unparsed': [],
15+
'warnings': ['css-minimum:3']
16+
},
17+
'1 0': {
18+
'tokens': ['UNIT', 'S', 'UNIT'],
19+
'toString': '1 0',
20+
'unparsed': [],
21+
'warnings': ['css-minimum:3']
22+
},
23+
'1 0 1': {
24+
'tokens': ['UNIT', 'S', 'UNIT', 'S', 'UNIT'],
25+
'toString': '1 0',
26+
'unparsed': ['UNIT'],
27+
'warnings': ['css-minimum:3']
28+
},
29+
'1 auto': {
30+
'tokens': ['UNIT', 'S', 'IDENT'],
31+
'toString': '1',
32+
'unparsed': ['IDENT'],
33+
'warnings': ['css-minimum:3']
34+
},
35+
'1px': {
36+
'tokens': ['UNIT'],
37+
'toString': null,
38+
'unparsed': ['UNIT'],
39+
'warnings': null
40+
},
41+
'invalidValue': {
42+
'tokens': ['IDENT'],
43+
'toString': null,
44+
'unparsed': ['IDENT'],
45+
'warnings': null
46+
}
47+
});
48+
49+

0 commit comments

Comments
 (0)