varsToTypeScript.js

/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

var postcss = require('postcss');
const fs = require('fs');

const customPropertyRegExp = /^--[A-z][\w-]*$/;
const patterns = [
  [/^--spectrum-global-dimension-((?:static-)?size-.*)$/, 'DimensionValue'],
  [/^--spectrum-alias-(?!.*text)(.*-(?:height|width))$/, 'DimensionValue'],
  [/^--spectrum-global-color-(?!.*opacity|status|version)(.*)$/, 'ColorValue'],
  [/^--spectrum-((?:gray|red|orange|yellow|chartreuse|celery|green|seafoam|cyan|blue|indigo|purple|fuchsia|magenta)-.*)$/, 'ColorValueV6'],
  [/^--spectrum-semantic-(.*?)-color-default$/, 'SemanticColorValue', false],
  [/^--spectrum-semantic-(.*?)-color-border$/, 'BorderColorAlias', false],
  [/^--spectrum-alias-border-color-(.*)$/, 'BorderColorAlias', false],
  [/^--spectrum-alias-background-color-(?!.*overlay|quickactions)(.*)$/, 'BackgroundColorAlias', false],
  [/^--spectrum-semantic-(.*?)-color-icon$/, 'IconColorValue'],
  [/^--spectrum-alias-border-size-(.*)$/, 'BorderSizeValue'],
  [/^--spectrum-alias-border-radius-(.*)$/, 'BorderRadiusValue']
];

const baseTypes = {
  DimensionValue: ['string', 'number'],
  ColorValue: ['SemanticColorValue'],
  ColorValueV6: ['SemanticColorValue'],
  BorderColorValue: ['BorderColorAlias', 'ColorValue'],
  BorderColorValueV6: ['BorderColorAlias', 'ColorValueV6'],
  BackgroundColorValue: ['BackgroundColorAlias', 'ColorValue'],
  BackgroundColorValueV6: ['BackgroundColorAlias', 'ColorValueV6']
};

// Parse variables from a file with postcss.
function getVars(file) {
  let contents = fs.readFileSync(file, 'utf8');
  let root = postcss.parse(contents);

  let vars = {};
  root.walkRules(rule => {
    rule.walkDecls(decl => {
      if (customPropertyRegExp.test(decl.prop)) {
        vars[decl.prop] = decl.value;
      }
    });
  });

  return vars;
}

let globals = getVars(`${__dirname}/../packages/@adobe/spectrum-css-temp/vars/spectrum-global.css`);
let theme = getVars(`${__dirname}/../packages/@adobe/spectrum-css-temp/vars/spectrum-light.css`);
let scale = getVars(`${__dirname}/../packages/@adobe/spectrum-css-temp/vars/spectrum-medium.css`);

let types = {};
let shouldExport = {};
for (let [pattern, type, exp] of patterns) {
  types[type] = [];
  shouldExport[type] = exp;
}

types.BorderColorValue = [];
types.BorderColorValueV6 = [];
types.BackgroundColorValue = [];
types.BackgroundColorValueV6 = [];

for (let name in {...theme, ...scale, ...globals}) {
  for (let [pattern, type] of patterns) {
    let m = name.match(pattern);
    if (m) {
      types[type].push(m[1]);
    }
  }
}

types.BorderColorValue.unshift('default'); // DNA just has --spectrum-alias-border-color which doesn't fit the pattern

let ts = '// This file is generated by lib/varsToTypeScript.js! DO NOT EDIT.\n\n';

for (let type in types) {
  if (shouldExport[type] !== false) {
    ts += 'export ';
  }

  ts += `type ${type} =\n`;
  for (let v of types[type]) {
    ts += `  | '${v}'\n`;
  }

  if (baseTypes[type]) {
    for (let baseType of baseTypes[type]) {
      ts += `  | ${baseType}\n`;
    }
  }

  ts = ts.trim() + ';\n\n';
}

fs.writeFileSync(`${__dirname}/../packages/@react-types/shared/src/dna.d.ts`, ts.trim() + '\n');