feat(css()): move towards css-in-js (#19)

Co-authored-by: johnsoncodehk <[email protected]>
Co-authored-by: Anthony Fu <[email protected]>

Author: 3 people

README.md

@@ -1,4 +1,4 @@
-# @nuxtjs/design-tokens
+# @nuxtjs/style
 
 Use [Design Tokens](https://amzn.github.io/style-dictionary/#/tokens) in your Nuxt project.
 

build.config.ts

@@ -7,23 +7,17 @@ export default defineBuildConfig({
       input: './src/index.ts',
       builder: 'rollup',
       name: 'index'
-    },
-    {
-      input: './src/formats.ts',
-      builder: 'rollup',
-      name: 'formats'
-    },
-    {
-      input: './src/generate.ts',
-      builder: 'rollup',
-      name: 'generate'
     }
   ],
   externals: [
     // ??
     'formats.mjs',
     'generate.mjs',
     // ??
+    '@vue/compiler-sfc',
+    'magic-string',
+    'json5',
+    'recast',
     'scule',
     'unplugin',
     '#design-tokens',

docs/content/0.index.md

@@ -1,6 +1,6 @@
 ---
 title: "Design System made easy"
-description: "ully-typed design tokens integration for making and maintaining a design system."
+description: "Fully-typed design tokens integration for making and maintaining a design system."
 navigation: false
 layout: fluid
 ---
@@ -20,7 +20,7 @@ snippet: npm install @nuxtjs/design-tokens --save-dev
 :ellipsis
 
 #title
-Nuxt :highlight[DesignTokens]
+Nuxt :highlight[Style Tokens]
 
 #description
 Fully-typed design tokens integration for making and maintaining a design system.

docs/content/1.guide/2.get-started.md

@@ -32,7 +32,7 @@ export default defineNuxtConfig({
 
 👩‍🎨. [**Define your design tokens.**]{.text-xl}
 
-```ts [tokens.config.ts]
+```ts [style.config.ts]
 import { defineTokens } from '@nuxtjs/design-tokens'
 
 export default defineTokens({

docs/content/1.guide/3.API.md

@@ -5,14 +5,14 @@ description: Discover how to create and use your tokens with @nuxtjs/design-toke
 
 `tokens` are a [Design Tokens format](https://design-tokens.github.io/community-group/format/) compatible object definition that gets processed by [Style Dictionary](https://amzn.github.io/style-dictionary).
 
-This allows the options defined by the theme author in his `designTokens.tokens` key to be type-safe for the theme user that will configure his theme via the same key or a `tokens.config` file.
+This allows the options defined by the theme author in his `style.tokens` key to be type-safe for the theme user that will configure his theme via the same key or a `tokens.config` file.
 
 ### Defining theme tokens
 
 There is two ways to define theme tokens:
 
-- Via the `designTokens.tokens` key in the `nuxt.config` file.
-- Via the `tokens.config.{js|ts}` file at the root of your project.
+- Via the `style.tokens` key in the `nuxt.config` file.
+- Via the `style.config.{js|ts}` file at the root of your project.
 
 Both of these options will be merged in the end.
 
@@ -21,7 +21,7 @@ These two ways will both work for theme authors and theme users as they will get
 ::code-group
 
 ```ts [tokens.config.ts]
-import { defineTokens } from '@nuxtjs/design-tokens'
+import { defineTokens } from '@nuxtjs/style'
 
 export default defineTokens({
   colors: {
@@ -39,7 +39,7 @@ export default defineTokens({
 import { defineNuxtConfig } from 'nuxt'
 
 export default defineNuxtConfig({
-  designTokens: {
+  style: {
     tokens: {
       colors: {
         primary: {
@@ -66,7 +66,7 @@ Theme tokens gets processed by [Style Dictionary](https://amzn.github.io/style-d
   - `tokens.json` if you want to import it from a JSON context.
   - `index.ts` to import it from runtime or from any TypeScript context.
   - `index.js` to import it from runtime or from any JavaScript context.
-  - `types.d.ts` for global type inference (`$dt()`, `$tokens()`, `useTokens()`, `defineTokens`, `nuxt.config.designTokens.tokens`).
+  - `types.d.ts` for global type inference (`$dt()`, `$tokens()`, `useTokens()`, `defineTokens`, `nuxt.config.style.tokens`).
 
 - **Composable usage**
   ```ts

docs/theme.config.ts

@@ -1,6 +1,6 @@
 export default {
-  title: 'Nuxt Design Tokens',
-  description: 'Fully-typed design tokens integration for making and maintaining a design system.',
+  title: '@nuxtjs/style',
+  description: 'Vue-native zero-runtime CSS-in-JS solution.',
   url: 'https://design-tokens.nuxtjs.org',
   socials: {
     twitter: '@yaeeelglx',
@@ -16,7 +16,7 @@ export default {
   },
   cover: {
     src: '/cover.jpg',
-    alt: 'Nuxt Design Tokens'
+    alt: '@nuxtjs/style'
   },
   footer: {
     credits: {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nuxtjs/design-tokens",
   "version": "0.0.1",
-  "description": "Use Design Tokens in your Nuxt app.",
+  "description": "'Vue-native zero-runtime CSS-in-JS solution.",
   "keywords": [
     "nuxt",
     "theme",
@@ -44,15 +44,18 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.0.0-rc.8",
+    "@stitches/stringify": "^1.2.8",
     "browser-style-dictionary": "^3.1.1-browser.1",
     "chroma-js": "^2.4.2",
     "csstype": "^3.1.0",
+    "json5": "^2.2.1",
     "paneer": "^0.0.1",
     "postcss-custom-properties": "^12.1.8",
     "postcss-easing-gradients": "^3.0.1",
     "postcss-nested": "^5.0.6",
     "to-ast": "^1.0.0",
-    "untyped": "^0.4.5"
+    "unplugin-ast": "^0.5.5",
+    "untyped": "^0.4.7"
   },
   "devDependencies": {
     "@nuxt-themes/docus": "npm:@nuxt-themes/docus-edge@latest",
@@ -61,9 +64,10 @@
     "@nuxt/test-utils": "npm:@nuxt/test-utils-edge@latest",
     "@nuxtjs/eslint-config-typescript": "latest",
     "@nuxtjs/tailwindcss": "^5.3.2",
+    "@volar/vue-language-core": "^0.40.4",
     "browser-style-dictionary": "^3.1.1-browser.1",
     "c8": "^7.12.0",
-    "eslint": "^8.22.0",
+    "eslint": "^8.23.0",
     "globby": "^13.1.2",
     "husky": "^8.0.1",
     "jiti": "^1.14.0",

playground/components/Block.vue

@@ -1,17 +1,63 @@
-<template>
-  <button :class="['block', ...variants]">
-    {{ variants[0] }}
-  </button>
-</template>
-
 <script setup lang="ts">
 defineProps({
-  ...$variantProps('block')
+  ...$variantsProps('button')
 })
 </script>
 
-<style scoped lang="postcss">
-.block {
-  @component('block');
-}
+<template>
+  <button :class="{ ...$props }">
+    <template v-for="[key, value] in Object.entries($props)">
+      <p v-if="value" :key="key">
+        {{ value ? key : '' }}
+      </p>
+    </template>
+  </button>
+</template>
+
+<style lang="ts" scoped>
+css({
+  button: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '16px',
+    width: '320px',
+    height: '320px',
+    border: '16px solid {colors.grape}',
+    position: 'relative',
+    '&:hover': {
+      border: '8px solid blue',
+    },
+    '& > p': {
+      fontSize: '16px',
+      textDecoration: 'underline',
+    },
+    variants: {
+      primary: {
+        backgroundColor: '{colors.primary.500}',
+      },
+      black: {
+        backgroundColor: '{colors.black}',
+      },
+      lavender: {
+        backgroundColor: '{colors.lavender}'
+      },
+      lila: {
+        backgroundColor: '{colors.lila}'
+      },
+      velvet: {
+        backgroundColor: '{colors.velvet}'
+      },
+      grape: {
+        backgroundColor: '{colors.grape}'
+      },
+      rounded: {
+        borderRadius: '50%'
+      },
+      padded: {
+        padding: '4rem'
+      },
+    }
+  }
+})
 </style>

playground/nuxt.config.ts

@@ -7,10 +7,14 @@ const resolveThemeDir = (path: string) => resolve(themeDir, path)
 
 export default defineNuxtConfig({
   alias: {
-    '@nuxtjs/design-tokens': resolveThemeDir('../src/module.ts')
+    '@nuxtjs/design-tokens': resolveThemeDir('../src/index.ts')
   },
 
-  extends: [resolveThemeDir('./theme')]
+  extends: [resolveThemeDir('./theme')],
 
-  // modules: ['@nuxtjs/tailwindcss']
+  nitro: {
+    externals: {
+      inline: ['recast', 'ast-types']
+    }
+  }
 })

playground/pages/index.vue

@@ -9,11 +9,12 @@
     </header>
 
     <section>
-      <Block :variants="variants" @click="makeRounded" />
-      <Block :variants="['black']" />
-      <Block :variants="['grape']" />
-      <Block :variants="['lila']" />
-      <Block :variants="['velvet']" />
+      <Block primary />
+      <Block black />
+      <Block lila />
+      <Block lavender />
+      <Block velvet />
+      <Block grape />
     </section>
 
     <footer>
@@ -26,17 +27,9 @@
   </div>
 </template>
 
-<script setup lang="ts">
-const variants = ref(['primary'])
-
-const makeRounded = () => {
-  variants.value.push('rounded')
-}
-</script>
-
-<style>
+<style lang="postcss">
 html {
-  font-family: Inter, sans-serif;
+  font-family: $dt('fonts.primary');
 }
 </style>
 
@@ -48,7 +41,7 @@ html {
   align-items: center;
   flex-direction: column;
   overflow-y: auto;
-  background-color: $dt('colors.primary.100');
+  background-color: $dt('colors.primary.500');
   color: white;
 
   @dark {
@@ -66,7 +59,7 @@ html {
     position: sticky;
     top: 0;
     width: 100%;
-    background-color: $dt('colors.black');
+    background-color: $dt('colors.primary.500');
     z-index: 50;
 
     span {
@@ -87,7 +80,7 @@ html {
   }
 
   footer {
-    background-color: $dt('colors.black');
+    background-color: $dt('colors.grape');
     display: flex;
     align-items: center;
     justify-content: space-between;