Index Next: SSL / HTTP Secure

JaxServer Stylesheets (JXSS)

JXSS Overview

JaxServer includes the JXSS preprocessor which allows JavaScript code to be inter-mixed within CSS. JXSS has all the flexibility of SASS, but instead of being an interpreted language, the code is compiled into valid JavaScript that is executed inside a JXP. All features of the JavaScript language can now be utilized for producing CSS code, including using functions, variables, file imports and access to the libraries included with JaxServer and NodeJS. JXSS also has mixins, and macro support to handle new CSS3 properties and provides a more palatable syntax for the ever-increasing number of browser-specific extensions.

Visit the JXSS Reference Guide for full language specification.

Although a new file format (.jxss) is reserved for JXSS code, because it is always converted to CSS the output is always served as text/css. In JaxServer's development mode, the compilation and evaluation of JXSS happens in real-time. But in production mode requests to .jxss files are transparently routed to the cached version of the CSS which is compiled ahead of time along with the rest of the static application files.

JXSS Example

Here is an example JXSS file with colors highlighting where JXSS differs from conventional CSS:

JXSS (jxsstest1.jxss)
// javascript variables
borderColor = rgb(80,80,80);
defaultFont = {
   family: 'Times New Roman',
   weight: bold,
   size: '12pt'
};

DIV.block {
   border: '1px solid '+borderColor;
   font: defaultFont;
   padding {
      top: 5;
      bottom: 5;
   }
   
   A.highlight {
      margin: 1;
      border {
         @: 0;
         radius: 5;
      }
      color: borderColor;
      font: defaultFont;
      text-decoration: none;
      padding: 3 7 3 7;
	  
      +:hover {
         /*
           + appends this selector
           to its parent selector
         */
         margin: 0;
         background-color: rgb(230,240,248);
         border: 1px solid rgb(80,40,40);
         color : rgb(100,110,240);
         transition: background-color 0.5s ease-out;
      }
   }
}
CSS output (development)
DIV.block {
	border : 1px solid #505050;
	font-family : Times New Roman;
	font-weight : bold;
	font-size : 12pt;
	padding-top : 5px;
	padding-bottom : 5px
}
DIV.block A.highlight {
	margin : 1px;
	border : 0px;
	-o-border-radius : 5px;
	-moz-border-radius : 5px;
	-webkit-border-radius : 5px;
	border-radius : 5px;
	color : #505050;
	font-family : Times New Roman;
	font-weight : bold;
	font-size : 12pt;
	text-decoration : none;
	padding : 3px 7px 3px 7px
}
DIV.block A.highlight:hover {
	margin : 0px;
	background-color : #E6F0F8;
	border : 1px solid rgb(80,40,40);
	color : #646EF0;
	-o-transition : background-color 0.5s ease-out;
	-webkit-transition : background-color 0.5s ease-out;
	-moz-transition : background-color 0.5s ease-out;
	-ms-transition : background-color 0.5s ease-out;
	transition : background-color 0.5s ease-out
}

Production Mode

The JXSS preprocessor was written for convenience over performance. The runtime stage is slow and operates in NodeJS's unsafe blocking mode. By default JXSS cannot be run in production mode. It is intended that all JXSS files be converted to regular CSS files, and served as any other static file. JaxServer's jax cache command line tool has built-in support for JXSS. While in production mode, JaxServer will seamlessly route JXSS requests to the cached version of the CSS.

Add To Cache

JaxServer will issue an error on JXSS files in production mode if they are not properly added to the cache. In the above example, the jxsstest1.jxss file was added to the application's /web/ directory. To ensure this file gets cached it could either be moved into a the existing /web/static directory which has been added to the cache, or it can be added individually by editing the controller:

Source of ~/jaxserver/app/helloworld/helloworld.js:
function Helloworld(args,options) {
	//...
	this.cache('/jxsstest1.jxss');	
}

Rebuild the static cache using: 

$ jax cache helloworld

...
JXSS : /jxsstest1.jxss -> eXC5JDFU1Q2D-2C4pAh0jg.css
eXC5JDFU1Q2D-2C4pAh0jg -> jxsstest1.jxss 327 B (saved 50%)
...

Notice this a CSS file was generated from the JXSS.

If it is ever required to obtain the processed CSS file it can be found in the application's cache directory:

Now run the application in production mode: 

$ jax run helloworld --env=prod

The JXSS file will then be served as a minified, gzip compressed CSS file:

CSS output (production)
DIV.block {border:1px solid #505050;font-family:Times New Roman;font-weight:bold;font-size:12pt;padding-top:5px;padding-bottom:5px}
DIV.block A.highlight {margin:1px;border:0px;-o-border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;color:#505050;font-family:Times New Roman;font-weight:bold;font-size:12pt;text-decoration:none;padding:3px 7px 3px 7px}
DIV.block A.highlight:hover {margin:0px;background-color:#E6F0F8;border:1px solid rgb(80,40,40);color:#646EF0;-o-transition:background-color 0.5s ease-out;-webkit-transition:background-color 0.5s ease-out;-moz-transition:background-color 0.5s ease-out;-ms-transition:background-color 0.5s ease-out;transition:background-color 0.5s ease-out}

The full JXSS language syntax is outside the scope of this tutorial. Refer to the complete JXSS Reference Guide for full details of its capabilities.

Next: SSL / HTTP Secure