Internal: Add CSS variables checks

package.json

@@ -55,15 +55,16 @@
   "scripts": {
     "build": "cd packages/gestalt && yarn build && cd ../gestalt-datepicker && yarn build",
     "codemod": "jscodeshift --ignore-pattern=**/node_modules/**",
-    "lint:js": "eslint .",
-    "lint:css": "stylelint \"packages/**/*.css\"",
+    "css:validate": "./scripts/cssValidate.js",
     "flow-generate:css": "(css-modules-flow-types packages/gestalt/src/ >/dev/null) && (css-modules-flow-types packages/gestalt-datepicker/src/ >/dev/null)",
+    "format": "prettier --write \"**/*.{css,html,js,md,yml}\"",
     "greenkeeper-lockfile-update": "greenkeeper-lockfile-update",
     "greenkeeper-lockfile-upload": "greenkeeper-lockfile-upload",
+    "lint:css": "stylelint \"packages/**/*.css\"",
+    "lint:js": "eslint .",
+    "precommit": "lint-staged",
     "start": "(cd docs && yarn start) & (cd packages/gestalt && yarn watch) & (cd packages/gestalt-datepicker && yarn watch)",
-    "test": "./scripts/test.sh",
-    "format": "prettier --write \"**/*.{css,html,js,md,yml}\"",
-    "precommit": "lint-staged"
+    "test": "./scripts/test.sh"
   },
   "jest": {
     "projects": [

scripts/cssValidate.js

@@ -0,0 +1,65 @@
+#!/usr/bin/env node
+const fs = require('fs');
+const postcss = require('postcss');
+const globby = require('globby');
+
+const duplicateVariablesDifferentValues = async () => {
+  const files = await globby([
+    'packages/gestalt/src/**/*.css',
+    'packages/gestalt-datepicker/src/**/*.css',
+  ]);
+
+  const combined = (
+    await Promise.all(
+      files.map(async file => {
+        return await fs.promises.readFile(file, 'utf8');
+      })
+    )
+  ).join('');
+
+  const astRoot = postcss.parse(combined);
+
+  const lookup = {};
+  astRoot.walkDecls(/^--gestalt/, ({ prop, value }) => {
+    if (lookup[prop] && lookup[prop] !== value) {
+      throw new Error(
+        `CSS Validate error: ${prop} is defined multiple times with different values: ${lookup[prop]} & ${value}.\nPlease make these the same`
+      );
+    }
+    lookup[prop] = value;
+  });
+};
+
+const noVarInLegacyCSS = async () => {
+  const combined = (
+    await Promise.all(
+      [
+        'packages/gestalt/dist/gestalt.css',
+        'packages/gestalt-datepicker/dist/gestalt-datepicker.css',
+      ].map(async file => {
+        return await fs.promises.readFile(file, 'utf8');
+      })
+    )
+  ).join('');
+
+  const astRoot = postcss.parse(combined);
+
+  astRoot.walkDecls(/^--gestalt/, ({ prop, value }) => {
+    throw new Error(
+      `CSS Validate error: ${prop} CSS variable with value ${value} is defined in the legacy CSS - this will break IE and older browsers`
+    );
+  });
+};
+
+(async function cssValidate() {
+  try {
+    await duplicateVariablesDifferentValues();
+    await noVarInLegacyCSS();
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+    process.exit(1);
+  }
+
+  process.exit(0);
+})();

scripts/test.sh

@@ -20,6 +20,9 @@ yarn flow check
 echo "CSS: flow types"
 yarn run flow-generate:css
 
+echo "CSS: variables"
+yarn run css:validate
+
 FILES=$(git diff --name-only -- '*.flow')
 if [[ "$FILES" ]]
 then