WNS

wns ./examples/merge.wns -o ./tmp/styles.css --minify --reset

Example files

page => page-name;

merge => ./some-file;

#foo => {
    display: flex;
    .bar => {
        display: block;
    }

    unsafe div => {
        background: red;
    }

    loose .baz => {
        text-align: center;
    }

    pseudo before => {
      background: #FFF;
    }
}

component => some;

.foo {
    text-align: left;
}

component => other {
    .floor {
        display: grid;
    }
    .ceiling {
        display: block;
    }
}

Keywords

merge => ./relative; - merge file ./relative.wns, merged content is always last and can be declared only before groups and only in root scope

page => foo; - all selectors will starts with #foo > , this can be declared only in root scope

component => foo; - is similar to page but instead of setting leading id sets class name as leading

component => foo {} - creates new group with class name as identifier, this is allowed only in root scope

unsafe selector {} - keyword unsafe is required before all tag names

loose selector {} - keyword loose will prevent putting > between parent selector and current selector, this is valid only for class or id

pseudo selector {} - keyword pseudo will flag selector as pseudo class

rect: width height layourt; - special rule which is shorthand for width, height and optionally display

WNS to CSS

main.wns

merge => landing;
merge => login;
merge => components;

landing.wns

page => landing;

component => main {
    display: flex;
    
    .content {
        display: block;
    }
}

component => sidebar {
    rect: 160px auto block;
    background: rgb(156, 100, 23);
    color: white;
}

login.wns

page => login;

component => form {
    rect: 180px auto block;
    margin: 10px auto;
}

components.wns

component => input {
    padding: 5px;
    width: 160px;
    font-size: 16px;
    color: black;
}

component => label {
    padding: 5px;
    width: 160px;
    font-size: 16px;
    color: black;
}

output.css

#landing > .main {
    display: flex;
}

#landing > .main > .content {
    display: block;
}

#login > .form {
    width: 180px;
    height: auto;
    display: block;
    margin: 10px auto;
}

.input {
    padding: 5px;
    width: 160px;
    font-size: 16px;
    color: black;
}

.label {
    padding: 5px;
    width: 160px;
    font-size: 16px;
    color: black;
}