styleshow
v0.0.10
Published
CSS to html, generate html to show your css styles
Downloads
5
Readme
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
withprops.content
- adding
<script />
tag withprops.javascript
- setting
- 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
License
See LICENSE