Add an unstable_subtitute option that replaces all literal expressions with a sass-like dummy value

Author: bartlangelaan

substitute-javascript.js

@@ -0,0 +1,71 @@
+'use strict';
+
+const literalsKey = Symbol('Literals');
+const replacementsKey = Symbol('Replaced properties');
+
+function addSubstitution(item, key, literals) {
+	item[replacementsKey] = item[replacementsKey] || [];
+
+	literals.forEach((literal) => {
+		const position = item[key].indexOf(literal);
+
+		if (position !== -1) {
+			const substitution = '$dummyValue' + position;
+
+			item[replacementsKey].push({
+				key,
+				original: literal,
+				substitution,
+			});
+
+			item[key] = item[key].replace(literal, substitution);
+		}
+	});
+}
+
+exports.addSubstitutions = (node, css, opts) => {
+	if (typeof node.walk !== 'function') return;
+
+	if (css && opts) {
+		const offset = opts.quasis[0].start;
+
+		node[literalsKey] = [];
+
+		opts.expressions.forEach(({ start, end }) => {
+			node[literalsKey].push('${' + css.substring(start - offset, end - offset) + '}');
+		});
+	}
+
+	if (!node[literalsKey]) return;
+
+	node.walk((item) => {
+		if (item.type === 'atrule') {
+			addSubstitution(item, 'name', node[literalsKey]);
+			addSubstitution(item, 'params', node[literalsKey]);
+		} else if (item.type === 'rule') {
+			addSubstitution(item, 'selector', node[literalsKey]);
+		} else if (item.type === 'decl') {
+			addSubstitution(item, 'prop', node[literalsKey]);
+			addSubstitution(item, 'value', node[literalsKey]);
+		}
+	});
+};
+
+exports.removeSubstitutions = (node) => {
+	if (typeof node.walk !== 'function') return;
+
+	node.walk((item) => {
+		if (!item[replacementsKey]) {
+			return;
+		}
+
+		item[replacementsKey].forEach((replacement) => {
+			item[replacement.key] = item[replacement.key].replace(
+				replacement.substitution,
+				replacement.original,
+			);
+		});
+
+		delete item[replacementsKey];
+	});
+};

template-parse.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const Input = require('postcss/lib/input');
+const substitutions = require('./substitute-javascript');
 const TemplateParser = require('./template-parser');
 
 function templateParse(css, opts) {
@@ -13,6 +14,11 @@ function templateParse(css, opts) {
 
 	parser.parse();
 
+	if (opts.syntax.config.unstable_substitute) {
+		parser.root.unstable_substitute = true;
+		substitutions.addSubstitutions(parser.root, css, opts);
+	}
+
 	return parser.root;
 }
 

template-safe-parse.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const Input = require('postcss/lib/input');
+const substitutions = require('./substitute-javascript');
 const TemplateSafeParser = require('./template-safe-parser');
 
 function templateSafeParse(css, opts) {
@@ -13,6 +14,11 @@ function templateSafeParse(css, opts) {
 
 	parser.parse();
 
+	if (opts.syntax.config.unstable_substitute) {
+		parser.root.unstable_substitute = true;
+		substitutions.addSubstitutions(parser.root, css, opts);
+	}
+
 	return parser.root;
 }
 

template-stringify.js

@@ -1,9 +1,18 @@
 'use strict';
 
+const substitutions = require('./substitute-javascript');
 const TemplateStringifier = require('./template-stringifier');
 
 module.exports = function TemplateStringify(node, builder) {
+	if (node.unstable_substitute) {
+		substitutions.removeSubstitutions(node);
+	}
+
 	const str = new TemplateStringifier(builder);
 
 	str.stringify(node);
+
+	if (node.unstable_substitute) {
+		substitutions.addSubstitutions(node);
+	}
 };

test/styled-components.js

@@ -323,4 +323,60 @@ describe('styled-components', () => {
 		expect(document.source).toHaveProperty('lang', 'jsx');
 		expect(document.nodes).toHaveLength(3);
 	});
+
+	it('re-writes various stuff to substitutes', () => {
+		const code = `
+			import styled from 'styled-components';
+
+			const C = styled.div\`
+				@media (min-width: \${t => t.test}) {
+					color: \${p => p.width};
+					\${prop}: green;
+					background-\${prop}: green;
+					\${decl};
+				}
+			\`;
+		`;
+
+		const document = syntax({ unstable_substitute: true }).parse(code);
+
+		expect(document.source).toHaveProperty('lang', 'jsx');
+
+		expect(document.nodes).toHaveLength(1);
+
+		expect(document).toMatchObject({
+			nodes: [
+				{
+					nodes: [
+						{
+							type: 'atrule',
+							params: '(min-width: $dummyValue12)',
+							nodes: [
+								{
+									type: 'decl',
+									prop: 'color',
+									value: '$dummyValue0',
+								},
+								{
+									type: 'decl',
+									prop: '$dummyValue0',
+									value: 'green',
+								},
+								{
+									type: 'decl',
+									prop: 'background-$dummyValue11',
+									value: 'green',
+								},
+								{
+									type: 'literal',
+								},
+							],
+						},
+					],
+				},
+			],
+		});
+
+		expect(document.toString()).toBe(code);
+	});
 });