Use node TS support instead of tsx in scripts

design-system/docs/package.json

@@ -13,7 +13,7 @@
     "dev:playroom": "playroom start",
     "dev:storybook": "storybook dev -p 6006",
     "lint": "eslint .",
-    "pre-site": "tsx ./scripts/pre-site.ts",
+    "pre-site": "node ./scripts/pre-site.ts",
     "start": "next start"
   },
   "dependencies": {
@@ -33,7 +33,6 @@
     "react": "^19.2.8",
     "react-aria": "catalog:",
     "react-dom": "^19.2.8",
-    "tsx": "^4.8.2",
     "vercel": "^33.6.3"
   },
   "devDependencies": {

design-system/docs/scripts/pre-site.ts

@@ -1,4 +1,3 @@
-import { isDefined } from 'emery/guards';
 import fs from 'node:fs/promises';
 import path from 'node:path';
 
@@ -29,7 +28,7 @@ async function getComponentReexports() {
         }
       })
     )
-  ).filter(isDefined);
+  ).filter(x => x !== undefined);
 
   return packages
     .sort()

design-system/pkg/package.json

@@ -8,7 +8,7 @@
     "directory": "design-system/pkg"
   },
   "scripts": {
-    "build-icons": "tsx build-icons.ts && cd ../.. && pnpm preconstruct fix"
+    "build-icons": "node build-icons.ts && cd ../.. && pnpm preconstruct fix"
   },
   "type": "module",
   "exports": {
@@ -1506,8 +1506,7 @@
     "next": "~15.1.10",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "svgo": "^3.3.2",
-    "tsx": "^4.8.2"
+    "svgo": "^3.3.2"
   },
   "peerDependencies": {
     "next": ">=14",

design-system/primitives/KeystarStyleDictionary.ts

@@ -5,8 +5,8 @@ import {
   cssVariables,
   javascriptTokenMap,
   jsonFigma,
-} from './formatters';
-import { w3cJsonParser } from './parsers';
+} from './formatters/index.ts';
+import { w3cJsonParser } from './parsers/index.ts';
 import {
   colorToCssAlpha,
   colorToHex,
@@ -20,7 +20,7 @@ import {
   namePathToKebabCase,
   shadowDimensionToCssPartial,
   typographyToCapsize,
-} from './transformers';
+} from './transformers/index.ts';
 
 // Parsers
 // -----------------------------------------------------------------------------

design-system/primitives/filters/index.ts

@@ -1,18 +1,18 @@
 // consider replacing with something like:
 // https://github.com/lukasoppermann/style-dictionary-utils
-export { isBorder } from './isBorder';
-export { isCapsize } from './isCapsize';
-export { isColor } from './isColor';
-export { isColorWithAlpha } from './isColorWithAlpha';
-export { isColorWithMix } from './isColorWithMix';
-export { isCubicBezier } from './isCubicBezier';
-export { isDimension } from './isDimension';
-export { isDeprecated } from './isDeprecated';
-export { isDuration } from './isDuration';
-export { isFromFile } from './isFromFile';
-export { isFontFamily } from './isFontFamily';
-export { isFontWeight } from './isFontWeight';
-export { isShadow } from './isShadow';
-export { isShadowDimension } from './isShadowDimension';
-export { isSource } from './isSource';
-export { isTypography } from './isTypography';
+export { isBorder } from './isBorder.ts';
+export { isCapsize } from './isCapsize.ts';
+export { isColor } from './isColor.ts';
+export { isColorWithAlpha } from './isColorWithAlpha.ts';
+export { isColorWithMix } from './isColorWithMix.ts';
+export { isCubicBezier } from './isCubicBezier.ts';
+export { isDimension } from './isDimension.ts';
+export { isDeprecated } from './isDeprecated.ts';
+export { isDuration } from './isDuration.ts';
+export { isFromFile } from './isFromFile.ts';
+export { isFontFamily } from './isFontFamily.ts';
+export { isFontWeight } from './isFontWeight.ts';
+export { isShadow } from './isShadow.ts';
+export { isShadowDimension } from './isShadowDimension.ts';
+export { isSource } from './isSource.ts';
+export { isTypography } from './isTypography.ts';

design-system/primitives/filters/isBorder.test.ts

@@ -1,6 +1,6 @@
-import { getMockToken } from '../test-utilities';
+import { getMockToken } from '../test-utilities/index.ts';
 import { describe, expect, it } from '@jest/globals';
