From fa3b2f6b2c795fe3231111ac4f8972774128c728 Mon Sep 17 00:00:00 2001 From: nyro Date: Sun, 26 Nov 2023 23:22:20 +0100 Subject: [PATCH 1/2] Fix webkit properties --- lib/CSSStyleDeclaration.js | 15 ++++++-- lib/CSSStyleDeclaration.test.js | 36 +++++++++++++++++++ lib/allProperties.js | 1 - lib/allWebkitProperties.js | 2 +- lib/properties/webkitBorderAfterColor.js | 14 -------- lib/properties/webkitBorderBeforeColor.js | 14 -------- lib/properties/webkitBorderEndColor.js | 14 -------- lib/properties/webkitBorderStartColor.js | 14 -------- lib/properties/webkitColumnRuleColor.js | 14 -------- .../webkitMatchNearestMailBlockquoteColor.js | 14 -------- lib/properties/webkitTapHighlightColor.js | 14 -------- lib/properties/webkitTextEmphasisColor.js | 14 -------- lib/properties/webkitTextFillColor.js | 14 -------- lib/properties/webkitTextStrokeColor.js | 14 -------- lib/utils/getColorPropertyDescriptor.js | 16 +++++++++ package-lock.json | 2 +- scripts/generate_implemented_properties.js | 10 +++++- scripts/generate_properties.js | 4 +++ 18 files changed, 80 insertions(+), 146 deletions(-) delete mode 100644 lib/properties/webkitBorderAfterColor.js delete mode 100644 lib/properties/webkitBorderBeforeColor.js delete mode 100644 lib/properties/webkitBorderEndColor.js delete mode 100644 lib/properties/webkitBorderStartColor.js delete mode 100644 lib/properties/webkitColumnRuleColor.js delete mode 100644 lib/properties/webkitMatchNearestMailBlockquoteColor.js delete mode 100644 lib/properties/webkitTapHighlightColor.js delete mode 100644 lib/properties/webkitTextEmphasisColor.js delete mode 100644 lib/properties/webkitTextFillColor.js delete mode 100644 lib/properties/webkitTextStrokeColor.js create mode 100644 lib/utils/getColorPropertyDescriptor.js diff --git a/lib/CSSStyleDeclaration.js b/lib/CSSStyleDeclaration.js index 9e7b069..0b4e71e 100644 --- a/lib/CSSStyleDeclaration.js +++ b/lib/CSSStyleDeclaration.js @@ -9,6 +9,7 @@ var allExtraProperties = require('./allExtraProperties'); var implementedProperties = require('./implementedProperties'); var { dashedToCamelCase } = require('./parsers'); var getBasicPropertyDescriptor = require('./utils/getBasicPropertyDescriptor'); +var getColorPropertyDescriptor = require('./utils/getColorPropertyDescriptor'); /** * @constructor @@ -251,9 +252,19 @@ allProperties.forEach(function (property) { allExtraProperties.forEach(function (property) { if (!implementedProperties.has(property)) { - var declaration = getBasicPropertyDescriptor(property); + var declaration = property.endsWith('-color') + ? getColorPropertyDescriptor(property) + : getBasicPropertyDescriptor(property); Object.defineProperty(CSSStyleDeclaration.prototype, property, declaration); - Object.defineProperty(CSSStyleDeclaration.prototype, dashedToCamelCase(property), declaration); + var camelCased = dashedToCamelCase(property); + Object.defineProperty(CSSStyleDeclaration.prototype, camelCased, declaration); + if (property.startsWith('-')) { + Object.defineProperty( + CSSStyleDeclaration.prototype, + camelCased.charAt(0).toLowerCase() + camelCased.slice(1), + declaration + ); + } } }); diff --git a/lib/CSSStyleDeclaration.test.js b/lib/CSSStyleDeclaration.test.js index 32a0c83..79bed94 100644 --- a/lib/CSSStyleDeclaration.test.js +++ b/lib/CSSStyleDeclaration.test.js @@ -553,4 +553,40 @@ describe('CSSStyleDeclaration', () => { style.setProperty('width', 'calc(100% - 100px)'); expect(style.getPropertyValue('width')).toEqual('calc(100% - 100px)'); }); + + test('implements webkitTextFillColor', () => { + const style = new CSSStyleDeclaration(); + style.setProperty('-webkit-text-fill-color', '#ffffff66'); + + expect(style.webkitTextFillColor).toEqual('rgba(255, 255, 255, 0.4)'); + expect(style.WebkitTextFillColor).toEqual('rgba(255, 255, 255, 0.4)'); + expect(style.cssText).toEqual('-webkit-text-fill-color: rgba(255, 255, 255, 0.4);'); + }); + + test('vendor property with cssText', () => { + const style = new CSSStyleDeclaration(); + style.cssText = '-webkit-line-clamp: 20'; + + expect(style.WebkitLineClamp).toEqual('20'); + expect(style.webkitLineClamp).toEqual('20'); + expect(style.getPropertyValue('-webkit-line-clamp')).toEqual('20'); + }); + + test('-webkit-transform', () => { + const style = new CSSStyleDeclaration(); + style.cssText = '-webkit-transform: scale(2);'; + + expect(style.WebkitTransform).toEqual('scale(2)'); + expect(style.WebkitTransform).toEqual('scale(2)'); + expect(style.getPropertyValue('-webkit-transform')).toEqual('scale(2)'); + }); + + test('-webkit-text-stroke-width', () => { + const style = new CSSStyleDeclaration(); + style.cssText = '-webkit-text-stroke-width: 0.5em;'; + + expect(style.WebkitTextStrokeWidth).toEqual('0.5em'); + expect(style.webkitTextStrokeWidth).toEqual('0.5em'); + expect(style.getPropertyValue('-webkit-text-stroke-width')).toEqual('0.5em'); + }); }); diff --git a/lib/allProperties.js b/lib/allProperties.js index 958dd0d..b020698 100644 --- a/lib/allProperties.js +++ b/lib/allProperties.js @@ -8,7 +8,6 @@ */ module.exports = new Set([ - '-webkit-line-clamp', 'accent-color', 'align-content', 'align-items', diff --git a/lib/allWebkitProperties.js b/lib/allWebkitProperties.js index 0a74fa9..f75551e 100644 --- a/lib/allWebkitProperties.js +++ b/lib/allWebkitProperties.js @@ -191,4 +191,4 @@ module.exports = [ 'wrap-through', 'writing-mode', 'zoom', -].map((prop) => 'webkit-' + prop); +].map((prop) => '-webkit-' + prop); diff --git a/lib/properties/webkitBorderAfterColor.js b/lib/properties/webkitBorderAfterColor.js deleted file mode 100644 index b623180..0000000 --- a/lib/properties/webkitBorderAfterColor.js +++ /dev/null @@ -1,14 +0,0 @@ -'use strict'; - -var parseColor = require('../parsers').parseColor; - -module.exports.definition = { - set: function (v) { - this._setProperty('-webkit-border-after-color', parseColor(v)); - }, - get: function () { - return this.getPropertyValue('-webkit-border-after-color'); - }, - enumerable: true, - configurable: true, -}; diff --git a/lib/properties/webkitBorderBeforeColor.js b/lib/properties/webkitBorderBeforeColor.js deleted file mode 100644 index af6afe6..0000000 --- a/lib/properties/webkitBorderBeforeColor.js +++ /dev/null @@ -1,14 +0,0 @@ -'use strict'; - -var parseColor = require('../parsers').parseColor; - -module.exports.definition = { - set: function (v) { - this._setProperty('-webkit-border-before-color', parseColor(v)); - }, - get: function () { - return this.getPropertyValue('-webkit-border-before-color'); - }, - enumerable: true, - configurable: true, -}; diff --git a/lib/properties/webkitBorderEndColor.js b/lib/properties/webkitBorderEndColor.js deleted file mode 100644 index 81eddfe..0000000 --- a/lib/properties/webkitBorderEndColor.js +++ /dev/null @@ -1,14 +0,0 @@ -'use strict'; - -var parseColor = require('../parsers').parseColor; - -module.exports.definition = { - set: function (v) { - this._setProperty('-webkit-border-end-color', parseColor(v)); - }, - get: function () { - return this.getPropertyValue('-webkit-border-end-color'); - }, - enumerable: true, - configurable: true, -}; diff --git a/lib/properties/webkitBorderStartColor.js b/lib/properties/webkitBorderStartColor.js deleted file mode 100644 index 5045ec6..0000000 --- a/lib/properties/webkitBorderStartColor.js +++ /dev/null @@ -1,14 +0,0 @@ -'use strict'; - -var parseColor = require('../parsers').parseColor; - -module.exports.definition = { - set: function (v) { - this._setProperty('-webkit-border-start-color', parseColor(v)); - }, - get: function () { - return this.getPropertyValue('-webkit-border-start-color'); - }, - enumerable: true, - configurable: true, -}; diff --git a/lib/properties/webkitColumnRuleColor.js b/lib/properties/webkitColumnRuleColor.js deleted file mode 100644 index 55ba5b1..0000000 --- a/lib/properties/webkitColumnRuleColor.js +++ /dev/null @@ -1,14 +0,0 @@ -'use strict'; - -var parseColor = require('../parsers').parseColor; - -module.exports.definition = { - set: function (v) { - this._setProperty('-webkit-column-rule-color', parseColor(v)); - }, - get: function () { - return this.getPropertyValue('-webkit-column-rule-color'); - }, - enumerable: true, - configurable: true, -}; diff --git a/lib/properties/webkitMatchNearestMailBlockquoteColor.js b/lib/properties/webkitMatchNearestMailBlockquoteColor.js deleted file mode 100644 index 08a9324..0000000 --- a/lib/properties/webkitMatchNearestMailBlockquoteColor.js +++ /dev/null @@ -1,14 +0,0 @@ -'use strict'; - -var parseColor = require('../parsers').parseColor; - -module.exports.definition = { - set: function (v) { - this._setProperty('-webkit-match-nearest-mail-blockquote-color', parseColor(v)); - }, - get: function () { - return this.getPropertyValue('-webkit-match-nearest-mail-blockquote-color'); - }, - enumerable: true, - configurable: true, -}; diff --git a/lib/properties/webkitTapHighlightColor.js b/lib/properties/webkitTapHighlightColor.js deleted file mode 100644 index e603f48..0000000 --- a/lib/properties/webkitTapHighlightColor.js +++ /dev/null @@ -1,14 +0,0 @@ -'use strict'; - -var parseColor = require('../parsers').parseColor; - -module.exports.definition = { - set: function (v) { - this._setProperty('-webkit-tap-highlight-color', parseColor(v)); - }, - get: function () { - return this.getPropertyValue('-webkit-tap-highlight-color'); - }, - enumerable: true, - configurable: true, -}; diff --git a/lib/properties/webkitTextEmphasisColor.js b/lib/properties/webkitTextEmphasisColor.js deleted file mode 100644 index 1a06690..0000000 --- a/lib/properties/webkitTextEmphasisColor.js +++ /dev/null @@ -1,14 +0,0 @@ -'use strict'; - -var parseColor = require('../parsers').parseColor; - -module.exports.definition = { - set: function (v) { - this._setProperty('-webkit-text-emphasis-color', parseColor(v)); - }, - get: function () { - return this.getPropertyValue('-webkit-text-emphasis-color'); - }, - enumerable: true, - configurable: true, -}; diff --git a/lib/properties/webkitTextFillColor.js b/lib/properties/webkitTextFillColor.js deleted file mode 100644 index 980fc47..0000000 --- a/lib/properties/webkitTextFillColor.js +++ /dev/null @@ -1,14 +0,0 @@ -'use strict'; - -var parseColor = require('../parsers').parseColor; - -module.exports.definition = { - set: function (v) { - this._setProperty('-webkit-text-fill-color', parseColor(v)); - }, - get: function () { - return this.getPropertyValue('-webkit-text-fill-color'); - }, - enumerable: true, - configurable: true, -}; diff --git a/lib/properties/webkitTextStrokeColor.js b/lib/properties/webkitTextStrokeColor.js deleted file mode 100644 index 1bdc641..0000000 --- a/lib/properties/webkitTextStrokeColor.js +++ /dev/null @@ -1,14 +0,0 @@ -'use strict'; - -var parseColor = require('../parsers').parseColor; - -module.exports.definition = { - set: function (v) { - this._setProperty('-webkit-text-stroke-color', parseColor(v)); - }, - get: function () { - return this.getPropertyValue('-webkit-text-stroke-color'); - }, - enumerable: true, - configurable: true, -}; diff --git a/lib/utils/getColorPropertyDescriptor.js b/lib/utils/getColorPropertyDescriptor.js new file mode 100644 index 0000000..528d11f --- /dev/null +++ b/lib/utils/getColorPropertyDescriptor.js @@ -0,0 +1,16 @@ +'use strict'; + +var parseColor = require('../parsers').parseColor; + +module.exports = function getColorPropertyDescriptor(name) { + return { + set: function (v) { + this._setProperty(name, parseColor(v)); + }, + get: function () { + return this.getPropertyValue(name); + }, + enumerable: true, + configurable: true, + }; +}; diff --git a/package-lock.json b/package-lock.json index ebddcf8..3c65c87 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,7 +26,7 @@ "resolve": "^1.22.1" }, "engines": { - "node": ">=8" + "node": ">=14" } }, "node_modules/@ampproject/remapping": { diff --git a/scripts/generate_implemented_properties.js b/scripts/generate_implemented_properties.js index 914835e..3336a90 100644 --- a/scripts/generate_implemented_properties.js +++ b/scripts/generate_implemented_properties.js @@ -9,7 +9,15 @@ const camelToDashed = require('../lib/parsers').camelToDashed; const dashedProperties = fs .readdirSync(path.resolve(__dirname, '../lib/properties')) .filter((propertyFile) => propertyFile.substr(-3) === '.js') - .map((propertyFile) => camelToDashed(propertyFile.replace('.js', ''))); + .map((propertyFile) => camelToDashed(propertyFile.replace('.js', ''))) + .map((property) => { + const isWebkit = /^-webkit-/.test(property); + if (isWebkit) { + return '-' + property; + } else { + return property; + } + }); const out_file = fs.createWriteStream(path.resolve(__dirname, '../lib/implementedProperties.js'), { encoding: 'utf-8', diff --git a/scripts/generate_properties.js b/scripts/generate_properties.js index eabfdb1..7035d7a 100644 --- a/scripts/generate_properties.js +++ b/scripts/generate_properties.js @@ -252,6 +252,10 @@ parsedFiles.forEach(function (file) { var propertyDefinitions = []; parsedFiles.forEach(function (file) { var dashed = camelToDashed(file.property); + var isWebkit = /^-webkit-/.test(dashed); + if (isWebkit) { + dashed = '-' + dashed; + } propertyDefinitions.push( t.objectProperty( t.identifier(file.property), From d516bde7b37359fe2c54d01d7384d694a535e00b Mon Sep 17 00:00:00 2001 From: nyro Date: Sun, 26 Nov 2023 23:26:09 +0100 Subject: [PATCH 2/2] Revert package-lock node version --- package-lock.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 3c65c87..ebddcf8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,7 +26,7 @@ "resolve": "^1.22.1" }, "engines": { - "node": ">=14" + "node": ">=8" } }, "node_modules/@ampproject/remapping": {