Add script to remove prefixed CSS from third_party/polymer.

third_party/polymer/v1_0/css_strip_prefixes.js

Index: third_party/polymer/v1_0/css_strip_prefixes.js
diff --git a/third_party/polymer/v1_0/css_strip_prefixes.js b/third_party/polymer/v1_0/css_strip_prefixes.js
new file mode 100644
index 0000000000000000000000000000000000000000..ec0f53b1c523701b357e039003728ebc010cd716
--- /dev/null
+++ b/third_party/polymer/v1_0/css_strip_prefixes.js
@@ -0,0 +1,114 @@
+/**
+ * @fileoverview Script to remove CSS prefixed rules that don't apply to
+ * Chromium.
+ */
+var fs = require('fs');
+var glob = require('glob').sync;
+var path = require('path');
+
+
+/**
+ * Strips CSS rules/attributes from the file in-place.
+ * @param {string} filename The filename to process.
+ */
+function processFile(filename) {
+  var fileContents = fs.readFileSync(filename, {'encoding': 'utf-8'});
+  var lines = fileContents.split('\n');
+  var processedFileContents = reconstructFile(lines, findLinesToRemove(lines));
+  fs.writeFileSync(filename, processedFileContents);
+  console.log('processedFile', filename);
+}
+
+
+/**
+ * @return {!Array<string>} lines
+ * @return {!Array<number>} The lines numbers that need to be removed in
+ *     ascinding order.
+ */
+function findLinesToRemove(lines) {
+  // Regex used to detect CSS attributes or even entire CSS rules to be removed.
+  var prefixRegex = new RegExp(/-webkit-|-moz-|-ms-/);

[Dan Beam, 2016/01/26 17:31:45]

new RegExp(/regexLiteral/) makes very little sense.  it should probably just be
/regexLiteral/

+
+  // Regexes used to remove entire CSS rules that can span multiple lines.
+  var cssRulesToRemove = [
+    new RegExp(/@-webkit-keyframes/),

[Dan Beam, 2016/01/26 17:31:45]

why are you removing this?

+    new RegExp(/-moz-placeholder/),
+    new RegExp(/-ms-input-placeholder/),
+  ];
+
+  // Regexes used to preserve a CSS rule that can span multiple lines.
+  var cssRulesToPreserve = [
+    new RegExp(/-webkit-input-placeholder/),
+  ];
+
+  var openingBracketRegex = new RegExp(/{/);
+  var closingBracketRegex = new RegExp(/}/);
+
+  // Whether currently visited line is within a CSS rule that should be removed.
+  var inCssRuleToRemove = false;
+  // Whether currently visited line is within a CSS rule that should be
+  // preserved.
+  var inCssRuleToPreserve = false;
+  // Current number of nested-levels with respect to curly braces.
+  var levelCounter = 0;
+
+  return lines.reduce(function(soFar, line, index) {
+    if (inCssRuleToRemove || inCssRuleToPreserve) {
+      if (openingBracketRegex.test(line)) {
+        levelCounter++;
+      }
+      if (closingBracketRegex.test(line)) {
+        levelCounter--;
+      }
+
+      if (!inCssRuleToPreserve) {
+        soFar.push(index);
+      }
+
+      if (levelCounter == 0) {
+        inCssRuleToRemove = false;
+        inCssRuleToPreserve = false;
+      }
+    } else if (prefixRegex.test(line)) {
+      inCssRuleToRemove = cssRulesToRemove.some(
+          function(regex) { return regex.test(line); });
+      inCssRuleToPreserve = cssRulesToPreserve.some(
+          function(regex) { return regex.test(line); });
+
+      if (inCssRuleToRemove || inCssRuleToPreserve) {
+        levelCounter++;
+        if (inCssRuleToRemove) {
+          soFar.push(index);
+        }
+      } else {
+        soFar.push(index);
+      }
+    }
+    return soFar;
+  }, []);

[Dan Beam, 2016/01/26 17:31:45]

I have no idea what this code does, frankly, but the major problem is this:

#rule {
  -webkit-border-radius: 5px;
}

if you strip that ^ rule, you lose a style.

#rule {
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

if you strip the -webkit one ^ here, you have the same style with less cruft.

so you basically need to end up writing a map of

_EXACTLY_EQUIVALENT_PREFIXED_RULES = {
  '-webkit-border-radius': 'border-radius',
}

and make sure that you only strip in the case that you're sure something doesn't
get messed up.

oh yeah: and pray that you don't tickle cases where the prefixed and unprefixed
versions aren't subtly different, as well as handle when shorthands and
"longhands"(?) override eachother in the same rule.

+}
+
+
+/**
+ * Generates the final processed file.
+ * @param {!Array<string>} lines The lines to be process.
+ * @param {!Array<number>} linesToRemove Indices of the lines to be removed in
+ *     ascending order.
+ * @return {string} The contents of the processed file.
+ */
+function reconstructFile(lines, linesToRemove) {
+  var matchWhiteSpaceRegex = /\s+/;
+  // Process line numbers in descinding order, such that the array can be
+  // modified in-place.
+  linesToRemove.reverse().forEach(function(lineIndex) {
+    lines.splice(lineIndex, 1);
+  });
+  return lines.join('\n');
+}
+
+
+var srcDir = path.resolve(path.join(__dirname, 'components-chromium'));
+var htmlFiles = glob(srcDir + '/**/*.html');
+var cssFiles = glob(srcDir + '/**/*.css');
+htmlFiles.concat(cssFiles).forEach(processFile);
+console.log('DONE');