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.15.0
     environment:
       CACHE_VERSION: v1
     working_directory: ~/react-spectrum
 
   rsp-large:
     docker:
-      - image: cimg/node:18.20.3
+      - image: cimg/node:20.15.0
     resource_class: large
     environment:
       CACHE_VERSION: v1
     working_directory: ~/react-spectrum
 
   rsp-xlarge:
     docker:
-      - image: cimg/node:18.20.3
+      - image: cimg/node:20.15.0
     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.*

jest.ssr.config.js

@@ -34,7 +34,7 @@ module.exports = {
     'packages/'
   ],
 
-  testTimeout: 30000,
+  testTimeout: 50000,
 
   globalSetup: require.resolve('@react-spectrum/test-utils-internal/src/ssrSetup'),
   globalTeardown: require.resolve('@react-spectrum/test-utils-internal/src/ssrTeardown'),

package.json

@@ -145,7 +145,7 @@
     "eslint": "^8.56.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jest": "^28.6.0",
-    "eslint-plugin-jsdoc": "^40.3.0",
+    "eslint-plugin-jsdoc": "^48.2.4",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-monorepo": "^0.3.2",
     "eslint-plugin-react": "^7.32.2",

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

packages/@adobe/spectrum-css-builder-temp/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@spectrum-css/component-builder",
+  "private": true,
+  "version": "1.0.1",
+  "description": "The Spectrum CSS component builder",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/react-spectrum"
+  },
+  "bugs": {
+    "url": "https://github.com/adobe/spectrum-css/issues"
+  },
+  "license": "Apache-2.0",
+  "dependencies": {
+    "@swc/helpers": "^0.5.0",
+    "gulp": "^5.0.0",
+    "gulp-concat": "^2.6.1",
+    "postcss": "^5.2.18",
+    "postcss-custom-properties": "^6.0.1",
+    "postcss-import": "^10.0.0",
+    "postcss-value-parser": "3.3.1",
+    "through2": "^3.0.1"
+  },
+  "rsp": {
+    "type": "cli"
+  },
+  "gitHead": "9b1c059b9e3c769334f8c6880e4a6a041fde1227"
+}

packages/@react-spectrum/labeledvalue/test/LabeledValue.test.js

