Ogone 0.22.0 - Obvious: new CSS pre-processor

Intro

Hey! I'm Rudy Alula, working as Front-End Developer for Stanley Robotics.
now that the presentations are made, let me introduce a new feature from Ogone that you should explore: Style Network
start learning Ogone here.

History

you got to know that in earlier versions, Ogone has supported modules like deno-sass and denolus to transform scss/sass/stylus like text.
these weren't maintained and generated many issues inside Ogone so following the advices in this article. I erased them..
being a Sass/Stylus user, I couldn't bare Ogone will only supports native-CSS without the tricks I'm used to.
So I decided to create an internal css-preprocessor that could deal with all the tricks I want.

& Obvious came out

Obvious is the name of this pre-processor, I don't know why but that just sounds cool so Obvious

more seriously Obvious has big potential as it is one of the steps of the compilation. it has access to the components and knows what components are imported in which component.

in the past you would naturally give a language to the style tag like <style lang="obvious">, it is no more required, Obvious is now by default.

ok that's cool but what are the features ?

let me give you an overview:

• nested rules
• parent referencing with &
• import component's rules and vars @use 'component-tagname' as Component;
• export rules, vars @export const myVar = red;
• save rules inside vars @const t = div { /* ... */}
• spread rules @const rule = div {...}; div { ...$rule; }
• vars @const t = value;
• eval the value of one variable @const* var = true;
• css minification

Nested rules

I think this was obvious. this feature was required.
for example, inside your style element you would write:

all paragraph element should display a text in grey, excepted for the paragraph that is a child of a div element.

Parent Referencing

use the & character to make a reference to the parent selector.

is like

div.container { background: blue; }
div.container:hover { background: red; }

Variables

getting varaible declarations from js. this will let you filter what rules/variables are available for external uses.

to declare a variable use @const like following:

now let say we want to be able to use those vars outside the component but through a rule

Import/Export things from Components

this is like namespaces from Less but doing it through a component.

let's write two rules. one exported and another private one.

start using $spanRule inside another component.

Conclusion

Sass and Less inspired but I took some liberties on few syntaxes.
this article only exposes the new CSS parser of Ogone called Obvious. Now that I can parse properties of CSS Rules, I'm planning to use CSS rules for shaders definitions. please check this, if you're interested in webGL1/2 API

Ressources

• Otone ^0.1.3 on VS Code
• Ogone 0.22.0
• Deno ^1.3.0

available on Deno: here