styled-components/lib/test/css.test.js

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

'use strict';

var _templateObject = _taggedTemplateLiteral(['\n      transition: opacity 0.3s;\n    '], ['\n      transition: opacity 0.3s;\n    ']),
    _templateObject2 = _taggedTemplateLiteral(['\n      --custom-prop: some-val;\n    '], ['\n      --custom-prop: some-val;\n    ']);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _enzyme = require('enzyme');

var _utils = require('./utils');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var styled = void 0;

describe('css features', function () {
  beforeEach(function () {
    styled = (0, _utils.resetStyled)();
  });

  it('should add vendor prefixes in the right order', function () {
    var Comp = styled.div(_templateObject);
    (0, _enzyme.shallow)(_react2.default.createElement(Comp, null));
    (0, _utils.expectCSSMatches)('.a { -ms-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; }');
  });

  it('should pass through custom properties', function () {
    var Comp = styled.div(_templateObject2);
    (0, _enzyme.shallow)(_react2.default.createElement(Comp, null));
    (0, _utils.expectCSSMatches)('.a { --custom-prop: some-val; }');
  });
});