Fix webkit properties

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
+      );
+    }
   }
 });
 

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');
+  });
 });

lib/allProperties.js

@@ -8,7 +8,6 @@
  */
 
 module.exports = new Set([
-  '-webkit-line-clamp',
   'accent-color',
   'align-content',
   'align-items',

lib/allWebkitProperties.js

@@ -191,4 +191,4 @@ module.exports = [
   'wrap-through',
   'writing-mode',
   'zoom',
-].map((prop) => 'webkit-' + prop);
+].map((prop) => '-webkit-' + prop);

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,
+  };
+};

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',

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),