CSS.stringify()

Issues Closed issues Pull Requests Closed Pull Requests Contributors

'CSS.stringify()' supports to transform CSS Document to JSON style.

This project is based on cssparser.js(Project on github, Project site).

Thanks to JSONEditor for using great Source/JSON Editor at this demo.

Results

/* Sample at-rule CSS @CSSTricks.com [1]
 *
 * [1] https://css-tricks.com/the-at-rules-of-css/
 */
@charset "UTF-8";

@import 'global.css';

/* Namespace for XHTML */
@namespace url(http://www.w3.org/1999/xhtml);

/* Namespace for SVG embedded in XHTML */
@namespace svg url(http://www.w3.org/2000/svg);

@document 
  /* Rules for a specific page */
  url(http://css-tricks.com/),
  
  /* Rules for pages with a URL that begin with... */
  url-prefix(http://css-tricks.com/snippets/),
  
  /* Rules for any page hosted on a domain */
  domain(css-tricks.com),

/* Rules for all secure pages */
  regexp("https:.*")
{
  /* Start styling */
  body { font-family: Comic Sans; }
}

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

@keyframes pulse {
  0% {
    background-color: #001f3f;
  }
  end {
    background-color: #ff4136;
  }
}

/* iPhone in Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

.module { width: 100%; }

}

@media print {

}

@page :first {
  margin: 1in;
}

/* Check one supported condition */
@supports (display: flex) {
  .module { display: flex; }
}

/* Check multiple conditions */
@supports (display: flex) and (-webkit-appearance: checkbox) {
  .module { display: flex; }
}

npm downloads in the last month npm total downloads