SimpleCSSCompiler 1.0.2-beta

<p align="center"> <img width="100%" height="auto" src="./.github/banner.png"> </p>

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

It can compile CSS with nesting and single-line comments into legacy CSS code, also minifies it.

It can compile:

@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%;
    }
}

Into:

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

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

div.test {
    font-size: 20px
}

div > a {
    align-self: center
}

div > a:hover {
    color: red
}

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

Only with:

string css = SimpleCSS.SimpleCSSCompiler.Compile(prettyCss);

It's all you need.

Specification

The syntax is very similar to what other CSS preprocessors already deliver, the difference is that in the concatenation operator of the "&" selector, the space between the operator and the selector is ignored, and is immediately included next to the parent selector, example:

div {
    & :hover {
        color: blue;
    }
}

Will translate to:

div:hover {
    color: blue
}

If you want an space between div and :hover, just remove the & symbol before the selector.

Also, it propagates the selectors when they are separate to the same rule, for example:

div,
span {
    & :hover,
    & :active {
        color: red;
    }
}

Will translate to:

div:hover,
span:hover,
div:active,
span:active {
    color: red
}

The compiler doesn't know what you're typing, it compiles based on the tokens you type. Using the @ operator will automatically start a new style sheet inside the body, and concatenate to the parent style:

div {
    color: red;
}

@blablabla {
    div {
        color: blue;

        & .yellow {
            color: yellow;
        }
    }
}

Compiles to:

div {
    color: red
}

@blablabla {
    div {
        color: blue
    }

    div.yellow {
        color: yellow
    }
}

Additional options

You can specify compilation options under the CSSCompilerOptions parameter, which:

• bool Pretty produces an pretty, formatted and indented output.

• bool UseVarShortcut specifies if the compiler should rewrite --variable to var(--variable) in the value context, example:

  :root {
      --red: #FF1100;        
  }
  
  div {
      color: --red;      
  }
  

  Should be rewrited to:

  div {
      color: var(--red);
  }
  

  And it will NOT rewrite if the variable is inside an string:

  div {
      color: --red;
      background: url('--red');
  }
  
  // becomes:
  div {
      color: var(--red);
      background: url('--red');
  }
  

Considerations

• Nesting @ blocks is not supported.
• Properties and values is trimmed.
• The last ; in the rule is removed.