PostCSS Custom Properties – add tests for variables with url() (#135)

marcalexiei · web-flow · commit 12a8d33e7e80 · 2022-01-08T15:55:32.000+01:00
diff --git a/plugins/postcss-custom-properties/test/basic.css b/plugins/postcss-custom-properties/test/basic.css
@@ -16,6 +16,7 @@ html {
 	--shadow: 0 6px 14px 0 color(var(--shadow-color) a(.15));
 	--font-family: "Open Sans", sans-serif;
 	color: var(--color);
+	--url: url("/my/path");
 }
 
 :root,
@@ -99,3 +100,7 @@ html {
 .test--combined-selector {
 	color: var(--theme-color);
 }
+
+.test--variable-with-url {
+	background: var(--url);
+}
diff --git a/plugins/postcss-custom-properties/test/basic.expect.css b/plugins/postcss-custom-properties/test/basic.expect.css
@@ -17,6 +17,7 @@ html {
 	--font-family: "Open Sans", sans-serif;
 	color: rgb(255, 0, 0);
 	color: var(--color);
+	--url: url("/my/path");
 }
 
 :root,
@@ -114,3 +115,8 @@ html {
 	color: #053;
 	color: var(--theme-color);
 }
+
+.test--variable-with-url {
+	background: url("/my/path");
+	background: var(--url);
+}
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
@@ -17,6 +17,7 @@ html {
 	--font-family: "Open Sans", sans-serif;
 	color: rgb(255, 0, 0);
 	color: var(--color);
+	--url: url("/my/path");
 }
 
 :root,
@@ -114,3 +115,8 @@ html {
 	color: #053;
 	color: var(--theme-color);
 }
+
+.test--variable-with-url {
+	background: url("/my/path");
+	background: var(--url);
+}
diff --git a/plugins/postcss-custom-properties/test/basic.import-override.expect.css b/plugins/postcss-custom-properties/test/basic.import-override.expect.css
@@ -75,3 +75,7 @@
 .test--combined-selector {
 	color: #053;
 }
+
+.test--variable-with-url {
+	background: url("/my/path");
+}
diff --git a/plugins/postcss-custom-properties/test/basic.import.expect.css b/plugins/postcss-custom-properties/test/basic.import.expect.css
@@ -17,6 +17,7 @@ html {
 	--font-family: "Open Sans", sans-serif;
 	color: rgb(255, 0, 0);
 	color: var(--color);
+	--url: url("/my/path");
 }
 
 :root,
@@ -115,3 +116,8 @@ html {
 	color: #053;
 	color: var(--theme-color);
 }
+
+.test--variable-with-url {
+	background: url("/my/path");
+	background: var(--url);
+}
diff --git a/plugins/postcss-custom-properties/test/basic.preserve.expect.css b/plugins/postcss-custom-properties/test/basic.preserve.expect.css
@@ -75,3 +75,7 @@
 .test--combined-selector {
 	color: #053;
 }
+
+.test--variable-with-url {
+	background: url("/my/path");
+}
diff --git a/plugins/postcss-custom-properties/test/export-properties.css b/plugins/postcss-custom-properties/test/export-properties.css
@@ -11,5 +11,6 @@
 	--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");
 	--theme-color: #053;
 }
diff --git a/plugins/postcss-custom-properties/test/export-properties.js b/plugins/postcss-custom-properties/test/export-properties.js
@@ -12,6 +12,7 @@ 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")',
 		'--theme-color': '#053'
 	}
 };
diff --git a/plugins/postcss-custom-properties/test/export-properties.json b/plugins/postcss-custom-properties/test/export-properties.json
@@ -12,6 +12,7 @@
     "--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\")",
     "--theme-color": "#053"
   }
 }
diff --git a/plugins/postcss-custom-properties/test/export-properties.mjs b/plugins/postcss-custom-properties/test/export-properties.mjs
@@ -11,5 +11,6 @@ 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")',
 	'--theme-color': '#053'
 };
diff --git a/plugins/postcss-custom-properties/test/export-properties.scss b/plugins/postcss-custom-properties/test/export-properties.scss
@@ -10,4 +10,5 @@ $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");
 $theme-color: #053;

Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,7 @@ html {`
`16`	`16`	`--shadow: 0 6px 14px 0 color(var(--shadow-color) a(.15));`
`17`	`17`	`--font-family: "Open Sans", sans-serif;`
`18`	`18`	`color: var(--color);`
	`19`	`+ --url: url("/my/path");`
`19`	`20`	`}`
`20`	`21`
`21`	`22`	`:root,`
`@@ -99,3 +100,7 @@ html {`
`99`	`100`	`.test--combined-selector {`
`100`	`101`	`color: var(--theme-color);`
`101`	`102`	`}`
	`103`	`+`
	`104`	`+.test--variable-with-url {`
	`105`	`+ background: var(--url);`
	`106`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -75,3 +75,7 @@`
`75`	`75`	`.test--combined-selector {`
`76`	`76`	`color: #053;`
`77`	`77`	`}`
	`78`	`+`
	`79`	`+.test--variable-with-url {`
	`80`	`+ background: url("/my/path");`
	`81`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -11,5 +11,6 @@`
`11`	`11`	`--shadow-color: rgb(255,0,0);`
`12`	`12`	`--shadow: 0 6px 14px 0 color(var(--shadow-color) a(.15));`
`13`	`13`	`--font-family: "Open Sans", sans-serif;`
	`14`	`+ --url: url("/my/path");`
`14`	`15`	`--theme-color: #053;`
`15`	`16`	`}`
Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,7 @@ module.exports = {`
`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`	`16`	`'--theme-color': '#053'`
`16`	`17`	`}`
`17`	`18`	`};`
Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,7 @@`
`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`	`16`	`"--theme-color": "#053"`
`16`	`17`	`}`
`17`	`18`	`}`