DSS-JS

A simple, barebones ~~CSS-in-JS~~ CSS library.

DSS creates actual .css files and adds almost 0 javascript to your bundle.

Usage

DSS runs during the build stages, instead of using a plugin, all you have to do is call 2 functions and get your files ready.

webpack.config.js

const dssJS = require("dss-js");
const css = require("./css-as-a-js-object.js");
dssJS.evaluate(css, "./path/to/generate/your.css"); //now it is your/your bundler's job to import this css file.
dssJS.getGlueCode("./css-data.js");

Now you can use these by importing className properties from ./css-data.js

example:

import { yourClassName } from "./css-data.js";
document.body.innerHTML = `<div class="${yourClassName}">Styled Div</div>`;

OR

import { yourClassName } from "./css-data.js";
render(<div className={yourClassName}>Styled Div</div>, document.body);

Syntax

DSS expects a simple javascript object. 3 supported keys are kvStyles, prefixedStyles and stringStyles

kvStyles

These are the simplest, Key-Value pairs of classname and css (camel-case preferred). (all property names are minified) example:

module.exports = {
  kvStyles: {
    center: { margin: "auto", textAlign: "center", marginTop: "50px" }
  }
};

output:

CSS

.kg {
  margin: auto;
  text-align: center;
  margin-top: 50px;
}

Glue code

export const center = "kg";

Note: These will only work on classname properties i.e Global css (like <button>) or other complex selectors (like button[dark='true']:not([disabled])) will not work. Use prefixedStyles for those

prefixedStyles

These support all other selectors including simple class based.

example:

module.exports = {
  prefixedStyles: [
    {
      key: { prefix: "", selector: "html", global: true }, //no minification if global:true
      props: { WebkitTapHighlightColor: "transparent" }
    },
    {
      key: { prefix: "#", selector: "app-root" },
      props: { textAlign: "center" }
    }
  ]
};

output:

CSS

html {
  -webkit-tap-highlight-color: transparent;
}
#_2g {
  text-align: center;
}

Glue code

export const appRoot = "_2g";
// notice no glue code generated for global names and kebab-case became camelCase

stringStyles

These styles are simply added to your css, no modification or glue code generated as DSS does not support keyframe properties (yet), they should go here.

Apps Using DSS:

Crypt - A client side file enryption client using web workers

repo: https://github.com/Hydrophobefireman/cryptex