Forem: ice breaker

Mokup: A Build-Tool-Friendly Visual Mocking Tool for Vite, Webpack, Node.js, and Workers

ice breaker — Fri, 13 Feb 2026 05:20:30 +0000

Mokup: A Build-Tool-Friendly Visual Mocking Tool

Hi, I am icebreaker, a frontend developer and open source enthusiast.

I want to share a project I have been working on recently: Mokup, a file-based HTTP mocking tool.

Project links: GitHub, docs site: http://mokup.icebreaker.top/

What is Mokup

Mokup is a file-based HTTP mocking tool. You put mock files in the mock/ directory, and it automatically scans them, builds matching routes, and returns responses.

Its goal is straightforward: help mocks run quickly inside your existing frontend project, and reduce the cost of building a separate service just for API collaboration.

Key features

Build-tool friendly: works with both Vite and Webpack without forcing a project rewrite.
Visual debugging: built-in Playground, so route status is visible at a glance.
Great developer experience: mock file and config updates refresh automatically, without frequent restarts.
Deployable to multiple environments: local dev, Node.js server, Worker, and Service Worker.

Why I built it

For many teams, the pain is not writing mocks. The pain is:

Too many setup steps, and reconfiguration every time the build tool changes.
Poor visibility during local debugging, so people guess by reading files.
Slow feedback loops when every mock change needs a restart or manual verification.

Mokup is designed to solve these three issues: lighter setup, stronger visualization, and faster feedback.

Build-tool friendly

Vite integration

import mokup from 'mokup/vite'

export default {
  plugins: [
    mokup({
      entries: { dir: 'mock', prefix: '/api' },
    }),
  ],
}

At this point, you can add files under mock/, and Mokup will scan them and generate routes automatically.

You can also open Mokup Playground from your CLI output for visual debugging.

Webpack integration

const { mokupWebpack } = require('mokup/webpack')

const withMokup = mokupWebpack({
  entries: { dir: 'mock', prefix: '/api' },
})

module.exports = withMokup({})

This lets you add mock capability into your existing build pipeline without changing your business code structure.

Visualization: Playground (highlight)

Mokup includes a built-in Playground to inspect scanned routes, methods, paths, and config chains.

Default entry in Vite dev:

http://localhost:5173/__mokup

Online demo: https://mokup.icebreaker.top/__mokup/

It solves a practical problem:
when an endpoint does not work, you do not need to grep everywhere. Open the page and you can immediately see whether the route was scanned, disabled, and which config matched.

Developer experience: what supports hot reload

In Vite dev, Mokup watches mock directories and refreshes the route table automatically. Typical changes that trigger hot reload include:

Add/modify/delete route files, for example:
- mock/users.get.ts
- mock/messages.get.json
- mock/orders/[id].patch.ts
Modify directory config files: mock/**/index.config.ts
Change directory structure (move, rename, create nested folders)

After changes, Playground refreshes route lists automatically, making debugging much faster.
If you do not need file watching, set watch: false in entries.

Quick example: from file to response

// mock/users.get.ts
import { defineHandler } from 'mokup'

export default defineHandler({
  handler: c => c.json([{ id: 1, name: 'Ada' }]),
})

Start dev and visit /api/users (assuming you set prefix: '/api'), then you get mock data.

Quick integration with @faker-js/faker

Mokup handlers are plain TS/JS functions, so you can integrate with @faker-js/faker directly, without any extra adapter layer.

This example returns a user list based on the size query parameter:

// mock/users.get.ts
import { faker } from '@faker-js/faker'
import { defineHandler } from 'mokup'

export default defineHandler((c) => {
  const size = Number(c.req.query('size') ?? 10)
  const count = Number.isNaN(size) ? 10 : Math.min(Math.max(size, 1), 50)
  const list = Array.from({ length: count }, () => ({
    id: faker.string.uuid(),
    name: faker.person.fullName(),
    email: faker.internet.email(),
    city: faker.location.city(),
    createdAt: faker.date.recent({ days: 30 }).toISOString(),
  }))

  return c.json({
    list,
    total: 200,
    page: 1,
    pageSize: count,
  })
})