@@ -272,7 +272,7 @@ describe('LabeledValue', function () {
 
     let staticField = getByTestId('test-id');
     expect(staticField).toBeInTheDocument();
-    expect(staticField).toHaveTextContent('10 – 20');
+    expect(staticField).toHaveTextContent('10–20');
   });
 
   it('attaches a user provided ref to the outer div', function () {

scripts/buildBranchAPI.js

@@ -36,11 +36,14 @@ build().catch(err => {
  * This is run against the current branch by copying the current branch into a temporary directory and building there
  */
 async function build() {
+  let backupDir = tempy.directory();
   let archiveDir;
   if (argv.githash) {
     archiveDir = tempy.directory();
     console.log('checking out archive of', argv.githash, 'into', archiveDir);
     await run('sh', ['-c', `git archive ${argv.githash} | tar -x -C ${archiveDir}`], {stdio: 'inherit'});
+
+    await run('sh', ['-c', `git archive HEAD | tar -x -C ${backupDir}`], {stdio: 'inherit'});
   }
   let srcDir = archiveDir ?? path.join(__dirname, '..');
   let distDir = path.join(__dirname, '..', 'dist', argv.output ?? 'branch-api');
@@ -53,6 +56,7 @@ async function build() {
   // Generate a package.json containing just what we need to build the website
   let pkg = {
     name: 'rsp-website',
+    packageManager: "[email protected]",
     version: '0.0.0',
     private: true,
     workspaces: [
@@ -102,6 +106,11 @@ async function build() {
 
   // Copy necessary code and configuration over
   fs.copySync(path.join(srcDir, 'packages', '@adobe', 'spectrum-css-temp'), path.join(dir, 'packages', '@adobe', 'spectrum-css-temp'));
+  try {
+    fs.copySync(path.join(srcDir, 'packages', '@adobe', 'spectrum-css-builder-temp'), path.join(dir, 'packages', '@adobe', 'spectrum-css-builder-temp'));
+  } catch (e) {
+    fs.copySync(path.join(backupDir, 'packages', '@adobe', 'spectrum-css-builder-temp'), path.join(dir, 'packages', '@adobe', 'spectrum-css-builder-temp'));
+  }
   fs.copySync(path.join(srcDir, 'postcss.config.js'), path.join(dir, 'postcss.config.js'));
   fs.copySync(path.join(srcDir, 'lib'), path.join(dir, 'lib'));
   fs.copySync(path.join(srcDir, 'CONTRIBUTING.md'), path.join(dir, 'CONTRIBUTING.md'));

scripts/buildPublishedAPI.js

@@ -46,6 +46,7 @@ async function build() {
   let pkg = {
     name: 'react-spectrum-monorepo',
     version: '0.0.0',
+    packageManager: "[email protected]",
     private: true,
     workspaces: [
       'packages/*/*'
@@ -79,6 +80,7 @@ async function build() {
   let cleanPkg = {
     name: 'react-spectrum-monorepo',
     version: '0.0.0',
+    packageManager: "[email protected]",
     private: true,
     workspaces: [
       'packages/*/*'
@@ -161,6 +163,7 @@ async function build() {
   fs.copySync(path.join(__dirname, '..', 'packages', 'dev'), path.join(dir, 'packages', 'dev'));
   fs.removeSync(path.join(dir, 'packages', 'dev', 'docs'));
   fs.copySync(path.join(__dirname, '..', 'packages', '@adobe', 'spectrum-css-temp'), path.join(dir, 'packages', '@adobe', 'spectrum-css-temp'));
+  fs.copySync(path.join(__dirname, '..', 'packages', '@adobe', 'spectrum-css-builder-temp'), path.join(dir, 'packages', '@adobe', 'spectrum-css-builder-temp'));
   fs.copySync(path.join(__dirname, '..', '.parcelrc'), path.join(dir, '.parcelrc'));
   fs.copySync(path.join(__dirname, '..', 'postcss.config.js'), path.join(dir, 'postcss.config.js'));
   fs.copySync(path.join(__dirname, '..', 'lib'), path.join(dir, 'lib'));

scripts/buildWebsite.js

@@ -39,7 +39,8 @@ async function build() {
     workspaces: [
       'packages/@internationalized/string-compiler',
       'packages/dev/*',
-      'packages/@adobe/spectrum-css-temp'
+      'packages/@adobe/spectrum-css-temp',
+      'packages/@adobe/spectrum-css-builder-temp'
     ],
     packageManager: '[email protected]',
     devDependencies: Object.fromEntries(
@@ -125,6 +126,7 @@ async function build() {
   fs.copySync(path.join(__dirname, '..', 'packages', 'dev'), path.join(dir, 'packages', 'dev'));
   fs.copySync(path.join(__dirname, '..', 'packages', '@internationalized', 'string-compiler'), path.join(dir, 'packages', '@internationalized', 'string-compiler'));
   fs.copySync(path.join(__dirname, '..', 'packages', '@adobe', 'spectrum-css-temp'), path.join(dir, 'packages', '@adobe', 'spectrum-css-temp'));
+  fs.copySync(path.join(__dirname, '..', 'packages', '@adobe', 'spectrum-css-builder-temp'), path.join(dir, 'packages', '@adobe', 'spectrum-css-builder-temp'));
   fs.copySync(path.join(__dirname, '..', '.parcelrc'), path.join(dir, '.parcelrc'));
   fs.copySync(path.join(__dirname, '..', 'postcss.config.js'), path.join(dir, 'postcss.config.js'));
   fs.copySync(path.join(__dirname, '..', 'lib'), path.join(dir, 'lib'));
@@ -145,7 +147,7 @@ async function build() {
   }
 
   // Only copy babel and parcel patches over
-  let patches = fs.readdirSync(path.join(__dirname, '..', 'patches')).filter(name => name.startsWith('@babel') || name.startsWith('@parcel') || name.startsWith('@spectrum-css') || name.startsWith('postcss'));
+  let patches = fs.readdirSync(path.join(__dirname, '..', 'patches')).filter(name => name.startsWith('@babel') || name.startsWith('@parcel') || name.startsWith('postcss'));
   for (let patch of patches) {
     fs.copySync(path.join(__dirname, '..', 'patches', patch), path.join(dir, 'patches', patch));
   }

yarn.config.cjs

@@ -148,7 +148,11 @@ function enforceWorkspaceDependencies({Yarn}) {
 function enforceCSS({Yarn}) {
   for (const workspace of Yarn.workspaces()) {
     let name = workspace.ident;
-    if (!name.startsWith('@react-spectrum/docs') && !name.startsWith('@react-spectrum/test-utils') && name.startsWith('@react-spectrum') && workspace.pkg.dependencies?.has('@adobe/spectrum-css-temp')) {
+    if (!name.startsWith('@react-spectrum/docs')
+      && !name.startsWith('@react-spectrum/test-utils')
+      && name.startsWith('@react-spectrum')
+      && workspace.pkg.dependencies?.has('@adobe/spectrum-css-temp')) {
+
       workspace.set('targets', {
         main: {includeNodeModules: ['@adobe/spectrum-css-temp']},
         module: {includeNodeModules: ['@adobe/spectrum-css-temp']}