Ogone 0.22.0 - Obvious: new CSS pre-processor
Tags: ogone, deno, typescript, javascript
Published: 2020-08-26 16:20:43

## 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](https://dev.to/srnv/deno-learn-how-to-use-ogone-486c).

## History

![Ogone and Deno](https://dev-to-uploads.s3.amazonaws.com/i/jl7qi4cvmywxm7wyop78.png)

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](https://dev.to/srnv/deno-1-2-0-url-argument-type-solutions-37m0). **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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f20n8jtu9270qkkf4bdm.png)

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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c8v43ntx9yzdmu99l3h9.png)

is like 

```css
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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/njw262yapjxmjv2ind98.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3ewzxdy0jw0r1qharifq.png)

## 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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t8s55rkppqv35n35y49v.png)

start using `$spanRule` inside another component.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1fwjnzpgit2sgco8ursy.png)

# 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](https://github.com/SRNV/Ogone/issues/26)

# Ressources
- [Otone ^0.1.3](https://github.com/SRNV/Otone) on VS Code
- [Ogone 0.22.0](https://github.com/SRNV/Ogone)
- Deno ^1.3.0

available on Deno: [here](https://deno.land/x/ogone@0.22.0)