# Parser

On this page, you will learn how BlickCss works under the hood.

# Getting data

Let's first understand how BlickCss receives data. It uses the MutationObserver API to track of all the elements. When it notices that an element has changed, it retrieves the classes and attributes through the querySelector . Then the strings are split into separate tokens.

"bg-red flex text-24" => ["bg-red", "flex", "text-24"]

After that, each token is processed separately using a parser.

# About parser

The parser accepts 2 parameters, the first is the token, the second is the attribute(optional, default is class). You can try it by running the following code in the console

blick.parse("h:md:m-10+20", "class")

Since this is a method of a blick object, it has access to its context. First of all, it divides the string into states and styles

["h", "md"] "m-10+20"

Then it processes them separately.

# States parsing

The script recognizes what type this state is. If it's a number or a variable in blick.screen , it's clearly a media type. We won't go into details, but there are a lot of checks to accurately determine and then process that state.

# Style parsing

By the way, there can be more than one style, they are connected by ; .

"bg-red;m-20"

First, they are divided into separate styles. Next, they are divided by - and the styles are searched for in the blick.class || blick.attr[attr] object. When the search fails, it means that we are there, all the information is received and the values are processed.

# Values parsing

Since there can be several values, we need to divide them by + . Next, a single value is processed, first it is divided by / , if the first value and the second number, then it is a percentage value, for example, 1/2 , if the first is not a number, but the second number, then it is a color with transparency, for example, black/50 , also the first value is checked if it is a variable, if it starts with $ . Otherwise, if it is a single value, it is treated as the first value, but if it is just a full number, it is concatenated with _unit .

# Finish

Finally, all this data is combined into one object. Next, all this is written to a special storage blick._STORE_ , this is done in order not to generate the same code 2 times and already on the basis of this storage styles are compiled, they are folded into one large string and simply written to <style> .

As you can see, everything is simple and ingenious, which is why the code size is small, because classes have a certain structure, not static values.

The NPM version works a little differently, as it is not executed in the browser. There is simply a tracking of files according to the glob pattern. Then all the files are received and processed using the blick.html(code) method, it takes only 1 parameter, a string, it's just HTML code. And it produces a ready-made CSS code. You can configure it in the file blick.config.js .