chore: Update to Node 20

.circleci/config.yml

@@ -19,22 +19,22 @@ orbs:
 executors:
   rsp:
     docker:
-      - image: cimg/node:18.20.3
+      - image: cimg/node:20.18.2
     environment:
       CACHE_VERSION: v1
     working_directory: ~/react-spectrum
 
   rsp-large:
     docker:
-      - image: cimg/node:18.20.3
+      - image: cimg/node:20.18.2
     resource_class: large
     environment:
       CACHE_VERSION: v1
     working_directory: ~/react-spectrum
 
   rsp-xlarge:
     docker:
-      - image: cimg/node:18.20.3
+      - image: cimg/node:20.18.2
     resource_class: xlarge
     environment:
       CACHE_VERSION: v1

.github/actions/branch/action.yml

@@ -1,5 +1,5 @@
 name: 'Branch from fork'
 description: 'creates a branch based off PR from fork'
 runs:
-  using: 'node18'
+  using: 'node20'
   main: 'index.js'

.github/actions/comment/action.yml

@@ -1,5 +1,5 @@
 name: 'PR Comment'
 description: 'Comment on the PR attached to a commit'
 runs:
-  using: 'node12'
+  using: 'node20'
   main: 'index.js'

.github/actions/permissions/action.yml

@@ -1,5 +1,5 @@
 name: 'Check permissions'
 description: 'Checks if commentor has write access or above'
 runs:
-  using: 'node18'
+  using: 'node20'
   main: 'index.js'

.nvmrc

@@ -1 +1 @@
-18.*
+20.*

examples/remix/package.json

