patternplate-transform-styled-components/index.js

Serverside rendering for styled-components in patternplate

'use strict';

Object.defineProperty(exports, "__esModule", {
	value: true
});

var _requireUncached = require('require-uncached');

var _requireUncached2 = _interopRequireDefault(_requireUncached);

var _resolveFrom = require('resolve-from');

var _resolveFrom2 = _interopRequireDefault(_resolveFrom);

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

function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; } // @flow


exports.default = styledComponentsTransformFactory;


/** A patternplate File object with attaced meta data */
/*:: type MetaResource = {|
	id: string;
	content: string[];
	type: string;
	reference: boolean;
	pattern: string;
|};*/


/** Map of dependencies available to a file */
/*:: type File = {
	buffer: Buffer;
	path: string;
	pattern: {
		id: string;
		post?: Function[];
	};
	dependencies?: FileDependencies; // eslint-disable-line no-use-before-define
	meta?: {
		css?: MetaResource[]
	};
};*/
/*:: type FileDependencies = {
	[localName: string]: File;
};*/


function styledComponentsTransformFactory(application /*: Object*/) /*: Function*/ {
	return function () {
		var _ref = _asyncToGenerator(function* (file /*: File*/) /*: Promise<File>*/ {
			file.pattern.post = (file.pattern.post || []).concat(getCSS(file, application));
			return file;
		});

		return function (_x) {
			return _ref.apply(this, arguments);
		};
	}();
}

function getCSS(file, app) {
	return function () /*: void*/ {
		var styledPath = (0, _resolveFrom2.default)(process.cwd(), 'styled-components');
		var styled = (0, _requireUncached2.default)(styledPath); // eslint-disable-line flow-check/check, import/no-dynamic-require
		var result = styled.styleSheet.getCSS();
		styled.styleSheet.reset();

		app.resources = app.resources.filter(function (r) {
			return r.id !== `styled-components/${file.pattern.id}`;
		});

		app.resources.push({
			id: `styled-components/${file.pattern.id}`,
			pattern: file.pattern.id,
			type: 'css',
			reference: true,
			content: result
		});
	};
}
module.exports = exports['default'];