DEV Community

Cover image for 🎩 JavaScript Enhanced Scss mixins! 🎩 concepts explained

🎩 JavaScript Enhanced Scss mixins! 🎩 concepts explained

Adam Crockett 🌀 on July 26, 2019

In the next post we are going to explore CSS @apply to supercharge what we talk about here. deprecated proposal :( Traditional Web develo...
Collapse
 
andrejmikulicka profile image
Andrej Mikulička

I have absolutely no idea what have I just read but can't wait for Jess.

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀 • Edited

Thanks for the feedback, this has to be the best comment I have ever read!
I find it hard to express myself and yet I have captured yours and others interest which is absolutely fascinating, perhaps I am not barking up the wrong tree.

I will try to write a cleaner step by step edit - or even a new post that is more like a tutorial, documenting the principles in practice, reading code is easier to digest sometimes. What I really want to see is what other people have made with this approach and what problems or positives they have found, how did they improve it, this will us to write a next-gen tooling for everyone. I think a tutorial will help alot.

Pictures speak a thousand words, so here is the next in the series preview.

A bloody event listener registered in scss, Magic!
This perfectly illustrates what I have talked about, this is 100% pure styling logic where its meant to be, in a stylesheet.

Business logic would be clearly separated into JavaScript. A form submission for example would then just handle where data goes, not also what animations happen and how the UI updates, I think it is possible to make this work with Angular, React and Vue as well, so that is another post in this series.

Whats amazing is that this is achievable with existing tools today, this is thanks in part to css variables. Its about to get a lot more powerful, css mixins are coming! Google "@apply css rule".

What makes me smile from ear to ear is that this scss actually registers a JavaScript event listener, but thats a story for another time, keep your eyes pealed. 😄

Collapse
 
andrejmikulicka profile image
Andrej Mikulička

Wow, this looks AWESOME! Thanks for the info! Also, yes, sometimes it's better to see the code, because this comment explained more than the whole series to me.

Collapse
 
webia1 profile image
Webia1

How awesome is that? :)

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀 • Edited

I have a little announcement, due to the positive reception of this idea. I have decided to name the idea Jess JavaScript enhanced Stylesheets, and maybe Tess Typescript enhanced Stylesheets eventually.

I am going to develop Webpack tooling initially to make this workflow more seamless, there will likely be a frontend js adapter to assist this, the endgame is to write Jess, and Tess, indipendent (Rust or V or LuaJit or c++ anything fast that could potentially run in WASM and node or wasi) powered the compiler, similar to svelt and syntactically like sass but with a modern JavaScript inspiration, I will likely fork the rsass implementation and hack it into something new, it's not going to be just another preprocessor, this is more like a frontend framework for CSS, I believe we do CSS in js because there is not a viable alternative. Very excited to start 🧙‍♂️, I would be very grateful to work with contributors and get a roadmap sorted and technical designs.

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

Let's elaborate, there will be no Webpack tooling, Jess is under active development. In its current form it is a compiler for a subset of JavaScript, es5.5 if you will, some modern syntax will be available. You will be able to pick up Jess in a short amount of time because the syntax is something that is very similar to things you already know. Jess will eventually run in your browser, have a test framework and much more.

Jess is written in Typescript and Rust on Wasm and is at this point lexing input. I will be keeping a regular posting of development and if you are interested in this just follow me.

Collapse
 
josephborg profile image
Joseph A Borg

Why not use unique-id() instead of the random(9*9*9*9)?

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

Because I didn't know about that! Good one! I will add this in right away 😍

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

Oh just to say the implementation details are being refined anyway, suggestions like this are greatly appreciated!

Collapse
 
joshuajarman profile image
Joshua Jarman

We've been writing a lot of reactive css using zeit/styled-jsx for react, you might be interested in checking that project out and see the approach they've taken.

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

So this post exploded for the 3rd time, I would like to write Jess to compete with tailwind and I already have half a parser, if you want to colab and know rust I'd love to hear from you. 🦓