combocss-browser

CSS Toolkit for combining CSS properties

---

ComboCSS for Browser

This is the browser Version of ComboCSS please read the main documentation for context.

Installation

Install ComboCSS postcss via npm.

npm install combocss-browser postcss

How to use ComboCSS for Browser

You can use ComboCSS via import.
combocss(classes, opts) has two params and returns translated css as string.
Param one must be a Array of combo css classes
Param two is an optional config object See Config

import { combocss } from "combocss";

let res = await combocss(["marginLeft-8px"]);

/* 
    .marginLeft-8px {
        margin-left: 8px
    }
*/
console.log(res);

Config

In combo.config.json you can upon other options change the scope of files combocss should scan for css classes with the property input. All generated ComboCSS classes will be written into the file specified in the property output. The default combo.config.json look like this.

{
    "input": ["index.html", "src/**/*.{vue,js,ts,jsx,tsx}"],
    "output": "src/index.css",
    "custom": ["custom.css"],
    "ignore": {
        "prefix": [],
        "suffix": [],
        "class": []
    },
    "breakpoints": {
        "tablet": "600px",
        "tabletAndPC": "1024px",
        "pc": "1440px",
        "ultrawide": "1921px"
    }
}