1 | # Stylus-help
|
2 |
|
3 | 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
|
4 |
|
5 | Install
|
6 | npm install -g stylus-help
|
7 |
|
8 | Functions for command line
|
9 | ```
|
10 | stylus-help normalizeZvalues <path to stylus dir or file>, [value to normalize on defaults to 10]
|
11 | stylus-help inspectZValues <path to stylus dir or file>
|
12 | stylus-help convertStyleToJson <path to stylus dir or file> (note need to > to json write to console)
|
13 | stylus-help checkAlphabetized <path to stylus dir or file>
|
14 | stylus-help alphabetizeStyle <path to stylus dir or file>
|
15 | ```
|
16 | Functions as a npm package (same returns)<coffeescript>
|
17 | ```coffeescript
|
18 | stylus_help = require 'stylus-help'
|
19 |
|
20 | stylus_help.processData 'normalizeZvalues', [filename1,filename2], (data) ->
|
21 | stylus_help.processData 'inspectZValues', [filename1,filename2], (data) ->
|
22 | stylus_help.processData 'convertStyleToJson', [filename1,filename2], (data) ->
|
23 | stylus_help.processData 'checkAlphabetized', [filename1,filename2], (data) ->
|
24 | stylus_help.processData 'alphabetizeStyle', [filename1,filename2], (data) ->
|
25 | ```
|
26 | ### normalizeZvalues
|
27 | 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
|
28 |
|
29 | sample call
|
30 | ```
|
31 | stylus-help normalizeZvalues testing/
|
32 | ```
|
33 | Before Execution
|
34 | ```
|
35 | [test.styl]
|
36 | div
|
37 | z-index 99
|
38 | a
|
39 | z-index 12
|
40 | .panda
|
41 | .test
|
42 | z-index 2
|
43 | ```
|
44 | ```
|
45 | [test2.styl]
|
46 | div
|
47 | z-index 1
|
48 | .apple
|
49 | z-index 25
|
50 | ```
|
51 | After Execution
|
52 | ```styl
|
53 | [test.styl]
|
54 | div
|
55 | z-index 41
|
56 | a
|
57 | z-index 21
|
58 | .panda
|
59 | .test
|
60 | z-index 11
|
61 | [test2.styl]
|
62 | div
|
63 | z-index 1
|
64 | .apple
|
65 | z-index 31
|
66 | ```
|
67 |
|
68 | ### inspectZValues
|
69 | Returns a json structure showing the ordering of z indexes
|
70 |
|
71 | sample call
|
72 | ```
|
73 | stylus-help inspectZValues testing/
|
74 | ```
|
75 |
|
76 | Return sample.. This shows the z-index in order and the files they are used in
|
77 | ```json
|
78 | {
|
79 | "1": [
|
80 | "testing/test2.styl"
|
81 | ],
|
82 | "11": [
|
83 | "testing/test.styl"
|
84 | ],
|
85 | "21": [
|
86 | "testing/test.styl"
|
87 | ],
|
88 | "31": [
|
89 | "testing/test2.styl"
|
90 | ],
|
91 | "41": [
|
92 | "testing/test.styl"
|
93 | ]
|
94 | }
|
95 | ```
|
96 | ### checkAlphabetized
|
97 | Returns a json structure with a true or false and a line number showing where the non alphabetized attribute starts
|
98 |
|
99 | sample call
|
100 | ```
|
101 | stylus-help checkAlphabetized testing/test.styl
|
102 | ```
|
103 |
|
104 | Sample File
|
105 | ```
|
106 | .left
|
107 | div
|
108 | z-index 41
|
109 | display block
|
110 | position relative
|
111 | left 50px
|
112 | div
|
113 | right 100px
|
114 | position absolute
|
115 | a
|
116 | z-index 21
|
117 | margin-left 2px
|
118 | .panda
|
119 | .test
|
120 | z-index 11
|
121 |
|
122 | ```
|
123 |
|
124 |
|
125 | Return sample for a non alphabetized file
|
126 | ```json
|
127 | {
|
128 | "alphabetized": false,
|
129 | "infractions": [
|
130 | {
|
131 | "line_number": 3,
|
132 | "file_name": "testing/test.styl"
|
133 | },
|
134 | {
|
135 | "line_number": 8,
|
136 | "file_name": "testing/test.styl"
|
137 | },
|
138 | {
|
139 | "line_number": 11,
|
140 | "file_name": "testing/test.styl"
|
141 | }
|
142 | ]
|
143 | }
|
144 | ```
|
145 |
|
146 | ### alphabetizeStyle
|
147 | Returns a json structure with a true or false and a line number showing where the non alphabetized attribute starts
|
148 |
|
149 | sample call
|
150 | ```
|
151 | stylus-help alphabetizeStyle testing/test.styl
|
152 | ```
|
153 |
|
154 | Sample File
|
155 | ```
|
156 | .left
|
157 | div
|
158 | z-index 41
|
159 | display block
|
160 | position relative
|
161 | left 50px
|
162 | div
|
163 | right 100px
|
164 | position absolute
|
165 | a
|
166 | z-index 21
|
167 | margin-left 2px
|
168 | .panda
|
169 | .test
|
170 | z-index 11
|
171 |
|
172 | ```
|
173 |
|
174 |
|
175 | Modifications after execution
|
176 | ```
|
177 | .left
|
178 | div
|
179 | display block
|
180 | left 50px
|
181 | position relative
|
182 | z-index 41
|
183 | div
|
184 | position absolute
|
185 | right 100px
|
186 | a
|
187 | margin-left 2px
|
188 | z-index 21
|
189 | .panda
|
190 | .test
|
191 | z-index 11
|
192 |
|
193 | ```
|
194 |
|
195 | ### convertStyleToJson
|
196 | Returns a json structure with a true or false and a line number showing where the non alphabetized attribute starts
|
197 |
|
198 | sample call
|
199 | ```
|
200 | stylus-help alphabetizeStyle testing/test.styl
|
201 | ```
|
202 |
|
203 | Sample File
|
204 | ```
|
205 | underline()
|
206 | &:not(.signup):not(.background)
|
207 | box-sizing border-box
|
208 | border-bottom 4px solid rgba($color, 0)
|
209 | cursor pointer
|
210 | padding 0px 5px
|
211 | &:hover
|
212 | background rgba($frame_background_color, .4)
|
213 | border-bottom 4px solid $color
|
214 |
|
215 | .exports.region
|
216 | border-top 1px solid $background_color
|
217 | bottom 0
|
218 | box-shadow 0px 0px 20px rgba(0, 0, 0, .4)
|
219 | color $footer_text_color
|
220 | height unit($footer_height, 'px')
|
221 | font-family $title_font
|
222 | left 0
|
223 | position fixed
|
224 | right 0
|
225 | text-align center
|
226 | transition all .2s ease-in
|
227 | z-index 16
|
228 | .newsletter.custom_text > a
|
229 | i, span
|
230 | color $footer_text_color
|
231 | div, a , iframe
|
232 | margin-left 10px
|
233 |
|
234 |
|
235 | ```
|
236 | 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
|
237 | ```json
|
238 | {
|
239 | "testing/test.styl": {
|
240 | "&:not(.signup):not(.background)": {
|
241 | "space_check": 4,
|
242 | "attributes": [
|
243 | "box-sizing border-box",
|
244 | "border-bottom 4px solid rgba($color, 0)",
|
245 | "cursor pointer",
|
246 | "padding 0px 5px"
|
247 | ],
|
248 | "line": 3
|
249 | },
|
250 | "&:not(.signup):not(.background) &:hover": {
|
251 | "space_check": 6,
|
252 | "attributes": [
|
253 | "background rgba($frame_background_color, .4)",
|
254 | "border-bottom 4px solid $color"
|
255 | ],
|
256 | "line": 8
|
257 | },
|
258 | ".exports.region": {
|
259 | "space_check": 2,
|
260 | "attributes": [
|
261 | "border-top 1px solid $background_color",
|
262 | "bottom 0",
|
263 | "box-shadow 0px 0px 20px rgba(0, 0, 0, .4)",
|
264 | "color $footer_text_color",
|
265 | "height unit($footer_height, 'px')",
|
266 | "font-family $title_font",
|
267 | "left 0",
|
268 | "position fixed",
|
269 | "right 0",
|
270 | "text-align center",
|
271 | "transition all .2s ease-in",
|
272 | "z-index 16"
|
273 | ],
|
274 | "line": 12
|
275 | },
|
276 | ".exports.region .newsletter.custom_text > a i, .exports.region .newsletter.custom_text > a span": {
|
277 | "space_check": 6,
|
278 | "attributes": [
|
279 | "color $footer_text_color"
|
280 | ],
|
281 | "line": 26
|
282 | },
|
283 | ".exports.region .newsletter.custom_text > a i div, .exports.region .newsletter.custom_text > a i a, .exports.region .newsletter.custom_text > a i iframe, .exports.region .newsletter.custom_text > a span div, .exports.region .newsletter.custom_text > a span a, .exports.region .newsletter.custom_text > a span iframe": {
|
284 | "space_check": 8,
|
285 | "attributes": [
|
286 | "margin-left 10px"
|
287 | ],
|
288 | "line": 28
|
289 | }
|
290 | }
|
291 | }
|
292 |
|
293 | ```
|
294 |
|
295 |
|
296 |
|
297 |
|
298 |
|
\ | No newline at end of file |