css.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. exports.test_data = {
  2. default_options: [
  3. { name: "indent_size", value: "1" },
  4. { name: "indent_char", value: "'\\t'" },
  5. { name: "selector_separator_newline", value: "true" },
  6. { name: "end_with_newline", value: "false" },
  7. { name: "newline_between_rules", value: "false"},
  8. ],
  9. groups: [{
  10. name: "End With Newline",
  11. description: "",
  12. matrix: [
  13. {
  14. options: [
  15. { name: "end_with_newline", value: "true" }
  16. ],
  17. eof: '\\n'
  18. }, {
  19. options: [
  20. { name: "end_with_newline", value: "false" }
  21. ],
  22. eof: ''
  23. }
  24. ],
  25. tests: [
  26. { fragment: true, input: '', output: '{{eof}}' },
  27. { fragment: true, input: ' .tabs{}', output: ' .tabs {}{{eof}}' },
  28. { fragment: true, input: ' \n\n.tabs{}\n\n\n\n', output: ' .tabs {}{{eof}}' },
  29. { fragment: true, input: '\n', output: '{{eof}}' }
  30. ],
  31. }, {
  32. name: "Empty braces",
  33. description: "",
  34. tests: [
  35. { input: '.tabs{}', output: '.tabs {}' },
  36. { input: '.tabs { }', output: '.tabs {}' },
  37. { input: '.tabs { }', output: '.tabs {}' },
  38. // When we support preserving newlines this will need to change
  39. { input: '.tabs \n{\n \n }', output: '.tabs {}' }
  40. ],
  41. }, {
  42. name: "",
  43. description: "",
  44. tests: [
  45. {
  46. input: '#cboxOverlay {\n\tbackground: url(images/overlay.png) repeat 0 0;\n\topacity: 0.9;\n\tfilter: alpha(opacity = 90);\n}',
  47. output: '#cboxOverlay {\n\tbackground: url(images/overlay.png) repeat 0 0;\n\topacity: 0.9;\n\tfilter: alpha(opacity=90);\n}'
  48. },
  49. ],
  50. }, {
  51. name: 'Selector Separator',
  52. description: '',
  53. matrix: [
  54. {
  55. options: [
  56. { name: 'selector_separator_newline', value: 'false' },
  57. { name: 'selector_separator', value: '" "' }
  58. ],
  59. separator: ' ',
  60. separator1: ' '
  61. }, {
  62. options: [
  63. { name: 'selector_separator_newline', value: 'false' },
  64. { name: 'selector_separator', value: '" "' }
  65. ],
  66. // BUG: #713
  67. separator: ' ',
  68. separator1: ' '
  69. }, {
  70. options: [
  71. { name: 'selector_separator_newline', value: 'true' },
  72. { name: 'selector_separator', value: '" "' }
  73. ],
  74. separator: '\\n',
  75. separator1: '\\n\\t'
  76. }, {
  77. options: [
  78. { name: 'selector_separator_newline', value: 'true' },
  79. { name: 'selector_separator', value: '" "' }
  80. ],
  81. separator: '\\n',
  82. separator1: '\\n\\t'
  83. }
  84. ],
  85. tests: [
  86. { input: '#bla, #foo{color:green}', output: '#bla,{{separator}}#foo {\n\tcolor: green\n}'},
  87. { input: '@media print {.tab{}}', output: '@media print {\n\t.tab {}\n}'},
  88. { input: '@media print {.tab,.bat{}}', output: '@media print {\n\t.tab,{{separator1}}.bat {}\n}'},
  89. { input: '#bla, #foo{color:black}', output: '#bla,{{separator}}#foo {\n\tcolor: black\n}'},
  90. { input: 'a:first-child,a:first-child{color:red;div:first-child,div:hover{color:black;}}',
  91. output: 'a:first-child,{{separator}}a:first-child {\n\tcolor: red;\n\tdiv:first-child,{{separator1}}div:hover {\n\t\tcolor: black;\n\t}\n}'}
  92. ]
  93. }, {
  94. name: "Newline Between Rules",
  95. description: "",
  96. matrix: [
  97. {
  98. options: [
  99. { name: "newline_between_rules", value: "true" }
  100. ],
  101. separator: '\\n'
  102. }, {
  103. options: [
  104. { name: "newline_between_rules", value: "false" }
  105. ],
  106. separator: ''
  107. }
  108. ],
  109. tests: [
  110. { input: '.div {}\n.span {}', output: '.div {}\n{{separator}}.span {}'},
  111. { input: '.div{}\n \n.span{}', output: '.div {}\n{{separator}}.span {}'},
  112. { input: '.div {} \n \n.span { } \n', output: '.div {}\n{{separator}}.span {}'},
  113. { input: '.div {\n \n} \n .span {\n } ', output: '.div {}\n{{separator}}.span {}'},
  114. { input: '.selector1 {\n\tmargin: 0; /* This is a comment including an url http://domain.com/path/to/file.ext */\n}\n.div{height:15px;}', output: '.selector1 {\n\tmargin: 0;\n\t/* This is a comment including an url http://domain.com/path/to/file.ext */\n}\n{{separator}}.div {\n\theight: 15px;\n}'},
  115. { input: '.tabs{width:10px;//end of line comment\nheight:10px;//another\n}\n.div{height:15px;}', output: '.tabs {\n\twidth: 10px; //end of line comment\n\theight: 10px; //another\n}\n{{separator}}.div {\n\theight: 15px;\n}'},
  116. { input: '#foo {\n\tbackground-image: url(foo@2x.png);\n\t@font-face {\n\t\tfont-family: "Bitstream Vera Serif Bold";\n\t\tsrc: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");\n\t}\n}\n.div{height:15px;}', output: '#foo {\n\tbackground-image: url(foo@2x.png);\n\t@font-face {\n\t\tfont-family: "Bitstream Vera Serif Bold";\n\t\tsrc: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");\n\t}\n}\n{{separator}}.div {\n\theight: 15px;\n}'},
  117. { input: '@media screen {\n\t#foo:hover {\n\t\tbackground-image: url(foo@2x.png);\n\t}\n\t@font-face {\n\t\tfont-family: "Bitstream Vera Serif Bold";\n\t\tsrc: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");\n\t}\n}\n.div{height:15px;}', output: '@media screen {\n\t#foo:hover {\n\t\tbackground-image: url(foo@2x.png);\n\t}\n\t@font-face {\n\t\tfont-family: "Bitstream Vera Serif Bold";\n\t\tsrc: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");\n\t}\n}\n{{separator}}.div {\n\theight: 15px;\n}'},
  118. { input: '@font-face {\n\tfont-family: "Bitstream Vera Serif Bold";\n\tsrc: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");\n}\n@media screen {\n\t#foo:hover {\n\t\tbackground-image: url(foo.png);\n\t}\n\t@media screen and (min-device-pixel-ratio: 2) {\n\t\t@font-face {\n\t\t\tfont-family: "Helvetica Neue"\n\t\t}\n\t\t#foo:hover {\n\t\t\tbackground-image: url(foo@2x.png);\n\t\t}\n\t}\n}', output: '@font-face {\n\tfont-family: "Bitstream Vera Serif Bold";\n\tsrc: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");\n}\n{{separator}}@media screen {\n\t#foo:hover {\n\t\tbackground-image: url(foo.png);\n\t}\n\t@media screen and (min-device-pixel-ratio: 2) {\n\t\t@font-face {\n\t\t\tfont-family: "Helvetica Neue"\n\t\t}\n\t\t#foo:hover {\n\t\t\tbackground-image: url(foo@2x.png);\n\t\t}\n\t}\n}'},
  119. { input: 'a:first-child{color:red;div:first-child{color:black;}}\n.div{height:15px;}', output: 'a:first-child {\n\tcolor: red;\n\tdiv:first-child {\n\t\tcolor: black;\n\t}\n}\n{{separator}}.div {\n\theight: 15px;\n}'},
  120. { input: 'a:first-child{color:red;div:not(.peq){color:black;}}\n.div{height:15px;}', output: 'a:first-child {\n\tcolor: red;\n\tdiv:not(.peq) {\n\t\tcolor: black;\n\t}\n}\n{{separator}}.div {\n\theight: 15px;\n}'},
  121. ],
  122. }, {
  123. name: "Functions braces",
  124. description: "",
  125. tests: [
  126. { input: '.tabs(){}', output: '.tabs() {}' },
  127. { input: '.tabs (){}', output: '.tabs () {}' },
  128. { input: '.tabs (pa, pa(1,2)), .cols { }', output: '.tabs (pa, pa(1, 2)),\n.cols {}' },
  129. { input: '.tabs(pa, pa(1,2)), .cols { }', output: '.tabs(pa, pa(1, 2)),\n.cols {}' },
  130. { input: '.tabs ( ) { }', output: '.tabs () {}' },
  131. { input: '.tabs( ) { }', output: '.tabs() {}' },
  132. { input: '.tabs (t, t2) \n{\n key: val(p1 ,p2); \n }', output: '.tabs (t, t2) {\n\tkey: val(p1, p2);\n}' },
  133. { input: '.box-shadow(@shadow: 0 1px 3px rgba(0, 0, 0, .25)) {\n\t-webkit-box-shadow: @shadow;\n\t-moz-box-shadow: @shadow;\n\tbox-shadow: @shadow;\n}' }
  134. ],
  135. }, {
  136. name: "Comments",
  137. description: "",
  138. tests: [
  139. { unchanged: '/* test */' },
  140. { input: '.tabs{/* test */}', output: '.tabs {\n\t/* test */\n}' },
  141. { input: '.tabs{/* test */}', output: '.tabs {\n\t/* test */\n}' },
  142. { input: '/* header */.tabs {}', output: '/* header */\n\n.tabs {}' },
  143. { input: '.tabs {\n/* non-header */\nwidth:10px;}', output: '.tabs {\n\t/* non-header */\n\twidth: 10px;\n}' },
  144. { unchanged: '/* header' },
  145. { unchanged: '// comment' },
  146. { input: '.selector1 {\n\tmargin: 0; /* This is a comment including an url http://domain.com/path/to/file.ext */\n}',
  147. output: '.selector1 {\n\tmargin: 0;\n\t/* This is a comment including an url http://domain.com/path/to/file.ext */\n}'},
  148. { comment: "single line comment support (less/sass)",
  149. input:'.tabs{\n// comment\nwidth:10px;\n}', output: '.tabs {\n\t// comment\n\twidth: 10px;\n}' },
  150. { input: '.tabs{// comment\nwidth:10px;\n}', output: '.tabs {\n\t// comment\n\twidth: 10px;\n}' },
  151. { input: '//comment\n.tabs{width:10px;}', output: '//comment\n.tabs {\n\twidth: 10px;\n}' },
  152. { input: '.tabs{//comment\n//2nd single line comment\nwidth:10px;}', output: '.tabs {\n\t//comment\n\t//2nd single line comment\n\twidth: 10px;\n}' },
  153. { input: '.tabs{width:10px;//end of line comment\n}', output: '.tabs {\n\twidth: 10px; //end of line comment\n}' },
  154. { input: '.tabs{width:10px;//end of line comment\nheight:10px;}', output: '.tabs {\n\twidth: 10px; //end of line comment\n\theight: 10px;\n}' },
  155. { input: '.tabs{width:10px;//end of line comment\nheight:10px;//another\n}', output: '.tabs {\n\twidth: 10px; //end of line comment\n\theight: 10px; //another\n}' }
  156. ],
  157. }, {
  158. name: "Psuedo-classes vs Variables",
  159. description: "",
  160. tests: [
  161. { unchanged: '@page :first {}' },
  162. { comment: "Assume the colon goes with the @name. If we're in LESS, this is required regardless of the at-string.",
  163. input: '@page:first {}',
  164. output: '@page: first {}' },
  165. { unchanged: '@page: first {}' }
  166. ],
  167. }, {
  168. name: "SASS/SCSS",
  169. description: "",
  170. tests: [
  171. { comment: "Basic Interpolation",
  172. unchanged: 'p {\n\t$font-size: 12px;\n\t$line-height: 30px;\n\tfont: #{$font-size}/#{$line-height};\n}'},
  173. { unchanged: 'p.#{$name} {}' },
  174. { unchanged: [
  175. '@mixin itemPropertiesCoverItem($items, $margin) {',
  176. '\twidth: calc((100% - ((#{$items} - 1) * #{$margin}rem)) / #{$items});',
  177. '\tmargin: 1.6rem #{$margin}rem 1.6rem 0;',
  178. '}'
  179. ]}
  180. ],
  181. }, {
  182. }]
  183. }