This is a package designed to assist with common problems and allow for stylus to be parsed into a json format for validation purposes. It makes it easy to identify attributes and style headers aswell as fix some common issues when dealing with stylization
###Install (for command line)
npm install -g stylus-help
(for using in code)
npm install stylus-help
Functions for command line
stylus-help normalizeZvalues <path to stylus dir or file>, [value to normalize on defaults to 10]
stylus-help inspectZValues <path to stylus dir or file>
stylus-help convertStyleToJson <path to stylus dir or file> (note need to > to json write to console)
stylus-help checkAlphabetized <path to stylus dir or file>
stylus-help simple_lint <path to stylus dir or file>
Functions as a npm package (same returns)
stylus_help = require 'stylus-help'
data = stylus_help.processData 'normalizeZvalues', [directory/file]
data = stylus_help.processData 'inspectZValues', [directory/file]
data = stylus_help.processData 'convertStyleToJson', [directory/file]
data = stylus_help.processData 'checkAlphabetized', [directory/file]
data = stylus_help.processData 'simple_lint', [directory/file, optional_config_data]Takes a directory (not recursive) and goes through and normalizes z-index across the files... It automatically uses a buffer of 10 between z-index values. You can manually specify a buffer if you want to only have a space of 3,4 between values
sample call
stylus-help normalizeZvalues testing/
Before Execution
[test.styl]
div
z-index 99
a
z-index 12
.panda
.test
z-index 2
[test2.styl]
div
z-index 1
.apple
z-index 25
After Execution
[test.styl]
div
z-index 41
a
z-index 21
.panda
.test
z-index 11
[test2.styl]
div
z-index 1
.apple
z-index 31Returns a json structure showing the ordering of z indexes
sample call
stylus-help inspectZValues testing/
Return sample.. This shows the z-index in order and the files they are used in
{
"1": [
"testing/test2.styl"
],
"11": [
"testing/test.styl"
],
"21": [
"testing/test.styl"
],
"31": [
"testing/test2.styl"
],
"41": [
"testing/test.styl"
]
}Returns a json structure with a true or false and a line number showing where the non alphabetized attribute starts
sample call
stylus-help checkAlphabetized testing/test.styl
Sample File
.left
div
z-index 41
display block
position relative
left 50px
div
right 100px
position absolute
a
z-index 21
margin-left 2px
.panda
.test
z-index 11
Return sample for a non alphabetized file
{
"alphabetized": false,
"infractions": [
{
"line_number": 3,
"file_name": "testing/test.styl"
},
{
"line_number": 8,
"file_name": "testing/test.styl"
},
{
"line_number": 11,
"file_name": "testing/test.styl"
}
]
}Returns a json structure with a true or false and a line number showing where the non alphabetized attribute starts
sample call
stylus-help alphabetizeStyle testing/test.styl
Sample File
underline()
&:not(.signup):not(.background)
box-sizing border-box
border-bottom 4px solid rgba($color, 0)
cursor pointer
padding 0px 5px
&:hover
background rgba($frame_background_color, .4)
border-bottom 4px solid $color
.exports.region
border-top 1px solid $background_color
bottom 0
box-shadow 0px 0px 20px rgba(0, 0, 0, .4)
color $footer_text_color
height unit($footer_height, 'px')
font-family $title_font
left 0
position fixed
right 0
text-align center
transition all .2s ease-in
z-index 16
.newsletter.custom_text > a
i, span
color $footer_text_color
div, a , iframe
margin-left 10px
Json Conversion Note the space_check is exactly how many spaces to write if you want to modify and line is where the attributes start. line-1 is the style header
{
"../testing/test.styl": {
"3": {
"indent": 4,
"rules": [
"box-sizing border-box",
"border-bottom 4px solid rgba($color, 0)",
"cursor pointer",
"padding 0px 5px"
],
"tag": "&:not(.signup):not(.background)"
},
"9": {
"indent": 6,
"rules": [
"background rgba($frame_background_color, .4)",
"border-bottom 4px solid $color"
],
"tag": "&:not(.signup):not(.background) &:hover"
},
"12": {
"indent": 2,
"rules": [
"border-top 1px solid $background_color",
"bottom 0",
"box-shadow 0px 0px 20px rgba(0, 0, 0, .4)",
"color $footer_text_color",
"height unit($footer_height, 'px')",
"font-family $title_font",
"left 0",
"position fixed",
"right 0",
"text-align center",
"transition all .2s ease-in",
"z-index 16"
],
"tag": ".exports.region"
},
"26": {
"indent": 6,
"rules": [
"color $footer_text_color"
],
"tag": ".exports.region .newsletter.custom_text > a i, .exports.region .newsletter.custom_text > a span"
}
}
}This utilized the existing functions in this package to do a basic lint on the stylus file.
A sample call using the plugin
stylus-help simple_lint <path to stylus dir or file>
this by default will run every check, however if you use this plugin yourself you can specify a config file with what to check for
{
"bad_space_check": "Bad spacing! should me a multiple of 2 spaces",
"comment_space": "// must have a space after",
"star_selector": "* is HORRIBLE performance please use a different selector",
"zero_px": "Don't need px on 0 values",
"no_colon_semicolon": "No ; or : in stylus file!",
"comma_space": ", must have a space after",
"alphabetize_check": "This area needs to be alphabetized",
"dupe_tag_check": "Duplicate tags found.. please consolidate"
}call sample looks like this
data = {
bad_space_check: 'Bad spacing! should me a multiple of 2 spaces' #
comment_space: '// must have a space after' #
star_selector: '* is HORRIBLE performance please use a different selector'
zero_px: 'Don\'t need px on 0 values' #
no_colon_semicolon: 'No ; or : in stylus file!' #
comma_space: ', must have a space after' #
alphabetize_check: 'This area needs to be alphabetized'
style_attribute_check: 'Invalid Attribute!'
}
stylus_help.processData 'simple_lint', [directory/file, data], (data) ->
JSON.stringify(data,null)
The above call executed on the below file
underline()
&:not(.signup):not(.background)
box-sizing border-box
border-bottom 4px solid rgba($color, 0)
cursor pointer
overflow panda
padding 0px 5px
&:hover
background rgba($frame_background_color, .4)
border-bottom 4px solid $color
.exports.region
border-top 1px solid $background_color
bottom 0
box-shadow 0px 0px 20px rgba(0, 0, 0, .4)
color $footer_text_color
height unit($footer_height, 'px')
font-family $title_font
left 0
position fixed
right 0
text-align center
transition all .2s ease-in
z-index 16
.newsletter.custom_text > a
i, span
color $footer_text_color
div, a , iframe
margin-left 10px
gives this output..
[
{
"message": "Don't need px on 0 values",
"line": " padding 0px 5px",
"line_num": 7
},
{
"message": "Don't need px on 0 values",
"line": " box-shadow 0px 0px 20px rgba(0, 0, 0, .4)",
"line_num": 15
},
{
"message": "Invalid Attribute!",
"line": "overflow panda",
"line_num": 6
},
{
"message": "This area needs to be alphabetized",
"line": "border-bottom 4px solid rgba($color, 0)",
"line_num": "3"
},
{
"message": "This area needs to be alphabetized",
"line": "border-top 1px solid $background_color",
"line_num": "13"
}
]
####style_attribute_check makes use of a JSON file to validate common key/value mixups