v1.0.0

Initial Release

v1.0.0 (2024-09-24)

🎉 Highlights

This is the first release of the react-style-stringify package.
It provides utility functions to convert CSS objects into string representations, making it easier to work with styles in React projects and beyond.

✨ Key Features

Converts a CSSProperties object into a CSS string.
Converts a Record<string, CSSProperties> map into a CSS string.
Automatically adds units (e.g., px) to numeric CSS properties when necessary.
Allows injecting !important for all properties.
Supports both CommonJS and ESModules.

📦 Installation

npm install react-style-stringify

or

yarn add react-style-stringify

☝️ Note: You need to install @types/react if you're using TypeScript without React.

🚀 Usage

Import utils:

import {
  stringifyCSSProperties,
  stringifyStyleMap,
} from "react-style-stringify";

Convert a single CSSProperties object:

const cssString = stringifyCSSProperties({
  flex: 1,
  padding: 20,
  backgroundColor: "teal",
});
// Output: "flex:1; padding:20px; background-color:teal;"

Convert a Record<string, CSSProperties> object:

const cssMapString = stringifyStyleMap({
  p: {
    margin: 0,
    color: "teal",
  },
  "#root ul.my-list > li": {
    padding: 10,
  },
});
// Output: "p{margin:0; color:teal;} #root ul.my-list > li{padding:10px;}"

Inject !important into CSS string:

const cssString = stringifyCSSProperties(
  {
    flex: 1,
    padding: 20,
    backgroundColor: "teal",
  },
  true
);
// Output: "flex:1!important; padding:20px!important; background-color:teal!important;"

const cssMapString = stringifyStyleMap(
  {
    p: {
      margin: 0,
      color: "teal",
    },
    "#root ul.my-list > li": {
      padding: 10,
    },
  },
  true
);
// Output: "p{margin:0!important; color:teal!important;} #root ul.my-list > li{padding:10px!important;}"

🛠️ Supported Environments

React / TypeScript (with @types/react for CSSProperties type support)
Vanilla JavaScript

---

💡Feel free to contribute by submitting Pull Requests and Issues.