A story about how to write your own CSS preprocessor for 9 months
I want to talk about my brainchild - the preprocessor and the CSS parser, which I started working on in April last year. Why did I start to study them? Recognizing myself honestly now, I can say: I wanted to invent my own bicycle. What did I follow then? Hard to say. Perhaps the same. Or maybe because I didn’t really find anything that satisfies my CSS preprocessor requirements for my favorite development platform.
The requirements for CSS preprocessor have been formed after reading one of the articles here. This was an article about the Stylus for Node.js preprocessor. Actually, then I learned about these "preprocessors". I was struck by the simplicity of the syntax of this preprocessor. After two days (or maybe less) viewing the results from Google, I did not find anything interesting for myself. It was at this moment that a crazy thought came to my head: why not?
I had the following requirements:
Actually, probably this is all.
All this time elapsed from the starting point of reference, I spent on developing my product, and I got the following - the open source MySheet library, which is both a parser and CSS style preprocessor.
Well, of course, I had to write a small site for the presentation of my product (did you already guess which programming language was chosen by me for this purpose?). A few interesting moments of the development process - about how I created my library, what pitfalls I encountered and what I learned in the process of its creation - I will tell you a little later. And now, about the capabilities of my CSS preprocessor.
With a description of what I have achieved to date, I seem to be finished. And now, I want to tell you how I led the development process - as in the intervals between work, study and my favorite girl, I wrote my library.
Fig. 1 - My favorite girl
From the very moment I started my mini-project, a long time has passed. There were many different questionable situations and questions. And it is not surprising - I have never done anything like this before. I did not read any special literature on compilers and at first I did everything exclusively at my discretion. I do not brag, but on the contrary I say that I did not do it in vain. Perhaps, so I would avoid some of the problems that arose.
For some reason, I immediately decided to create a library in the form of an open-source project and immediately told myself that one githab page would not be enough. After a part of the library was already written, I began to make a website for it, so that I could find defects in “online mode” and correct them, and also immediately realize in practice that it would be nice to see the end user.
I thought up the name for my library, acting on the contrary.I decided not to deviate from the example of the most famous today preprocessors SASS and LESS, and I thought that MSS is a good combination of letters, after all. And to make the name memorable, I decided to name my project MySheet. And the abbreviation fits (MySheet Styles), and there is a light zest in the title.
The name is invented, it's time to start designing the ship. The first thing I started doing was a source code parser. It was here that I miscalculated for the first time. I started to do it without breaking the source code into tokens and keywords, and was guided by the fact that the library will mainly include work with strings. Of course, I saw the drawbacks of this approach already at the stage of its selection, but unfortunately I couldn’t think of anything better. Later, while at the university, we had a course on compilers, I realized that it would be better to introduce a stage of preliminary lexical analysis. At least, because now I am faced with the problem of recognizing and memorizing comments for later output to compiled CSS code. Or, for example,Now I would like to make the parser extensions insensitive (which are connected to the library as additional modules) to the presence of unexpected line breaks and indents (the ones that are often added for readability of the code). In the near future, I want to include in the parser the stage of breaking into tokens, which, in my opinion, should solve these problems.
The idea of ​​color arithmetic came to me when I was implementing support for mathematical expressions. I thought that it would be nice to be able to lighten and darken the colors in the design of the site to match the matching color without having to open the color picker. Now the library is working with HSLA, RGBA, HEX and HTML color formats. To each of the colors specified in these formats, you can add a delta of any channel from any other color format. For example, you can add 255 points of the blue channel and 40 points of green to the color recorded as # 000 and get the color # 0028ff. The arithmetic expression will look like this: # 000 + 255b + 40g.
, MrColor ( «» ).
, . Webgrind. , , .
I want to tell one interesting thing. When the parser in the preprocessor starts parsing a rule, it passes through all registered modules and, roughly speaking, calls the parse method in each of them. And since an arithmetic expression and, for example, a function are two different entities, the library had to parse the same thing two times. I really didn't like it, and one day I came up with a solution. When the parser of an arithmetic expression finds that it is not an expression, but a simple function, it does not return false, but returns this very object of the function. Thus, I got rid of this flaw and increased the performance of the source code parsing process.
, . , , : « ! !». , , :
Fig. 2 –
, . , ,
, MSS . , IE ( , , IE , , CSS-).
If someone has any other ideas for improving my project, I will always be happy to hear them.
Well, that's probably all that I would like to tell in my first article about my library. I think I was able to advertise my product a little. I also wanted, so to speak, to fix the point in the development and get feedback on the work already done.
I would be grateful for any advice and recommendations, as well as all kinds of support and just kind words.
If you like my article, I will definitely write more.
GitHub: https://github.com/Dobby007/mysheet
Official website: http://mss.flydigo.com/
Documentation: http://mss.flydigo.com/docs
PS I'm sorry, but as someone noticed in comments - my hosting could not stand the pressure. About this, I even could not think. Now we will try to do something with this ...
PPS Unfortunately, my hosting, it turns out, is draconian restrictions on sites (and not only free ones). And they respond to requests exactly once in the Chinese Easter, so I will have to look towards other possible solutions for the content of my site.
PPPS Access to the site will be fully restored after updating the entire DNS chain. Now the site is available at: dobby007_h5a5nu.radius-host.net
The requirements for CSS preprocessor have been formed after reading one of the articles here. This was an article about the Stylus for Node.js preprocessor. Actually, then I learned about these "preprocessors". I was struck by the simplicity of the syntax of this preprocessor. After two days (or maybe less) viewing the results from Google, I did not find anything interesting for myself. It was at this moment that a crazy thought came to my head: why not?
I had the following requirements:
- The most simple syntax (well, it goes without saying!)
- Development language - PHP (well, now you can already say)
- The ability to display the source style file as a tree of blocks
Actually, probably this is all.
What did I do?
All this time elapsed from the starting point of reference, I spent on developing my product, and I got the following - the open source MySheet library, which is both a parser and CSS style preprocessor.
Well, of course, I had to write a small site for the presentation of my product (did you already guess which programming language was chosen by me for this purpose?). A few interesting moments of the development process - about how I created my library, what pitfalls I encountered and what I learned in the process of its creation - I will tell you a little later. And now, about the capabilities of my CSS preprocessor.
- Arithmetic expressions
This feature is available in almost every CSS preprocessor. Not bypassed the party and the library MySheet:
')$wrapper_height = 50% .wrapper height $wrapper_height + 20px top ($wrapper_height / 2)
What is it for? Yes, God knows. Joke. Now this function of my library is in a very raw form. There is no bool type, and therefore so far (so far!) There are no conditions. But there is one nice bun, the application of which you can find on the main page of my site:.object color #a50c5b - 50sat /* decrease saturation by 50% */ background-color #a50c5b + 50lt /* make color lighter by 50 percent */
Yes! This is exactly what you are thinking now! You can perform arithmetic operations on flowers! I hope you play enough with this chip on the official library website, and now let's move on to the next item on our list. - Mixins
Well, I could not write this word in Russian. It hurts many people write it in English:@mixin filter-grayscale(percent) -webkit-filter: grayscale($percent); -ms-filter: grayscale($percent); -o-filter: grayscale($percent); filter: grayscale($percent); img filter-grayscale 100% img:hover filter-grayscale 0%
Actually, this is already a priori standard function of all preprocessors. Using it is very simple: you need to write the name of the mixin instead of the name of the CSS rule, and then pass the arguments in the meaning of this rule.
In the mixin declaration, the $ arguments variable is also available, which simply lists all the arguments passed in one line:@mixin border-radius(topleft, topright) -webkit-border-radius $topleft $topright 4px 5px border-radius $arguments
I tried to have some mixins in the preprocessor. This, firstly, will have a positive effect on performance. Secondly, it will allow developers and designers to focus on writing styles for the site, rather than methods to simplify this process. Plus, the latter is often lazy to do. - Functions
There are only three functions in the library. It is abs, negate and unitless. But the base for writing them has been prepared, and in the future the list of available functions will be expanded.
The syntax for calling functions is exactly the same as the syntax for regular CSS functions, with the only difference that when calling a registered library function, it will not appear in the compiled CSS, but in the value it returns. - Flags
I came up with this opportunity relatively recently. Its meaning is simple to ugliness, and I think it’s better to show immediately an example of its use:html height 0 width 50px !prefixWith(ms, moz) !important border-radius 5px !important filter-grayscale 50% transform scale(2)
The flag in this case is used to conveniently add prefixes to the rules and is compiled into the following CSS code:html { height: 0; -ms-width: 50px !important; -moz-width: 50px !important; width: 50px !important; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -webkit-filter: grayscale(50%); filter: grayscale(50%); -ms-transform: scale(2); -moz-transform: scale(2); -o-transform: scale(2); -webkit-transform: scale(2); transform: scale(2) }
The flag performs some actions on a specific rule. I have an idea to use flags in order to tag and endow rules with certain properties. For example, you can make the! NoMixin flag so that it prohibits the compilation and insertion of the mixin into the CSS code. This way you can avoid expanding the syntax with unnecessary characters and keywords. - Plugins
I tried to make my library extensible. Those. so that any person (both you, and I, and, in general, any housewife) can extend the library's capabilities by writing a plug-in, and not creating a fork on a github and turning over the entire source code (although I don’t forbid the second one). Now two plugins for MySheet library are written:
- PluginMixin - adds the ability to use mixins in MSS code (MySheet Styles)
- PluginSelectorExtensions - adds snacks like: call to the parent selector (or group of selectors) via the & symbol and pseudo-selector: any (), which I brazenly tore off the CSSCrush preprocessor. - Block tree
This, in fact, is the third requirement that I wrote about at the beginning of the article. I wanted the CSS styles to be managed not only directly by changing the sources manually, but also from the backend, i.e. produce those code manipulations that are inherent in CSS parsers ( tyk and also tyk ). What does this give? For example, you can change site styles based on user preferences. And preferences can be very different. Some people want the font more, others want to move the title to the main page a little lower. This feature can be added to various website generators, which will have a positive effect on the audience of users of the software product.
Turning from words to deeds, I want to show what kind of block tree is formed on the output after parsing a file using the MySheet library. Consider such a simple MSS source file:html { color red; text-align: center; margin: 0 auto; } @mixin rounded-corners (top, right, bottom, left) -webkit-border-radius \$left + \$right \$top + \$bottom -moz-border-radius \$arguments border-radius \$arguments \$left \$right \$left \$right @mixin diagonal-border-radius(left, right) border-radius \$arguments \$right \$left @page padding 5px body rounded-corners 1 2 3 4 .wrapper diagonal-border-radius 6px 10px h1 span color blue
Let's skip this code through the parser:<?php try { $result = $mysheet->parseCode($code); $compiledCode = $result->toRealCss(); } catch (\MSSLib\Error\MySheetException $ex) { echo($ex->getTraceAsString()); }
and at the output we get about the following tree:MSS Block Treeobject (MSSLib \ Structure \ Document) [64] protected '_docFilePath' => null protected 'children' => array (size = 5) 0 => object (MSSLib \ Structure \ Ruleset) [98] private '_selectors' => array (size = 1) 0 => object (MSSLib \ Structure \ Selector) [99] private '_mssPath' => string 'html' (length = 4) private '_cssPathGroup' => object (MSSLib \ Structure \ CssSelectorGroup) [180] private 'paths' => array (size = 1) 0 => string 'html' (length = 4) private '_ruleset' => & object (MSSLib \ Structure \ Ruleset) [98] private '_isFullSelector' => null private '_isParsed' => boolean true private '_handlerMap' => null protected '_parentRuleset' => null protected 'children' => array (size = 3) 0 => object (MSSLib \ Structure \ Declaration) [100] private 'ruleName' => string 'color' (length = 5) private 'ruleValue' => object (MSSLib \ Structure \ RuleValue) [101] private 'params' => array (size = 1) 0 => object (MSSLib \ EmbeddedClasses \ ColorClass) [104] protected 'type' => string 'html' (length = 4) protected 'color' => array (size = 1) 0 => string 'red' (length = 3) protected '_colorLib' => null private '_parentDeclaration' => & object (MSSLib \ Structure \ Declaration) [100] private '_flags' => array (size = 0) empty private 'ruleEnabled' => boolean true private 'parent' (MSSLib \ Structure \ Block) => null private '_handlerMap' => null private '_handlerMap' (MSSLib \ Structure \ Block) => null 1 => object (MSSLib \ Structure \ Declaration) [102] private 'ruleName' => string 'text-align' (length = 10) private 'ruleValue' => object (MSSLib \ Structure \ RuleValue) [103] private 'params' => array (size = 1) 0 => object (MSSLib \ EmbeddedClasses \ NonQuotedStringClass) [107] protected 'text' => string 'center' (length = 6) private '_parentDeclaration' => & object (MSSLib \ Structure \ Declaration) [102] private '_flags' => array (size = 0) empty private 'ruleEnabled' => boolean true private 'parent' (MSSLib \ Structure \ Block) => null private '_handlerMap' => null private '_handlerMap' (MSSLib \ Structure \ Block) => null 2 => object (MSSLib \ Structure \ Declaration) [105] private 'ruleName' => string 'margin' (length = 6) private 'ruleValue' => object (MSSLib \ Structure \ RuleValue) [106] private 'params' => array (size = 2) 0 => object (MSSLib \ EmbeddedClasses \ MetricClass) [110] protected 'metric' => float 0 protected 'unit' => null 1 => object (MSSLib \ EmbeddedClasses \ NonQuotedStringClass) [111] protected 'text' => string 'auto' (length = 4) private '_parentDeclaration' => & object (MSSLib \ Structure \ Declaration) [105] private '_flags' => array (size = 0) empty private 'ruleEnabled' => boolean true private 'parent' (MSSLib \ Structure \ Block) => null private '_handlerMap' => null private '_handlerMap' (MSSLib \ Structure \ Block) => null private 'parent' (MSSLib \ Structure \ Block) => & object (MSSLib \ Structure \ Document) [64] private '_handlerMap' (MSSLib \ Structure \ Block) => null 1 => object (MSSLib \ Plugins \ Mixin \ Mixin) [97] protected 'name' => string 'rounded-corners' (length = 15) protected 'locals' => array (size = 4) 0 => string 'top' (length = 3) 1 => string 'right' (length = 5) 2 => string 'bottom' (length = 6) 3 => string 'left' (length = 4) protected 'children' => array (size = 3) 0 => object (MSSLib \ Structure \ Declaration) [109] private 'ruleName' => string '-webkit-border-radius' (length = 21) private 'ruleValue' => object (MSSLib \ Structure \ RuleValue) [113] private 'params' => array (size = 2) 0 => object (MSSLib \ EmbeddedClasses \ MathExprClass) [122] protected 'expressionTree' => object (MSSLib \ Essentials \ ExpressionTree \ ExpressionNode) [116] private 'value' (Tree \ Node \ Node) => null private 'parent' (Tree \ Node \ Node) => null private 'children' (Tree \ Node \ Node) => array (size = 3) 0 => object (MSSLib \ Essentials \ ExpressionTree \ ParamNode) [117] private 'value' (Tree \ Node \ Node) => object (MSSLib \ EmbeddedClasses \ VariableClass) [119] private 'varName' => string 'left' (length = 4) private 'parent' (Tree \ Node \ Node) => & object (MSSLib \ Essentials \ ExpressionTree \ ExpressionNode) [116] private 'children' (Tree \ Node \ Node) => array (size = 0) empty 1 => object (MSSLib \ Essentials \ ExpressionTree \ OperatorNode) [118] private 'value' (Tree \ Node \ Node) => object (MSSLib \ Operators \ PlusOperator) [120] private 'parent' (Tree \ Node \ Node) => & object (MSSLib \ Essentials \ ExpressionTree \ ExpressionNode) [116] private 'children' (Tree \ Node \ Node) => array (size = 0) empty 2 => object (MSSLib \ Essentials \ ExpressionTree \ ParamNode) [121] private 'value' (Tree \ Node \ Node) => object (MSSLib \ EmbeddedClasses \ VariableClass) [123] private 'varName' => string 'right' (length = 5) private 'parent' (Tree \ Node \ Node) => & object (MSSLib \ Essentials \ ExpressionTree \ ExpressionNode) [116] private 'children' (Tree \ Node \ Node) => array (size = 0) empty 1 => object (MSSLib \ EmbeddedClasses \ MathExprClass) [130] protected 'expressionTree' => object (MSSLib \ Essentials \ ExpressionTree \ ExpressionNode) [124] private 'value' (Tree \ Node \ Node) => null private 'parent' (Tree \ Node \ Node) => null private 'children' (Tree \ Node \ Node) => array (size = 3) 0 => object (MSSLib \ Essentials \ ExpressionTree \ ParamNode) [125] private 'value' (Tree \ Node \ Node) => object (MSSLib \ EmbeddedClasses \ VariableClass) [127] private 'varName' => string 'top' (length = 3) private 'parent' (Tree \ Node \ Node) => & object (MSSLib \ Essentials \ ExpressionTree \ ExpressionNode) [124] private 'children' (Tree \ Node \ Node) => array (size = 0) empty 1 => object (MSSLib \ Essentials \ ExpressionTree \ OperatorNode) [126] private 'value' (Tree \ Node \ Node) => object (MSSLib \ Operators \ PlusOperator) [128] private 'parent' (Tree \ Node \ Node) => & object (MSSLib \ Essentials \ ExpressionTree \ ExpressionNode) [124] private 'children' (Tree \ Node \ Node) => array (size = 0) empty 2 => object (MSSLib \ Essentials \ ExpressionTree \ ParamNode) [129] private 'value' (Tree \ Node \ Node) => object (MSSLib \ EmbeddedClasses \ VariableClass) [131] private 'varName' => string 'bottom' (length = 6) private 'parent' (Tree \ Node \ Node) => & object (MSSLib \ Essentials \ ExpressionTree \ ExpressionNode) [124] private 'children' (Tree \ Node \ Node) => array (size = 0) empty private '_parentDeclaration' => & object (MSSLib \ Structure \ Declaration) [109] private '_flags' => array (size = 0) empty private 'ruleEnabled' => boolean true private 'parent' (MSSLib \ Structure \ Block) => null private '_handlerMap' => null private '_handlerMap' (MSSLib \ Structure \ Block) => null 1 => object (MSSLib \ Structure \ Declaration) [114] private 'ruleName' => string '-moz-border-radius' (length = 18) private 'ruleValue' => object (MSSLib \ Structure \ RuleValue) [115] private 'params' => array (size = 1) 0 => object (MSSLib \ EmbeddedClasses \ VariableClass) [134] private 'varName' => string 'arguments' (length = 9) private '_parentDeclaration' => & object (MSSLib \ Structure \ Declaration) [114] private '_flags' => array (size = 0) empty private 'ruleEnabled' => boolean true private 'parent' (MSSLib \ Structure \ Block) => null private '_handlerMap' => null private '_handlerMap' (MSSLib \ Structure \ Block) => null 2 => object (MSSLib \ Structure \ Declaration) [132] private 'ruleName' => string 'border-radius' (length = 13) private 'ruleValue' => object (MSSLib \ Structure \ RuleValue) [133] private 'params' => array (size = 5) 0 => object (MSSLib \ EmbeddedClasses \ VariableClass) [137] private 'varName' => string 'arguments' (length = 9) 1 => object (MSSLib \ EmbeddedClasses \ VariableClass) [138] private 'varName' => string 'left' (length = 4) 2 => object (MSSLib \ EmbeddedClasses \ VariableClass) [139] private 'varName' => string 'right' (length = 5) 3 => object (MSSLib \ EmbeddedClasses \ VariableClass) [140] private 'varName' => string 'left' (length = 4) 4 => object (MSSLib \ EmbeddedClasses \ VariableClass) [141] private 'varName' => string 'right' (length = 5) private '_parentDeclaration' => & object (MSSLib \ Structure \ Declaration) [132] private '_flags' => array (size = 0) empty private 'ruleEnabled' => boolean true private 'parent' (MSSLib \ Structure \ Block) => null private '_handlerMap' => null private '_handlerMap' (MSSLib \ Structure \ Block) => null private 'parent' (MSSLib \ Structure \ Block) => & object (MSSLib \ Structure \ Document) [64] private '_handlerMap' (MSSLib \ Structure \ Block) => null protected 'plugin' => object (MSSLib \ Plugins \ Mixin \ PluginMixin) [58] private '_registeredMixins' => array (size = 0) empty private '_systemMixins' => array (size = 3) 'border-radius' => array (size = 2) 0 => object (MSSLib \ Plugins \ Mixin \ EmbeddedMixins \ BasicSet) [61] 1 => string 'border_radius' (length = 13) 'transform' => array (size = 2) 0 => object (MSSLib \ Plugins \ Mixin \ EmbeddedMixins \ BasicSet) [61] 1 => string 'transform' (length = 9) 'filter-grayscale' => array (size = 2) 0 => object (MSSLib \ Plugins \ Mixin \ EmbeddedMixins \ BasicSet) [61] 1 => string 'filter_grayscale' (length = 16) protected '_enabledMixinSetClasses' => array (size = 1) 0 => string 'basic' (length = 5) 2 => object (MSSLib \ Plugins \ Mixin \ Mixin) [112] protected 'name' => string 'diagonal-border-radius' (length = 22) protected 'locals' => array (size = 2) 0 => string 'left' (length = 4) 1 => string 'right' (length = 5) protected 'children' => array (size = 1) 0 => object (MSSLib \ Structure \ Declaration) [136] private 'ruleName' => string 'border-radius' (length = 13) private 'ruleValue' => object (MSSLib \ Structure \ RuleValue) [142] private 'params' => array (size = 3) 0 => object (MSSLib \ EmbeddedClasses \ VariableClass) [145] private 'varName' => string 'arguments' (length = 9) 1 => object (MSSLib \ EmbeddedClasses \ VariableClass) [146] private 'varName' => string 'right' (length = 5) 2 => object (MSSLib \ EmbeddedClasses \ VariableClass) [147] private 'varName' => string 'left' (length = 4) private '_parentDeclaration' => & object (MSSLib \ Structure \ Declaration) [136] private '_flags' => array (size = 0) empty private 'ruleEnabled' => boolean true private 'parent' (MSSLib \ Structure \ Block) => null private '_handlerMap' => null private '_handlerMap' (MSSLib \ Structure \ Block) => null private 'parent' (MSSLib \ Structure \ Block) => & object (MSSLib \ Structure \ Document) [64] private '_handlerMap' (MSSLib \ Structure \ Block) => null protected 'plugin' => object (MSSLib \ Plugins \ Mixin \ PluginMixin) [58] private '_registeredMixins' => array (size = 0) empty private '_systemMixins' => array (size = 3) 'border-radius' => array (size = 2) 0 => object (MSSLib \ Plugins \ Mixin \ EmbeddedMixins \ BasicSet) [61] 1 => string 'border_radius' (length = 13) 'transform' => array (size = 2) 0 => object (MSSLib \ Plugins \ Mixin \ EmbeddedMixins \ BasicSet) [61] 1 => string 'transform' (length = 9) 'filter-grayscale' => array (size = 2) 0 => object (MSSLib \ Plugins \ Mixin \ EmbeddedMixins \ BasicSet) [61] 1 => string 'filter_grayscale' (length = 16) protected '_enabledMixinSetClasses' => array (size = 1) 0 => string 'basic' (length = 5) 3 => object (MSSLib \ Structure \ AtRule) [135] protected '_name' => string 'page' (length = 4) protected '_parameters' => string '' (length = 0) protected 'children' => array (size = 1) 0 => object (MSSLib \ Structure \ Declaration) [143] private 'ruleName' => string 'padding' (length = 7) private 'ruleValue' => object (MSSLib \ Structure \ RuleValue) [148] private 'params' => array (size = 1) 0 => object (MSSLib \ EmbeddedClasses \ MetricClass) [151] protected 'metric' => float 5 protected 'unit' => string 'px' (length = 2) private '_parentDeclaration' => & object (MSSLib \ Structure \ Declaration) [143] private '_flags' => array (size = 0) empty private 'ruleEnabled' => boolean true private 'parent' (MSSLib \ Structure \ Block) => & object (MSSLib \ Structure \ AtRule) [135] private '_handlerMap' => null private '_handlerMap' (MSSLib \ Structure \ Block) => null private 'parent' (MSSLib \ Structure \ Block) => & object (MSSLib \ Structure \ Document) [64] private '_handlerMap' (MSSLib \ Structure \ Block) => null 4 => object (MSSLib \ Structure \ Ruleset) [144] private '_selectors' => array (size = 1) 0 => object (MSSLib \ Structure \ Selector) [150] private '_mssPath' => string 'body' (length = 4) private '_cssPathGroup' => object (MSSLib \ Structure \ CssSelectorGroup) [96] private 'paths' => array (size = 1) 0 => string 'body' (length = 4) private '_ruleset' => & object (MSSLib \ Structure \ Ruleset) [144] private '_isFullSelector' => null private '_isParsed' => boolean true private '_handlerMap' => null protected '_parentRuleset' => null protected 'children' => array (size = 3) 0 => object (MSSLib \ Structure \ Declaration) [152] private 'ruleName' => string 'rounded-corners' (length = 15) private 'ruleValue' => object (MSSLib \ Structure \ RuleValue) [153] private 'params' => array (size = 4) 0 => object (MSSLib \ EmbeddedClasses \ MetricClass) [156] protected 'metric' => float 1 protected 'unit' => null 1 => object (MSSLib \ EmbeddedClasses \ MetricClass) [157] protected 'metric' => float 2 protected 'unit' => null 2 => object (MSSLib \ EmbeddedClasses \ MetricClass) [158] protected 'metric' => float 3 protected 'unit' => null 3 => object (MSSLib \ EmbeddedClasses \ MetricClass) [159] protected 'metric' => float 4 protected 'unit' => null private '_parentDeclaration' => & object (MSSLib \ Structure \ Declaration) [152] private '_flags' => array (size = 0) empty private 'ruleEnabled' => boolean true private 'parent' (MSSLib \ Structure \ Block) => null private '_handlerMap' => null private '_handlerMap' (MSSLib \ Structure \ Block) => null 1 => object (MSSLib \ Structure \ Declaration) [154] private 'ruleName' => string 'transform' (length = 9) private 'ruleValue' => object (MSSLib \ Structure \ RuleValue) [155] private 'params' => array (size = 1) 0 => object (MSSLib \ EmbeddedClasses \ FunctionClass) [167] protected 'name' => string 'rotate' (length = 6) protected 'arguments' => array (size = 1) 0 => object (MSSLib \ EmbeddedClasses \ MathExprClass) [174] protected 'expressionTree' => object (MSSLib \ Essentials \ ExpressionTree \ ExpressionNode) [170] private 'value' (Tree \ Node \ Node) => null private 'parent' (Tree \ Node \ Node) => null private 'children' (Tree \ Node \ Node) => array (size = 2) 0 => object (MSSLib \ Essentials \ ExpressionTree \ OperatorNode) [171] private 'value' (Tree \ Node \ Node) => object (MSSLib \ Operators \ UnaryMinusOperator) [172] private 'parent' (Tree \ Node \ Node) => & object (MSSLib \ Essentials \ ExpressionTree \ ExpressionNode) [170] private 'children' (Tree \ Node \ Node) => array (size = 0) empty 1 => object (MSSLib \ Essentials \ ExpressionTree \ ParamNode) [173] private 'value' (Tree \ Node \ Node) => object (MSSLib \ EmbeddedClasses \ MetricClass) [175] protected 'metric' => float 5 protected 'unit' => string 'deg' (length = 3) private 'parent' (Tree \ Node \ Node) => & object (MSSLib \ Essentials \ ExpressionTree \ ExpressionNode) [170] private 'children' (Tree \ Node \ Node) => array (size = 0) empty protected '_functionRenderer' => object (MSSLib \ Essentials \ FunctionRenderers \ DefaultFunctionRenderer) [166] private '_parentDeclaration' => & object (MSSLib \ Structure \ Declaration) [154] private '_flags' => array (size = 0) empty private 'ruleEnabled' => boolean true private 'parent' (MSSLib \ Structure \ Block) => null private '_handlerMap' => null private '_handlerMap' (MSSLib \ Structure \ Block) => null 2 => object (MSSLib \ Structure \ Ruleset) [149] private '_selectors' => array (size = 1) 0 => object (MSSLib \ Structure \ Selector) [161] private '_mssPath' => string '.wrapper' (length = 8) private '_cssPathGroup' => object (MSSLib \ Structure \ CssSelectorGroup) [176] private 'paths' => array (size = 1) 0 => string 'body .wrapper' (length = 13) private '_ruleset' => & object (MSSLib \ Structure \ Ruleset) [149] private '_isFullSelector' => null private '_isParsed' => boolean true private '_handlerMap' => null protected '_parentRuleset' => & object (MSSLib \ Structure \ Ruleset) [144] protected 'children' => array (size = 2) 0 => object (MSSLib \ Structure \ Declaration) [168] private 'ruleName' => string 'diagonal-border-radius' (length = 22) private 'ruleValue' => object (MSSLib \ Structure \ RuleValue) [169] private 'params' => array (size = 2) 0 => object (MSSLib \ EmbeddedClasses \ MetricClass) [178] protected 'metric' => float 6 protected 'unit' => string 'px' (length = 2) 1 => object (MSSLib \ EmbeddedClasses \ MetricClass) [179] protected 'metric' => float 10 protected 'unit' => string 'px' (length = 2) private '_parentDeclaration' => & object (MSSLib \ Structure \ Declaration) [168] private '_flags' => array (size = 0) empty private 'ruleEnabled' => boolean true private 'parent' (MSSLib \ Structure \ Block) => null private '_handlerMap' => null private '_handlerMap' (MSSLib \ Structure \ Block) => null 1 => object (MSSLib \ Structure \ Ruleset) [164] private '_selectors' => array (size = 1) 0 => object (MSSLib \ Structure \ Selector) [177] private '_mssPath' => string 'h1 span' (length = 7) private '_cssPathGroup' => object (MSSLib \ Structure \ CssSelectorGroup) [183] private 'paths' => array (size = 1) 0 => string 'body .wrapper h1 span' (length = 21) private '_ruleset' => & object (MSSLib \ Structure \ Ruleset) [164] private '_isFullSelector' => null private '_isParsed' => boolean true private '_handlerMap' => null protected '_parentRuleset' => & object (MSSLib \ Structure \ Ruleset) [149] protected 'children' => array (size = 1) 0 => object (MSSLib \ Structure \ Declaration) [181] private 'ruleName' => string 'color' (length = 5) private 'ruleValue' => object (MSSLib \ Structure \ RuleValue) [182] private 'params' => array (size = 1) 0 => object (MSSLib \ EmbeddedClasses \ ColorClass) [185] protected 'type' => string 'html' (length = 4) protected 'color' => array (size = 1) 0 => string 'blue' (length = 4) protected '_colorLib' => null private '_parentDeclaration' => & object (MSSLib \ Structure \ Declaration) [181] private '_flags' => array (size = 0) empty private 'ruleEnabled' => boolean true private 'parent' (MSSLib \ Structure \ Block) => null private '_handlerMap' => null private '_handlerMap' (MSSLib \ Structure \ Block) => null private 'parent' (MSSLib \ Structure \ Block) => & object (MSSLib \ Structure \ Ruleset) [149] private '_handlerMap' (MSSLib \ Structure \ Block) => null private 'parent' (MSSLib \ Structure \ Block) => & object (MSSLib \ Structure \ Ruleset) [144] private '_handlerMap' (MSSLib \ Structure \ Block) => null private 'parent' (MSSLib \ Structure \ Block) => & object (MSSLib \ Structure \ Document) [64] private '_handlerMap' (MSSLib \ Structure \ Block) => null private 'parent' (MSSLib \ Structure \ Block) => null private '_handlerMap' (MSSLib \ Structure \ Block) => null
What ultimately compiles to the following CSS code:html { color: #ff0000; text-align: center; margin: 0 auto } @page { padding: 5px } body { -webkit-border-radius: 6 4; -moz-border-radius: 1 2 3 4; border-radius: 1 2 3 4 4 2 4 2; -ms-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); transform: rotate(-5deg) } body .wrapper { border-radius: 6px 10px 10px 6px } body .wrapper h1 span { color: #0000ff } - CSS output format
The format of the output CSS code can be controlled using the library settings. To do this, set the preferred prefixes and suffixes to strings:$mysheet = MySheet::Instance(); $mysheet->setActiveDirectory(realpath('./')); $mysheet->getAutoload()->registerAutoload(); $settings = new MSSettings(); $settings->set('cssRenderer', [ 'prefixRule' => ' ', 'suffixRule' => ' /* this is a real CSS rule */', 'sepSelectors' => ', ', 'sepRules' => '; ', 'prefixOCB' => ' ', 'suffixOCB' => "\n", 'prefixCCB' => "\n", 'suffixCCB' => '' ]); … $mysheet->init($settings);
I will give a table of all possible prefixes and suffixes:Title Default value Description prefixRule 4 spaces String inserted before each rule suffixRule Empty line String inserted after each rule sepSelectors , Separator between selectors sepRules ; \ n Separator between rules prefixOCB Space The string inserted in front of the opening curly bracket (OCB - opening curly bracket) suffixOCB \ n The string inserted after the opening brace prefixSCB \ n String inserted before closing curly bracket (CCB - closing curly bracket) suffixCCB \ n String inserted after a closing curly brace prefixAtRuleLine 4 spaces The line inserted before each line inside the @-rule suffixAtRuleLine Empty line The string to be inserted after each line inside the @-rule - Other features
There are other features and functions in the library that I will simply list. These include:
- Enable or disable rule compilation (via the ~ character added before the rule)
- Automatic embedding of small images in CSS code using data: URL
- Importing other MSS and CSS files using the @ import directive (I'm still working on this feature; in particular, I need to add the ability to set import options)
- Convert all colors to one format
- 2 supported languages ​​for text compilation errors: English (en_us) and Russian (ru_ru)
- Enable or disable library parser extensions (you can disable support for functions, variables, colors, etc.)
How it was…
With a description of what I have achieved to date, I seem to be finished. And now, I want to tell you how I led the development process - as in the intervals between work, study and my favorite girl, I wrote my library.
Fig. 1 - My favorite girl
From the very moment I started my mini-project, a long time has passed. There were many different questionable situations and questions. And it is not surprising - I have never done anything like this before. I did not read any special literature on compilers and at first I did everything exclusively at my discretion. I do not brag, but on the contrary I say that I did not do it in vain. Perhaps, so I would avoid some of the problems that arose.
For some reason, I immediately decided to create a library in the form of an open-source project and immediately told myself that one githab page would not be enough. After a part of the library was already written, I began to make a website for it, so that I could find defects in “online mode” and correct them, and also immediately realize in practice that it would be nice to see the end user.
I thought up the name for my library, acting on the contrary.I decided not to deviate from the example of the most famous today preprocessors SASS and LESS, and I thought that MSS is a good combination of letters, after all. And to make the name memorable, I decided to name my project MySheet. And the abbreviation fits (MySheet Styles), and there is a light zest in the title.
The name is invented, it's time to start designing the ship. The first thing I started doing was a source code parser. It was here that I miscalculated for the first time. I started to do it without breaking the source code into tokens and keywords, and was guided by the fact that the library will mainly include work with strings. Of course, I saw the drawbacks of this approach already at the stage of its selection, but unfortunately I couldn’t think of anything better. Later, while at the university, we had a course on compilers, I realized that it would be better to introduce a stage of preliminary lexical analysis. At least, because now I am faced with the problem of recognizing and memorizing comments for later output to compiled CSS code. Or, for example,Now I would like to make the parser extensions insensitive (which are connected to the library as additional modules) to the presence of unexpected line breaks and indents (the ones that are often added for readability of the code). In the near future, I want to include in the parser the stage of breaking into tokens, which, in my opinion, should solve these problems.
The idea of ​​color arithmetic came to me when I was implementing support for mathematical expressions. I thought that it would be nice to be able to lighten and darken the colors in the design of the site to match the matching color without having to open the color picker. Now the library is working with HSLA, RGBA, HEX and HTML color formats. To each of the colors specified in these formats, you can add a delta of any channel from any other color format. For example, you can add 255 points of the blue channel and 40 points of green to the color recorded as # 000 and get the color # 0028ff. The arithmetic expression will look like this: # 000 + 255b + 40g.
, MrColor ( «» ).
, . Webgrind. , , .
I want to tell one interesting thing. When the parser in the preprocessor starts parsing a rule, it passes through all registered modules and, roughly speaking, calls the parse method in each of them. And since an arithmetic expression and, for example, a function are two different entities, the library had to parse the same thing two times. I really didn't like it, and one day I came up with a solution. When the parser of an arithmetic expression finds that it is not an expression, but a simple function, it does not return false, but returns this very object of the function. Thus, I got rid of this flaw and increased the performance of the source code parsing process.
, . , , : « ! !». , , :
Fig. 2 –
, . , ,
, MSS . , IE ( , , IE , , CSS-).
If someone has any other ideas for improving my project, I will always be happy to hear them.
Instead of conclusion
Well, that's probably all that I would like to tell in my first article about my library. I think I was able to advertise my product a little. I also wanted, so to speak, to fix the point in the development and get feedback on the work already done.
I would be grateful for any advice and recommendations, as well as all kinds of support and just kind words.
If you like my article, I will definitely write more.
Links
GitHub: https://github.com/Dobby007/mysheet
Official website: http://mss.flydigo.com/
Documentation: http://mss.flydigo.com/docs
PS I'm sorry, but as someone noticed in comments - my hosting could not stand the pressure. About this, I even could not think. Now we will try to do something with this ...
PPS Unfortunately, my hosting, it turns out, is draconian restrictions on sites (and not only free ones). And they respond to requests exactly once in the Chinese Easter, so I will have to look towards other possible solutions for the content of my site.
PPPS Access to the site will be fully restored after updating the entire DNS chain. Now the site is available at: dobby007_h5a5nu.radius-host.net
Source: https://habr.com/ru/post/256589/
All Articles