[css lib] - style-so-lit - opensource - help would be awesome

npm i -g style-so-lit
npm link style-so-lit
or
<script src='//unpkg.com/style-so-lit@0.0.9/dist/css.min.js'> </script>

This CSS is LIT! :fire:

Hey all,

So i'm here to announce something to make your life a LOT easier if you prefer writing in either javascript or typescript and being able to construct elements which you can later reuse in other projects.

I could also do with your feedback on usability, and use cases, drop me a message, or feel free to clone the repo and work on it yourself.

I'll start by showing you some code (note this is in Typescript but is pretty much the exact same as the ES6/7 versions - latest - of javascript.

import { css, j2css } from 'style-so-lit'; 
class MyElement {
/*
 * create the rest of your element with any lib of your choice\
 * and set a global theme potentially a user selected one.
 */
 
public giveItSomeStyle() {
  const myCss : css = css`.myelement { 
     background-color: ^themebg^; 
     color: ^themefg^;
   }`
   let myVars =  [
     new j2css('themebg',<string>global.theme.background),
     new j2css('themefg', <string>global.theme.font.color)
  ];
  return (myCss.mount(myVars) !== undefined) ? 0 : -1;
  }
}

I'm sure some of you are familiar with the googleâ„¢ backed polymer-project and its latest developments lit-html and lit-element.

both of these are amazing libraries allowing you to create your own custom elements and attach them to the dom. One thing however was missing, css in the same, easy to use way that html is used in string literals (the ` characters).

So, while It took a bit of work (and frustration) I managed to get a working library created for my current project.
It's at version 0.0.9 so its still very much a work in progress but it's available on npm for use in projects with no planned breaking changes and many planned enhancements, (CSS-JS 2 way binding... whaaaaat!?) anyway hopefully this could be of some use to someone, its available now on:

  • npm - which includes the typescript .d.ts, js.map and original .ts files and will make it easier for you to navigate and use code hinting; by which I mean typedefs, enums (to be used later), constructors, etc - I didn't want to name any specific one such as intellisense™©$$$@microsoft because of trademarking and it will work no matter what system you use - these can then be packaged up with your project but I would recommend the next option for production ready work.
  • unpkg - to include in html files, you only need to do this once on the top level if you are using multiple custom elements or using a router, include the following file for the smallest library.. and when I say small take a quick look at the minified code https://unpkg.com/style-so-lit@latest/dist/css.min.js (for reference the build number at the time of writing is 0.0.9 which is available all the time here), I kinda forgot to remove the option of having debugging output on by default but that will be in my next release ASAP!.

Let me know where you want to see it and what you want the next features to be! I hope it helps!

TLDR;

SCROLL BACK TO THE TOP AND READ IT!!!! (Please?)