@@ -30,7 +30,7 @@
     "vite-tsconfig-paths": "^4.2.1"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.0.0"
   },
   "workspaces": [
     "../../packages/react-aria-components",

package.json

@@ -33,7 +33,7 @@
     "test-storybook": "test-storybook --url http://localhost:9003  --browsers chromium --no-cache",
     "test:docs": "yarn playwright install && node scripts/testDocs.js",
     "build": "make build",
-    "test:ssr": "cross-env STRICT_MODE=1 yarn jest --config jest.ssr.config.js",
+    "test:ssr": "cross-env STRICT_MODE=1 yarn jest --runInBand --config jest.ssr.config.js",
     "ci-test": "cross-env STRICT_MODE=1 yarn jest --maxWorkers=2 && cross-env STRICT_MODE=1 yarn test:ssr --runInBand",
     "lint": "concurrently \"yarn check-types\" \"eslint packages\" \"node scripts/lint-packages.js\" \"yarn constraints\"",
     "jest": "jest",
@@ -101,7 +101,7 @@
     "@parcel/transformer-svg-react": "^2.14.0",
     "@parcel/transformer-typescript-types": "^2.14.0",
     "@react-spectrum/s2-icon-builder": "^0.2.0",
-    "@spectrum-css/component-builder": "1.0.1",
+    "@spectrum-css/component-builder": "workspace:^",
     "@spectrum-css/vars": "^2.3.0",
     "@storybook/addon-a11y": "patch:@storybook/addon-a11y@npm%3A^7.6.19#~/.yarn/patches/@storybook-addon-a11y-npm-7.6.19-04b470eae0.patch",
     "@storybook/addon-actions": "^7.6.19",

packages/@adobe/spectrum-css-builder-temp/css/lib/varUtils.js

@@ -0,0 +1,149 @@
+/*
+Copyright 2019 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.
+*/
+
+const gulp = require('gulp');
+const postcss = require('postcss');
+const concat = require('gulp-concat');
+const through = require('through2');
+const fsp = require('fs').promises;
+const logger = require('gulplog');
+const path = require('path');
+
+function getVarsFromCSS(css) {
+  let variableList = [];
+  let root = postcss.parse(css);
+
+  root.walkRules((rule, ruleIndex) => {
+    rule.walkDecls((decl) => {
+      let matches = decl.value.match(/var\(.*?\)/g);
+      if (matches) {
+        matches.forEach(function (match) {
+          let varName = match.replace(/var\((--[\w-]+),?.*?\)/, '$1').trim();
+          if (variableList.indexOf(varName) === -1) {
+            variableList.push(varName);
+          }
+        });
+      }
+    });
+  });
+  return variableList;
+}
+
+function getVarValues(css) {
+  let root = postcss.parse(css);
+  let variables = {};
+
+  root.walkRules((rule, ruleIndex) => {
+    rule.walkDecls((decl) => {
+      variables[decl.prop] = decl.value;
+    });
+  });
+
+  return variables;
+}
+
+function getClassNames(contents, pkgName) {
+  let classNames = [];
+
+  if (classNames.length === 0) {
+    logger.error(`Could not find classNames for ${pkgName}, assuming no classNames`);
+    classNames.push('');
+  }
+
+  logger.debug(`Found classNames ${classNames.join(', ')} for ${pkgName}`);
+
+  return classNames;
+}
+
+function resolveValue(value, vars) {
+  if (value) {
+    let match = value.match(/var\((.+),?.*?\)/);
+    if (match) {
+      return match[1];
+    }
+    return value;
+  }
+}
+
+const varDir = path.join(path.dirname(require.resolve('@spectrum-css/vars')), '..');
+
+async function readDNAVariables(file) {
+  let css = await fsp.readFile(path.join(varDir, 'css', file));
+  let vars = getVarValues(css);
+  return vars;
+}
+
+function getVariableDeclarations(classNames, vars) {
+  let varNames = Object.keys(vars);
+  if (varNames.length) {
+    return `
+${classNames.map((className) => `${className}`).join(',\n')} {
+${varNames.map((varName) => `  ${varName}: ${vars[varName]};`).join('\n')}
+}
+`;
+  }
+
+  return '';
+}
+
+function getAllVars() {
+  return new Promise((resolve, reject) => {
+    let variableList;
+
+    gulp.src([
+      `${varDir}/css/themes/*.css`,
+      `${varDir}/css/scales/*.css`,
+      `${varDir}/css/components/*.css`,
+      `${varDir}/css/globals/*.css`
+    ])
+      .pipe(concat('everything.css'))
+      .pipe(through.obj(function getAllVars(file, enc, cb) {
+        variableList = getVarValues(file.contents.toString());
+
+        cb(null, file);
+      }))
+      .on('finish', () => {
+        resolve(variableList);
+      })
+      .on('error', reject);
+  });
+}
+
+function getAllComponentVars() {
+  return new Promise((resolve, reject) => {
+    let variableList;
+
+    gulp.src([
+      `${varDir}/css/components/*.css`,
+      `${varDir}/css/globals/*.css`
+    ])
+      .pipe(concat('everything.css'))
+      .pipe(through.obj(function getAllVars(file, enc, cb) {
+        variableList = getVarValues(file.contents.toString());
+
+        cb(null, file);
+      }))
+      .on('finish', () => {
+        resolve(variableList);
+      })
+      .on('error', reject);
+  });
+}
+
+exports.getAllComponentVars = getAllComponentVars;
+exports.getAllVars = getAllVars;
+exports.getVarsFromCSS = getVarsFromCSS;
+exports.getVarValues = getVarValues;
+exports.getClassNames = getClassNames;
+exports.resolveValue = resolveValue;
+exports.readDNAVariables = readDNAVariables;
+exports.getVariableDeclarations = getVariableDeclarations;

packages/@adobe/spectrum-css-builder-temp/css/plugins/postcss-custom-properties-mapping.js

@@ -0,0 +1,75 @@
+/*
+Copyright 2019 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 valueParser = require('postcss-value-parser');
+let varUtils = require('../lib/varUtils.js');
+
+// match custom property inclusions
+const customPropertiesRegExp = /(^|[^\w-])var\([\W\w]+\)/;
+
+let staticVars;
+let allVars;
+async function fetchVars() {
+  if (staticVars && allVars) {
+    return true;
+  }
+
+  // Read in all static vars
+  staticVars = Object.assign(
+    {},
+    await varUtils.readDNAVariables('globals/spectrum-staticAliases.css'),
+    await varUtils.readDNAVariables('globals/spectrum-fontGlobals.css'),
+    await varUtils.readDNAVariables('globals/spectrum-fontGlobals.css'),
+    await varUtils.readDNAVariables('globals/spectrum-dimensionGlobals.css'),
+    await varUtils.readDNAVariables('globals/spectrum-colorGlobals.css'),
+    await varUtils.readDNAVariables('globals/spectrum-animationGlobals.css')
+  );
+
+  // Read in all variables so we have the value they resolve to
+  allVars = await varUtils.getAllComponentVars();
+
+  return true;
+}
+
+let fetchVarsPromise;
+module.exports = function () {
+  return {
+    postcssPlugin: 'postcss-custom-properties-mapping',
+    OnceExit: async function (root, result) {
+      fetchVarsPromise ??= fetchVars();
+      await fetchVarsPromise;
+
+      root.walkRules((rule, ruleIndex) => {
+        rule.walkDecls((decl) => {
+          if (customPropertiesRegExp.test(decl.value)) {
+            let value = valueParser(decl.value);
+
+            value.walk((node, index, nodes) => {
+              if (node.type === 'function' && node.value === 'var') {
+                let v = node.nodes[0].value;
+
+                // If the value is static, replace the variable with the value.
+                // Otherwise, change the variable name to the mapped name.
+                if (staticVars[v]) {
+                  nodes.splice(index, 1, ...valueParser(`var(${v}, ${staticVars[v]})`).nodes);
+                } else if (allVars[v]) {
+                  nodes.splice(index, 1, ...valueParser(`var(${v}, ${allVars[v]})`).nodes);
+                }
+              }
+            });
+
+            decl.value = value.toString();
+          }
+        });
+      });
+    }
+  };
+};

packages/@adobe/spectrum-css-builder-temp/css/plugins/postcss-custom-properties-passthrough.js

@@ -0,0 +1,28 @@
+/*
+Copyright 2019 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.
+*/
+
+module.exports = function (opts) {
+  opts = opts || {};
+
+  return function (root, result) {
+    root.walkRules((rule, ruleIndex) => {
+      rule.walkDecls((decl) => {
+        if (decl.value.match('xvar(.*?)')) {
+          decl.value = decl.value.substr(1);
+        }
+        if (decl.prop.substr(0, 3) === 'x--') {
+          decl.prop = decl.prop.substr(1);
+        }
+      });
+    });
+  };
+};