/mew

🎨 Mew - A lightweight CSS preprocessor with elegant BEM support. Crafted in Rust, featuring intuitive nesting, variables, and seamless BEM integration. Write cleaner, more maintainable CSS with a minimalist yet powerful syntax.

Primary LanguageRust

Bubblegum icon

Changelog: Here

Todo before 1.0:

  • ✓ A similar base to PUG
  • ✓ Add a preset system
  • ✓ Custom presets
  • ✓ Adding variables
    • ✓ String
    • ✓ Int
    • ✓ Float
    • ✓ Array
    • ✓ Objects
  • Adding mixins
  • Adding loops
    • While
    • ✓ For (only for in for now)
  • Adding conditions
  • Adding includes
    • Includes
    • Templates

...And probably a lot of other things

Instalation

npm i mewjs

Usage:

const Mew = require("mew")

Mew.Render()

OR

const Mew = require("mew")

Mew.RenderFile('./src/index')

OR

const Mew = require("mew")

Mew.Config = {
    entry_file: "./src/index",
    variables: {
        hello: "Hello world from Mew! ♥"
    }
}

Mew.Compile()

Exemple:

Now able to transform this

$myCss = "css/main.css"
$fruits = ["poires", "pommes", "pateques", "framboises"]
$user = {name: "Paul", age: 48, is_online: false}

doctype
html
  head
    viewport
    charset utf-8
    css {{myCss}}
    title {{bonjour}}
  body
    $bonjour = "Hello world"
    .container
      for fruit in fruits
        h2 J'adore les {{fruit}}
            a # Voir ce fruit
      .row.justify-contents-center
        .col-6
          h1 {{bonjour}}
          div#maSuperImage
            img#catImage https://unsplash.com/photos/_Kbydj4K7W8 Cat super image!
        section#main.col-6
          h2 Enjoy the new MEW preprocessor!
            fa b github
            | on github too!
          button:disabled My super button
          p check here
            a {{github}} Mew on Github
            |  if you want

To this:

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/main.css">
  <title>Hello world from Mew! ♥</title>
</head>

<body>
<div class="container">
  <h2>J'adore les poires</h2>
  <h2>J'adore les pommes</h2>
  <h2>J'adore les pateques</h2>
  <h2>J'adore les framboises</h2>
  <div class="row justify-contents-center">
    <div class="col-6">
      <h1>Hello world</h1>
      <div id="maSuperImage"><img id="catImage" src_old="https://unsplash.com/photos/_Kbydj4K7W8" alt="Cat super image!"></div>
    </div>
    <section id="main" class="col-6">
      <h2>Enjoy the new MEW preprocessor!<fa>b github</fa>on github too!</h2><button disabled>My super button</button>
      <p>check here<a href="https://github.com/antharuu/Mew">Mew on Github</a> if you want</p>
    </section>
  </div>
</div>
</body>

</html>

Beware the syntax may still have to change partially on some things.

Custom presets

You can create custom presets to make your life easier later on.

You just have to pass presets this way in the options.

presets: [
    {
        tag: "fa",
        element: {
            tag: "i",
            attributes: {
                class: "fa-icons"
            }
        },
        callback(newElement, oldElement) {
            const oldContent = oldElement.content.split(" ");
            let type = "s"
            if (oldContent.length >= 2) {
                type = oldContent[0]
                oldContent.shift()
            }
            oldContent.join(" ")
            newElement.attributes = {
                ...newElement.attributes, class: [
                    `fa${type}`,
                    `fa-${oldContent}`
                ]
            }
            return newElement; // Dont forget to return the new Element.
        }
    }
]

It will transform

fa b github

fa box-open

in

<i class="fab fa-github"></i>

<i class="fas fa-box-open"></i>

Customization with presets is up to you, you have no limits.

We also use presets for many tasks.