1. to-style
Convert style objects to style strings
to-style
Package: to-style
Created by: radubrehar
Last modified: Mon, 27 Jun 2022 07:25:13 GMT
Version: 1.3.3
License: MIT
Downloads: 138,171
Repository: https://github.com/radubrehar/toStyle

Install

npm install to-style
yarn add to-style

toStyle

Converts style objects to strings. Can be used on node or in the browser.

Install

npm install to-style

Usage

 var toStyleString = require('to-style').string
var toStyleObject = require('to-style').object

toStyleString

 toStyleString({
    border: {
        width: 1,
        color: 'red'
    },
    padding: 4,
    margin: {
        top: 5
    }
}) == 'border-width: 1px; border-color: red; padding: 4px; margin-top: 5px;'

toStyleObject

 
toStyleObject({
    padding: {
        top: 3,
        bottom: 2
    },
    border: '1px solid red',
    margin: 4
}) // =>
/*
{
    'padding-top': '3px',
    'padding-bottom': '2px',
    'border': '1px solid red',
    'margin': '4px'
}
 */

You can also get your styles in camel-case, just pass a config object as a second argument to toStyleObject, with camelize: true

Example:

 toStyleObject({
    padding: {
        top: 10
    },
    'border-width': 20
}, { camelize: true})

/**
 *  {
 *      paddingTop: '10px',
 *      borderWidth: '20px'
 *  }
 */

Usage in browser

In browser, make sure you add dist/toStyle.js to your page. This exposes a global toStyle variable.

 var toStyleString = toStyle.string
var toStyleObject = toStyle.object

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin