postcss-custom-properties more url tests

romainmenke · romainmenke · commit 9c09b7192452 · 2022-01-08T16:01:42.000+01:00
diff --git a/plugins/postcss-custom-properties/test/basic.css b/plugins/postcss-custom-properties/test/basic.css
@@ -15,8 +15,11 @@ html {
 	--shadow-color: rgb(255,0,0);
 	--shadow: 0 6px 14px 0 color(var(--shadow-color) a(.15));
 	--font-family: "Open Sans", sans-serif;
+	--url-1: url("/my/path");
+	--url-2: url('/my/path');
+	--url-3: url(/my/path);
+	--url-4: url(data:image/png;bm90LWFuZC1pbWFnZQ==);
 	color: var(--color);
-	--url: url("/my/path");
 }
 
 :root,
@@ -102,5 +105,23 @@ html {
 }
 
 .test--variable-with-url {
-	background: var(--url);
+	order: 1;
+	background: var(--url-1);
+}
+
+.test--variable-with-url {
+	order: 2;
+	background: var(--url-2);
+}
+
+
+.test--variable-with-url {
+	order: 3;
+	background: var(--url-3);
+}
+
+
+.test--variable-with-url {
+	order: 4;
+	background: var(--url-4);
 }
diff --git a/plugins/postcss-custom-properties/test/basic.expect.css b/plugins/postcss-custom-properties/test/basic.expect.css
@@ -15,9 +15,12 @@ html {
 	--shadow-color: rgb(255,0,0);
 	--shadow: 0 6px 14px 0 color(var(--shadow-color) a(.15));
 	--font-family: "Open Sans", sans-serif;
+	--url-1: url("/my/path");
+	--url-2: url('/my/path');
+	--url-3: url(/my/path);
+	--url-4: url(data:image/png;bm90LWFuZC1pbWFnZQ==);
 	color: rgb(255, 0, 0);
 	color: var(--color);
-	--url: url("/my/path");
 }
 
 :root,
@@ -117,6 +120,27 @@ html {
 }
 
 .test--variable-with-url {
+	order: 1;
 	background: url("/my/path");
-	background: var(--url);
+	background: var(--url-1);
+}
+
+.test--variable-with-url {
+	order: 2;
+	background: url('/my/path');
+	background: var(--url-2);
+}
+
+
+.test--variable-with-url {
+	order: 3;
+	background: url(/my/path);
+	background: var(--url-3);
+}
+
+
+.test--variable-with-url {
+	order: 4;
+	background: url(data:image/png;bm90LWFuZC1pbWFnZQ==);
+	background: var(--url-4);
 }
diff --git a/plugins/postcss-custom-properties/test/basic.import-is-empty.expect.css b/plugins/postcss-custom-properties/test/basic.import-is-empty.expect.css
@@ -15,9 +15,12 @@ html {
 	--shadow-color: rgb(255,0,0);
 	--shadow: 0 6px 14px 0 color(var(--shadow-color) a(.15));
 	--font-family: "Open Sans", sans-serif;
+	--url-1: url("/my/path");
+	--url-2: url('/my/path');
+	--url-3: url(/my/path);
+	--url-4: url(data:image/png;bm90LWFuZC1pbWFnZQ==);
 	color: rgb(255, 0, 0);
 	color: var(--color);
-	--url: url("/my/path");
 }
 
 :root,
@@ -117,6 +120,27 @@ html {
 }
 
 .test--variable-with-url {
+	order: 1;
 	background: url("/my/path");
-	background: var(--url);
+	background: var(--url-1);
+}
+
+.test--variable-with-url {
+	order: 2;
+	background: url('/my/path');
+	background: var(--url-2);
+}
+
+
+.test--variable-with-url {
+	order: 3;
+	background: url(/my/path);
+	background: var(--url-3);
+}
+
+
+.test--variable-with-url {
+	order: 4;
+	background: url(data:image/png;bm90LWFuZC1pbWFnZQ==);
+	background: var(--url-4);
 }
diff --git a/plugins/postcss-custom-properties/test/basic.import-override.expect.css b/plugins/postcss-custom-properties/test/basic.import-override.expect.css
@@ -77,5 +77,23 @@
 }
 
 .test--variable-with-url {
+	order: 1;
 	background: url("/my/path");
 }
+
+.test--variable-with-url {
+	order: 2;
+	background: url('/my/path');
+}
+
+
+.test--variable-with-url {
+	order: 3;
+	background: url(/my/path);
+}
+
+
+.test--variable-with-url {
+	order: 4;
+	background: url(data:image/png;bm90LWFuZC1pbWFnZQ==);
+}
diff --git a/plugins/postcss-custom-properties/test/basic.import.expect.css b/plugins/postcss-custom-properties/test/basic.import.expect.css
@@ -15,9 +15,12 @@ html {
 	--shadow-color: rgb(255,0,0);
 	--shadow: 0 6px 14px 0 color(var(--shadow-color) a(.15));
 	--font-family: "Open Sans", sans-serif;
+	--url-1: url("/my/path");
+	--url-2: url('/my/path');
+	--url-3: url(/my/path);
+	--url-4: url(data:image/png;bm90LWFuZC1pbWFnZQ==);
 	color: rgb(255, 0, 0);
 	color: var(--color);
-	--url: url("/my/path");
 }
 
 :root,
