feat(css): create new token config

packages/css/package.json

@@ -28,13 +28,16 @@
     "dev": "tsup --watch"
   },
   "devDependencies": {
+    "@types/cssesc": "^3.0.2",
     "@types/fs-extra": "11.0.1",
     "@types/node": "20.14.9"
   },
   "dependencies": {
     "@vtex/shoreline-utils": "workspace:*",
     "browserslist": "4.23.1",
+    "cssesc": "^3.0.0",
     "fs-extra": "11.1.1",
-    "lightningcss": "1.25.1"
+    "lightningcss": "1.25.1",
+    "ora": "^8.1.0"
   }
 }

packages/css/src/bundle.ts

@@ -1,7 +1,10 @@
 import browserslist from 'browserslist'
 import { bundle as __bundle, browserslistToTargets } from 'lightningcss'
 import { outputFileSync } from 'fs-extra'
-import { tokens, type TokensArgs } from './tokens'
+import ora from 'ora'
+import { transformTokens } from './transform-tokens'
+import type { TokensArgs } from './transform-tokens'
+import type { TokenConfig } from './types'
 
 const layerStatement = '@layer sl-reset, sl-base, sl-tokens, sl-components;'
 
@@ -10,17 +13,19 @@ const layerStatement = '@layer sl-reset, sl-base, sl-tokens, sl-components;'
  */
 export function bundle(args: BundleArgs) {
   const {
-    inputFile,
     outdir,
-    tokensFile,
+    tokens,
+    inputFile,
     useCascadeLayers = true,
     browserslistQuery = 'last 1 versions',
   } = args
 
+  const spinner = ora('Bundling css').start()
+
   const targets = browserslistToTargets(browserslist(browserslistQuery))
 
-  const { code: tokensCode } = tokens({
-    inputFile: tokensFile,
+  const tokensCode = transformTokens({
+    tokens,
     emitFile: true,
     outdir,
     useCascadeLayers,
@@ -31,22 +36,6 @@ export function bundle(args: BundleArgs) {
     filename: inputFile,
     targets,
     minify: false,
-    customAtRules: {
-      theme: {
-        prelude: '<custom-ident>',
-        body: 'style-block',
-      },
-    },
-    visitor: {
-      Rule: {
-        custom: {
-          theme() {
-            // theme is not bundled with
-            throw new Error('Do not import tokens into your bundle')
-          },
-        },
-      },
-    },
   })
 
   try {
@@ -58,19 +47,24 @@ export function bundle(args: BundleArgs) {
       outputFile,
       Buffer.from(
         useCascadeLayers
-          ? `${layerStatement}\n\n${tokensCode.toString()}\n\n${bundledCode.toString()}`
-          : `${tokensCode.toString()}\n\n${bundledCode.toString()}`
+          ? `${layerStatement}\n\n${tokensCode}\n\n${bundledCode.toString()}`
+          : `${tokensCode}\n\n${bundledCode.toString()}`
       )
     )
-    console.log(`✅ Generated ${outputFile}`)
+
+    spinner.succeed(`Generated ${outputFile}`)
   } catch (e) {
-    console.log('🚨 Failed to compile styles')
+    spinner.fail('Failed to bundle css')
   }
 }
 
 export interface BundleArgs extends Omit<TokensArgs, 'emitFile'> {
   /**
    * file contaning the tokens
    */
-  tokensFile: string
+  tokens: TokenConfig
+  /**
+   * file to bundle
+   */
+  inputFile: string
 }

packages/css/src/define-tokens.ts

@@ -0,0 +1,5 @@
+import type { TokenConfig } from './types'
+
+export function defineTokens(config: TokenConfig): TokenConfig {
+  return config
+}

packages/css/src/get-css-string.ts

@@ -0,0 +1,21 @@
+import cssesc from 'cssesc'
+import type { TokenConfig } from './types'
+
+/**
+ * Retunrs the CSS string for a given token config
+ */
+export function getCssString(config: TokenConfig) {
+  let str = ':where(:root) {'
+
+  for (const category of Object.keys(config)) {
+    const { tokens } = config[category]
+    for (const token of tokens) {
+      const { name, value } = token
+      str += cssesc(`--sl-${name}: ${value};`)
+    }
+  }
+
+  str += '}'
+
+  return str
+}

packages/css/src/index.ts

@@ -1,3 +1,5 @@
 export * from './types'
 export * from './bundle'
-export * from './tokens'
+export * from './transform-tokens'
+export * from './define-tokens'
+export * from './get-css-string'

packages/css/src/transform-tokens.ts

@@ -1,66 +1,68 @@
+import { outputFileSync } from 'fs-extra'
 import browserslist from 'browserslist'
 import { transform, browserslistToTargets } from 'lightningcss'
+import ora from 'ora'
 
-export function transformTokens(args: TransformTokensArgs) {
+import type { TokenConfig } from './types'
+import { getCssString } from './get-css-string'
+
+/**
+ * Transform shoreline tokens
+ */
+export function transformTokens(args: TokensArgs): string {
   const {
-    code,
-    useCascadeLayers = true,
+    tokens,
+    outdir,
     browserslistQuery = 'last 1 versions',
+    useCascadeLayers = true,
+    emitFile = false,
   } = args
 
-  const targets = browserslistToTargets(browserslist(browserslistQuery))
+  const spinner = ora('Transforming tokens').start()
 
-  const result = transform({
+  const css = transform({
     filename: 'styles.css',
-    code: code,
-    targets,
+    code: Buffer.from(getCssString(tokens)),
+    targets: browserslistToTargets(browserslist(browserslistQuery)),
     minify: false,
-    customAtRules: {
-      theme: {
-        prelude: '<custom-ident>',
-        body: 'style-block',
-      },
-    },
-    visitor: {
-      Rule: {
-        custom: {
-          theme(rule) {
-            const prefixedRoot = JSON.parse(
-              JSON.stringify(rule.body.value).replace(/--/gi, '--sl-')
-            )
+  })
 
-            if (!useCascadeLayers) {
-              return prefixedRoot
-            }
+  const code = css.code.toString()
 
-            return [
-              {
-                type: 'layer-block',
-                value: {
-                  name: ['sl-tokens'],
-                  loc: rule.loc,
-                  rules: prefixedRoot,
-                },
-              },
-            ]
-          },
-        },
-      },
-    },
-  })
+  if (emitFile) {
+    const outputFile = `${outdir}/tokens${
+      useCascadeLayers ? '' : '-unlayered'
+    }.css`
+
+    try {
+      outputFileSync(outputFile, code)
+      spinner.succeed(`Generated ${outputFile}`)
+    } catch (e) {
+      spinner.fail('Transformation failed')
+    }
+  }
 
-  return result
+  spinner.succeed('Finished')
+
+  return code
 }
 
-export interface TransformTokensArgs {
+export interface TokensArgs {
+  /**
+   * token configuration
+   */
+  tokens: TokenConfig
+  /**
+   * output directory
+   */
+  outdir: string
   /**
-   * code to transform
+   * wether the tokens.css is emited
    */
-  code: Buffer
+  emitFile?: boolean
   /**
    * css support query
    * @default 'last 1 versions'
-   *
    */
   browserslistQuery?: string | string[]
   /**

packages/css/src/types.ts

@@ -20,3 +20,17 @@ export interface ShorelineConfig {
    */
   tokens?: Record<string, any>
 }
+
+interface PropsDeclaration {
+  name: string
+  value: string
+  description?: string
+}
+
+export interface TokenConfig {
+  [key: string]: {
+    name: string
+    description?: string
+    tokens: PropsDeclaration[]
+  }
+}

packages/shoreline/package.json

@@ -2,7 +2,6 @@
   "name": "@vtex/shoreline",
   "version": "1.11.7",
   "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "publishConfig": {
     "access": "public",
@@ -29,8 +28,8 @@
     "prebuild": "rm -rf dist",
     "dev": "concurrently \"tsup --watch\" \"pnpm run dev:css\"",
     "build": "pnpm run prebuild && concurrently \"tsup\" \"pnpm run build:css\"",
-    "build:css": "node -r sucrase/register src/scripts/build-css.ts",
-    "dev:css": "node -r sucrase/register src/scripts/dev-css.ts"
+    "build:css": "npx tsx src/scripts/build-css.ts",
+    "dev:css": "npx tsx src/scripts/dev-css.ts"
   },
   "repository": {
     "directory": "packages/shoreline",
@@ -56,8 +55,7 @@
     "fs-extra": "11.2.0",
     "match-sorter": "6.3.4",
     "react-hook-form": "7.48.2",
-    "react-window": "1.8.10",
-    "sucrase": " 3.35.0"
+    "react-window": "1.8.10"
   },
   "dependencies": {
     "@ariakit/react": "0.4.13",
@@ -73,6 +71,7 @@
     "@react-stately/toggle": "3.7.4",
     "@vtex/shoreline-utils": "^1.0.77",
     "react-hot-toast": "2.4.1",
+    "tsx": "^4.19.1",
     "vaul": "0.9.4"
   }
 }

packages/shoreline/src/scripts/build-css.ts

@@ -1,16 +1,17 @@
 import { bundle } from '@vtex/shoreline-css'
+import tokens from '../themes/sunrise/tokens'
 
 export function build() {
   bundle({
+    tokens,
     inputFile: 'src/themes/sunrise/styles.css',
-    tokensFile: 'src/themes/sunrise/tokens.css',
     outdir: 'dist/themes/sunrise',
     useCascadeLayers: true,
   })
 
   bundle({
+    tokens,
     inputFile: 'src/themes/sunrise/styles-unlayered.css',
-    tokensFile: 'src/themes/sunrise/tokens.css',
     outdir: 'dist/themes/sunrise',
     useCascadeLayers: false,
   })