Dss-js NPM | npm.io

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>`;

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.