Mew

🎨 Mew - A lightweight CSS preprocessor with elegant BEM support

A modern CSS preprocessor crafted in Rust, featuring intuitive nesting, variables, and seamless BEM integration. Write cleaner, more maintainable CSS with a minimalist yet powerful syntax.

Features

• 🎯 BEM Support: Write cleaner CSS with automatic BEM class generation
• 🔄 Nested Rules: Simplified syntax for nested selectors
• 📦 Variables: Basic variable support for reusable values
• 📁 Directory Processing: Process single files or entire directories
• 🎨 Clean Output: Generate well-formatted CSS output

Installation

Via NPM (Recommended)

The easiest way to install Mew is through npm:

npm install -g @antharuu/mew

From Source

Alternatively, you can build from source:

# Clone the repository
git clone https://github.com/antharuu/Mew.git
cd Mew

# Build the project
cargo build --release

# The binary will be available in target/release/mew

Optional: Add to your PATH for system-wide access:

# Linux/macOS
echo 'export PATH="$PATH:/path/to/mew/target/release"' >> ~/.bashrc
source ~/.bashrc

# Windows - Add the release directory to your system's PATH environment variable

Usage

Process a single file:

mew input.mew

Process a directory:

mew ./styles

Syntax

Variables

$variable-name: value;

button {
  property: $variable-name;
}

Nesting with BEM

// You can omit the dot (recommended)
card {
  /* Becomes .card */

  &header {
    /* Becomes .card__header */
  }

  @primary {
    /* Becomes .card--primary */
  }
}

// Or use it explicitly if needed
.block {
  /* Also valid, becomes .block */
}

Pseudo-selectors

button {
  &:hover {
    /* Becomes .button:hover */
  }
}

Example

Input (.mew file)

$nav-bg: #ffffff;
$nav-spacing: 16px;

// No dot needed
nav {
  background: $nav-bg;
  padding: $nav-spacing;

  &list {
    display: flex;
    margin: 0;
    padding: 0;
  }

  &item {
    list-style: none;
    padding: $nav-spacing;

    &:hover {
      background: #f5f5f5;
    }
  }

  @mobile {
    padding: $nav-spacing;
  }
}

Output (.css file)

.nav {
    background: #ffffff;
    padding: 16px;
}

.nav__list {
    display: flex;
    margin: 0;
    padding: 0;
}

.nav__item {
    list-style: none;
    padding: 16px;
}

.nav__item:hover {
    background: #f5f5f5;
}

.nav--mobile {
    padding: 16px;
}

Current Limitations

• No advanced functions (like darken, lighten, mix, etc.)
• No mathematical operations beyond basic calculations
• No import/include functionality
• No mixins or extends
• No color manipulation

Contributing

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create a new branch (git checkout -b feature/improvement)
3. Make your changes
4. Run the tests (cargo test)
5. Commit your changes (git commit -am 'Add new feature')
6. Push to the branch (git push origin feature/improvement)
7. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Made with ❤️ by Antharuu