Skip to content

Commit c3d2de8

Browse files
ExE-BossTimothyGu
ExE-Boss
and
TimothyGu
committed
Address review comments
Co-authored-by: Timothy Gu <[email protected]>
1 parent 6db1869 commit c3d2de8

9 files changed

+92
-68
lines changed

‎lib/CSSStyleDeclaration-impl.js

+24-15
Original file line numberDiff line numberDiff line change
@@ -7,25 +7,26 @@ var CSSOM = require('cssom');
77
var allProperties = require('./allProperties');
88
var allExtraProperties = require('./allExtraProperties');
99
var implementedProperties = require('./implementedProperties');
10-
var { dashedToCamelCase } = require('./parsers');
10+
var { cssPropertyToIDLAttribute } = require('./parsers');
1111
var getBasicPropertyDescriptor = require('./utils/getBasicPropertyDescriptor');
1212
const idlUtils = require('./utils.js');
1313

14-
class CSSStyleDeclaration {
14+
class CSSStyleDeclarationImpl {
1515
/**
1616
* @constructor
1717
* @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration
18+
*
19+
* @param {object} globalObject
20+
* @param {*[]} args
21+
* @param {object} privateData
22+
* @param {((cssText: string) => void) | null} [privateData.onChangeCallback]
1823
*/
19-
constructor(globalObject, args, { onChangeCallback }) {
24+
constructor(globalObject, args, { onChangeCallback = null }) {
2025
this._globalObject = globalObject;
2126
this._values = {};
2227
this._importants = {};
2328
this._length = 0;
24-
this._onChange =
25-
onChangeCallback ||
26-
function() {
27-
return;
28-
};
29+
this._onChange = onChangeCallback || (() => {});
2930
}
3031

3132
/**
@@ -150,7 +151,7 @@ class CSSStyleDeclaration {
150151
}
151152
}
152153

153-
Object.defineProperties(CSSStyleDeclaration.prototype, {
154+
Object.defineProperties(CSSStyleDeclarationImpl.prototype, {
154155
cssText: {
155156
get: function() {
156157
var properties = [];
@@ -224,22 +225,30 @@ Object.defineProperties(CSSStyleDeclaration.prototype, {
224225
},
225226
});
226227

227-
require('./properties')(CSSStyleDeclaration.prototype);
228+
require('./properties')(CSSStyleDeclarationImpl.prototype);
228229

229230
allProperties.forEach(function(property) {
230231
if (!implementedProperties.has(property)) {
231232
var declaration = getBasicPropertyDescriptor(property);
232-
Object.defineProperty(CSSStyleDeclaration.prototype, property, declaration);
233-
Object.defineProperty(CSSStyleDeclaration.prototype, dashedToCamelCase(property), declaration);
233+
Object.defineProperty(CSSStyleDeclarationImpl.prototype, property, declaration);
234+
Object.defineProperty(
235+
CSSStyleDeclarationImpl.prototype,
236+
cssPropertyToIDLAttribute(property),
237+
declaration
238+
);
234239
}
235240
});
236241

237242
allExtraProperties.forEach(function(property) {
238243
if (!implementedProperties.has(property)) {
239244
var declaration = getBasicPropertyDescriptor(property);
240-
Object.defineProperty(CSSStyleDeclaration.prototype, property, declaration);
241-
Object.defineProperty(CSSStyleDeclaration.prototype, dashedToCamelCase(property), declaration);
245+
Object.defineProperty(CSSStyleDeclarationImpl.prototype, property, declaration);
246+
Object.defineProperty(
247+
CSSStyleDeclarationImpl.prototype,
248+
cssPropertyToIDLAttribute(property),
249+
declaration
250+
);
242251
}
243252
});
244253

245-
exports.implementation = CSSStyleDeclaration;
254+
exports.implementation = CSSStyleDeclarationImpl;

‎lib/CSSStyleDeclaration.test.js

+4-5
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,16 @@ var CSSStyleDeclaration = require('../index.js');
55
var allProperties = require('./allProperties');
66
var allExtraProperties = require('./allExtraProperties');
77
var implementedProperties = require('./implementedProperties');
8-
var parsers = require('./parsers');
8+
var { cssPropertyToIDLAttribute } = require('./parsers');
99

1010
var dashedProperties = [...allProperties, ...allExtraProperties];
11-
var allowedProperties = dashedProperties.map(parsers.dashedToCamelCase);
12-
allowedProperties.push('cssFloat');
13-
implementedProperties = Array.from(implementedProperties).map(parsers.dashedToCamelCase);
11+
var allowedProperties = ['cssFloat', ...dashedProperties.map(p => cssPropertyToIDLAttribute(p))];
12+
implementedProperties = Array.from(implementedProperties, p => cssPropertyToIDLAttribute(p));
1413
var invalidProperties = implementedProperties.filter(prop => !allowedProperties.includes(prop));
1514

1615
describe('CSSStyleDeclaration', () => {
1716
test('has only valid properties implemented', () => {
18-
expect(invalidProperties.length).toEqual(0);
17+
expect(invalidProperties).toEqual([]);
1918
});
2019

2120
test('has all properties', () => {

‎lib/parsers.js

+38-25
Original file line numberDiff line numberDiff line change
@@ -447,22 +447,35 @@ exports.parseKeyword = function parseKeyword(val, valid_keywords) {
447447
return undefined;
448448
};
449449

450-
// utility to translate from border-width to borderWidth
451-
var dashedToCamelCase = function(dashed) {
452-
var i;
453-
var camel = '';
454-
var nextCap = false;
455-
for (i = 0; i < dashed.length; i++) {
456-
if (dashed[i] !== '-') {
457-
camel += nextCap ? dashed[i].toUpperCase() : dashed[i];
458-
nextCap = false;
450+
/**
451+
* utility to translate from border-width to borderWidth
452+
*
453+
* @param {string} property
454+
* @param {boolean} [lowercaseFirst]
455+
* @see https://drafts.csswg.org/cssom/#css-property-to-idl-attribute
456+
*/
457+
function cssPropertyToIDLAttribute(property, lowercaseFirst = false) {
458+
let output = '';
459+
let uppercaseNext = false;
460+
461+
if (lowercaseFirst) {
462+
property = property.substring(1);
463+
}
464+
465+
for (const c of property) {
466+
if (c === '-') {
467+
uppercaseNext = true;
468+
} else if (uppercaseNext) {
469+
uppercaseNext = false;
470+
output += c.toUpperCase();
459471
} else {
460-
nextCap = true;
472+
output += c;
461473
}
462474
}
463-
return camel;
464-
};
465-
exports.dashedToCamelCase = dashedToCamelCase;
475+
476+
return output;
477+
}
478+
exports.cssPropertyToIDLAttribute = cssPropertyToIDLAttribute;
466479

467480
var is_space = /\s/;
468481
var opening_deliminators = ['"', "'", '('];
@@ -566,7 +579,7 @@ exports.shorthandSetter = function(property, shorthand_for) {
566579
Object.keys(obj).forEach(function(subprop) {
567580
// in case subprop is an implicit property, this will clear
568581
// *its* subpropertiesX
569-
var camel = dashedToCamelCase(subprop);
582+
var camel = cssPropertyToIDLAttribute(subprop);
570583
this[camel] = obj[subprop];
571584
// in case it gets translated into something else (0 -> 0px)
572585
obj[subprop] = this[camel];
@@ -708,15 +721,15 @@ exports.subImplicitSetter = function(prefix, part, isValid, parser) {
708721
};
709722
};
710723

711-
var camel_to_dashed = /[A-Z]/g;
712-
var first_segment = /^([^-]+)-/;
713-
var vendor_prefixes = ['o', 'moz', 'ms', 'webkit'];
714-
exports.camelToDashed = function(camel_case) {
715-
var match;
716-
var dashed = camel_case.replace(camel_to_dashed, '-$&').toLowerCase();
717-
match = dashed.match(first_segment);
718-
if (match && vendor_prefixes.indexOf(match[1]) !== -1) {
719-
dashed = '-' + dashed;
720-
}
721-
return dashed;
724+
const camel_to_dashed = /[A-Z]/g;
725+
726+
/**
727+
* @param {string} attribute
728+
* @param {boolean} [dashPrefix]
729+
* @see https://drafts.csswg.org/cssom/#idl-attribute-to-css-property
730+
*/
731+
exports.idlAttributeToCSSProperty = (attribute, dashPrefix = false) => {
732+
let output = dashPrefix ? '-' : '';
733+
output += attribute.replace(camel_to_dashed, '-$&').toLowerCase();
734+
return output;
722735
};

‎lib/parsers.test.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ describe('parseAngle', () => {
116116
describe('parseKeyword', () => {
117117
it.todo('test');
118118
});
119-
describe('dashedToCamelCase', () => {
119+
describe('cssPropertyToIDLAttribute', () => {
120120
it.todo('test');
121121
});
122122
describe('shorthandParser', () => {
@@ -134,6 +134,6 @@ describe('implicitSetter', () => {
134134
describe('subImplicitSetter', () => {
135135
it.todo('test');
136136
});
137-
describe('camelToDashed', () => {
137+
describe('idlAttributeToCSSProperty', () => {
138138
it.todo('test');
139139
});

‎scripts/convert-idl.js

+13-14
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,23 @@ const Transformer = require('webidl2js');
66

77
const allProperties = require('../lib/allProperties.js');
88
const allExtraProperties = require('../lib/allExtraProperties.js');
9-
const parsers = require('../lib/parsers.js');
9+
const { cssPropertyToIDLAttribute } = require('../lib/parsers.js');
1010

1111
const srcDir = path.resolve(__dirname, '../src');
1212
const implDir = path.resolve(__dirname, '../lib');
1313
const outputDir = implDir;
1414

15-
const propertyNames = Array.from(allProperties)
16-
.concat(
17-
Array.from(allExtraProperties).filter(prop => prop !== 'css-float' && !allProperties.has(prop))
18-
)
19-
.sort();
15+
const propertyNames = [
16+
...allProperties,
17+
...Array.from(allExtraProperties).filter(prop => {
18+
return prop !== 'css-float' && !allProperties.has(prop);
19+
}),
20+
].sort();
2021

21-
const camelCasedAttributes = propertyNames.map(n => parsers.dashedToCamelCase(n));
22+
const camelCasedAttributes = propertyNames.map(n => cssPropertyToIDLAttribute(n));
2223
const webkitCasedAttributes = propertyNames
2324
.filter(n => n.startsWith('-webkit-'))
24-
.map(n => parsers.dashedToCamelCase(n.substring(1)));
25+
.map(n => cssPropertyToIDLAttribute(n, true));
2526
const dashedAttributes = propertyNames.filter(n => n.includes('-'));
2627

2728
{
@@ -34,13 +35,11 @@ const dashedAttributes = propertyNames.filter(n => n.includes('-'));
3435
}
3536
);
3637

37-
const dateToday = new Date();
3838
genIDL.write(
39-
`// autogenerated - ${dateToday.getMonth() +
40-
1}/${dateToday.getDate()}/${dateToday.getFullYear()}
39+
`// autogenerated by scripts/convert-idl.js. do not edit! ${new Date().toISOString()}
4140
4241
partial interface CSSStyleDeclaration {
43-
// https://drafts.csswg.org/cssom/#ref-for-cssstyledeclaration④
42+
// https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-camel_cased_attribute
4443
`
4544
);
4645

@@ -50,7 +49,7 @@ partial interface CSSStyleDeclaration {
5049
}
5150

5251
genIDL.write(`
53-
// https://drafts.csswg.org/cssom/#ref-for-cssstyledeclaration⑤
52+
// https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-webkit_cased_attribute
5453
`);
5554

5655
for (const webkitCasedAttribute of webkitCasedAttributes) {
@@ -59,7 +58,7 @@ partial interface CSSStyleDeclaration {
5958
}
6059

6160
genIDL.write(`
62-
// https://drafts.csswg.org/cssom/#ref-for-cssstyledeclaration⑥
61+
// https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-dashed_attribute
6362
`);
6463

6564
for (const dashedAttribute of dashedAttributes) {

‎scripts/download_latest_properties.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ var path = require('path');
2323

2424
var request = require('request');
2525

26-
const { camelToDashed } = require('../lib/parsers');
26+
const { idlAttributeToCSSProperty } = require('../lib/parsers');
2727

2828
var url = 'https://www.w3.org/Style/CSS/all-properties.en.json';
2929

@@ -69,7 +69,7 @@ request(url, function(error, response, body) {
6969
out_file.write('/*\n *\n * https://www.w3.org/Style/CSS/all-properties.en.html\n */\n\n');
7070
out_file.write(
7171
'module.exports = new Set(' +
72-
JSON.stringify(CSSpropertyNames.map(camelToDashed), null, 2) +
72+
JSON.stringify(CSSpropertyNames.map(idlAttributeToCSSProperty), null, 2) +
7373
');\n'
7474
);
7575

‎scripts/generate_implemented_properties.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,14 @@ const fs = require('fs');
44
const path = require('path');
55
const t = require('babel-types');
66
const generate = require('babel-generator').default;
7-
const camelToDashed = require('../lib/parsers').camelToDashed;
7+
const { idlAttributeToCSSProperty } = require('../lib/parsers');
88

99
const dashedProperties = fs
1010
.readdirSync(path.resolve(__dirname, '../lib/properties'))
11-
.filter(propertyFile => propertyFile.substr(-3) === '.js')
12-
.map(propertyFile => camelToDashed(propertyFile.replace('.js', '')));
11+
.filter(propertyFile => propertyFile.slice(-3) === '.js')
12+
.map(propertyFile => {
13+
return idlAttributeToCSSProperty(propertyFile.slice(0, -3), propertyFile.startsWith('webkit'));
14+
});
1315

1416
const out_file = fs.createWriteStream(path.resolve(__dirname, '../lib/implementedProperties.js'), {
1517
encoding: 'utf-8',

‎scripts/generate_properties.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ var generate = require('babel-generator').default;
88
var traverse = require('babel-traverse').default;
99
var resolve = require('resolve');
1010

11-
var camelToDashed = require('../lib/parsers').camelToDashed;
11+
var { idlAttributeToCSSProperty } = require('../lib/parsers');
1212

1313
var basename = path.basename;
1414
var dirname = path.dirname;
@@ -254,7 +254,7 @@ parsedFiles.forEach(function(file) {
254254
});
255255
var propertyDefinitions = [];
256256
parsedFiles.forEach(function(file) {
257-
var dashed = camelToDashed(file.property);
257+
var dashed = idlAttributeToCSSProperty(file.property);
258258
propertyDefinitions.push(
259259
t.objectProperty(
260260
t.identifier(file.property),

‎src/CSSStyleDeclaration.webidl

+2
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,5 @@ interface CSSStyleDeclaration {
1414
readonly attribute CSSRule? parentRule;
1515
[CEReactions] attribute [TreatNullAs=EmptyString] CSSOMString cssFloat;
1616
};
17+
18+
// Additional partial interfaces are generated by `scripts/convert-idl.js`.

0 commit comments

Comments
 (0)