Add Sass mixin

ausi · Jun 10, 2017 · 6a55536 · 6a55536
1 parent 3195b27
commit 6a55536
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 0 deletions.
diff --git a/mixins.scss b/mixins.scss
@@ -0,0 +1,51 @@
+@mixin cq-prolyfill($query) {
+	&#{cq-prolyfill($query)} {
+		@content;
+	}
+}
+
+@function cq-prolyfill($query) {
+	@return unquote(".\\:container\\(" + cq-prolyfill-escape(cq-prolyfill-strip-spaces(to-lower-case($query))) + "\\)");
+}
+
+@function cq-prolyfill-add-backslash($string, $search) {
+	$index: str-index($string, $search);
+	@while $index {
+		$string: str-insert($string, '\\', $index);
+		$newIndex: if(
+			str-length($string) < $index + 2,
+			null,
+			str-index(str-slice($string, $index + 2), $search)
+		);
+		$index: if($newIndex, $index + 1 + $newIndex, null);
+	}
+	@return $string;
+}
+
+@function cq-prolyfill-remove($string, $search) {
+	$index: str-index($string, $search);
+	@while $index {
+		$string: str-slice($string, 1, $index - 1) + str-slice($string, $index + 1);
+		$index: str-index($string, $search);
+	}
+	@return $string;
+}
+
+@function cq-prolyfill-escape($string) {
+	@each $char in '[' ']' '!' '"' '#' '$' '%' '&' "'" '(' ')' '*' '+' ',' '.' '/' ':' ';' '<' '=' '>' '?' '@' '^' '`' '{' '|' '}' '~' {
+		$string: cq-prolyfill-add-backslash($string, $char);
+	}
+	@return $string;
+}
+
+@function cq-prolyfill-strip-spaces($string) {
+	// tab, line feed, carriage return and space
+	$chars: "\9\a\d\20";
+	@for $i from 1 through str-length($chars) {
+		$string: cq-prolyfill-remove(
+			$string,
+			str-slice($chars, $i, $i)
+		);
+	}
+	@return $string;
+}
diff --git a/package.json b/package.json
@@ -53,6 +53,7 @@
 		"coveralls": "^2.11.4",
 		"eslint": "^1.10.3",
 		"istanbul": "^0.4.1",
+		"node-sass": "^3.4.2",
 		"node-zopfli": "^1.4.0",
 		"qunit-phantomjs-runner": "^2.1.0",
 		"qunitjs": "^1.18.0",

diff --git a/postcss-tests.js b/postcss-tests.js
@@ -2,6 +2,7 @@
 /*eslint-disable no-process-exit,strict*/
 
 var postcssPlugin = require('./postcss-plugin');
+var sass = require('node-sass');
 
 var data = {
 	':container( MIN-WIDTH : 100.00px )': '.\\:container\\(min-width\\:100\\.00px\\)',
@@ -11,14 +12,69 @@ var data = {
 	':container( " width <= 100.00px")': '.\\:container\\(width\\<\\=100\\.00px\\)',
 };
 
+var dataScss = {
+	'.foo#{cq-prolyfill("width >= 100.00px")} { color: red }': '.foo.\\:container\\(width\\>\\=100\\.00px\\){color:red}',
+	'.foo { @include cq-prolyfill("width >= 100.00px") { color: red } }': '.foo.\\:container\\(width\\>\\=100\\.00px\\){color:red}',
+	'@function container($query) { @return cq-prolyfill($query) } .foo#{container("width >= 100.00px")} { color: red }': '.foo.\\:container\\(width\\>\\=100\\.00px\\){color:red}',
+	'@mixin container($query) { @include cq-prolyfill($query) { @content } } .foo { @include container("width >= 100.00px") { color: red } }': '.foo.\\:container\\(width\\>\\=100\\.00px\\){color:red}',
+};
+
+var dataSass = {
+	'.foo#{cq-prolyfill("width >= 100.00px")}\n\tcolor: red': '.foo.\\:container\\(width\\>\\=100\\.00px\\){color:red}',
+	'.foo\n\t+cq-prolyfill("width >= 100.00px")\n\t\tcolor: red': '.foo.\\:container\\(width\\>\\=100\\.00px\\){color:red}',
+	'@function container($query)\n\t@return cq-prolyfill($query)\n.foo#{container("width >= 100.00px")}\n\tcolor: red': '.foo.\\:container\\(width\\>\\=100\\.00px\\){color:red}',
+	'=container($query)\n\t+cq-prolyfill($query)\n\t\t@content\n.foo\n\t+container("width >= 100.00px")\n\t\tcolor: red': '.foo.\\:container\\(width\\>\\=100\\.00px\\){color:red}',
+};
+
 var failed = [];
 
 Object.keys(data).forEach(function(selector) {
+
 	var expected = data[selector] + '{}';
 	var processed = postcssPlugin.process(selector + '{}').css;
 	if (processed !== expected) {
 		failed.push('Failed that "' + processed + '" equals "' + expected + '"');
 	}
+
+	expected = data[selector] + '{color:red}';
+	selector = '@import "mixins.scss"; ' + selector.replace(/:container\(\s*"*([^)]*?)"*\s*\)/g, '#{cq-prolyfill("$1")}') + '{color:red}';
+	processed = (sass.renderSync({
+		data: selector,
+		outputStyle: 'compressed',
+	}).css + '').trim();
+	if (processed !== expected) {
+		failed.push('Failed that "' + processed + '" equals "' + expected + '"');
+	}
+
+});
+
+Object.keys(dataScss).forEach(function(css) {
+
+	var expected = dataScss[css];
+	css = '@import "mixins.scss"; ' + css;
+	processed = (sass.renderSync({
+		data: css,
+		outputStyle: 'compressed',
+	}).css + '').trim();
+	if (processed !== expected) {
+		failed.push('Failed that "' + processed + '" equals "' + expected + '"');
+	}
+
+});
+
+Object.keys(dataSass).forEach(function(css) {
+
+	var expected = dataSass[css];
+	css = '@import "mixins.scss"\n' + css;
+	processed = (sass.renderSync({
+		data: css,
+		indentedSyntax: true,
+		outputStyle: 'compressed',
+	}).css + '').trim();
+	if (processed !== expected) {
+		failed.push('Failed that "' + processed + '" equals "' + expected + '"');
+	}
+
 });
 
 if (failed.length) {