node package manager
Painless code sharing. npm Orgs help your team discover, share, and reuse code. Create a free org »

styleshow

styleshow Build Status npm version

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

License

See LICENSE