DEV Community

Adam Crockett 🌀
Adam Crockett 🌀

Posted on • Edited on

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);
}
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. 😘

Top comments (3)

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀 • • 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
            }
        }
    }
}
Collapse
 
astrit profile image
Astrit •

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

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀 •

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.

Read next

bookercodes profile image

Learn useActionState quickly with an example (Next.js 15)

Alex Booker -

michelledey4you profile image

Created a Npm package for Vite, React Tailwindcss starter code with configuration.

Plain -

sajaddp profile image

How to Learn TypeScript in One Day?

Sajad DP -

prince_beec5ccde00b7c6c73 profile image

3d Image carousel rotation illusion using html css and javascript

Prince -