diff --git a/README.md b/README.md index 12de4acc..7b0a9acf 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,7 @@ A **Style Dictionary** is a build system that allows you to define styles once, - [Token Requirements](#token-requirements) - [Updating Tokens \& Local Development](#updating-tokens--local-development) - [VS Code extensions](#vs-code-extensions) + - [Server-Side Rendering (SSR)](#server-side-rendering-ssr) - [Development Sandbox](#development-sandbox) - [Lint and fix](#lint-and-fix) - [Build for production](#build-for-production) @@ -109,6 +110,25 @@ yarn install --frozen-lockfile } ``` +### Server-Side Rendering (SSR) + +If your host app utilizes SSR, you may need to resolve aliases to the package exports. + +For example, for a VitePress site, add the following to your `vite.config.ts` + +```ts +export default defineConfig({ + resolve: { + alias: { + // We must alias `@kong/design-tokens` imports to specifically utilize the esm build + '@kong/design-tokens/tokens/scss/variables': path.resolve(__dirname, '../node_modules/@kong/design-tokens/dist/tokens/scss/variables.scss'), + '@kong/design-tokens': path.resolve(__dirname, '../node_modules/@kong/design-tokens/dist/tokens/js/'), + }, + }, +}) + +``` + ### Development Sandbox This repository includes a Vue sandbox (see the `/sandbox` directory) to allow you to experiment with consuming tokens. diff --git a/config.js b/config.js index b44fad30..5a5fbad5 100644 --- a/config.js +++ b/config.js @@ -151,14 +151,14 @@ platforms.javascript = { // JavaScript ES constants { format: 'javascript/es6', - destination: 'index.mjs', + destination: 'index.js', // Exclude alias tokens and asset tokens compiled in a separate file filter: (token) => token.isSource === true && token.attributes.category !== 'asset', }, // Constants TypeScript types { format: 'typescript/es6-declarations', - destination: 'index.d.mts', + destination: 'index.d.ts', options: { outputStringLiterals: true, }, diff --git a/package.json b/package.json index 9bab1cc5..1d2c8c47 100644 --- a/package.json +++ b/package.json @@ -21,13 +21,13 @@ "dist" ], "main": "dist/tokens/js/cjs/index.cjs", - "module": "dist/tokens/js/index.mjs", + "module": "dist/tokens/js/index.js", "types": "dist/tokens/js/index.d.ts", "exports": { ".": { "import": { - "default": "./dist/tokens/js/index.mjs", - "types": "./dist/tokens/js/index.d.mts" + "default": "./dist/tokens/js/index.js", + "types": "./dist/tokens/js/index.d.ts" }, "require": { "default": "./dist/tokens/js/cjs/index.cjs",