The get-css-data from jhildenbiddle

get-css-data's Introduction

About

👦🏻❤️  Proud papa
👩🏻💍  Happy husband
☀️🎸  Living in Austin, TX
🌧☕️  Previously from Seattle, WA
👨🏻‍🎨👨🏻‍💻  20+ years in UI/UX & Web Dev
🍎🤖  Intrigued by Swift and AI/ML
🧘🏻‍♂️💭  Life is short. Be kind.

I launched my first open-source project here on GitHub back in 2016. Since that time I've created and contributed to dozens of projects, most notably as a core team member of docsify.js, the creator of docsify-related projects like docsify-themeable, and the creator of web development libraries like css-vars-ponyfill. The positive reaction to these efforts has been the motivation for continuing to do this work. Countless hours, issues, and PRs later, I am still excited to be a part of the open-source community.

Elsewhere

Personal Website
Twitter
LinkedIn
Stack Overflow
CodePen

Statistics

Noteworthy Projects

Newest

Mergician
A uniquely flexible and light-weight utility for deep (recursive) merging/cloning of JavaScript objects.
Typora Themeable
A clean, customizable, typography-focused theme system for the markdown editor, Typora.
CSS Device Frames
A collection of single-element, CSS-only application and device frames with support for multiple themes and customization via CSS custom properties.

Docsify

docsify.js
A magical "zero-build" client-side documentation site generator.
docsify-themeable
A delightfully simple theme system for docsify.js.
docsify-tabs
A plugin for rendering tabbed content from markdown.
docsify-plugin-ethicalads
A plugin for rendering ad placements from EthicalAds.
docsify-plugin-runkit
A plugin for rendering interactive JavaScript REPLs powered by RunKit.

Web Development

css-vars-ponyfill
A ponyfill that provides client-side support for CSS custom properties (aka "CSS variables") in legacy and modern browsers.
canvas-size
Determine the maximum size and custom dimension support of an HTML <canvas> element.
vertical-rhythm-reset
A Sass/SCSS library for responsive vertical rhythm grids, modular scale typography, and CSS normalization.
get-css-data
A micro-library for collecting stylesheet data from link and style nodes.

Sponsorship

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 my projects or contributions, please consider lending your support and encouraging future efforts by becoming a sponsor.

Thank you! 🙏🏻

View project statistics

Project	GitHub Stars	Direct Downloads	CDN Downloads
canvas-size
class-change
create-elms
css-device-frames
css-vars-ponyfill
docsify-plugin-ethicalads
docsify-plugin-runkit
docsify-tabs
docsify-themeable
docsify
get-css-data
karma-file-fixtures-preprocessor
mergician
sass-utilities
typora-themeable
vertical-rhythm-reset

get-css-data's People

Contributors

Stargazers

Watchers

get-css-data's Issues

xmlhttprequest not support file protocol

if the link protocol is file,such as “file:///E:/a.css”
will be blocked,
error meesage is " origin 'null' has been blocked by cors policy: cross origin requests are only support protocol schemes: http ,data,chrome,chrome-extension,chrome-untrustef,https"

html link is

Thanks.

Empty `<link>` stylesheet triggers onError

See jhildenbiddle/css-vars-ponyfill#155

getCssData doesn't respect page's <base> href when building URLs for CSS download

Hi, I'm using css-vars-ponyfill which using get-css-data and I found that page's <base> tag's href not taken into account when it downloads CSS sources by JS. Fortunately css-vars-ponyfill provides onBeforeSend hook and I was able to solve that issue in the next way:

cssVars({
  updateURLs: false,
  onBeforeSend: function(xhr, elm, url) {
    var baseUrl = document.querySelector('base').getAttribute('href');
    xhr.open('GET', url.replace(location.origin + '/', baseUrl)); // fix to respect base URL
  }
});

Wrong URL requested was: https://mydomain/1.css
Correct URL should be: https://cdn.something.com/mydomain/1.css (because of <base href="https://cdn.something.com/mydomain/">)

Honor CSS in HTML imports

It would be convenient for this library to support link[rel=import] as a possible include setting. For example polyfilling (or ponyfilling) CSS custom properties would become significantly easier for utilities that depend on this one. That would allow broader support of web components that expect to use CSS variables, as the common method for using web components is via HTML imports.

That means this library would look at HTML imports, and apply the other rules present in the include setting to get their css data.

For instance, if we have an HTML file that is imported, "import1.html" and that HTML file has a style tag in its content, then get-css-data would return the CSS styles found in that style tag, assuming that the include setting has the selector style in it. There would be a similar outcome with another imported HTML file, "import2.html" that has a link to a stylesheet in it, should the include setting have the selector link[rel="stylesheet"].

I've already started looking into the code to see how this could be supported.

One concern is recursive crawling of HTML imports. I haven't gotten that far yet!

Recommend Projects

jhildenbiddle / get-css-data Goto Github PK