feat(dt): support in <style> tags

Author: Tahul

package.json

@@ -46,6 +46,7 @@
     "@nuxt/kit": "^3.0.0-rc.6",
     "browser-style-dictionary": "^3.1.1-browser.1",
     "chroma-js": "^2.4.2",
+    "magic-regexp": "^0.4.1",
     "untyped": "^0.4.4"
   },
   "devDependencies": {

playground/pages/index.vue

@@ -42,14 +42,12 @@
 const { fetch: fetchTokens } = useTokens()
 
 const { data } = await useAsyncData(fetchTokens)
-
-// eslint-disable-next-line no-console
-console.log(data.value)
 </script>
 
 <style scoped lang="postcss">
 .app {
   height: 100vh;
   width: 100vw;
+  background-color: $dt('colors.primary.100');
 }
 </style>

src/module.ts

@@ -13,6 +13,7 @@ import type { Nitro } from 'nitropack'
 import { join } from 'pathe'
 import { generateTokens } from './generate'
 import { logger, name, version, NuxtLayer, resolveTokens, MODULE_DEFAULTS, createTokensDir } from './utils'
+import transformPlugin from './transform'
 import type { NuxtDesignTokens, ModuleOptions } from './index'
 
 export default defineNuxtModule<ModuleOptions>({
@@ -212,5 +213,21 @@ export default defineNuxtModule<ModuleOptions>({
       tailwindConfig.content = tailwindConfig.content ?? []
       tailwindConfig.content.push(join(tokensDir, 'index.ts'))
     })
+
+    /**
+     * Transform plugin for `$dt()` usage in <style> tags
+     */
+
+    // Webpack plugin
+    nuxt.hook('webpack:config', (config: any) => {
+      config.plugins = config.plugins || []
+      config.plugins.unshift(transformPlugin.webpack())
+    })
+
+    // Vite plugin
+    nuxt.hook('vite:extend', (vite: any) => {
+      vite.config.plugins = vite.config.plugins || []
+      vite.config.plugins.push(transformPlugin.vite())
+    })
   }
 })

src/transform.ts

@@ -0,0 +1,24 @@
+import { regexLiteral } from '@babel/types'
+import { kebabCase } from 'scule'
+import { createUnplugin } from 'unplugin'
+
+const resolveToken = (path: string): string => `var(--${path.split('.').map(key => kebabCase(key)).join('-')})`
+
+export default createUnplugin(() => ({
+  name: 'unplugin-starter',
+  transformInclude (id) {
+    // Check if the target is a Vue <style> attribute.
+    const regex = /\?vue&type=style/
+    return regex.test(id)
+  },
+  transform (code) {
+    const regex = /\$dt\('(.*)'\)/
+
+    if (regex.test(code)) {
+      // Find any usage of `$dt('...')` in code and replace it by `var(--...)`
+      return code.replace(regex, (_, path) => resolveToken(path))
+    }
+
+    return code
+  }
+}))

yarn.lock

@@ -1392,6 +1392,11 @@ acorn@^8.5.0, acorn@^8.6.0, acorn@^8.7.0, acorn@^8.7.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.7.1.tgz#0197122c843d1bf6d0a5e83220a788f278f63c30"
   integrity sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==
 
+acorn@^8.8.0:
+  version "8.8.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.0.tgz#88c0187620435c7f6015803f5539dae05a9dbea8"
+  integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
+
 agent-base@6:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
@@ -4712,6 +4717,17 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+magic-regexp@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/magic-regexp/-/magic-regexp-0.4.1.tgz#9805c77984fc2302c333e1cdeb221a9523331594"
+  integrity sha512-JNwUo8+mV7yYUz3z6YDac4qhKMKVYOiEMU1DkW+EwG+BADaXCZpdh0wNFk1+7B2wrMGF4V6jrARWBitFZW2gGw==
+  dependencies:
+    estree-walker "^3.0.1"
+    magic-string "^0.26.2"
+    mlly "^0.5.7"
+    ufo "^0.8.5"
+    unplugin "^0.8.1"
+
 magic-string@^0.25.7:
   version "0.25.9"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"
@@ -5341,6 +5357,16 @@ mlly@^0.5.2, mlly@^0.5.3, mlly@^0.5.4:
     pathe "^0.3.1"
     pkg-types "^0.3.3"
 
+mlly@^0.5.7:
+  version "0.5.10"
+  resolved "https://registry.yarnpkg.com/mlly/-/mlly-0.5.10.tgz#4d5bdce6f9531392846cfde6257e1a45bc196458"
+  integrity sha512-mY6i+bwcgn0XAdZTiiBt6kyoUjLsm3Cuv0T4CchQJcq/UCSUcGPapSxc4g7whtIsUfcsJ2kGqZAdmqCF/VNC/Q==
+  dependencies:
+    acorn "^8.8.0"
+    pathe "^0.3.4"
+    pkg-types "^0.3.3"
+    ufo "^0.8.5"
+
 mri@^1.1.0, mri@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"
@@ -5971,6 +5997,11 @@ pathe@^0.3.0, pathe@^0.3.1, pathe@^0.3.2:
   resolved "https://registry.yarnpkg.com/pathe/-/pathe-0.3.2.tgz#016345ed643027404d7a9ed8d1454ad997a1483a"
   integrity sha512-qhnmX0TOqlCvdWWTkoM83wh5J8fZ2yhbDEc9MlsnAEtEc+JCwxUKEwmd6pkY9hRe6JR1Uecbc14VcAKX2yFSTA==
 
+pathe@^0.3.4:
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/pathe/-/pathe-0.3.4.tgz#35bfb1e92373f98d9711cc74e7d6475a0654deae"
+  integrity sha512-YWgqEdxf36R6vcsyj0A+yT/rDRPe0wui4J9gRR7T4whjU5Lx/jZOr75ckEgTNaLVQABAwsrlzHRpIKcCdXAQ5A==
+
 pathval@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/pathval/-/pathval-1.1.1.tgz#8534e77a77ce7ac5a2512ea21e0fdb8fcf6c3d8d"
@@ -7808,6 +7839,16 @@ unplugin@^0.7.2:
     webpack-sources "^3.2.3"
     webpack-virtual-modules "^0.4.4"
 
+unplugin@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-0.8.1.tgz#4517b6a8ec3d944e838f9c346921d9777cd159e1"
+  integrity sha512-o7rUZoPLG1fH4LKinWgb77gDtTE6mw/iry0Pq0Z5UPvZ9+HZ1/4+7fic7t58s8/CGkPrDpGq+RltO+DmswcR4g==
+  dependencies:
+    acorn "^8.8.0"
+    chokidar "^3.5.3"
+    webpack-sources "^3.2.3"
+    webpack-virtual-modules "^0.4.4"
+
 unstorage@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/unstorage/-/unstorage-0.4.1.tgz#66d174886f017a5ceef567b8f007c5966b4690f4"