Styleshow NPM | npm.io

styleshow

CSS to html, boot up a html page to show your css styles.

e.g. testing/editing css without booting your app. keeping a styles/layouts list for reference.

Currently, it's still in development, with limited features.

It currently supports:

Regular css properties, e.g. color: black;
However, limited selectors, e.g. .selector, input.selector, .selector1.selector2
@import syntax (with postcss-import)
@extend syntax (with postcss-extend)
Nested declaration (with postcss-nested)
Use of props declaration
- setting el.textContent with props.content
- adding <script /> tag with props.javascript
Auto reload page on file changes

Usage

NPM install

$ npm install styleshow

Example: Styleshow what's in show.css

$ styleshow show.css

How it works

It parses your .css entry file, boot up a browserSync server, then render as html page with ReactJS components accordingly.

Using `props`

Using props declaration, it allows you to set the props in your html/react component.

Example

show.css

/* supports @import with postcss-import */
@import '../../build/styles/application.css';
@import '../../build/styles/custom.css';

/* Put what you want to show */
.tabs{

	/* supports @extend with postcss-extend */
	@extend .container;
	
  	ul.nav.nav-tabs{
  	
  		/* loading javascript */
  		props: '{"javascript": "http://localhost:3000/tab.js"}';
  		
  		/* dummy class name .-- to differentiate multiple element with same selector */
      	li.--1{ 
          	a{
              	props: '{"content": "Tab 1", "href": "#"}';
          	}
      	}
      	li.--2{
          	a.checked{
              	props: '{"content": "Tab 2", "href": "#"}';
          	}
      	}
      	li.--3{
          	a.done{
              	props: '{"content": "Tab 2", "href": "#"}';
          	}
      	}
  	}
}

screenshot

Example