@torgeircook/cssjson NPM

CSS-JSON Converter for JavaScript

Table of Contents generated with DocToc

About

CSS-JSON Converter for JavaScript
Converts CSS to JSON and back.
Version 3.0.0

Released under the MIT license.

Installation

NPM

npm install cssjson

Usage

JavaScript / Typescript

import { toCSS, toJSON } from 'cssjson';

// To JSON
const json = toJSON(cssString);

// To CSS
const css = toCSS(jsonObject);

npm run / CLI

To use CSSJSON from your command-line interface or with npm scripts there is cssjson-cli.

$ cssjson input_file [--to-css] [--output|-o output_file]

Sample

See src/__tests__/toCSSandJSON.spec.ts

JSON

{
  "children": {
    "@media (max-width: 800px)": {
      "children": {
        "#main #comments": {
          "children": {},
          "attributes": {
            "margin": "0px",
            "width": "auto",
            "background": "red"
          }
        },
        "#main #buttons": {
          "children": {},
          "attributes": {
            "padding": "5px 10px",
            "color": "blue"
          }
        }
      },
      "attributes": {}
    },
    "#main #content": {
      "children": {},
      "attributes": {
        "margin": "0 7.6%",
        "width": "auto"
      }
    },
    "#nav-below": {
      "children": {},
      "attributes": {
        "border-bottom": "1px solid #ddd",
        "margin-bottom": "1.625em",
        "background-image": "url(http://www.example.com/images/im.jpg)"
      }
    }
  },
  "attributes": {}
}

CSS

@media (max-width: 800px) {
  #main #comments {
    margin: 0px;
    width: auto;
    background: red;
  }
  #main #buttons {
    padding: 5px 10px;
    color: blue;
  }
}
#main #content {
  margin: 0 7.6%;
  width: auto;
}
#nav-below {
  border-bottom: 1px solid #ddd;
  margin-bottom: 1.625em;
  background-image: url(http://www.example.com/images/im.jpg);
}

css json json to css json to css converter