-import { isBorder } from './isBorder';
+import { isBorder } from './isBorder.ts';
 
 describe('Filter: isBorder', () => {
   it('returns true if $type property is `border`', () => {

design-system/primitives/filters/isCapsize.test.ts

@@ -1,6 +1,6 @@
-import { getMockToken } from '../test-utilities';
+import { getMockToken } from '../test-utilities/index.ts';
 import { describe, expect, it } from '@jest/globals';
-import { isCapsize } from './isCapsize';
+import { isCapsize } from './isCapsize.ts';
 
 describe('Filter: isCapsize', () => {
   it('returns true if $type property is `capsize`', () => {

design-system/primitives/filters/isColor.test.ts

@@ -1,6 +1,6 @@
-import { getMockToken } from '../test-utilities';
+import { getMockToken } from '../test-utilities/index.ts';
 import { describe, expect, it } from '@jest/globals';
-import { isColor } from './isColor';
+import { isColor } from './isColor.ts';
 
 describe('Filter: isColor', () => {
   it('returns true if $type property is `color`', () => {

design-system/primitives/filters/isColorWithAlpha.test.ts

@@ -1,6 +1,6 @@
-import { getMockToken } from '../test-utilities';
+import { getMockToken } from '../test-utilities/index.ts';
 import { describe, expect, it } from '@jest/globals';
-import { isColorWithAlpha } from './isColorWithAlpha';
+import { isColorWithAlpha } from './isColorWithAlpha.ts';
 
 describe('Filter: isColorWithAlpha', () => {
   it('returns true if $type property is `color` and `alpha` is number', () => {

design-system/primitives/filters/isColorWithAlpha.ts

@@ -1,5 +1,5 @@
 import type StyleDictionary from 'style-dictionary';
-import { isColor } from './isColor';
+import { isColor } from './isColor.ts';
 
 /**
  * @description Checks if token is color with an alpha value

design-system/primitives/filters/isColorWithMix.test.ts

@@ -1,6 +1,6 @@
-import { getMockToken } from '../test-utilities';
+import { getMockToken } from '../test-utilities/index.ts';
 import { describe, expect, it } from '@jest/globals';
-import { isColorWithMix } from './isColorWithMix';
+import { isColorWithMix } from './isColorWithMix.ts';
 
 describe('Filter: isColorWithMix', () => {
   it('returns true if $type property is `color` and valid `mix` property exists', () => {

design-system/primitives/filters/isColorWithMix.ts

@@ -1,5 +1,5 @@
 import type StyleDictionary from 'style-dictionary';
-import { isColor } from './isColor';
+import { isColor } from './isColor.ts';
 
 const throwError = (token: StyleDictionary.TransformedToken) => {
   throw new Error(

design-system/primitives/filters/isCubicBezier.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from '@jest/globals';
 import StyleDictionary from 'style-dictionary';
 
-import { isCubicBezier } from './isCubicBezier';
+import { isCubicBezier } from './isCubicBezier.ts';
 
 describe('Filter: isCubicBezier', () => {
   const items = [

design-system/primitives/filters/isDeprecated.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from '@jest/globals';
-import { getMockToken } from '../test-utilities';
-import { isDeprecated } from './isDeprecated';
+import { getMockToken } from '../test-utilities/index.ts';
+import { isDeprecated } from './isDeprecated.ts';
 
 describe('Filter: isDeprecated', () => {
   it('Returns true if depreacted property is true', () => {

design-system/primitives/filters/isDimension.test.ts

@@ -1,6 +1,6 @@
-import { getMockToken } from '../test-utilities';
+import { getMockToken } from '../test-utilities/index.ts';
 import { describe, expect, it } from '@jest/globals';
-import { isDimension } from './isDimension';
+import { isDimension } from './isDimension.ts';
 
 describe('Filter: isDimension', () => {
   it('returns true if $type property is `dimension`', () => {

design-system/primitives/filters/isDuration.test.ts

@@ -1,7 +1,7 @@
 import StyleDictionary from 'style-dictionary';
 import { expect, it, describe } from '@jest/globals';
 
-import { isDuration } from './isDuration';
+import { isDuration } from './isDuration.ts';
 
 describe('Filter: isDuration', () => {
   const items = [

design-system/primitives/filters/isFontFamily.test.ts

@@ -1,6 +1,6 @@
-import { getMockToken } from '../test-utilities';
+import { getMockToken } from '../test-utilities/index.ts';
 import { describe, expect, it } from '@jest/globals';
-import { isFontFamily } from './isFontFamily';
+import { isFontFamily } from './isFontFamily.ts';
 
 describe('Filter: isFontFamily', () => {
   it('returns true if $type property is `fontFamily`', () => {

design-system/primitives/filters/isFontWeight.test.ts

@@ -1,6 +1,6 @@
-import { getMockToken } from '../test-utilities';
+import { getMockToken } from '../test-utilities/index.ts';
 import { describe, expect, it } from '@jest/globals';
-import { isFontWeight } from './isFontWeight';
+import { isFontWeight } from './isFontWeight.ts';
 
 describe('Filter: isFontWeight', () => {
   it('returns true if $type property is `fontWeight`', () => {

design-system/primitives/filters/isFromFile.test.ts

@@ -1,6 +1,6 @@
-import { getMockToken } from '../test-utilities';
+import { getMockToken } from '../test-utilities/index.ts';
 import { describe, expect, it } from '@jest/globals';
-import { isFromFile } from './isFromFile';
+import { isFromFile } from './isFromFile.ts';
 
 describe('Filter: isFromFile', () => {
   it('returns true if token.filePath is in provided array of file paths', () => {

design-system/primitives/filters/isShadow.test.ts

@@ -1,6 +1,6 @@
-import { getMockToken } from '../test-utilities';
+import { getMockToken } from '../test-utilities/index.ts';
 import { describe, expect, it } from '@jest/globals';
-import { isShadow } from './isShadow';
+import { isShadow } from './isShadow.ts';
 
 describe('Filter: isShadow', () => {
   it('returns true if $type property is `shadow`', () => {

design-system/primitives/filters/isSource.test.ts

@@ -1,8 +1,8 @@
 import type StyleDictionary from 'style-dictionary';
 
-import { getMockToken } from '../test-utilities';
+import { getMockToken } from '../test-utilities/index.ts';
 import { describe, expect, it } from '@jest/globals';
-import { isSource } from './isSource';
+import { isSource } from './isSource.ts';
 
 describe('Filter: isSource', () => {
   it('Returns true if isSource property is true', () => {

design-system/primitives/filters/isTypography.test.ts

@@ -1,6 +1,6 @@
-import { getMockToken } from '../test-utilities';
+import { getMockToken } from '../test-utilities/index.ts';
 import { describe, expect, it } from '@jest/globals';
-import { isTypography } from './isTypography';
+import { isTypography } from './isTypography.ts';
 
 describe('Filter: isTypography', () => {
   it('returns true if $type property is `typography`', () => {

design-system/primitives/formatters/cssThemed.ts

@@ -1,9 +1,9 @@
-import { format } from '@prettier/sync';
+import prettier from '@prettier/sync';
 import StyleDictionary from 'style-dictionary';
 import type { FormatterArguments } from 'style-dictionary/types/Format';
 import type { LineFormatting } from 'style-dictionary/types/FormatHelpers';
 
-import { SELECTOR_DEFAULT } from '../constants';
+import { SELECTOR_DEFAULT } from '../constants.ts';
 
 const { fileHeader, formattedVariables } = StyleDictionary.formatHelpers;
 
@@ -56,5 +56,5 @@ export const cssThemed: StyleDictionary.Formatter = ({
   }
 
   // return prettified
-  return format(output.join('\n'), { parser: 'css', printWidth: 500 });
+  return prettier.format(output.join('\n'), { parser: 'css', printWidth: 500 });
 };

design-system/primitives/formatters/cssVariables.ts

@@ -2,7 +2,7 @@ import StyleDictionary from 'style-dictionary';
 import type { FormatterArguments } from 'style-dictionary/types/Format';
 import type { LineFormatting } from 'style-dictionary/types/FormatHelpers';
 
-import { SELECTOR_DEFAULT } from '../constants';
+import { SELECTOR_DEFAULT } from '../constants.ts';
 
 const { fileHeader, formattedVariables } = StyleDictionary.formatHelpers;
 

design-system/primitives/formatters/index.ts

@@ -1,4 +1,4 @@
-export { cssThemed } from './cssThemed';
-export { cssVariables } from './cssVariables';
-export { javascriptTokenMap } from './javascriptTokenMap';
-export { jsonFigma } from './jsonFigma';
+export { cssThemed } from './cssThemed.ts';
+export { cssVariables } from './cssVariables.ts';
+export { javascriptTokenMap } from './javascriptTokenMap.ts';
+export { jsonFigma } from './jsonFigma.ts';

design-system/primitives/formatters/javascriptTokenMap.ts

@@ -1,4 +1,4 @@
-import { setWith } from 'lodash';
+import _ from 'lodash';
 import StyleDictionary from 'style-dictionary';
 
 const { fileHeader } = StyleDictionary.formatHelpers;
@@ -10,7 +10,7 @@ export const javascriptTokenMap: StyleDictionary.Formatter = ({
   const reference = {};
 
   dictionary.allTokens.forEach(token => {
-    setWith(reference, token.path, `var(--${token.name})`, Object);
+    _.setWith(reference, token.path, `var(--${token.name})`, Object);
   });
 
   return (

design-system/primitives/formatters/jsonFigma.ts

@@ -1,9 +1,9 @@
 // credit: https://github.com/primer/primitives/blob/main/src/formats/jsonFigma.ts
 import StyleDictionary from 'style-dictionary';
-import { format } from '@prettier/sync';
+import prettier from '@prettier/sync';
 import type { FormatterArguments } from 'style-dictionary/types/Format';
 
-import { transformNamePathToFigma } from '../transformers/namePathToFigma';
+import { transformNamePathToFigma } from '../transformers/namePathToFigma.ts';
 
 const { sortByReference } = StyleDictionary.formatHelpers;
 
@@ -77,5 +77,5 @@ export const jsonFigma: StyleDictionary.Formatter = ({
   // add file header and convert output
   const output = JSON.stringify(tokens, null, 2);
   // return prettified
-  return format(output, { parser: 'json', printWidth: 500 });
+  return prettier.format(output, { parser: 'json', printWidth: 500 });
 };

design-system/primitives/package.json

@@ -4,10 +4,11 @@
   "private": true,
   "description": "Typography, size, and color primitives for the Keystar design system",
   "license": "MIT",
+  "type": "module",
   "scripts": {
-    "build": "tsx ./scripts/buildTokens.ts && tsx ./scripts/build.ts",
-    "build:figma": "tsx ./scripts/buildFigma.ts",
-    "build:tokens": "tsx ./scripts/buildTokens.ts"
+    "build": "node ./scripts/buildTokens.ts && node ./scripts/build.ts",
+    "build:figma": "node ./scripts/buildFigma.ts",
+    "build:tokens": "node ./scripts/buildTokens.ts"
   },
   "devDependencies": {
     "@capsizecss/core": "^3.1.1",
@@ -21,7 +22,6 @@
     "lodash": "^4.17.21",
     "prettier": "^3.0.3",
     "style-dictionary": "^3.8.0",
-    "tsx": "^4.8.2",
     "typescript": "^5.5.3"
   },
   "dependencies": {

design-system/primitives/parsers/index.ts

@@ -1 +1 @@
-export { w3cJsonParser } from './w3cJsonParser';
+export { w3cJsonParser } from './w3cJsonParser.ts';

design-system/primitives/parsers/w3cJsonParser.test.ts

@@ -1,8 +1,8 @@
 import {
   parserOutput as expectedOutput,
   getMockParserInput,
-} from '../test-utilities';
-import { w3cJsonParser } from './w3cJsonParser';
+} from '../test-utilities/index.ts';
+import { w3cJsonParser } from './w3cJsonParser.ts';
 import { expect, it, describe } from '@jest/globals';
 
 describe('Parser: w3c token json5 parser', () => {

design-system/primitives/platforms/css.ts

@@ -1,14 +1,14 @@
 import StyleDictionary from 'style-dictionary';
 
-import type { PlatformInitializer } from '../types';
+import type { PlatformInitializer } from '../types.ts';
 import {
   SELECTOR_AUTO,
   SELECTOR_DARK,
   SELECTOR_LIGHT,
   TOKEN_PREFIX,
-} from '../constants';
-import { isSource } from '../filters';
-import { filenameFromPath } from '../utilities';
+} from '../constants.ts';
+import { isSource } from '../filters/index.ts';
+import { filenameFromPath } from '../utilities/index.ts';
 
 const getCssSelectors = (
   outputFile: string

design-system/primitives/platforms/figma.ts

@@ -1,8 +1,8 @@
 // credit: https://github.com/primer/primitives/blob/main/src/platforms/figma.ts
 import type StyleDictionary from 'style-dictionary';
 
-import { isSource } from '../filters';
-import type { PlatformInitializer } from '../types';
+import { isSource } from '../filters/index.ts';
+import type { PlatformInitializer } from '../types.ts';
 
 const validFigmaToken = (token: StyleDictionary.TransformedToken) => {
   const validTypes = ['color', 'dimension'];