Hello, Cascadium!

Cascadium is an experimental high performance pre-processor for the CSS styling language.

This small module can compile CSS with the following features into a legacy CSS file that is more compatible with most browsers.

It is written in C#, built to run in any operating system without .NET installed thanks to Native AOT. Also, it's source code is open-source.

Some of what it can do:

  • nesting
  • single line comments
  • minify and compress
  • merge equivalent queries and selectors
  • converters
  • rewriters

Example: 


                            @import url("https://foo.bar/");

                            div {
                                display: block;
                                width: 400px; // it does support comments
                                /* native multi-line comments too */

                                height: 300px;

                                > a {
                                    align-self: center;

                                    & :hover {
                                        color: red;
                                    }
                                }

                                & .test {
                                    font-size: 20px;
                                }
                            }

                            @media (max-width: 700px) {
                                div.test {
                                    width: 100%;
                                }
                            }
                        

                            @import url("https://foo.bar/");

                            div {
                                display: block;
                                width: 400px;
                                height: 300px;
                            }

                            div > a {
                                align-self: center;
                            }

                            div > a:hover {
                                color: red;
                            }

                            div.test {
                                font-size: 20px;
                            }

                            @media (max-width: 700px) {
                                div.test {
                                    width: 100%;
                                }
                            }

Getting started

Learn how to get started with Cascadium and optimize your CSS development.