Frakto Postcss

Fragment. Optimize. Reconstruct.

A PostCSS plugin that brings sacred structure and visual clarity to your final CSS output.

It intelligently groups declarations into @layer blocks, reorders media queries for optimal performance, and ensures that your styles are both readable and scalable.

More than a formatter, it also features an integrated purge engine that removes unused styles from your CSS, reducing bundle size without breaking layout integrity — no external plugins required.

Originally designed to empower the Frakto UI framework, it's fully compatible with any modern CSS architecture or design system.

• Installation
• Configuration Options
• Usage
• Expected Output
• Purge Mode
• Contributing
• License

You can install Frakto PostCSS via your favorite package manager:

npm install @frakto/postcss --save-dev

Frakto PostCSS is designed to work with PostCSS v8 or higher. Please make sure PostCSS is installed in your project.

npm install postcss --save-dev

frakto-postcss provides several configuration options to customize its behavior. You can pass them via plugin options or by creating a frakto.config.mjs file in your project root.

If a config file is present, inline plugin options will be ignored.

[
  '.git',
  '.tmp',
  '.next',
  '.cache',
  '.turbo',
  '.vercel',
  '.vscode',
  '.ds_store',
  'tmp',
  'test',
  'tests',
  'vendor',
  'node_modules'
];

[
  'theme',
  'reset',
  'base',
  'layout.containers',
  'layout.grid',
  'layout.flex',
  'layout.shortcuts',
  'shortcuts',
  'orphans'
];

You can override this order to suit your project's structure.

Frakto PostCSS is a drop-in PostCSS plugin. Once installed and configured, you can integrate it into any PostCSS processing pipeline.

import postcss from 'postcss';
import fraktoPostCSS from '@frakto/postcss';

const css = `/* your CSS content */`;

const result = await postcss([
  fraktoPostCSS({
    purge: true,
    includePaths: 'src',
    excludePaths: ['node_modules'],
    files: ['html', 'astro']
  })
]).process(css);

console.log(result.css);

const postcss = require('postcss');
const fraktoPostCSS = require('@frakto/postcss');

const css = `/* your CSS content */`;

postcss([
  fraktoPostCSS({
    purge: true,
    includePaths: 'src',
    excludePaths: ['node_modules'],
    files: ['html', 'astro']
  })
])
  .process(css)
  .then((result) => {
    console.log(result.css);
  });

Frakto PostCSS can auto-load settings from a frakto.config.mjs file. When this file is present, options passed directly to the plugin will be ignored.

// frakto.config.mjs
export default {
  purge: true,
  includePaths: ['src'],
  excludePaths: ['node_modules'],
  files: ['html', 'astro']
};

Then in your PostCSS setup:

import fraktoPostCSS from '@frakto/postcss';

export default {
  plugins: [fraktoPostCSS()]
};

For more control, see the Configuration Options section.

Given the following input:

@layer reset {
  * {
    margin: 0;
    padding: 0;
  }
}

@layer base {
  h1 {
    font-size: 2rem;
  }
}

.btn {
  padding: 1rem;
  background: blue;
}

After processing with frakto-postcss, the output will be:

@layer reset, base, shortcuts;
@layer reset {
  * {
    margin: 0;
    padding: 0;
  }
}
@layer base {
  h1 {
    font-size: 2rem;
  }
}
@layer shortcuts {
  .btn {
    padding: 1rem;
    background: blue;
  }
}

Layers are reordered, orphan rules are grouped under a dedicated layer, and formatting is normalized.

When purge is enabled in your configuration, Frakto PostCSS will analyze your source files (HTML, Astro, JSX, TSX) and remove any unused CSS selectors (tags and classes).

• Parses your files and extracts all HTML tags and values inside class="..." attributes.
• Then, it checks every layer (except theme and reset) and removes CSS rules that don't match any of the extracted tags or classes.

You can define tagSafeList and classSafeList in your config to prevent specific selectors from being removed, even if they’re not found in your source files.

export default {
  purge: true,
  tagSafeList: ['a', 'span', 'table'],
  classSafeList: ['ghost', 'admin-only']
};

This helps you safely keep utility classes or elements added dynamically by JavaScript or frameworks.

Tip: Use the safe lists to avoid removing styles for modals, dynamic components, or server-rendered templates.
If you're using Frakto UI, most dynamic components are already safe listed internally, so you typically won’t need to handle that manually.

Contributions are welcome and encouraged.
If you'd like to help improve this plugin, please open a pull request or issue.

Make sure to follow our contributing guidelines before submitting any changes.

MIT License — Copyright © 2025 Frakto

This project is maintained with love and dedication.
If you'd like to support its continued development, you can do so here: