DEV Community

Adam Crockett
Adam Crockett

Posted on

Yesterday I built Jess's modules and imports

This is still a WIP!

Think scss with js es modules and your on the right lines. Jess is now successful building as a rust WASM module and now supports the following exports. Also because Jess will also be interpreted as in runs in your browser, async importants will be a thing allowing lazy loading of CSS only if required.

Exporting

Variable

@export const foo = 'primitive';
Enter fullscreen mode Exit fullscreen mode

CssRules

@export const aBlock = .some > #css {
   background: red;
}
Enter fullscreen mode Exit fullscreen mode

Mixins / Functions

@export function foo(){
    ...
}
Enter fullscreen mode Exit fullscreen mode

Block exports

@export { foo, aBlock };
Enter fullscreen mode Exit fullscreen mode

Importing

@import '../some/src';
@import '../some/src.jss'
// Note that tss files will be resolved with a flag `jess compile --tess`.

@import { foo } from './functions/test';
// Yes you can pick what to import

// Note that default imports are not part of my mvp
Enter fullscreen mode Exit fullscreen mode

Here is the dependency graph so far
Alt Text

What I have learned

Some things are just easier to do in JavaScript (ahem, typescript) so the module system does the preparation to feed a big load of src code glued together into the rust WASM mod for lexing and more. The compromise meant I could understand what I was doing. The sad thing is that this system is synchronous and a bit slower that I would like, I plan to add some workers into the mix and get everything async as soon as I work out what can be parallel. As soon as I can I will also move this functionality into rust. But this is the nature of prototypes, they don't have to be perfect, they just have to get your attention. Developers I mean you.

Discussion (0)