@@ -118,6 +121,27 @@ html {
 }
 
 .test--variable-with-url {
+	order: 1;
 	background: url("/my/path");
-	background: var(--url);
+	background: var(--url-1);
+}
+
+.test--variable-with-url {
+	order: 2;
+	background: url('/my/path');
+	background: var(--url-2);
+}
+
+
+.test--variable-with-url {
+	order: 3;
+	background: url(/my/path);
+	background: var(--url-3);
+}
+
+
+.test--variable-with-url {
+	order: 4;
+	background: url(data:image/png;bm90LWFuZC1pbWFnZQ==);
+	background: var(--url-4);
 }
diff --git a/plugins/postcss-custom-properties/test/basic.preserve.expect.css b/plugins/postcss-custom-properties/test/basic.preserve.expect.css
@@ -77,5 +77,23 @@
 }
 
 .test--variable-with-url {
+	order: 1;
 	background: url("/my/path");
 }
+
+.test--variable-with-url {
+	order: 2;
+	background: url('/my/path');
+}
+
+
+.test--variable-with-url {
+	order: 3;
+	background: url(/my/path);
+}
+
+
+.test--variable-with-url {
+	order: 4;
+	background: url(data:image/png;bm90LWFuZC1pbWFnZQ==);
+}
diff --git a/plugins/postcss-custom-properties/test/export-properties.css b/plugins/postcss-custom-properties/test/export-properties.css
@@ -11,6 +11,9 @@
 	--shadow-color: rgb(255,0,0);
 	--shadow: 0 6px 14px 0 color(var(--shadow-color) a(.15));
 	--font-family: "Open Sans", sans-serif;
-	--url: url("/my/path");
+	--url-1: url("/my/path");
+	--url-2: url('/my/path');
+	--url-3: url(/my/path);
+	--url-4: url(data:image/png;bm90LWFuZC1pbWFnZQ==);
 	--theme-color: #053;
 }
diff --git a/plugins/postcss-custom-properties/test/export-properties.js b/plugins/postcss-custom-properties/test/export-properties.js
@@ -12,7 +12,10 @@ module.exports = {
 		'--shadow-color': 'rgb(255,0,0)',
 		'--shadow': '0 6px 14px 0 color(var(--shadow-color) a(.15))',
 		'--font-family': '"Open Sans", sans-serif',
-		'--url': 'url("/my/path")',
+		'--url-1': 'url("/my/path")',
+		'--url-2': 'url(\'/my/path\')',
+		'--url-3': 'url(/my/path)',
+		'--url-4': 'url(data:image/png;bm90LWFuZC1pbWFnZQ==)',
 		'--theme-color': '#053'
 	}
 };
diff --git a/plugins/postcss-custom-properties/test/export-properties.json b/plugins/postcss-custom-properties/test/export-properties.json
@@ -12,7 +12,10 @@
     "--shadow-color": "rgb(255,0,0)",
     "--shadow": "0 6px 14px 0 color(var(--shadow-color) a(.15))",
     "--font-family": "\"Open Sans\", sans-serif",
-    "--url": "url(\"/my/path\")",
+    "--url-1": "url(\"/my/path\")",
+    "--url-2": "url('/my/path')",
+    "--url-3": "url(/my/path)",
+    "--url-4": "url(data:image/png;bm90LWFuZC1pbWFnZQ==)",
     "--theme-color": "#053"
   }
 }
diff --git a/plugins/postcss-custom-properties/test/export-properties.mjs b/plugins/postcss-custom-properties/test/export-properties.mjs
@@ -11,6 +11,9 @@ export const customProperties = {
 	'--shadow-color': 'rgb(255,0,0)',
 	'--shadow': '0 6px 14px 0 color(var(--shadow-color) a(.15))',
 	'--font-family': '"Open Sans", sans-serif',
-	'--url': 'url("/my/path")',
+	'--url-1': 'url("/my/path")',
+	'--url-2': 'url(\'/my/path\')',
+	'--url-3': 'url(/my/path)',
+	'--url-4': 'url(data:image/png;bm90LWFuZC1pbWFnZQ==)',
 	'--theme-color': '#053'
 };
diff --git a/plugins/postcss-custom-properties/test/export-properties.scss b/plugins/postcss-custom-properties/test/export-properties.scss
@@ -10,5 +10,8 @@ $margin: 0 10px 20px 30px;
 $shadow-color: rgb(255,0,0);
 $shadow: 0 6px 14px 0 color(var(--shadow-color) a(.15));
 $font-family: "Open Sans", sans-serif;
-$url: url("/my/path");
+$url-1: url("/my/path");
+$url-2: url('/my/path');
+$url-3: url(/my/path);
+$url-4: url(data:image/png;bm90LWFuZC1pbWFnZQ==);
 $theme-color: #053;

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,10 @@`
`12`	`12`	`"--shadow-color": "rgb(255,0,0)",`
`13`	`13`	`"--shadow": "0 6px 14px 0 color(var(--shadow-color) a(.15))",`
`14`	`14`	`"--font-family": "\"Open Sans\", sans-serif",`
`15`		`- "--url": "url(\"/my/path\")",`
	`15`	`+ "--url-1": "url(\"/my/path\")",`
	`16`	`+ "--url-2": "url('/my/path')",`
	`17`	`+ "--url-3": "url(/my/path)",`
	`18`	`+ "--url-4": "url(data:image/png;bm90LWFuZC1pbWFnZQ==)",`
`16`	`19`	`"--theme-color": "#053"`
`17`	`20`	`}`
`18`	`21`	`}`