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.
props
Using Using props
declaration, it allows you to set the props in your html/react component.
Example
show.css
/* supports @import with postcss-import */ /* Put what you want to show */ /* supports @extend with postcss-extend */ /* loading javascript */ /* dummy class name .-- to differentiate multiple element with same selector */ } } } } } } }}
screenshot
License
See LICENSE