ComboCSS creates out of CSS classes property counterparts which can be combined into group classes called combos.
The Toolkit scanes your code for CSS classes and generates property counterparts out of it for class not ignored or specified as combo class. CSS classes must be written in ComboCSS specific syntax.
<div class="backgroundColor-blue"></div>
.backgroundColor-blue {
background-color: blue;
}
Css classes can be combined into groups called combos which also can be used in other combos. To create combos you have to add at least one file path into the combo.config.json custom property.
<div class="button-primary"></div>
A Combo class has to start with @combo as his first propery followed by CSS classes or other combos.
.button-base {
@combo minWidth-200px borderRadius-8px;
}
.button-primary {
@combo button-base backgroundColor-#ff1342;
}
A shortcut can be created for CSS classes and also be used in combos.
<div class="ml-32px"></div>
.ml {
@shortcut marginLeft;
}
.button-primary {
@combo button-base backgroundColor-#ff1342 ml-32px;
}
A Counterpart for a CSS class can only be created by ComboCSS when it matches the syntax. Every ComboCSS valid class has at least 2 parts. CSS property in camelCase and CSS value in camelCase seperated by a dash.
<div name="kabap-case" style="background-color: blue; display: inline-flex"></div>
<div name="camalCase" class="backgroundColor-blue display-inlineFlex"></div>
Values with spaces have to be seperated dashes.
<div name="kabap-case" style="border: 1px solid black"></div>
<div name="camalCase" class="border-1px-solid-black"></div>
Values with function can also be created in ComboCSS only spaces like in calc() have to be replaces with underscores.
<div name="kabap-case" style="backgroundColor: rgba(255,255,0,0.1); margin-left: calc(100% - 16px)"></div>
<div name="camalCase" class="backgroundColor-rgba(255,255,0,0.1) marginLeft-calc(100%_-_16px)"></div>
Coming 20XX
Install ComboCSS postcss via npm.
npm install -D combocss postcss
Initialize ComboCSS with npx to create combo.config.json.
npx combo init
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);
Add ComboCSS to your postcss.config.js or any other postcss configuration.
import { plugin } from "combocss";
export default {
plugins: [plugin()],
};
Via the command process you can use ComboCSS too.
Currently process uses the config file.
Meaning the command scans all files targeted via the input property and writes the finished css into the file declared in the output property.
npx combo process
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"
}
}