README.md

postcss-mapcss

PostCSS plugin to use MapCSS

input:

body {
  @apply antialiased text-gray-800
}

output:

body{
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  color: rgb(31 41 55/1)
}

Usage

Create a mapcss.config.ts file in the project root.

// mapcss.config.ts
import {
  bracketExtractor,
  Config,
  simpleExtractor,
} from "https://deno.land/x/mapcss@$VERSION/core/mod.ts";
import { presetTw } from "https://deno.land/x/mapcss@$VERSION/preset_tw/mod.ts";

export default <Config> {
  preset: [presetTw()],
  extractor: [simpleExtractor, bracketExtractor],
};

See more Config.

import postcss from "https://deno.land/x/postcss_core@$VERSION/mod.js";
import mapcss from "https://deno.land/x/postcss_mapcss@VERSION/mod.ts";

const css = `body {
  @apply antialiased text-gray-800
}
`;

const result = await postcss([mapcss]).process(css);

Option

useConfig

Whether load MapCSS config file or not.

@default true

others

MapCSS Config

You can also pass Config directly.

If useConfig is true and mapcss.config.ts exists, it will be merged in favor of the Config passed as argument.

import postcss from "https://deno.land/x/postcss_core@$VERSION/mod.js";
import mapcss from "https://deno.land/x/postcss_mapcss@VERSION/mod.ts";
import {
  bracketExtractor,
  Config,
  simpleExtractor,
} from "https://deno.land/x/mapcss@$VERSION/core/mod.ts";
import { presetTw } from "https://deno.land/x/mapcss@$VERSION/preset_tw/mod.ts";

const config: Config = {
  extractor: [simpleExtractor, bracketExtractor],
  preset: [presetTw()],
};

const css = `body {
  @apply antialiased text-gray-800
}
`;

const result = await postcss([mapcss(config)]).process(css);