When we use pinceau as the initialization condition, the variable values set without the theme computeStyles and variantStyle will be undefined
When we use it this way

app.use(Pinceau)

If we were to build a library based on pinceau, we might need to export flat.ts, but the code would duplicate the generated css style

The current solution is to write inside the style tag

<style>
@keyframes loadingRotate {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}
</style>

<style lang="ts">
css({
 '.test': {
    'animation': 'loadingRotate 2s linear infinite'
   }
})
</style>

stitches has a global animation api keyframes function doc: https://stitches.dev/docs/styling#keyframe-animations
That way would be better ？

Sometimes CSS properties provide us with query syntax, such as 'support'. What if we combine this approach with props for responsive design?

And here's a polished version of the English translation:

At times, CSS properties offer us query syntax like 'support'. How about we incorporate this approach with props for a more responsive design?

@supports (aspect-ratio: props.ratio) {
  .container {
    aspect-ratio: 16 / 9;
  }
}

so some of my tailwindcss codes are not working

When a component has a cssProp property in its props but no variants or computedStyle, the code for the pinceau transform does not include the usePinceauRuntime method
for example
no variants and computedStyle component

<script lang="ts" setup>
import { cssProp } from 'pinceau/runtime'

defineProps({
  css: cssProp,
})
</script>

<template>
  <button class="test-button">
    CSS
  </button>
</template>

<style lang="ts">
css({
  '.test-button': {
    color: 'red'
  }
})
</style>

pinceau transform code

<script lang="ts" setup>
import { cssProp } from 'pinceau/runtime'

defineProps({
  css: cssProp,
})
</script>

<template>
  <button class="test-button">
    CSS
  </button>
</template>

<style lang="postcss" transformed>
.test-button{color:red;}
</style>

add a computedStyle

<script lang="ts" setup>
import { cssProp } from 'pinceau/runtime'

defineProps({
  css: cssProp,
})
</script>

<template>
  <button class="test-button">
    CSS
  </button>
</template>

<style lang="ts">
css({
  '.test-button': {
    color: 'red',
    background: (props) => 'red',
  }
})
</style>

pinceau transform code

<script lang="ts" setup>
const _2K2_background = computed(() => ((props = __$pProps, utils = __$pUtils) => 'red')())

import { ref } from 'vue'

import { getCurrentInstance } from 'vue'

import { computed } from 'vue'

import { reactive } from 'vue'

import { usePinceauRuntime, utils as __$pUtils } from 'pinceau/runtime'

import { cssProp } from 'pinceau/runtime'

const __$pProps = defineProps({
  css: cssProp,
})

const { $pinceau } = usePinceauRuntime(computed(() => __$pProps),undefined,ref({ _2K2_background })) 
</script>

<template>
  <button class="test-button" :class="[$pinceau]">
    CSS
  </button>
</template>

<style lang="postcss" transformed>
.test-button{color:red;background:var(---2k2-background);}
</style>

Maybe we need to add a props.css judgment to the transform code?

if (_$pProps.css) {
   const { $pinceau } = usePinceauRuntime(computed(() => __$pProps),undefined,ref({ _2K2_background })) 
}

Similar to https://tailwindcss.nuxt.dev/tailwind/viewer

For now, pinceau allow generating dynamic classes from css rules and apply them depending on props and variants.

It would be great to also apply pre-defined classes (like from external frameworks / libraries) so we can use pinceau variants like in this example:

<script setup lang="ts">
const props = defineProps({
  // pinceau variants props
  ...variants,
  
  // others props
  pending: {
    type: Boolean,
  },
})
</script>

<template>
  <button class="is-button" :class="[$pinceau]">
    <slot>Button</slot>
  </button>
</template>

<style lang="ts">
css({
  '.is-button': {
    // ...
  },
  variants: {
    shape: {
      straight: {},
      rounded: {
        /* @class does not declare css but directly apply the value to $pinceau classes list */
        '@class': 'is-rounded',

        /* can be used with other pinceau features */
        color: '{color.primary.900}',
      },
      full: {
        /* arrays are merged like :class="['foo', 'bar']" */
        '@class': [
          'is-curved',
          'is-fullwidth',
          /* reference design token as class name */
          '{classes.button.rounded}'
        ]
      },
      curved: {
        /* access to component props with a function */
        '@class': (props) => ([
           'is-curved',
           props.pending ? 'is-disabled' : '',
        ]),
      },
      options: {
        default: 'rounded',
      },
    },
  },
})
</style>

my tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "baseUrl": "./",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    "types": ["unplugin-vue-macros/macros-global" /* ... */],
    "paths": {
      "~/*": ["./*"]
    }
  },
  "references": [{ "path": "./tsconfig.node.json" }],
  "vueCompilerOptions": {
    "plugins": ["pinceau/volar"]
  }
}

repo address https://github.com/SGAMERyu/Luff-UI/blob/main/packages/luff-core/tsconfig.json

Hi,

I'm using Pinceau through Docus and from v1.8.x to v1.9.x, the palette function disappeared. How can I convert my code?

import { defineTheme, palette } from 'pinceau'

export default defineTheme({
  color: {
    primary: palette('orange')
  }
})

for example
A basic button component will change the style for the different options in the Button module, as shown in the image below

The hover state of each variant may change one or both of button's css properties, and computed systems currently support only one property and I prefer the following representation

<script lang='ts' setup>
const hoverButton = (props) => {
  return {
   background: '{colors.red}',
   color:  '{colors.white}'
  }
}
</script>
<style lang="ts">
css({
  '.btn': {
    '&:hover': (props) => hoverButton(props)
  }
})
</style>

Can we implement this method, I tried to change the source code. It turns out that using v-bind in vue also seems to support only individual attributes and not objects

The current pinceau implementation will translate components into the following code. Maybe we need to adapt it

const __$pProps = defineProps()

In future versions of vue, the user's code might look like this

const { test = 1 } = defineProps()

Hello,

Here an error with the css function. Does anyone know how to deals with it ?

When using in combination with https://github.com/nuxt-modules/tailwindcss pinceau variables are included before tailwind css.

This result in being unable to override tailwind values with pinceau.

In some cases, projects may use the same animate effect for configuration in token.config.ts to achieve consistency

It seems to conflict with PostCSS at build time because postCSS parses style with CSS functions, causing it to fail to parse and thus fail to compile

I'm just going to print out the code that I passed into postCSS

// postcss code
css({
    '.pi-btn': {
      width: '100px'
    }
})


✓ 3 modules transformed.
[vite:css] [postcss] C:/Users/qixiyu/Desktop/pinceau-vue/src/components/button/button.vue?vue&type=style&index=0&lang.postcss:3:1: Unknown word
file: C:/Users/qixiyu/Desktop/pinceau-vue/src/components/button/button.vue?vue&type=style&index=0&lang.postcss:3:1
error during build:
CssSyntaxError: [postcss] C:/Users/qixiyu/Desktop/pinceau-vue/src/components/button/button.vue?vue&type=style&index=0&lang.postcss:3:1: Unknown word
    at Input.error (C:\Users\qixiyu\Desktop\pinceau-vue\node_modules\.pnpm\[email protected]\node_modules\postcss\lib\input.js:148:16)
    at Parser.unknownWord (C:\Users\qixiyu\Desktop\pinceau-vue\node_modules\.pnpm\[email protected]\node_modules\postcss\lib\parser.js:540:22)
    at Parser.other (C:\Users\qixiyu\Desktop\pinceau-vue\node_modules\.pnpm\[email protected]\node_modules\postcss\lib\parser.js:164:12)
    at Parser.parse (C:\Users\qixiyu\Desktop\pinceau-vue\node_modules\.pnpm\[email protected]\node_modules\postcss\lib\parser.js:72:16)
    at parse (C:\Users\qixiyu\Desktop\pinceau-vue\node_modules\.pnpm\[email protected]\node_modules\postcss\lib\parse.js:11:12)
    at new LazyResult (C:\Users\qixiyu\Desktop\pinceau-vue\node_modules\.pnpm\[email protected]\node_modules\postcss\lib\lazy-result.js:133:16)
    at Processor.process (C:\Users\qixiyu\Desktop\pinceau-vue\node_modules\.pnpm\[email protected]\node_modules\postcss\lib\processor.js:28:14)
    at compileCSS (file:///C:/Users/qixiyu/Desktop/pinceau-vue/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-6b3a5aff.js:44546:14)
    at async Object.transform (file:///C:/Users/qixiyu/Desktop/pinceau-vue/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-6b3a5aff.js:44047:55)
    at async transform (file:///C:/Users/qixiyu/Desktop/pinceau-vue/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/rollup.js:21928:16)
 ELIFECYCLE  Command failed with exit code 1.

Example repository address https://github.com/SGAMERyu/pinceau-vue

I found that the type: module was not set in package.json, where the histoire environment used pinceau cjs file, and the error was reported because the vite startup could not resolve the require

I provide a pr for this #42

when i use css method in single ts file
Vite reported an error compiling the library

 'extname' is not exported by __vite-browser-external, imported by ../../node_modules/.pnpm/[email protected]_6k4qr4f4opqyvhlnzjpej7fvtq/node_modules/unplugin/dist/index.mjs
piece-ui:dev: file: C:/Users/qixiyu/Desktop/code/piece-ui/node_modules/.pnpm/[email protected]_6k4qr4f4opqyvhlnzjpej7fvtq/node_modules/unplugin/dist/index.mjs:8:9
piece-ui:dev:  6: 
piece-ui:dev:  7: // src/esbuild/utils.ts
piece-ui:dev:  8: import { extname } from "path";
piece-ui:dev:              ^
piece-ui:dev:  9:
piece-ui:dev: 10: // node_modules/.pnpm/@[email protected]/node_modules/@jridgewell/sourcemap-codec/dist/sourcemap-codec.mjs

example

css({
 variants: {
    size: {
      sm: {
        '.lu-badge__dot': {
          minWidth: `{size.badge.sm}`,
          height: `{size.badge.sm}`
        }
      },
      default: {
        '.lu-badge__dot': {
           minWidth: 'default',
          height: 'default'
        }
      },
      options: {
        default: 'default'
      }
    },
    dot: {
      true: {
        '.lu-badge__dot': {
          minWidth: '{size.badge.dotSize}',
          height: '{size.badge.dotSize}',
          fontSize: '0px',
        }
      },
      options: {
        default: false
      }
    }
  }
})

generate css style is

{
     min-width: var(--size-badge-default);
     height: var(--size-badge-default);
}

Perhaps we can refer to @layer's mechanism to solve this problem
@layer doc is here https://developer.mozilla.org/en-US/docs/Web/CSS/@layer

Hi, I have a couple of questions about using pinceau with tailwind (if it's possible):

• can I use design tokens from tailwind (tailwind.config.js) instead of tokens.config.ts?
• how can I use pinceau with @apply?

Generally, I like the idea to move logic related to styling out from script tag, but I can't figure out how to use it in a project with tailwind. How can I rewrite this using pinceau?

<template>
    <button :class="buttonClass">Example</button>
</template

<script>
...
computed () {
    buttonClass () {
       return this.isPrimary ? `primary` : `secondary`
     }
}
...
</script>

<style scoped>
.primary {
  @apply bg-red-500;
}

.secondary {
  @apply bg-slate-500;
}
</style>

In other words, how can I move logic to style and have one dynamic class? Something like this?:

<style scoped>
css({
  '.btn' {
    '@apply':  ({props}) => props.isPrimary ? 'bg-red-500' : 'bg-slate-500';
  }
})
</style>

see more at nuxt-themes/typography#29

I see the use of css prop in the source code, but it is not written in readme. We should write an example to let the user know about this feature

Setting runtime module option to false throw with '.nuxt/pinceau-nuxt-plugin.client.mjs' does not provide an export named 'default'

export default defineNuxtConfig({
  pinceau: {
    runtime: false,
  },
})

Using pinceau to set different colors values depending on nuxt color mode is a great feature!

In nuxt color mode, we can set multiple themes (ex: for color blindness like protanopia / tritanopia).

How can we add other theme than light/dark in pinceau ?

docs: {
      page: {
        layout: {
          spacing: {
            initial: '0px',
            lg: '{space.6}',
            xl: '{space.8}'
          }
        }
      }
    }

lg owerwriting xl

The repository address is https://github.com/SGAMERyu/Luff-UI

Hello !
I noticed from the playground theme that the zIndex values are written in pixel unit :

Since the mdn doc specified that z-index only supports integers,
is there a particular reason you choosed to define it with px or is it a mistake ?

Example:

<style lang="ts" scoped>
css({
  ':deep(.line.highlight)': {
    backgroundColor: '{prose.code.block.borderColor.light}',
    '@dark': {
       backgroundColor: '{prose.code.block.borderColor.dark}'
    }
  }
})
</style>

Code from https://github.com/nuxt-themes/typography/blob/86da2e3bf4d281b01dd45d10eeb7c89ea7c12873/components/global/ProseCode.vue#L111-L117

Hello, I'm a new member of the group. Thank you for providing us with a great product.
I have a few questions. I would be a newbie so sorry if I said something out of line.
Also, I'm not good at English, so sorry if it's hard to understand you.

I'm developing UI libraries using @vitejs/plugin-vue2, vue2.7, and @storybook/builder-vite.
In my storybook, to set <link rel="stylesheet" href="./node_modules/.vite/pinceau/index.css" /> in preview-head.html and config.plugins.push(pinceau()) in viteFinai(config) is work for me.
But the build(vite build) fails.

questions:

• Is it possible to use pinceau with vue2?
• Are there any better solution to use pinceau in the storybook?

From nuxt-modules/design-tokens#9

Might have side-effects

Implicit conversion of a 'symbol' to a 'string' will fail at runtime. Consider wrapping this expression in 'String(...)

Should export same value as config

Reproduction:
https://github.com/nuxtlabs/nuxt.com/blob/e67751b1f8e9b2c0bf429daf62c7814eceee24cd/tailwind.config.ts#L17

At some point, one feature will be impressed by another prop，for example
I have a button component of different size set some different spacing，

type Size = 'xs' | 'sm' | 'md' | 'xl' | 'lg';
interface Props {
   size: Size
  compact: boolean
}

The spacing under size is affected when the compact property is set to true

I set up a utils method to set tokens with different sizes

export const buttonUtils = {
  bSize: (value: string) => ({
    height: `{size.btn.${value}}`,
    paddingLeft: `{size.btnPadding.${value}}`,
    paddingRight: `{size.btnPadding.${value}}`
  })
}

I want to determine whether props.compact is true in this utils method to determine the different spacing tokens

export const buttonUtils = {
  bSize: (value: string, props: Props) => {
   if (props.compact) {
     return {
       height: `{size.btn.${value}}`,
       paddingLeft: `{size.btnCompactPadding.${value}}`,
       paddingRight: `{size.btnCompactPadding.${value}}`
    }
 }
 return {
    height: `{size.btn.${value}}`,
    paddingLeft: `{size.btnPadding.${value}}`,
    paddingRight: `{size.btnPadding.${value}}`
 }
}
}

Thanks for beta testing paneer 💛 It is now public as unjs/magicast.

Version 0.3.0 throws this error. Adding resolution to 0.2.0 fixes the issue

✘ [ERROR] Could not resolve "pinceau__flat.ts"

    node_modules/pinceau/dist/runtime.mjs:2:40:
      2 │ import { aliases, flattenedTheme } from 'pinceau__flat.ts';
        ╵                                         ~~~~~~~~~~~~~~~~~~

  You can mark the path "pinceau__flat.ts" as external to exclude it from the bundle, which will
  remove this error.

docs: {
      page: {
        layout: {
          spacing: {
            initial: '0px',
            lg: '{space.6}',
            xl: '{space.8}'
          }
        }
      }
    }

lg overwriting xl

That would be a great to have utils to convert colors defined in tailwind format, like:

'flamingo': {
  DEFAULT: '#EF4444',
  50: '#FDEDED',
  100: '#FCDADA',
  200: '#F9B5B5',
  300: '#F58F8F',
  400: '#F26A6A',
  500: '#EF4444',
  600: '#E71414',
  700: '#B30F0F',
  800: '#800B0B',
  900: '#4C0707'
},

example from https://www.tailwindshades.com/

In a format exploitable with tailwind css variables: https://tailwindcss.com/docs/customizing-colors#using-css-variables

Pinceau have to store RGB or HSL values, without their function:

• RGB values: 255 115 179
• HSL values: 198deg 93% 60%

which could be defined like:

// tokens.config.ts
import { defineTheme, tailwindToRgb, tailwindToHsl } from 'pinceau'
import colors from 'tailwindcss/colors'

export default defineTheme({
  color: {
    // define only initial values using HSL
    muted: tailwindToHsl(colors.slate),

    // define initial value with additional themes variations using RGB
    primary: tailwindToRgb(colors.indigo, {
      dark: colors.orange,
    }),
  },
})

and used in tailwind config like:

// tailwind.config.cjs

module.exports = {
  theme: {
    extend: {
      colors: {
        // we may think about an utils to map values here
        muted: {
          50: 'hsl(var(--color-muted-50) / <alpha-value>)',
          100: 'hsl(var(--color-muted-100) / <alpha-value>)',
          200: 'hsl(var(--color-muted-200) / <alpha-value>)',
          300: 'hsl(var(--color-muted-300) / <alpha-value>)',
          400: 'hsl(var(--color-muted-400) / <alpha-value>)',
          500: 'hsl(var(--color-muted-500) / <alpha-value>)',
          600: 'hsl(var(--color-muted-600) / <alpha-value>)',
          700: 'hsl(var(--color-muted-700) / <alpha-value>)',
          800: 'hsl(var(--color-muted-800) / <alpha-value>)',
          900: 'hsl(var(--color-muted-900) / <alpha-value>)',
        },
        primary: {
          50: 'rgb(var(--color-primary-50) / <alpha-value>)',
          100: 'rgb(var(--color-primary-100) / <alpha-value>)',
          200: 'rgb(var(--color-primary-200) / <alpha-value>)',
          300: 'rgb(var(--color-primary-300) / <alpha-value>)',
          400: 'rgb(var(--color-primary-400) / <alpha-value>)',
          500: 'rgb(var(--color-primary-500) / <alpha-value>)',
          600: 'rgb(var(--color-primary-600) / <alpha-value>)',
          700: 'rgb(var(--color-primary-700) / <alpha-value>)',
          800: 'rgb(var(--color-primary-800) / <alpha-value>)',
          900: 'rgb(var(--color-primary-900) / <alpha-value>)',
        },
      },
    },
  },
}

When we use syntax like widthDefaults(defineProps, {}), pinceau will only match defineProps when converting code, not withDefaults which will cause compilation to fail
example

import { ButtonProps, ButtonDefaultProps } from './button.type'

withDefaults(defineProps<ButtonProps>(), ButtonDefaultProps)

pinceau build version

import { getCurrentInstance } from 'vue'

import { computed } from 'vue'

import { reactive } from 'vue'

import { usePinceauRuntime, utils as __$pUtils } from 'pinceau/runtime'

import { ButtonProps, ButtonDefaultProps } from './button.type'

defineOptions({
  name: 'LuStyleButton'
})

withDefaults(const __$pProps = defineProps<ButtonProps>(), ButtonDefaultProps)

we hope version

import { ref } from 'vue'

import { getCurrentInstance } from 'vue'

import { computed } from 'vue'

import { reactive } from 'vue'

import { usePinceauRuntime, utils as __$pUtils } from 'pinceau/runtime'

import { ButtonProps, ButtonDefaultProps } from './button.type'

defineOptions({
  name: 'LuStyleButton'
})

const __$pProps = withDefaults(defineProps<ButtonProps>(), ButtonDefaultProps)

I created a pr to fix this #38

Will be sexier IMO in css files as well.

color: token('colors.primary.500')

example

<style scoped lang="ts">
import { test } from './test'

css({
  '.demo-button': {
    '--button-primary': (props) => `{color.${props.color}.600}`,
    '--button-secondary': (props) => `{color.${props.color}.500}`,
    display: 'inline-block',
    borderRadius: '{radii.xl}',
    transition: '{transition.all}',
    color: () => test(),
    boxShadow: `0 5px 0 {button.primary}, 0 12px 16px {color.dimmed}`,
    span: {
      display: 'inline-block',
      fontFamily: '{font.secondary}',
      borderRadius: '{radii.lg}',
      fontSize: '{fontSize.xl}',
      lineHeight: '{lead.none}',
      transition: '{transition.all}',
      backgroundColor: '{button.primary}',
      boxShadow: 'inset 0 -1px 1px {color.dark}',
    },
    '&:hover': {
      span: {
        backgroundColor: '{button.secondary}',
      }
    },
    '&:active': {
      span: {
        transform: 'translateY({space.4})'
      }
    }
  },
  variants: {
    size: {
      sm: {
        span: {
          padding: '{space.4} {space.6}',
        },
      },
      md: {
        span: {
          padding: '{space.6} {space.8}'
        },
      },
      lg: {
        span: {
          padding: '{space.8} {space.12}'
        },
      },
      xl: {
        span: {
          padding: '{space.12} {space.24}'
        },
      },
      options: {
        default: {
          initial: 'sm',
          md: 'md',
          lg: 'lg',
          xl: 'xl'
        },
      },
    },
  },
})
</style>

For component library scenarios, we may need to be compatible with various types of props and different components will reuse similar logic. We can try to introduce this approach to achieve logic reuse. The reason for not using utils is that utils must use dynamic imports, and its meaning is more about style reuse rather than logic judgment reuse.

test

Because of the type error below, the build failed every time.
This happened in [email protected] + Vite + Pinceau@latest.
In Nuxt@3 application also this type of error occurred, but the build succeed
Occurred file: `./node_modules/.vite/pinceau/types.ts.
There is no problem?

Proposal

Adding undefined type to [key: string | number]: last one of the property

In some ui components, the tsx implementation is better than the template presentation, so maybe we need to support tsx
Maybe we need to extend the css function to run in tsx

Use case:
Let's say I am using Figma design tokens, pinceau and tailwindcss.
I'd like to be able to use Pinceau's directives such as $dt inside of tailwind.config.ts. Is this possible somehow?

I keep getting this error
Type 'true' is not assignable to type 'string | { dark?: string | undefined; light?: string | undefined; initial?: string | undefined; } | undefined'

when trying to set the default option for BooleanVariant. have been trying tweak here and there and haven't been able to find a way to fix it. Is this supposed to happen and I'm missing something in the code? Can anyone help?

this is my code:

css({
  variants: {
    primary: {
      true: {
        background: '{color.primary.500}'
      },
      false: {
        background: 'red'
      },
      options: {
        default: true
      } 
    }
  }
})

I found this prefix option in the stitches doc, which was set for all the class names and CSS variables. Will Pinceau support this, and I'd like to contribute PR for it if I can

I have tried to load the playground, but it does not display anything. Is there some setup missing, or is it supposed to be blank?

Issue: Stackblitz playground is not showing anything after loading the environment. (404 error).

I'd like to hear about the behavior of css support in pseudo-elements.
I think it don't work properly below.

Environment:

• node.js 16.18.1
• nuxt 3.2.0
• pinceau 0.18.0

css({
  '.title': {
    'h3': {
      position: 'relative',
      '&::before': {
        content: '',
        position: 'absolute',
        top: '50%',
        left: 0,
        display: 'inline-block',
        width: '45px',
        height: '1px',
        backgroundColor: '#fff',
      },
    },
  },
})

Is there anything that seems strange to you?

package.json indicates there are .js (CJS) and .mjs (ESM) files. But in fact the dist directory holds .js (ESM) and .cjs (CJS) files.

there also appears to be a lot of duplication in the .cjs files - virtually all of them have the totality of your project code.

Note: because you have set type: module you cannot in fact import from pinceau in a CJS project so the cjs files are not needed.

The error message is as follows:

failed to load config from /workspace/Luff-UI/packages/luff-core/vite.config.ts
error during build:
file:///workspace/Luff-UI/node_modules/.pnpm/[email protected][email protected]/node_modules/pinceau/dist/shared/pinceau.8f169917.mjs:7
import { existsSync, mkdirSync, rmSync, writeFileSync } from 'fs-extra';
         ^^^^^^^^^^
SyntaxError: Named export 'existsSync' not found. The requested module 'fs-extra' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'fs-extra';
const { existsSync, mkdirSync, rmSync, writeFileSync } = pkg;

fs-extra is a commonjs that only supports default export. I have looked at the documentation for fs-extra and can use the esm module in fs-extra/esm In the latest version

Following a discussion with @bdrtsky ;

"static":

:root {
   --font-primary-src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

@font-face {
 font-family: 'Primary';
 src: var(--font-primary-src);
}

"dynamic":

font: {
   primary: {
      value: {
         src: '',
         fontFamily: ''
      }
   }
}

References:
https://github.com/typekit/fvd