@npmtuanmap2024/assumenda-provident-et
Advanced tools
A micro-library for collecting stylesheet data from link and style nodes
A micro-library for collecting stylesheet data from link and style nodes.
<link> and <style> nodes@import rulesNPM:
npm install @npmtuanmap2024/assumenda-provident-et --save
// file.js
import getCssData from '@npmtuanmap2024/assumenda-provident-et';
getCssData({
onComplete: function(cssText, cssArray, nodeArray) {
// Do stuff...
}
});
Git:
git clone https://github.com/npmtuanmap2024/assumenda-provident-et.git
CDN (jsdelivr.com shown, also on unpkg.com):
<!-- ES5 (latest v2.x.x) -->
<script src="https://cdn.jsdelivr.net/npm/@npmtuanmap2024/assumenda-provident-et@2"></script>
<script>
getCssData({
onComplete: function(cssText, cssArray, nodeArray) {
// Do stuff...
}
});
</script>
<!-- ES6 module (latest v2.x.x) -->
<script type="module">
import getCssData from 'https://cdn.jsdelivr.net/npm/@npmtuanmap2024/assumenda-provident-et@2/dist/@npmtuanmap2024/assumenda-provident-et.esm.min.js';
getCssData({
onComplete(cssText, cssArray, nodeArray) {
// Do stuff...
}
});
</script>
HTML:
<!-- file.html -->
<head>
<link rel="stylesheet" href="style1.css">
<style>
@import "style2.css";
p { color: blue; }
</style>
</head>
CSS:
/* style1.css */
p { color: red; }
/* style2.css */
p { color: green; }
JavaScript (see Options for details)
getCssData({
onComplete: function(cssText, cssArray, nodeArray) {
console.log(cssText); // 1
console.log(cssArray); // 2
console.log(nodeArray); // 3
}
});
// 1 => 'p { color: red; } p { color: green; } p { color: blue; }'
// 2 => ['p { color: red; }', 'p { color: green; } p { color: blue; }']
// 3 => [<linkElement>, <styleElement>]
Example
// Default values shown
getCssData({
rootElement : document,
include : 'link[rel=stylesheet],style',
exclude : '',
filter : '',
skipDisabled: true,
useCSSOM : false,
onBeforeSend: function(xhr, node, url) {
// ...
},
onSuccess: function(cssText, node, url) {
// ...
},
onError: function(xhr, node, url) {
// ...
},
onComplete: function(cssText, cssArray, nodeArray) {
// ...
}
});
objectdocumentRoot element to traverse for <link> and <style> nodes.
Examples
// Document
getCssData({
rootElement: document // default
});
// Iframe (must be same domain with content loaded)
getCssData({
rootElement: (myIframe.contentDocument || myIframe.contentWindow.document)
});
// Shadow DOM
getCssData({
rootElement: myElement.shadowRoot
});
string"link[rel=stylesheet],style"CSS selector matching <link> and <style> nodes to collect data from. The default value includes all style and link nodes.
Example
getCssData({
// Include only <link rel="stylesheet"> nodes
// with an href that does not contains "bootstrap"
include: 'link[rel=stylesheet]:not([href*=bootstrap])',
});
stringCSS selector matching <link> and <style> nodes to exclude from those matched by options.include.
Example
getCssData({
// Of matched `include` nodes, exclude any node
// with an href that contains "bootstrap"
exclude: '[href*=bootstrap]',
});
objectRegular expression used to filter node CSS data. Each block of CSS data is tested against the filter, and only matching data is processed.
Example
getCssData({
// Test each block of CSS for the existence
// of ".myclass". If found, process the CSS.
// If not, ignore the CSS.
filter: /\.myclass/,
});
booleantrueDetermines if disabled stylesheets will be skipped while collecting CSS data.
Example
getCssData({
skipDisabled: true // default
});
booleanfalseDetermines how CSS data will be collected from <style> nodes.
When false, static CSS data is collected by reading each node's textContent value. This method is fast, but the data collected will not reflect changes made using the deleteRule() or insertRule() methods. When true, live CSS data is collected by iterating over each node's CSSRuleList and concatenating all CSSRule.cssText values into a single string. This method is slower, but the data collected accurately reflects all changes made to the stylesheet.
Keep in mind that browsers often drop unrecognized selectors, properties, and values when parsing static CSS. For example, Chrome/Safari will drop declarations with Mozilla's -moz- prefix, while Firefox will drop declarations with Chrome/Safari's -webkit prefix . This means that data collected when this options is set to true will likely vary between browsers and differ from the static CSS collected when it is set to false.
Example
getCssData({
useCSSOM: false // default
});
functionobject containing details of the requestobject referencestring (<link> href or @import url)Callback before each XMLHttpRequest (XHR) is sent. Allows modifying the XML object by setting properties, calling methods, or adding event handlers.
Example
getCssData({
onBeforeSend: function(xhr, node, url) {
// Domain-specific XHR settings
if (/some-domain.com/.test(url)) {
xhr.withCredentials = true;
xhr.setRequestHeader("foo", "1");
xhr.setRequestHeader("bar", "2");
}
}
});
functionstring of CSS text from node and urlobject referencestring (<link> href, @import url, or page url for <style> data)Callback after CSS data has been collected from each node. Allows modifying the CSS data before it is added to the final output by returning any string value or skipping the CSS data by returning false or an empty string ("").
Note that the order in which <link> and @import CSS data is "successfully" collected (thereby triggering this callback) is not guaranteed as these requests are asynchronous. To access CSS data in DOM order, use the cssArray argument passed to the options.oncomplete callback.
Example
getCssData({
onSuccess: function(cssText, node, url) {
// Replace all instances of "color: red" with "color: blue"
const newCssText = cssText.replace(/color:\s*red\s;/g, 'color: blue;');
return newCssText;
}
});
functionobject containing details of the requestobject referencestring (<link> href or @import url)Callback after <link> or @import request has failed or when
xhr.responseText appears to be HTML instead of CSS.
Example
getCssData({
onError: function(xhr, node, url) {
console.log(xhr.status); // 1
console.log(xhr.statusText); // 2
}
});
// 1 => '404'
// 2 => 'Not Found'
functionstring of concatenated CSS text from all nodes in DOM order.array of per-node CSS text in DOM order. The node containing each CSS text block is available at the same nodeArray index.array of processed <style> and <link> nodes in DOM order. The CSS text for each node is available at the same cssArray index.Callback after CSS data has been collected from all nodes.
Example
getCssData({
onComplete: function(cssText, cssArray, nodeArray) {
// ...
}
});
A sponsorship is more than just a way to show appreciation for the open-source authors and projects we rely on; it can be the spark that ignites the next big idea, the inspiration to create something new, and the motivation to share so that others may benefit.
If you benefit from this project, please consider lending your support and encouraging future efforts by becoming a sponsor.
Thank you! 🙏🏻
This project is licensed under the MIT License. See the LICENSE for details.
Copyright (c) John Hildenbiddle (@jhildenbiddle)
FAQs
A micro-library for collecting stylesheet data from link and style nodes
We found that @npmtuanmap2024/assumenda-provident-et demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.