postcss-custom-mixins

PostCSS plugin that implements native CSS @mixin and @apply (draft).

Example

Input:

@mixin --card() {
  @result {
    padding: 1rem;
    border: 1px solid black;
  }
}

.card {
  @apply --card();
  color: red;
}

Output:

.card {
  padding: 1rem;
  border: 1px solid black;
  color: red;
}

Usage

import postcss from 'postcss';
import mixins from '@chillet/postcss-custom-mixins';

const result = await postcss([mixins()]).process(css, { from: undefined });
console.log(result.css);

Vite and Vue

Vite processes root stylesheets and Vue <style scoped> blocks independently. Use the Vite integration to give them one shared mixin tree scope without listing mixin files:

// vite.config.ts
import { defineConfig } from 'vite';
import customMixins from '@chillet/postcss-custom-mixins/vite';

export default defineConfig({
  plugins: [customMixins()],
});

Do not also add the default export to PostCSS when using this integration. During development, new or changed definitions invalidate the other loaded style modules. During production builds, definitions and applications are resolved after Vite has assembled the CSS assets.

Notes

• @apply supports comma-separated mixin names.
• Unknown mixins have no effect, matching native @apply behavior.
• The earlier direct-body @mixin card { ... } syntax remains supported for compatibility.
• Mixin parameters, variable hygiene, @contents, conditional @result, @macro, Shadow DOM tree separation, and cascade-layer precedence are not implemented yet.
• Invalid params and circular applications throw a PostCSS error.