10000 followers 🥳🔥 project preview: Jess language design.

#javascript #css

You have all been so inspirational, after 10000 I want to finally finish Jess.

So after much thinking and parking the project for a while this is the language design so far.

@script {
   const mobileBackground = #00ff00;
   function foo() {
      return #333;
   }
   // As mixin
   function redBorder() {
       return {
          border-color: red;
          arbitryJSValue: 2345;
       }
   }
}

.test {
    background: {foo()};
}

@media screen and (min-width: 440px) {
   .test {
      background: {mobileBackground};
      // Function as mixin, js values 
      // ignored due to case detection
   {redBorder()}
    }
}

@test "should return A11Y friendly CSS value" {
   assert(foo()).isCSSValue();
   assert(foo()).noAlpha();
   assert(.test).isAAAContrast(#fff);
}

Output phase one, direct to js.


var mobileBackground = '#00ff00';

var sheet = (function() {
    var style = document.createElement("style");

   style.appendChild(document.createTextNode(""));
    document.head.appendChild(style);
    return style.sheet;
})();

// Variables

getComputedStyle(document.documentElement)
    .setPropertyValue('--mobileBackground', '#00ff00');
var mobileBackground = 'var(--mobileBackground)'
// Style
sheet.insertRule(`.test { background: #333; }`, 1);

var mediaQueryList = window.matchMedia("screen and (min-width: 440px)");
function handleOrientationChange(mql) {
    sheet.insertRule(`.test { background: ${mobileBackground}, border-color: red; }`, 1);
}
mediaQueryList.addListener(handleOrientationChange); // Add the callback function as a listener to the query list.

handleOrientationChange(mediaQueryList); /

There seems to be a need for a typescript like flag, I would like to create typesafe CSS that conforms to a projects specifications. Nesting will eventually be a feature as well as custom computed units.

Compile targets will range from a js file and a CSS file. A single file approach and hopefully a limited subset of CSS only. There should be an interpreter in the future.

Optimization levels will vary and linting and testing should be built in just like rust. You should be able to import js es6 modules and also other jess files. You should be a le to use workers and Houdini features fairly transparently.

The library currently exists as a Wasm binary lib (libjess) and a cli client prototype. The binary.

So what's next:

create a roadmap
build a prototype in assembly script and typescript
build the test framework
build the js API
build the logger
add typescript like functionality
move libjess to rust

I need your help, if you are interested in the project please let me know. Or checkout why I'm doing it with my JavaScript enhanced stylesheets series, it's quite popular. 😘

Top comments (3)

Adam Crockett 🌀 • Dec 23 '19 • Edited

It's possible that the output might be more manageable like the following:

const fn = {
   redBorder(){/*...*/},
   foo() {/*...*/}
}
const sheet = {
    '*':{
        '.foo': {
            exec() {
                // ...
            }
        }
    },
    'screen and (min-width: 440px)': {
        '.foo': {
            exec() {
                // CB runs the same sort of output as seen above
            }
        }
    }
}

Astrit • Dec 23 '19

Have you decided yet on what your going to build the API , and what documentation tool are you going to use ?

Adam Crockett 🌀 • Dec 23 '19

So currently it's mostly typescript based so I can generate a lot of the docs via tsdoc but I am curious about your documentation, you have done a stellar job.

As for the API, there is a lower level lib in Wasm that is consumable by JavaScript, just pass a string or filename to the exported methods. The plan will be to store as much of the CSS in CSS custom props and allow a js API to be generated as well as your bundle output. The end game of Jess is to become reactive and allow CSS to be handles more like react or svelt. I have ways to handle js events registered in CSS and have posts about this.

In your case I would like to create a STD library of extended functionality that you can't do in CSS such as an icon library.

DEV Community

10000 followers 🥳🔥 project preview: Jess language design.

Top comments (3)

Read next

feewrff

Optimizing React Native Performance for a Seamless User Experience

Blur Card Effect

JavaScript Essentials: Part 7