This is very useful for list, search, and detail page integration.
If you need reproducible results, add faker.seed(123) at the top of the handler.

Deployable to multiple environments

The same mock setup can run in multiple environments: for example, directly in Node.js, and also deployed to Cloudflare Workers.

Node.js dev mode example:

import { createFetchServer, serve } from 'mokup/server/node'

const app = await createFetchServer({ entries: { dir: 'mock' } })
serve({ fetch: app.fetch, port: 3000 })

Cloudflare Worker example:

import { createMokupWorker } from 'mokup/server/worker'
import mokupBundle from 'virtual:mokup-bundle'

export default createMokupWorker(mokupBundle)

Note: virtual:mokup-bundle is only available in Vite with @cloudflare/vite-plugin. In Node.js dev mode, use createFetchServer directly and you do not need that virtual module.

Core architecture

Use cases and boundaries

Good fit:

Teams with existing Vite/webpack projects that want low-cost mock integration
Projects that need visual route diagnostics
Workflows that value fast feedback after mock updates

Less suitable:

Scenarios that depend heavily on complex dynamic proxy chains
Extremely lightweight setups that do not want build-time or plugin-based integration

Mokup is not trying to replace every mock solution. It is designed to make mocks easier to adopt, easier to debug, and better aligned with everyday development workflows.

Closing

Mokup is still evolving quickly. Feedback is very welcome, including feature requests, DX feedback, and documentation improvements.

If this is useful for your workflow, feedback and feature requests are welcome:
https://github.com/sonofmagic/mokup

Use postcss-cva to generate cva method

ice breaker — Thu, 01 Feb 2024 15:05:26 +0000

Use postcss-cva to generate cva method
- What is cva
- Example
- Parameters
- postcss-cva
- css example
- Atomic design
- Annotated reference
- Generate cva function
- Refers

What is cva

cva stands for class-variance-authority. It is a class library that is very suitable for creating and controlling Css variant methods. It is very suitable for atomic ideas like tailwindcss.

Many times we encapsulate components, especially using the idea of atomization to write css, and then encapsulate the components, just use it!

Example

So how to use it for packaging? Let’s take the example of encapsulating an intuitive vue component Button:

<template>
  <button>
    <slot></slot>
  </button>
</template>

Next, we need to control its style based on the passed Props of this component, including color type, size, status, shape, etc.

So if we use styles to control these, we usually write like this:

<template>
  <button :class="className">
    <slot></slot>
  </button>
</template>

<script setup lang="ts">
import { computed } from 'vue';

function getButtonClass(props){
  let classNames = [/* base */]
  // do something with props like push, splice, unshift ...
  return classNames.join(' ')
}

const props = withDefaults(defineProps<{
  // ...
}>(), {
  // ... 
})
const className = computed(() => {
  return getButtonClass(props)
})
</script>

And cva is a method that helps us generate this getButtonClass function.

Parameters

The input parameters of a cva usually include 4 parts: base, variants, compoundVariants, defaultVariants:

import { cva } from 'class-variance-authority'
//                     ⬇️ base
const button = cva(['font-semibold', 'border', 'rounded'], {
  // ⬇️ variants
  variants: {
    intent: {
      primary: ['bg-blue-500', 'text-white', 'border-transparent', 'hover:bg-blue-600'],
      secondary: ['bg-white', 'text-gray-800', 'border-gray-400', 'hover:bg-gray-100']
    },
    size: {
      small: ['text-sm', 'py-1', 'px-2'],
      medium: ['text-base', 'py-2', 'px-4']
    }
  },
  // ⬇️ compoundVariants
  compoundVariants: [
    {
      intent: 'primary',
      size: 'medium',
      class: 'uppercase'
    }
  ],
  // ⬇️ defaultVariants
  defaultVariants: {
    intent: 'primary',
    size: 'medium'
  }
})

button()
// => "font-semibold border rounded bg-blue-500 text-white border-transparent hover:bg-blue-600 text-base py-2 px-4 uppercase"
button({ intent: 'secondary', size: 'small' })
// => "font-semibold border rounded bg-white text-gray-800 border-gray-400 hover:bg-gray-100 text-sm py-1 px-2"

