You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

377 lines
10 KiB

  1. 'use strict';
  2. var _templateObject = _taggedTemplateLiteral(['\n .a-id {\n width: 1px;\n }\n '], ['\n .a-id {\n width: 1px;\n }\n ']);
  3. var _expect = require('expect.js');
  4. var _expect2 = _interopRequireDefault(_expect);
  5. var _jssExpand = require('jss-expand');
  6. var _jssExpand2 = _interopRequireDefault(_jssExpand);
  7. var _jss = require('jss');
  8. var _commonTags = require('common-tags');
  9. var _zenObservable = require('zen-observable');
  10. var _zenObservable2 = _interopRequireDefault(_zenObservable);
  11. var _index = require('./index');
  12. var _index2 = _interopRequireDefault(_index);
  13. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
  14. function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
  15. var settings = {
  16. createGenerateClassName: function createGenerateClassName() {
  17. return function (rule) {
  18. return rule.key + '-id';
  19. };
  20. }
  21. };
  22. describe('jss-default-unit', function () {
  23. var jss = void 0;
  24. beforeEach(function () {
  25. jss = (0, _jss.create)(settings).use((0, _index2['default'])({ 'min-width': 'pc' }));
  26. });
  27. describe('unitless values', function () {
  28. var sheet = void 0;
  29. beforeEach(function () {
  30. sheet = jss.createStyleSheet({
  31. a: {
  32. zoom: 1
  33. }
  34. });
  35. });
  36. it('should add rule', function () {
  37. (0, _expect2['default'])(sheet.getRule('a')).to.not.be(undefined);
  38. });
  39. it('should generate correct CSS', function () {
  40. (0, _expect2['default'])(sheet.toString()).to.be('.a-id {\n' + ' zoom: 1;\n' + '}');
  41. });
  42. });
  43. describe('values with px units', function () {
  44. var sheet = void 0;
  45. beforeEach(function () {
  46. sheet = jss.createStyleSheet({
  47. a: {
  48. width: 10
  49. }
  50. });
  51. });
  52. it('should add rule', function () {
  53. (0, _expect2['default'])(sheet.getRule('a')).to.not.be(undefined);
  54. });
  55. it('should generate correct CSS', function () {
  56. (0, _expect2['default'])(sheet.toString()).to.be('.a-id {\n' + ' width: 10px;\n' + '}');
  57. });
  58. });
  59. describe('values with ms units', function () {
  60. var sheet = void 0;
  61. beforeEach(function () {
  62. sheet = jss.createStyleSheet({
  63. a: {
  64. 'animation-duration': 200
  65. }
  66. });
  67. });
  68. it('should add rule', function () {
  69. (0, _expect2['default'])(sheet.getRule('a')).to.not.be(undefined);
  70. });
  71. it('should generate correct CSS', function () {
  72. (0, _expect2['default'])(sheet.toString()).to.be('.a-id {\n' + ' animation-duration: 200ms;\n' + '}');
  73. });
  74. });
  75. describe('values with % units', function () {
  76. var sheet = void 0;
  77. beforeEach(function () {
  78. sheet = jss.createStyleSheet({
  79. a: {
  80. 'transform-origin-x': 50
  81. }
  82. });
  83. });
  84. it('should add rule', function () {
  85. (0, _expect2['default'])(sheet.getRule('a')).to.not.be(undefined);
  86. });
  87. it('should generate correct CSS', function () {
  88. (0, _expect2['default'])(sheet.toString()).to.be('.a-id {\n' + ' transform-origin-x: 50%;\n' + '}');
  89. });
  90. });
  91. describe('leave non-regular rules unchanged', function () {
  92. var sheet = void 0;
  93. beforeEach(function () {
  94. sheet = jss.createStyleSheet({
  95. '@font-face': {
  96. 'font-family': 'MyHelvetica',
  97. src: 'local("Helvetica")'
  98. },
  99. '@media print': {
  100. a: {
  101. 'border-left': 1,
  102. border: 3
  103. }
  104. },
  105. '@keyframes id': {
  106. from: { top: 0 },
  107. '30%': { top: 30 },
  108. '60%, 70%': { top: 80 }
  109. }
  110. });
  111. });
  112. it('should generate correct CSS', function () {
  113. (0, _expect2['default'])(sheet.toString()).to.be('@font-face {\n' + ' font-family: MyHelvetica;\n' + ' src: local("Helvetica");\n' + '}\n' + '@media print {\n' + ' .a-id {\n' + ' border-left: 1px;\n' + ' border: 3px;\n' + ' }\n' + '}\n' + '@keyframes id {\n' + ' from {\n' + ' top: 0;\n' + ' }\n' + ' 30% {\n' + ' top: 30px;\n' + ' }\n' + ' 60%, 70% {\n' + ' top: 80px;\n' + ' }\n' + '}');
  114. });
  115. });
  116. describe('comma-separated values', function () {
  117. var sheet = void 0;
  118. beforeEach(function () {
  119. sheet = jss.createStyleSheet({
  120. a: {
  121. 'background-size': [10, 15]
  122. }
  123. });
  124. });
  125. it('should add rule', function () {
  126. (0, _expect2['default'])(sheet.getRule('a')).to.not.be(undefined);
  127. });
  128. it('should generate correct CSS', function () {
  129. (0, _expect2['default'])(sheet.toString()).to.be('.a-id {\n' + ' background-size: 10px, 15px;\n' + '}');
  130. });
  131. });
  132. describe('comma-separated values', function () {
  133. var sheet = void 0;
  134. beforeEach(function () {
  135. sheet = jss.createStyleSheet({
  136. a: {
  137. 'background-size': [[10, 5]]
  138. }
  139. });
  140. });
  141. it('should add rule', function () {
  142. (0, _expect2['default'])(sheet.getRule('a')).to.not.be(undefined);
  143. });
  144. it('should generate correct CSS', function () {
  145. (0, _expect2['default'])(sheet.toString()).to.be('.a-id {\n' + ' background-size: 10px 5px;\n' + '}');
  146. });
  147. });
  148. describe('customized units via options object', function () {
  149. var sheet = void 0;
  150. beforeEach(function () {
  151. sheet = jss.createStyleSheet({
  152. a: {
  153. 'min-width': 20
  154. }
  155. });
  156. });
  157. it('should add rule', function () {
  158. (0, _expect2['default'])(sheet.getRule('a')).to.not.be(undefined);
  159. });
  160. it('should generate correct CSS', function () {
  161. (0, _expect2['default'])(sheet.toString()).to.be('.a-id {\n' + ' min-width: 20pc;\n' + '}');
  162. });
  163. });
  164. describe('ignore falsy values', function () {
  165. var sheet = void 0;
  166. beforeEach(function () {
  167. sheet = jss.createStyleSheet({
  168. a: {
  169. padding: 10,
  170. margin: null
  171. }
  172. });
  173. });
  174. it('should add rule', function () {
  175. (0, _expect2['default'])(sheet.getRule('a')).to.not.be(undefined);
  176. });
  177. it('should generate correct CSS', function () {
  178. (0, _expect2['default'])(sheet.toString()).to.be('.a-id {\n' + ' padding: 10px;\n' + '}');
  179. });
  180. });
  181. describe('add default units to fallbacks', function () {
  182. var sheet = void 0;
  183. beforeEach(function () {
  184. var localJss = (0, _jss.create)(settings).use((0, _index2['default'])());
  185. sheet = localJss.createStyleSheet({
  186. a: {
  187. padding: 1,
  188. fallbacks: {
  189. padding: 5
  190. }
  191. },
  192. b: {
  193. padding: 1,
  194. fallbacks: [{ padding: 5 }, { padding: 10 }]
  195. }
  196. });
  197. });
  198. it('should add rule', function () {
  199. (0, _expect2['default'])(sheet.getRule('a')).to.not.be(undefined);
  200. (0, _expect2['default'])(sheet.getRule('b')).to.not.be(undefined);
  201. });
  202. it('should generate correct CSS', function () {
  203. (0, _expect2['default'])(sheet.toString()).to.be('.a-id {\n' + ' padding: 5px;\n' + ' padding: 1px;\n' + '}\n' + '.b-id {\n' + ' padding: 5px;\n' + ' padding: 10px;\n' + ' padding: 1px;\n' + '}');
  204. });
  205. });
  206. describe('add default units in combination with expand plugin', function () {
  207. var sheet = void 0;
  208. beforeEach(function () {
  209. var localJss = (0, _jss.create)(settings).use((0, _index2['default'])({ 'padding-top': 'rem' }), (0, _jssExpand2['default'])());
  210. sheet = localJss.createStyleSheet({
  211. a: {
  212. padding: {
  213. top: 5,
  214. left: 0,
  215. right: 10,
  216. bottom: 15
  217. }
  218. }
  219. });
  220. });
  221. it('should add rule', function () {
  222. (0, _expect2['default'])(sheet.getRule('a')).to.not.be(undefined);
  223. });
  224. it('should generate correct CSS', function () {
  225. (0, _expect2['default'])(sheet.toString()).to.be('.a-id {\n' + ' padding: 5rem 10px 15px 0;\n' + '}');
  226. });
  227. });
  228. describe('add default units in combination with expand plugin (objects inside arrays)', function () {
  229. var sheet = void 0;
  230. beforeEach(function () {
  231. var localJss = (0, _jss.create)(settings).use((0, _index2['default'])(), (0, _jssExpand2['default'])());
  232. sheet = localJss.createStyleSheet({
  233. a: {
  234. transition: [{
  235. timingFunction: 'linear',
  236. delay: 100,
  237. property: 'opacity',
  238. duration: 200
  239. }, {
  240. timingFunction: 'linear',
  241. property: 'transform',
  242. duration: 300
  243. }]
  244. }
  245. });
  246. });
  247. it('should add rule', function () {
  248. (0, _expect2['default'])(sheet.getRule('a')).to.not.be(undefined);
  249. });
  250. it('should generate correct CSS', function () {
  251. (0, _expect2['default'])(sheet.toString()).to.be('.a-id {\n' + ' transition: opacity 200ms linear 100ms, transform 300ms linear;\n' + '}');
  252. });
  253. });
  254. describe('support camel cased units', function () {
  255. it('should work with default units', function () {
  256. var sheet = jss.createStyleSheet({
  257. a: {
  258. borderBottom: 10
  259. }
  260. });
  261. (0, _expect2['default'])(sheet.toString()).to.be('.a-id {\n' + ' borderBottom: 10px;\n' + '}');
  262. });
  263. it('should work with user units', function () {
  264. var localJss = (0, _jss.create)(settings).use((0, _index2['default'])({ borderBottom: 'pc' }));
  265. var sheet = localJss.createStyleSheet({
  266. a: {
  267. borderBottom: 10
  268. }
  269. });
  270. (0, _expect2['default'])(sheet.toString()).to.be('.a-id {\n' + ' borderBottom: 10pc;\n' + '}');
  271. });
  272. });
  273. describe('support function values', function () {
  274. var sheet = void 0;
  275. beforeEach(function () {
  276. sheet = jss.createStyleSheet({
  277. a: {
  278. width: function width() {
  279. return 1;
  280. }
  281. }
  282. });
  283. sheet.update();
  284. });
  285. it('should add default unit', function () {
  286. (0, _expect2['default'])(sheet.toString()).to.be((0, _commonTags.stripIndent)(_templateObject));
  287. });
  288. });
  289. describe('support observable values', function () {
  290. var sheet = void 0;
  291. beforeEach(function () {
  292. sheet = jss.createStyleSheet({
  293. a: {
  294. width: new _zenObservable2['default'](function (observer) {
  295. observer.next(1);
  296. })
  297. }
  298. });
  299. });
  300. it('should add default unit', function () {
  301. (0, _expect2['default'])(sheet.toString()).to.be((0, _commonTags.stripIndent)(_templateObject));
  302. });
  303. });
  304. });