Hss

This module documents the HSS compiler and tools.

Use require( hop.hss ) to use it.

Hss is a builtin CSS compiler. It enables inserting Hop values inside CSS files. Hop values are inserted with the ${ mark.

Example

This examples shows how to use HSS for generating dynamically Cascading Style Sheets.

hss/hss.js

service hss() {
   return <html>
     <head css=${hss.resource( "hss.hss" )}/>
     ${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(
         function( i ) {
            return <div class=${"div" + i}>${i}</div>;
         } )}
   </html>;
}

console.log( "Go to \"http://%s:%d/hop/hss\"", hop.hostname, hop.port );

hss/hss.hss

${
   var hop = require( "hop" );
   var hss = require( hop.hss );

   function nthColor( length, from, to, i ) {
      var cfrom = hss.parseWebColor( from );
      var cto = hss.parseWebColor( to );

      var rs = (cto.red - cfrom.red) / (length - 1);
      var gs = (cto.green - cfrom.green) / (length - 1);
      var bs = (cto.blue - cfrom.blue) / (length - 1);

      return hss.makeWebColor(
         Math.round( cfrom.red + (i * rs) ),
         Math.round( cfrom.green + (i * gs) ),
         Math.round( cfrom.blue + (i * bs) ) );
   }
}

/*---------------------------------------------------------------------*/
/*    div                                                              */
/*---------------------------------------------------------------------*/
div {
  padding: 8px;
  color: white;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  width: 4em;
}

/*---------------------------------------------------------------------*/
/*    colored div                                                      */
/*---------------------------------------------------------------------*/
.div0 { background-color: ${ nthColor( 10, "#ffd100", "#FF0000", 0 ) }; }
.div1 { background-color: ${ nthColor( 10, "#ffd100", "#FF0000", 1 ) }; }
.div2 { background-color: ${ nthColor( 10, "#ffd100", "#FF0000", 2 ) }; }
.div3 { background-color: ${ nthColor( 10, "#ffd100", "#FF0000", 3 ) }; }
.div4 { background-color: ${ nthColor( 10, "#ffd100", "#FF0000", 4 ) }; }
.div5 { background-color: ${ nthColor( 10, "#ffd100", "#FF0000", 5 ) }; }
.div6 { background-color: ${ nthColor( 10, "#ffd100", "#FF0000", 6 ) }; }
.div7 { background-color: ${ nthColor( 10, "#ffd100", "#FF0000", 7 ) }; }
.div8 { background-color: ${ nthColor( 10, "#ffd100", "#FF0000", 8 ) }; }
.div9 { background-color: ${ nthColor( 10, "#ffd100", "#FF0000", 9 ) }; }

Functions

hss.parseWebColor( color )

Parses a color string and returns the red, green, blue components.

Example:

hss.parseWebColor( "#45ffc2" );

hss.makeWebColor( red, green, blue )

Creates an HSS suitable string representation of the color.

Example:

hss.makeWebColor( 0x45, 0xff, 0xc2 );

hss.load( path )

Load a HSS style.

hss.eval( path )

Read a HSS style from a string.

Example

This example combines the server-side DOM API, the markdown library, and the HSS facilities to compile Markdown documents into LaTeX and plain Markdown syntax.

This README.md is the example which is compiled by the example.

A SubSubSection

This is bold with embedded bold.

md/md.js

var hss = require( hop.hss );

function compileNode( node, css, media ) {
   
   function isVisible( style ) {
      return style.display != "none" && style.visibility != "hidden";
   }
   
   var style = css.getComputedStyle( node );

   if( isVisible( style ) ) {
      var buf = "";
      
      // before
      if( style.before ) {
         buf += style.before.content;
      }
      // body
      switch( node.nodeType ) {
      case 1:
      case 11:
         node.childNodes.forEach( function( n ) {
            buf += compileNode( n, css )
         } );
         break;
         
      case 3:
         buf += node.data;
         break;
      }

      // after
      if( style.after ) {
         buf += style.after.content;
      }

      return buf;
   } else {
      return "";
   }
}

var texhss = hss.load( require.resolve( "./tex.hss" ), "tex" );
var mdhss = hss.load( require.resolve( "./markdown.hss" ) );
var doc = md.load( require.resolve( "./README.md" ) ).XML;

var n = doc.getElementById( "foo" );

console.log( "tex..." );
console.log( compileNode( doc, texhss ) );

console.log();

console.log( "markdown..." );
console.log( compileNode( doc, mdhss ) );

md/tex.hss

  content: "{\\em{";
}
em:after {
  content: "}}";
}

i:before {
  content: "{\\textit{";
}
i:after {
  content: "}}";
}

strong:before {
  content: "{\\textbf{";
}
strong:after {
  content: "}}";
}

tt:before,
code:before {
  content: "{\\texttt{";
}
tt:after,
code:after {
  content: "}}";
}
q:before {
  content: "``";
}
q:after {
  content: "''";
}

h1:before {
  content: "\n\n\\section{";
}
h2:before {
  content: "\n\n\\subsection{";
}
h3:before {
  content: "\n\n\\subsubsection{";
}
h4:before {
  content: "\n\n\\paragraph{";
}
h5:before {
  content: "\n\n\\subparagraph{";
}
h1:after, h2:after, h3:after, h4:after, h5:after {
  content: "}\n\n";
}

h1, h2, h3, h4 {
  font-size: inherit;
  margin-top: 0;
}

ul:before {
  content: "\n\n\\begin{itemize}\n\n";
}
ul:after {
  content: "\\end{itemize}\n";
}

ol:before {
  content: "\n\n\\begin{enumerate}\n\n";
}
ol:after {
  content: "\\end{enumerate}\n";
}

li:before {
  content: "\\item";
}
li:after {
  content: "\n";
}

pre, hoptex-prog {
  font-size: small;
}

hoptex-figure pre,
hoptex-figure hoptex-prog {
  margin: 0;
}

pre:before, hoptex-prog:before {
  content: "\\begin{flushleft}\n";
}

pre:after, hoptex-prog:after {
  content: "\\end{flushleft}\n";
}

hoptex-prog span.hoptex-prog-comment,
hoptex-prog span.hoptex-prog-line-comment {
  font-style: italic;
}

hoptex-prog span.hoptex-prog-line-comment {
  font-size: 80%;
}

}

md/markdown.hss

h3:after {
  content: "###\n\n";
}

h4:before {
  content: "\n\n#### ";
}

h4:after {
  content: "####\n\n";
}

strong:before, strong:after {
  content: "**";
}

strong strong:before, strong strong:after {
  content: "__";
}

em:before, em:after {
  content: "_";
}

em em:before, em em:after {
  content: "*";
}

blockquote:before {
  content: "\n\n> ";
}

code:before, code:after {
  content: "`";
}

Hop.js / hss

Table of Contents

Hss

Example

Functions

hss.parseWebColor( color )

hss.makeWebColor( red, green, blue )

hss.load( path )

hss.eval( path )

Example

A SubSubSection