Many times we can construct such a function to encapsulate our components. This will make our code very intuitive. What should control the style will control the style, and what should control the behavior will control the behavior. So it is good to use cva to transform the vue Button component just now.

But what if our project does not use the atomic Css class library? Or if we want to generate the cva function when writing Css, then you have to use postcss-cva.

postcss-cva

postcss-cva is a postcss plugin based on css ast analysis.

It can convert the Css comments you write into cva functions.

css example

Let’s look at a simple example. During the encapsulation process of the Button component, the following Css is written

/* @meta path="./buttonClass" */
/* @dv size="md" */
.btn {
  /* @b */
  font-size: 16px;
  background: gray;
  border-radius: 4px;
}

.btn-primary {
  /* @v type="primary" */
  background: blue;
  color: white;
}

.btn-secondary {
  /* @v type="secondary" */
  font-size: 22px;
  color: yellow;
}

.btn-disabled {
  /* @cv type="primary" size="xs" */
  cursor: not-allowed;
}

.btn-md {
  /* @v size="md" */
  padding: 6px 10px;
  font-size: 16px;
}

.btn-xs {
  /* @v size="xs" */
  padding: 2px 6px;
  font-size: 14px;
}

.btn-sm {
  /* @v size="sm" */
  padding: 4px 8px;
  font-size: 12px;
}

Atomic design

In it we define:

Its base class: base: .btn
Its variants: variants:
- .btn-primary, .btn-secondary to control color types
- .btn-md, .btn-xs, .btn-sm to control size
- More to control, shape or other etc.
Its compound variants: compoundVariants: .btn-disabled (triggered when the passed parameter type="primary" size="xs" is met)
Its default variant: defaultVariants: size="md" (use size="md" when no parameters are passed by default)

Annotated reference

Then follow the comment reference of postcss-cva:

keyword	target	type	description
`@b`	`base`	node	add current node selector to base
`@gb`	`base`	global	define base
`@v`	`variants`	node	add current node selector to variants
`@gv`	`variants`	global	define variants
`@cv`	`compoundVariants`	node	add current node selector to compoundVariants
`@gcv`	`compoundVariants`	global	define defaultVariants
`@dv`	`defaultVariants`	global	define defaultVariants
`@meta`	`meta`	global	define metadata

We define all variants by adding corresponding annotations.

defined by @meta path="./buttonClass"

At the same time, the file output directory of the cva function is also defined as the buttonClass.ts file in the directory where the current Button.vue file is located (the default format is ts)

Generate cva function

In this way, when we run the main function and introduce the css file where the vue component/comment is located, a cva function is generated:

import { cva, VariantProps } from "class-variance-authority";
const index = cva(["btn"], {
  variants: {
    "type": {
      "primary": ["btn-primary"],
      "secondary": ["btn-secondary"]
    },
    "size": {
      "md": ["btn-md"],
      "xs": ["btn-xs"],
      "sm": ["btn-sm"]
    }
  },
  compoundVariants: [{
    "class": ["btn-disabled"],
    "type": ["primary"],
    "size": ["xs"]
  }],
  defaultVariants: {
    "size": "md"
  }
});
export type Props = VariantProps<typeof index>;
export default index;

然后，我们就可以直接引入进行封装了！

<template>
  <button :class="className">
    <slot>postcss-cva</slot>
  </button>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import buttonClass, { Props as ButtonProps } from './buttonClass'

const props = withDefaults(defineProps<{
  // ButtonProps
  type?: 'primary' | 'secondary',
  size?: 'md' | 'sm' | 'xs'
}>(), {})
const className = computed(() => {
  return buttonClass(props)
}) 
</script>

postcss-cva allows you to plan the cva function when designing and writing css.

Now you can not only use it directly as an external postcss plug-in, but it has also been integrated into IceStack inside.

Use it to manage and generate your Css UI now.

Refers

IceStack

postcss-cva

cva.style

Use IceStack to build your CSS UI

ice breaker — Tue, 02 Jan 2024 20:33:08 +0000

Use IceStack to build your CSS UI
- Install @icestack/ui
- Initialization configuration file
- Build style
- Used as tailwindcss plugin
- Default preset
- Start from scratch
- Build button component
- Component style refinement
- Write configuration file
- Add more colors
- Add more sizes
- More

