 Can you hear, can you get back here, okay, right, hi everyone, hello, welcome, I am Norvin, my top is on basically building your own CSS pre-processor with rework or post-CSS, for information rework and post-CSS JavaScript libraries, so it's relevant, right, so this top has an interactive component, so if you would like to follow along, if you have a laptop, that's a good idea, I've posted the link to these slides on meetup.com, so this brings you to this page, right, it's not slides, it's just a knock-knock, but it works as well, okay, so some coolings keep open, there's this page, there's rework on GitHub, post-CSS on GitHub, and there's the interactive demo component, right, so these, these, these, okay, so yeah, right, and as necessary, like, just Google for rework CSS or post-CSS, because I won't, I will touch on the basics of both of these, but I won't go into full detail, because like, you can, there's lots of articles on rework and post-CSS, and you can just Google as and when, if you're really interested, okay, so who this top is good for, this top is really going to be the most useful to you if you are basically a front-end developer, and you can deal with HTML and CSS and JavaScript, like, your whole working life, well, your whole, all your working hours, not your whole life, but your working hours, right, and you know, maybe you know about SaaS, CSS, less stylus, different ways of letting you write, like, eventually write CSS, but doing so in a more human, sane way, like, not just doing vanilla CSS, because there's a bit of redundancy, and a bit of like, bad stuff you always have to keep on, like, watching yourself for, so you use SaaS, CSS, less stylus, but you think that that's all there is, so today I'm basically telling you that there's other ways, like, you can basically kind of build your own, right, so if you don't know rework or post-CSS, great, you'll learn a lot, it also helps that you think in JavaScript for your, like, if you think about how to solve a programming problem, you think in JavaScript, because the libraries are in JavaScript, I'm sure there's libraries in other languages to do it, but this is a JavaScript talk, so yeah. Okay, right, so the main point of this talk is just to tell you that other options exist, besides SaaS, CSS, stylus, less, you can roll your own, whether or not you should do it, I'm not going to debate that, because some of you will think, like, oh, this is a good idea, some of you are going to think, like, this is terrible idea, why would I not want to just use CSS, like, they've done everything for me already, some of you, maybe a bit more hipster, you want to build your own, then great, this is the talk for you. Okay, so this is the main point, the take-home point, these are just, like, the spotting point, right, so what's rework, what's post-CSS, they are basically plug-in frameworks, so this is rework, plug-in framework for CSS preprocessing in Node.js, this is post-CSS, transforming CSS with JS plugins, right, so rework came first, written by TJ Holloway Sharp, it is currently smaller and simpler to get into, like, could be a good starting stone, post-CSS is bigger, so choose depending on which you prefer, so, right, this is rework, and, like, their methods are just new constructor, a used method, and two-string, really simple, these are some of crap, sorry, hello, hello, hello, okay, right, these are some of the plugins that you would plug into rework, right, so this is just their list, this is post-CSS, slightly more complex, more methods, more documentation to read, maybe a good or bad thing, so just scroll through, this is what it is, you can use these, you can do this, you can do this, these are the plugins, like, a lot more than rework, you may or may not find a plugin for you, or you could write your own, right, so how do they work, this is how it works, but it may be useful to actually, like, let's go from the back, right, what we really want is we want CSS that the browser can pass, right, but we don't necessarily want to write the browser version of CSS ourselves when I write something before that, so in order to get the CSS for browsers, before that, it takes the form of a JavaScript AST abstract syntax tree, basically, like, just an object in JavaScript, a really huge object, which describes your CSS in a way JavaScript understands, and so to get from there, it came from source code, whatever source code you want, I mean, I've cancelled out CSS here because they call it a post processor because by right, you're supposed to put in CSS as input, and then from there, they will pass it, and then they will compile the final CSS, but it doesn't actually strictly have to be CSS at start, it could be whatever language you want, you could write it in natural language if you wanted, like, make box blue, box full width, I don't know, like, you could invent your own thing, so whatever source code you wish. So, yeah, this is what one plugin does, like, one plugin will just basically understand your source code, pass it, do its own transformations, and spit off CSS, and if you just plug in many plugins together from a chain, you basically get your own processor. At this point, we might want to talk about post processor and pre-processor, these are what they kind of call themselves, I frankly do not like this, I mean, I think it's misleading because they are almost implying that you only process at the end for some reason, but you can, it's really up to you whenever you want to process, so I would just prefer to call it a processor, you just write your own processor, the pre or post is just a matter of timing. Right, so, for the plugin chain, plugins can be for things like, for example, syntax that you prefer, or could be things like constructs like loops, conditionals, whatever, you can do automatic fallback placing, polyfills, not really polyfills, sorry, vendor producing, for example, right, you can do optimizations if it's needed, and some plugins are basically just packs of other plugins, like, they basically collect a bunch of useful plugins and you just plug it in and you're done, right, and whatever else, you can do whatever else as long as it's possible in JavaScript. Okay, so it is possible for build frameworks like Grand, Gal, blah blah blah, you can do in vanilla JS, or you can also use as a command line tool. Okay, so that is basically the theory, so now let's actually try and use it. So this is a demo of Post-CSS, so in this case, I'm using Post-CSS and not rework, because simply because I have more experience in rework, by more experience, I mean two weeks more, and like rework is zero, and post is two. Sorry, okay, I'll take you through it, is it too small? Okay, don't worry, I am prepared, so, okay, so what you see here on the screen, or on your laptop, this is just the description, what it is, short intro, now this is where you kind of write your processor, pre-processor, post-processor, whatever you call it. In this case, it takes the form of a node module, but like I've said, you can do it without ground, blah blah blah, right? For example, you're doing post-css, it goes require post-css, this is our zooming hack, this is your processor, you instantiate post-css, and you add whatever plugins you want, right? And finally, this output is the synchronous form, there's an async form available as well, up to you, check the documentation, and over here is basically from left to right, you basically get your source css going into your final compound css, now in this case, we've done one processor with no plugins, so what you see here is basically source css, they pass it into the AST, and then they output, and it's exactly the same, right? Like so, you get exact matches, almost like identity function, the AST is kind of concealed, there is this source thing, it's naturally folded, if you want to unfold it and see everything, then you use this fully expanded essential for me, right? Okay, so that's what this demo is, so let's start by putting in the first target, so if you realize, like you realize this is actually wrong css, you may or may not spot it, but color is wrongly spelled, no correction, color is correctly spelled, but css color is wrongly spelled, right? So let's fix it, we are going to use a plugin called spiffing, so this is it, it is basically post css plugin to use British English, right? So yeah, like this is what they let you do, color goes to color, media, media, capitalize, capitalize, even let you do like please for important, right? So yeah, pretty useful, I would say this is like essential for production, so you use it, and here you go, so source css becomes proper css, right? So what you are seeing here is like this is before the plugin, well this AST is before the plugin, and this AST is after the plugin, and you realize that over here color changes into color, gray to gray, if you do like please, so over here like it's a bad value, gray please, it turns into gray and they understand that it's important, right? So that's the hollow world of plugins kind of, okay so let's try another one, so this is one of post css like most signature plugins, auto prefixes, it basically lets you automatically put vendor prefixes, they will kind of, well depending on how you configure it, either they will actually check, can I use the website and use like that database or sometimes they use a local database, right? So the really magic example is just this, am I using it? Okay so this is taken straight from the adults, right? So this is a property that needs vendor prefixing, they take it from this and turn it into this, right? So the idea is that you're just supposed to use this plugin and forget ever about vendor prefixing ever again, so now you don't have to worry about prefixes, right? So that's cool, another example, so you may be thinking like if you've been using sass less, they have variables, you store a value in some property like maybe your brand's color, your startup's brand's color or something, so variables are good, so let's use them, this is a simple variable version, this is kind of the sass style of variables, if you want the future spec style of variables, you can get that too, but I'm showing you the sass style, so right, let's say color is, you know, normally you would do something like this, like some really weird color of yours and like somewhere else you would do 3, 4, 5, 6, 7, 8, so basically duplicate everything, right? Did I do something wrong? Oh yeah, okay, sorry, so you would normally want to abstract this out and you would do as you would expect, you would use a variable, okay, so source, compile, output, your variables are done, good, great, so basically this is like, this is one out of the, I don't know, how many features does sass have, like 10 to 20 or 30, I'm not sure, but so theoretically if you put that 10 to 20 to 30 plugins in your plugin chain, you would kind of get your own sass, except that if you didn't like one particular feature of sass, you could take it out, for example, and then you add in five features of your own, so final example is nesting, you probably already know what this does, basically the fact that you can do something like this, right, so you can't do this in CSS, but now you can, again same as sass, but now it's your own, you can call it your own, right, does it work? Yeah, it does, it does, it does work, okay, so now you know how to kind of apply other people's plugins, that's great, you've learned something, let's try what if you want to write your own plugin, because this talk is all about like, what if I want to build my own esoteric hipster, really weird eccentric feature, right, so there are a few ways to define your own plugin, I'm just using the kind of the simplest way in which we will do .use, and the syntax for this is that you can pass in a proper constructed plugin object, or you can just pass in a simple function for convenience of sake, right, so the syntax for post-css is that they give you a root argument, and a result argument, and you just basically transform this root object, and it's good to go, right, so let's say if I wanted to, let's say I want to replicate the spiffing thing, where color becomes color, so let's try and write that from scratch, right, so let's just set up some, yeah this is it, okay we'll all just leave it here, okay, so in order for us to kind of write our own plugin, we kind of need to know what root is, because we have to modify root, root is basically this AST, right, so the structure of an AST is there, right, like this is, this whole thing is root, right, so we kind of need to modify, like we realize that root kind of has nodes, this is the root node, it has nodes, and in nodes this is a node, this is a node with nodes, so basically root is a node which has nodes which have nodes which have nodes, right, some nodes have things like the type is declaration, the property is color, and the value is this, so in our case if you want to modify, if you want to change color to color, what we should be doing is going through all nodes, sorry, all nodes, and just basically looking for nodes with property of color and then changing it to color, okay, right, so let's try it out, so we will kind of need to do a bit of, because if work, because root can have nodes, can have nodes, can have nodes, can have nodes, so let's make a function, call it whatever, takes in a node, so if your node has nodes, then run, sorry, then for each sub node, we need to run whatever one knows, right, so this will work because first argument it would work, right, so now that's a sub node setup, so for this node itself, like if node dot, what is it, what is it, what is it, prop, yeah, sorry, I think it's if node type is a declaration, right, this thing, because some nodes, a declaration, some nodes are not, so only for declarations, right, now we do the prop test, no, right, so if prop has this word color, in this case we just do a simple replace, we just do node dot prop equals node dot prop, like the only reason I can do this is because I rehearsed us now, so if not I would have, I would spend like five minutes looking up the internet, like what's the string replace method, blah blah blah, okay, so pretty cool, you've made a recursive plugin, so now we just run it, no need for return, you just modify root and it's done, right, so let's see where it works, does it work, it seems to work, okay, so source, color, just for extra care, color, color, color, and cool, it works, so we have built a plugin that basically turns color into color, so really, congrats, so now if you follow along you can basically put an resume, like I have post CSS experience, right, so yeah, like just to sum up everything, yeah, so just kind of go through pros and cons very quickly, right, pros and cons of doing something like this, pro number one, get to build your own workflow, con number one, have to build your own workflow, which is why I said like I'm not going to convince you whether this is a good idea or not, it may not be, especially it might not be a good idea if you are doing it in like, if it's your day job, then you kind of want to write CSS code that everybody can understand rather than just you, or it's not hell for new developers, but if you're a side project and like you kind of just hate CSS in general, despite it being your source of money, then you can write your own CSS dialect if you wish, if you have time, right, so yeah, this is especially useful if you kind of find the idea of like separating, like if you find the idea of HTML and CSS and JavaScript being totally separated, kind of weird, then this might be for you because this kind of brings CSS more to JavaScript, but if you find what I've said, what I've just said, kind of like weird, then like forget it, like don't bother, right, so drawbacks of this is yeah, number one, what about other developers mentioned already, number two, now this means that your own source code, like your syntax is hard, I think, how is your editor going to handle it? Are you going to write your own syntax highlighting functionality for your text editor, like it's just going down one big rabbit hole, right? You could show us how to do that next time. It's about as easy as, that's how syntax highlighters work, they're hard to show it into an ASD and then you just mark things with a different color. Okay, so that's it, hope you had fun. Questions, please? Thanks. Questions?