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
│   │