I love tailwindcss and use it frequently. I also like daisyui very much. Using these for development saves me a lot of effort.

However, I encountered some scenarios in the project where I needed to deeply customize the Css UI component. At this time, daisyui could not solve my problem for the time being.

So I came up with some ideas and wrote icestack inspired by tailwindcss and daisyui

This is a Css UI framework generation and management tool. Through it, you can easily extend the style, and you can also easily build your own Css UI from scratch and combine it with tailwindcss. use!

Let's see how to use it!

Install `@icestack/ui`

# yarn | pmpm
npm install -D @icestack/ui @icestack/tailwindcss

@icestack/ui will be downloaded and installed locally, and a command icestack will be registered

Initialization configuration file

After installing @icestack/ui, execute:

npx icestack init

This command will generate an icestack.config.cjs file in the current execution directory. The default content is as follows:

/**
 * @type {import('@icestack/ui').Config}
 */
const config = {
  outdir: './my-ui'
}

module.exports = config

Build style

npx icestack build

This command reads the configuration and builds the product in the './my-ui' directory under the current configuration file. Then you can directly import these css and js files, but giving them to tailwindcss is more convenient to use.

Used as tailwindcss plugin

Register the icestackPlugin plugin in tailwind.config.js and pass a loadDirectory parameter to locate the location where the product was just generated:

const path = require('node:path')
const { icestackPlugin } = require('@icestack/tailwindcss')

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  plugins: [
    icestackPlugin({
      // Absolute path to the loading directory
      loadDirectory: path.resolve(__dirname, 'my-ui'),
      // Whether to inject tailwindcss theme config
      // When true, the generator's primary success warning colors will enter the tailwindcss.theme.extend configuration
      // You can use bg-primary / text-success
      // Default value: false
      loadConfig: true
      // ...
    })
  ]
}

Then as long as we run the project normally, we can directly use all the CSS components in the my-ui directory!

Default preset

By default, a set of @icestack/preset-default for Css components is built into @icestack/ui, which absorbs the excellent writing style of daisyui and remains consistent in many places.

At the same time, you can use configuration items to extend and override its original style, see override

If you want to build your own UI framework from 0 to 1, you can set mode to none in icestack.config.cjs, and @icestack/preset will not be loaded at this time.

Start from scratch

Build button component

We can select our favorite button component from the component library list of the project awesome-tailwindcss. Its html is as follows

<a
  href="https://ui.icebreaker.top/"
  target="_blank"
  class="group relative overflow-hidden bg-blue-600 focus:ring-4 focus:ring-blue-300 inline-flex items-center px-7 py-2.5 rounded-lg text-white justify-center"
>
  <span class="z-40">Hover Me</span>
  <div
    class="absolute inset-0 h-[200%] w-[200%] rotate-45 translate-x-[-75%] transition-all group-hover:scale-100 bg-white/30 group-hover:translate-x-[50%] z-20 duration-1000"
  ></div>
</a>

Component style refinement

Then we start to refine html and extract its styles:

<a class="btn">
  <span>Hover Me</span>
</a>

Convert the original long-passed class into @apply, and wrap it in the selector .btn, then convert the last animated div element into a pseudo-element, and modify the style.

.btn {
  @apply relative overflow-hidden bg-blue-600 focus:ring-4 focus:ring-blue-300 inline-flex items-center px-7 py-2.5 rounded-lg text-white justify-center;

  &::after {
    content: '';
    @apply absolute inset-0 h-[200%] w-[200%] rotate-45 translate-x-[-75%] transition-all bg-white/30 z-20 duration-1000;
  }

  &:hover::after {
    @apply translate-x-[50%];
  }
}

Write configuration file

/**
 * @type {import('@icestack/ui').Config}
 */
