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

10000 followers 🥳🔥 project preview: Jess language design.