10000 followers 🥳🔥 project preview: Jess language design.

Adam Crockett 🌀 - Dec 21 '19 - - Dev Community

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);
}
Enter fullscreen mode Exit fullscreen mode

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); /

Enter fullscreen mode Exit fullscreen mode

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

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .