unprint 0.10.12 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unprint",
-  "version": "0.10.12",
+  "version": "0.11.0",
   "description": "Simplify common web scraping tasks while staying in control of the data.",
   "main": "src/app.js",
   "scripts": {

package/src/app.js

@@ -483,6 +483,43 @@ function querySourceSets(context, selector, attr = 'srcset', customOptions = {})
 	return sourceSets.map((sourceSet) => extractSourceSet(sourceSet, customOptions));
 }
 
+/*
+function removeStyleFunctionSpaces(el) {
+	// jsdom appears to have a bug where it ignores inline CSS attributes set to a function() containing spaces, e.g. url( image.png )
+	el.setAttribute('style', el.getAttribute('style').replace(/\(\s+(.*)\s+\)/g, (match, cssArgs) => `(${cssArgs})`));
+}
+*/
+
+function queryStyle(context, selector, customOptions) {
+	const options = {
+		...customOptions,
+		attribute: 'style',
+	};
+
+	const style = queryContent(context, selector, options);
+
+	if (style) {
+		return options.styleAttribute
+			? style.getPropertyValue(options.styleAttribute)
+			: style._values;
+	}
+
+	return null;
+}
+
+function queryStyles(context, selector, customOptions) {
+	const options = {
+		...customOptions,
+		attribute: 'style',
+	};
+
+	const elStyles = queryContents(context, selector, options).map((style) => (options.styleAttribute
+		? style.getPropertyValue(options.styleAttribute)
+		: style._values));
+
+	return elStyles;
+}
+
 function queryVideo(context, selector = 'source', customOptions) {
 	const options = {
 		...context.options,
@@ -681,6 +718,8 @@ const queryFns = {
 	imgs: queryImages,
 	json: queryJson,
 	jsons: queryJsons,
+	style: queryStyle,
+	styles: queryStyles,
 	number: queryNumber,
 	num: queryNumber,
 	numbers: queryNumbers,

package/tests/index.html

@@ -42,6 +42,9 @@
 		<img class="srcset" srcset="https://i.redd.it/e91oo4ueyeb71.jpg 240w, https://i.redd.it/vn9h981hlx281.png 480w, https://i.redd.it/e91oo4ueyeb71.jpg 640w">
 		<img class="srcset" srcset="https://i.redd.it/e91oo4ueyeb71.jpg 240w, https://i.redd.it/vn9h981hlx281.png 480w, https://i.redd.it/e91oo4ueyeb71.jpg 640w">
 
+		<div class="style" style="background-image: url('https://i.imgur.com/eDQmLys.jpg'); color: red;"></div>
+		<div class="style" style="margin: 1rem; color: blue;"></div>
+
 		<video id="video" poster="https://i.imgur.com/eDQmLys.jpg"><source src="https://i.imgur.com/eDQmLys.mp4"></video>
 
 		<script id="json" type="application/js">{"foo": "bar", "lorem": "ipsum", "hello": "world"}</script>

package/tests/init.js

@@ -37,6 +37,10 @@ async function initTest() {
 	console.log('images', res.context.query.imgs('.image'));
 	console.log('srcset', res.context.query.sourceSet('.srcset'));
 	console.log('srcsets', res.context.query.sourceSets('.srcset'));
+	console.log('style', res.context.query.style('.style'));
+	console.log('style background', res.context.query.style('.style', { styleAttribute: 'background-image' }));
+	console.log('styles', res.context.query.styles('.style'));
+	console.log('styles color', res.context.query.styles('.style', { styleAttribute: 'color' }));
 	console.log('path', res.context.query.url('#path'));
 	console.log('relative path', res.context.query.url('#relativePath'));
 	console.log('exists', res.context.query.exists('#title'));