acorn-globals acorn acorn-walk acorn-jsx abab ansi-colors ajv accepts ajv-keywords ansi-escapes ansi-regex ajv-errors ansi-styles anymatch arr-flatten argparse arr-union ansi-html arr-diff array-union array-unique array-flatten array-uniq asn1 array-back astral-regex assign-symbols assert-plus async async-each async-limiter aws-sign2 atob asynckit babel-jest babel-preset-current-node-syntax aws4 babel-plugin-istanbul balanced-match babel-plugin-jest-hoist base babel-preset-jest big.js bonjour binary-extensions bcrypt-pbkdf batch body-parser brace-expansion browser-process-hrtime braces browserslist bser bytes bs-logger buffer-indexof cache-base buffer-from callsites call-bind camelcase caniuse-lite chalk char-regex caseless ci-info chokidar chrome-trace-event class-utils capture-exit cjs-module-lexer co collection-visit color-name colorette color-convert command-line-usage cliui collect-v8-coverage combined-stream connect-history-api-fallback component-emitter compressible content-disposition commander concat-map compression content-type cookie convert-source-map cross-spawn cookie-signature copy-descriptor core-util-is cssom dashdash cssstyle data-urls decimal.js decode-uri-component debug decamelize deep-equal deep-extend deep-is del deepmerge define-property delayed-stream default-gateway depd define-properties detect-newline detect-node dir-glob destroy dns-equal dns-txt diff-sequences doctrine domexception dns-packet electron-to-chromium emittery ecc-jsbn ee-first emoji-regex emojis-list enquirer end-of-stream encodeurl envinfo errno enhanced-resolve escalade error-ex es-to-primitive es-abstract escape-html eslint-scope escodegen eslint-utils eslint-visitor-keys escape-string-regexp espree esrecurse estraverse esquery etag esutils events eventemitter3 eventsource exec-sh expand-brackets esprima exit express execa extend expect extend-shallow extglob extsprintf fast-glob fast-levenshtein fast-deep-equal fast-json-stable-stringify fastq fill-range file-entry-cache fb-watchman faye-websocket finalhandler find-up flatted flat-cache follow-redirects forever-agent form-data for-in fs.realpath fragment-cache forwarded fresh function-bind functional-red-black-tree get-caller-file get-intrinsic get-stream gensync glob get-package-type get-value getpass globby globals glob-parent glob-to-regexp graceful-fs har-schema has-flag handle-thing growly has-values has-symbols has hosted-git-info har-validator has-value hpack.js html-encoding-sniffer html-escaper html-entities http-errors http-proxy http-deceiver http-proxy-middleware iconv-lite human-signals ignore import-fresh imurmurhash http-signature import-local inherits inflight interpret ip-regex internal-ip ipaddr.js ip is-absolute-url is-arguments is-accessor-descriptor is-arrayish is-binary-path is-callable is-buffer is-data-descriptor is-ci is-date-object is-core-module is-docker is-generator-fn is-glob is-descriptor is-fullwidth-code-point is-extendable is-extglob is-number is-plain-object is-potential-custom-element-name is-path-cwd is-path-in-cwd is-typedarray is-stream is-path-inside is-regex isarray is-windows is-symbol isstream is-wsl isexe isobject istanbul-lib-report istanbul-lib-instrument istanbul-lib-coverage istanbul-lib-source-maps jest-config istanbul-reports jest-changed-files jest-each jest-diff jest-docblock jest-environment-jsdom jest-haste-map jest-get-type jest-jasmine2 jest-message-util jest-matcher-utils jest-environment-node jest-pnp-resolver jest-leak-detector jest-mock jest-regex-util jest-resolve-dependencies jest-resolve jest-runner jest-runtime jest-util jest-snapshot jest-watcher jest-worker jest-serializer jest-validate jsbn jsdom json-parse-better-errors js-tokens js-yaml json-schema json-stable-stringify-without-jsonify jsesc json-parse-even-better-errors json-stringify-safe json-schema-traverse json5 kind-of jsprim kleur killable json3 loader-runner levn leven lines-and-columns locate-path loader-utils lodash.sortby lodash.memoize make-error lodash makeerror lru-cache loglevel make-dir map-cache merge-descriptors map-visit media-typer memory-fs merge2 merge-stream methods mime-db mime minimalistic-assert micromatch mimic-fn minimatch mime-types minimist multicast-dns mixin-deep natural-compare mkdirp ms multicast-dns-service-types nanomatch neo-async nice-try node-forge negotiator node-releases node-modules-regexp node-int64 npm-run-path node-notifier nwsapi normalize-package-data oauth-sign object-inspect normalize-path object-copy object-is object-visit object.assign object-keys obuf object.pick on-headers object-assign on-finished onetime opn optionator once original p-each-series p-finally p-map p-locate p-limit p-retry parseurl parse-json path-exists p-try parent-module pascalcase parse5 path-to-regexp path-dirname path-is-absolute path-is-inside path-parse path-type path-key performance-now pify pirates picomatch pkg-dir pinkie pinkie-promise portfinder pretty-format process-nextick-args prelude-ls progress posix-character-classes proxy-addr psl prompts prr qs punycode pump querystringify querystring randombytes read-pkg range-parser react-is read-pkg-up raw-body rechoir readable-stream readdirp regex-not regexpp repeat-element request-promise-core remove-trailing-separator reduce-flatten request request-promise-native require-directory resolve require-main-filename retry resolve-cwd requires-port resolve-from regexp.prototype.flags ret resolve-url run-parallel reusify safer-buffer safe-regex safe-buffer rsvp repeat-string rimraf sane schema-utils saxes semver select-hose selfsigned send serialize-javascript serve-index set-blocking shebang-command set-value shebang-regex signal-exit serve-static setprototypeof sisteransi shellwords slice-ansi snapdragon slash snapdragon-util snapdragon-node sockjs sockjs-client source-map source-list-map source-map-url source-map-resolve spdx-expression-parse source-map-support spdx-correct spdx-license-ids spdx-exceptions sprintf-js sshpk split-string spdy-transport stack-utils spdy static-extend string-length string.prototype.trimstart string-width statuses stealthy-require string.prototype.trimend string_decoder strip-eof strip-ansi strip-bom strip-final-newline strip-json-comments supports-hyperlinks supports-color symbol-tree tapable terser-webpack-plugin table table-layout terminal-link text-table terser test-exclude throat thunky to-fast-properties to-object-path to-regex to-regex-range tmpl tough-cookie tr46 toidentifier tweetnacl tunnel-agent type-detect type-check type-is type-fest tslib typedarray-to-buffer tsutils union-value unpipe unset-value typical upath uri-js urix url url-parse uuid utils-merge util-deprecate use validate-npm-package-license vary v8-to-istanbul verror v8-compile-cache w3c-xmlserializer wbuf watchpack webpack-dev-middleware webidl-conversions walker w3c-hr-time webpack-sources webpack-merge whatwg-url webpack-log websocket-driver whatwg-encoding word-wrap which whatwg-mimetype websocket-extensions wordwrapjs which-module wrappy write-file-atomic xml-name-validator wrap-ansi ws xmlchars yargs y18n yocto-queue yargs-parser yallist

@everything-registry/sub-chunk-927

3.0.0

2 years ago