const config = {
  outdir: './my-ui',
  components: {
    button: {
      selector: '.btn',
      // selector is .btn
      schema: ({ selector, params, types }) => {
        return {
          selector,
          defaults: {
            // return a string template, allow css
            base: `
            ${selector} {
              @apply relative overflow-hidden bg-blue-600 focus:ring-4 focus:ring-blue-300 inline-flex items-center px-7 py-2.5 rounded-lg text-white justify-center;

              &::after {
                content: '';
                @apply absolute inset-0 h-[200%] w-[200%] rotate-45 translate-x-[-75%] transition-all bg-white/30 z-20 duration-1000;
              }

              &:hover::after {
                @apply translate-x-[50%];
              }
            }
            `
          }
        }
      }
    }
  }
}
module.exports = config

Then after executing icestack build, .btn will be successfully loaded by tailwindcss plugin. You can write like this:

<a class="btn"> Hover Me </a>

Add more colors

For example, if we have requirements, the default is bg-blue-600 focus:ring-blue-300

But what should we do if we can pass in red, yellow, and other colors?

/**
 * @type {import('@icestack/ui').Config}
 */
const config = {
  outdir: './my-ui',
  components: {
    button: {
      selector: '.btn',
      // types is the default primary / success ... theme string array
      schema: ({ selector, params, types }) => {
        // add colors
        const colors = ['red', 'yellow', 'green']
        return {
          selector,
          // utils > styled > base
          defaults: {
            base: `...previous-code`,
            // add styled, allow css
            styled: `
            ${colors
              .map((color) => {
                return `${selector}-${color}{
                @apply bg-${color}-600 focus:ring-${color}-300;
              }`
              })
              .join('\n')}

            `
          }
        }
      }
    }
  }
}
module.exports = config

After making the changes, execute npx icestack build to build. After completion, you can use it directly:

<a class="btn">
  <span>Default</span>
</a>
<a class="btn btn-red">
  <span>Red</span>
</a>
<a class="btn btn-yellow">
  <span>Yellow</span>
</a>
<a class="btn btn-green">
  <span>Green</span>
</a>

Add more sizes

If we want to add more dimensions to this button component, we can set it like this:

/**
 * @type {import('@icestack/ui').Config}
 */
const config = {
  outdir: './my-ui',
  components: {
    button: {
      selector: '.btn',
      schema: ({ selector, params, types }) => {
        // add colors
        const colors = ['red', 'yellow', 'green']
        return {
          selector,
          // utils > styled > base
          defaults: {
            base: `...previous-code`,
            styled: `...previous-code`,
            // add sizes, allow css
            utils: `
            ${selector}-xs{
              @apply px-3 py-1.5 rounded;
            }
            ${selector}-sm{
              @apply px-5 py-2 rounded-md;
            }
            ${selector}-md{
              @apply px-7 py-2.5 rounded-lg;
            }
            ${selector}-lg{
              @apply px-8 py-3 rounded-lg;
            }
            `
          }
        }
      }
    }
  }
}
module.exports = config

Then build it and you can use it directly:

<a class="btn btn-xs">
  <span>xs</span>
</a>
<a class="btn btn-sm">
  <span>sm</span>
</a>
<a class="btn btn-md">
  <span>md</span>
</a>
<a class="btn btn-lg">
  <span>lg</span>
</a>

You must have noticed that the schema method has multiple parameters:

selector is the selector
types is the automatically generated color name in the base option
params is the incoming parameter, which can render different performances of the component according to different parameters.

We can render different Css style codes based on different parameters.

Of course, you can also find more examples and usage on the icestack official website.

Everyone is welcome to try it!

postcss-custom-property-prefixer

ice breaker — Fri, 13 Oct 2023 11:08:15 +0000

Add prefix to your css custom-property

postcss-custom-property-prefixer
- Usage
- Demo
- Use with Tailwindcss
- Options
- ignoreValueCustomProperty
- ignoreDecl
- ignoreProp
- ignoreValue
- prefix
- propPrefix
- transformProp
- transformValue
- License

Usage

<npm/yarn/pnpm> i -D postcss-custom-property-prefixer

Then register this plugin into your postcss.config.js:

module.exports = {
  plugins: {
    // ...
    'postcss-custom-property-prefixer': {
      // prefix option must be passed! 
      prefix: 'ice-'
    }
    // ...
  }
}

Demo

.a {
  --tab-color: hsl(var(--bc) / var(--tw-text-opacity, 1));
  --tab-bg: hsl(var(--b1) / var(--tw-bg-opacity, 1));
  --tab-border-color: hsl(var(--b3) / var(--tw-bg-opacity, 1));
}

Will be transformed to:

.a {
  --ice-tab-color: hsl(var(--ice-bc) / var(--ice-tw-text-opacity, 1));
  --ice-tab-bg: hsl(var(--ice-b1) / var(--ice-tw-bg-opacity, 1));
  --ice-tab-border-color: hsl(var(--ice-b3) / var(--ice-tw-bg-opacity, 1));
}

Not right? Yes! Default this plugin will transform all css custom property!

If you want to ignore some custom properties like --tw-*, you should pass some ignore* options, See Below!

Use with Tailwindcss

Css nodes are generated by tailwindcss, because it's custom property all start with '--tw-', so you can pass options like below.

    'postcss-custom-property-prefixer': {
      // your custom prefix
      prefix: 'ice-',
      ignoreValueCustomProperty(cp, decl) {
        // ignore value
        return cp.startsWith('--tw-')
      },
      ignoreProp(decl) {
        // ignore prop
        return decl.prop.startsWith('--tw-')
      }
    }

Options

ignoreValueCustomProperty

plugin options:

    'postcss-custom-property-prefixer': {
      prefix: 'ice-',
      ignoreValueCustomProperty(cp) {
        return cp.startsWith('--tw-')
      }
    }

Before:

.a {
  /*                              ⬇ --tw-* */
  --tab-color: hsl(var(--bc) / var(--tw-text-opacity, 1));
  /*                            ⬇ --tw-* */
  --tab-bg: hsl(var(--b1) / var(--tw-bg-opacity, 1));
  /*                                      ⬇ --tw-* */
  --tab-border-color: hsl(var(--b3) / var(--tw-bg-opacity, 1));
}

After:

.a {
  --ice-tab-color: hsl(var(--ice-bc) / var(--tw-text-opacity, 1));
  --ice-tab-bg: hsl(var(--ice-b1) / var(--tw-bg-opacity, 1));
  --ice-tab-border-color: hsl(var(--ice-b3) / var(--tw-bg-opacity, 1));
}

See! All css decl's value's custom properties which start with --tw- are ignored!

ignoreDecl

This option will ignore the whole decl!

    'postcss-custom-property-prefixer': {
      prefix: 'ice-',
      ignoreDecl(decl) {
        return decl.prop === '--tab-color' || decl.value.includes('hsl(var(--b1)')
      },
      ignoreValueCustomProperty(cp) {
        return cp.startsWith('--tw-')
      }
    }

Before:

.a {
  /* prop === --tab-color , this decl will be ignored */
  --tab-color: hsl(var(--bc) / var(--tw-text-opacity, 1)); 
  /* value.includes('hsl(var(--b1)') , this will be ignored */
  --tab-bg: hsl(var(--b1) / var(--tw-bg-opacity, 1)); 
  /* will be transformed */
  --tab-border-color: hsl(var(--b3) / var(--tw-bg-opacity, 1)); 
}

After:

.a {
  --tab-color: hsl(var(--bc) / var(--tw-text-opacity, 1));
  --tab-bg: hsl(var(--b1) / var(--tw-bg-opacity, 1));
  --ice-tab-border-color: hsl(var(--ice-b3) / var(--tw-bg-opacity, 1));
}

ignoreProp

    'postcss-custom-property-prefixer': {
      prefix: 'ice-',
      ignoreProp(decl) {
        return decl.prop === '--tab-color'
      },
      ignoreValueCustomProperty(cp) {
        return cp.startsWith('--tw-')
      }
    }

Before:

.a {
  /* ⬇ only ignore the prop , not value ⬇ */
  --tab-color: hsl(var(--bc) / var(--tw-text-opacity, 1)); 
  --tab-bg: hsl(var(--b1) / var(--tw-bg-opacity, 1)); 
  --tab-border-color: hsl(var(--b3) / var(--tw-bg-opacity, 1)); 
}

After:

