style-mod

What is style-mod?

The style-mod npm package is a library for defining and managing CSS styles in JavaScript. It allows you to create, update, and manage styles dynamically, making it easier to handle CSS in a modular and programmatic way.

What are style-mod's main functionalities?

Creating Styles

This feature allows you to create a new style object with specified CSS properties. The example demonstrates creating a style with red text, blue background, and 10px padding.

const { Style } = require('style-mod');

const myStyle = new Style({
  color: 'red',
  backgroundColor: 'blue',
  padding: '10px'
});

console.log(myStyle);

Updating Styles

This feature allows you to update an existing style object with new CSS properties. The example shows updating the color to green and adding a 5px margin.

myStyle.update({
  color: 'green',
  margin: '5px'
});

console.log(myStyle);

Applying Styles to Elements

This feature allows you to apply the defined styles to a DOM element. The example demonstrates creating a div element, applying the style to it, and appending it to the document body.

const element = document.createElement('div');
myStyle.apply(element);
document.body.appendChild(element);

Other packages similar to style-mod

styled-components

styled-components is a popular library for styling React components using tagged template literals. It allows you to write actual CSS to style your components. Compared to style-mod, styled-components is more integrated with React and provides a more declarative approach to styling.

emotion

Emotion is a performant and flexible CSS-in-JS library. It allows you to style applications quickly with string or object styles. Emotion offers a similar feature set to style-mod but is more focused on performance and has better integration with React.

jss

JSS is a library for writing CSS in JavaScript with a focus on high performance and modularity. It provides a powerful API for defining and managing styles. Compared to style-mod, JSS offers more advanced features like theming and plugins.

README

style-mod

Minimal CSS module shim for generating CSS rules and anonymous class names for sets of style declarations and attaching such a set to a document or shadow root.

Using it would look something like this:

const {StyleModule} = require("style-mod")
const myModule = new StyleModule({
  main: {
    fontFamily: "Georgia, 'Nimbus Roman No9 L'",
    margin: "0"
  },
  callout: {
    color: "red",
    fontWeight: "bold",
    "&:hover": {color: "orange"}
  }
})
StyleModule.mount(document, myModule)
document.body.className = myModule.main

This code is open source, released under an MIT license.

Documentation

• StyleModule

Where the Style type is defined as:

• Style: Object< Style | string >
  A style is an object that, in the simple case, maps CSS property names to strings holding their values, as in {color: "red", fontWeight: "bold"}. The property names can be given in camel-case—the library will insert a dash before capital letters when converting them to CSS.

  If you include an underscore in a property name, it and everything after it will be removed from the output, which can be useful when providing a property multiple times, for browser compatibility reasons.

  A property in a style object can also be a sub-selector, which extends the current context to add a pseudo-selector or a child selector. Such a property should contain a & character, which will be replaced by the current selector. For example {"&:before": {content: '"hi"'}}. Sub-selectors and regular properties can freely be mixed in a given object. Any property containing a & is assumed to be a sub-selector.

  Finally, a property can specify an @-block to be wrapped around the styles defined inside the object that's the property's value. For example to create a media query you can do {"@media screen and (min-width: 400px)": {...}}.