@shopwell/unocss-design-tokens-layer

Nuxt layer that provides the shared Shopwell Frontends UnoCSS setup, design tokens, reset stylesheet, and runtime support for resolving dynamic utility classes.

It is intended to be composed with layers such as @shopwell/cms-base-layer, while allowing projects to keep design tokens separate from CMS functionality.

Usage

export default defineNuxtConfig({
  extends: [
    "@shopwell/composables/nuxt-layer",
    "@shopwell/cms-base-layer",
    "@shopwell/unocss-design-tokens-layer",
  ],
  modules: ["@shopwell/nuxt-module", "@unocss/nuxt"],
  css: ["@unocss/reset/tailwind-compat.css"],
  unocss: {
    nuxtLayers: true,
  },
});

Customization

Extend the generated base Uno config in your project:

import { mergeConfigs } from "@unocss/core";
import baseConfig from "./.nuxt/uno.config.mjs";

export default mergeConfigs([
  baseConfig,
  {
    theme: {
      colors: {
        "brand-primary": "#123456",
      },
    },
  },
]);

Changelog

Full changelog for stable version is available here

Latest changes: 1.0.2

Patch Changes

• #2632 9274aa8 Thanks @mkucmus! - Load presetWind3 from @unocss/preset-wind3 instead of the unocss barrel in uno.runtime.config.ts.

  That file is imported by a client plugin, and the barrel statically re-exports @unocss/transformer-attributify-jsx. That transformer depends on oxc-parser, whose browser entry imports @oxc-parser/binding-wasm32-wasi. The binding is not present in a production install, so the client bundle failed to build:

  [vite]: Rolldown failed to resolve import "@oxc-parser/binding-wasm32-wasi"
  from "oxc-parser/src-js/wasm.js"

  The parser never runs in the browser. Importing the preset directly keeps it out of the client graph and also stops a 1.4 MB .wasm file and its worker from being emitted into the public bundle.