.a {
  /* ⬇ target prop */
  --tab-color: hsl(var(--ice-bc) / var(--tw-text-opacity, 1));
  --ice-tab-bg: hsl(var(--ice-b1) / var(--tw-bg-opacity, 1));
  --ice-tab-border-color: hsl(var(--ice-b3) / var(--tw-bg-opacity, 1));
}

ignoreValue

    'postcss-custom-property-prefixer': {
      prefix: 'ice-',
      ignoreValue(decl) {
        return decl.value.includes('hsl(var(--b3)')
      },
      ignoreValueCustomProperty(cp) {
        return cp.startsWith('--tw-')
      }
    }

Before:

.a {
  --tab-color: hsl(var(--bc) / var(--tw-text-opacity, 1)); 
  --tab-bg: hsl(var(--b1) / var(--tw-bg-opacity, 1));  
  /*                       ⬇ target value , ignored*/
  --tab-border-color: hsl(var(--b3) / var(--tw-bg-opacity, 1));
}

After:

.a {
  --ice-tab-color: hsl(var(--ice-bc) / var(--tw-text-opacity, 1));
  --ice-tab-bg: hsl(var(--ice-b1) / var(--tw-bg-opacity, 1));
  --ice-tab-border-color: hsl(var(--b3) / var(--tw-bg-opacity, 1));
}

prefix

Type: String|PrefixFunction, The prefix will be add to all custom property!

export type PrefixFunction = (decl: Declaration, target: 'prop' | 'value') => string

    'postcss-custom-property-prefixer': {
      prefix: (decl,target)=>{
        if (target === 'prop' && decl.prop.startsWith('--bg-')) {
          return 'aaa-'
        }
        if (target === 'value' && decl.prop.startsWith('--text-')) {
          return 'bbb-'
        }
        return ''
      },
    }

Before:

.a {
  --bg-red: hsl(var(--text-red-100));
  --text-red: hsl(var(--text-red-500));
}

After:

.a {
  --aaa-bg-red: hsl(var(--text-red-100));
  --text-red: hsl(var(--bbb-text-red-500));
}

propPrefix

Type: Same as prefix

you can pass different prefix to prop and value:

    'postcss-custom-property-prefixer': {
      prefix: 'ice-',
      propPrefix: 'xx-',
      ignoreValueCustomProperty(cp) {
        return cp.startsWith('--tw-')
      }
    }

.a {
  --tab-color: hsl(var(--bc) / var(--tw-text-opacity, 1)); 
  --tab-bg: hsl(var(--b1) / var(--tw-bg-opacity, 1));  
  --tab-border-color: hsl(var(--b3) / var(--tw-bg-opacity, 1)); 
}

After:

.a {
  --xx-tab-color: hsl(var(--ice-bc) / var(--tw-text-opacity, 1));
  --xx-tab-bg: hsl(var(--ice-b1) / var(--tw-bg-opacity, 1));
  --xx-tab-border-color: hsl(var(--ice-b3) / var(--tw-bg-opacity, 1));
}

transformProp

Boolean: whether transform css decl's prop, default: true

transformValue

Boolean: whether transform css decl's value, default: true

Forem: ice breaker

Mokup: A Build-Tool-Friendly Visual Mocking Tool for Vite, Webpack, Node.js, and Workers

Mokup: A Build-Tool-Friendly Visual Mocking Tool

What is Mokup

Key features

Why I built it

Build-tool friendly

Vite integration

Webpack integration

Visualization: Playground (highlight)

Developer experience: what supports hot reload

Quick example: from file to response

Quick integration with @faker-js/faker

Deployable to multiple environments

Core architecture

Use cases and boundaries

Closing

Use postcss-cva to generate cva method

What is cva

Example

Parameters

postcss-cva

css example

Atomic design

Annotated reference

Generate cva function

Refers

Use IceStack to build your CSS UI

Install @icestack/ui

Initialization configuration file

Build style

Used as tailwindcss plugin

Default preset

Start from scratch

Build button component

Component style refinement

Write configuration file

Add more colors

Add more sizes

More

postcss-custom-property-prefixer

Usage

Demo

Use with Tailwindcss

Options

ignoreValueCustomProperty

ignoreDecl

ignoreProp

ignoreValue

prefix

propPrefix

transformProp

transformValue

License

Install `@icestack/ui`