1.0.0 ā¢ Published 1 year ago
css-expand v1.0.0
css-expand
css-expand is a CSS compiler with extra functions
Getting started
In Node
// As a CommonJs library
const {convertCascadedCssToCss} = require("css-expand");
// or as an ES module
import {convertCascadedCssToCss} from "css-expand";
In the browser
<script src="./css-expand/dist/css-expand.min.mjs" type="module" />
Usage
Programmatically (Node)
You can transform nested .css to .css
const {convertCascadedCssToCss} = require("css-expand");
const result = convertCascadedCssToCss(`
.selector1
{
margin: 0;
background-color: slategray;
.nested1, .nested2
{
margin: 2px;
}
}`);
Conversion:
.selector1 {
margin: 0;
background-color: slategray;
}
.selector1 .nested1, .selector1 .nested2 {
margin: 2px;
}
You can also transform .css that contain the & symbol
import {convertCascadedCssToCss} from "css-expand";
const result = convertCascadedCssToCss(`
.selector1
{
background-color: slategray;
&.win
{
margin: 2px;
}
}`);
Conversion:
.selector1
{
background-color: slategray;
}
.selector1.win
{
margin: 2px;
}
Programmatically (Browser)
You can use css-expand in the browser
import {convertCascadedCssToCss} from "./dist/css-expand.min.mjs";
const result = convertCascadedCssToCss(`
.selector1 { background-color: slategray;
&.win
{
margin: 2px;
}
}`);
console.log(result);
From the Command Line
You can transform extremely simple sass (no vars, no mixins, only the cascading feature) file to css
css-expand --source "example1.scss" --target "/out.css"
Package
š package
ā
āāāāš cjs
ā ā
ā ā š css-expand.cjs ā½ CJS version - 3.6k minified
ā ā
āāāāš esm
ā ā
ā ā š index.mjs ā½ ESM version - 3.6k minified
ā ā
āāāāš dist
ā ā
ā ā š css-expand.min.mjs ā½ Browser version - 4.4k minified
ā ā
1.0.0
1 year ago