1.3.3 • Published 10 years ago

to-style v1.3.3

Weekly downloads
46,361
License
MIT
Repository
github
Last release
10 years ago

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
mircoai-guiscratch-gui-freerange@infinitebrahmanuniverse/nolb-to-glitchyscratch-guiblockzie-guisvelte-element-uivue-highlight-textweui-mpvuewhiteboard-toolbarscratch-guisuny-gui@cybergenios/scratch-gui@draft-js-plugins/emoji@rpdobson123/draft-js-emoji-plugined-vue-tools-v3itch-scratch-guiiotx-oler-playerscratch-gui-astrotowneditor-guitooltip-enhancetooltip@api.stream/studio-kit@aitodotai/mdx-js-mdx@bill-doc/doc-theme-gatsby@bufferapp/draft-js-emoji-plugin@bseblu/draft-js-plugins-emoji@datatiger/draft-js-emoji-plugin@davidsemakula/draft-js-emoji-pluginwawu-scratch-gui@parallel-line/components@hapticsynaptic/braceletmaker-gui@magoo/spectacle@naytev/draft-js-emoji-plugin@expri/exprijs@mnemonicorg/gatsby-theme-archive-site@kjack/gatsby-theme-archive-site@ray-js/recycle-list@ray-js/lamp-percent-slider@ray-js/lamp-touch-slider@ray-js/lamp-vertical-percent-slider@ray-js/lamp-vertical-touch-slider@ray-js/components-ty-slider@raspberrypifoundation/scratch-gui@pie-lib/chart-toolbox@pie-lib/pie-toolbox@pie-lib/editable-html@pie-lib/mask-markup@o/gqless-loggermpuiminecraft-storeys-scratch-guiopenblock-guiscalez-guiscratch-arduino-guiscratch-gui-cntscratch-gui-groundhogscratch-gui-liaoscratch-gui-okagvscratch-gui-pearupscratchhw-guirobopro-guireact-layout-viewsryanmcclure4-draft-js-emoji-pluginsemantix-uireact-native-responsive-queryprefixed-virtual-elementpool-scratch-guipragmatic-viewshan-scratch-guigitbook-plugin-http-verbgovin-guilegendary-octo-waddle-emojiimagic-virtual-elementkulbot-gui@wii/slate@tunoltd/draft-js-emoji-plugin@tinia/tdx@stevefan1999/spectacle@stream7/draft-js-emoji-plugin@sugarshin/draft-js-emoji-plugin@team-monolith/scratch-guialife-iotx-oler-playeraaccurso-spectacleakid-guiaddon-draft-js-emoji-pluginclipcc-guicodevider-scratch-guicostumejsdebug-popup-logdchart-counterdeku-material-svg-iconscss-out-jsdelightmom-scratch-guibill-doc-theme-gatsbyawm-template-coredraft-js-paste-variable-plugindraft-js-emoji-plugindraft-js-emoji-plugin-depsdraft-js-emoji-plugin-khawerdraft-js-emoji-plugin-with-spritesdraft-js-emojione-plugin
1.3.3

10 years ago

1.3.2

10 years ago

1.3.1

11 years ago

1.3.0

11 years ago

1.2.0

11 years ago

1.1.0

11 years ago

1.0.2

11 years ago

1.0.1

11 years ago

1.0.0

11 years ago