jquery-scopelinktags v0.10.0
jQuery ScopeLinkTags plugin
This plugin provides a way to scope CSS <link> tags inside their container, similarly to the way that scoped <style> tags work.
Initially inspired by this stackoverflow response and thingsinjars/jQuery-Scoped-CSS-plugin.
Installation
npm install jquery-scopelinktags
Usage
Include this plugin's source and on $(document).ready() call:
// scope all <link> tags inside of the <body>
$('body').scopeLinkTags();
// OR specifically define the scoped section/container
$('.scoped-section').scopeLinkTags();
// OR even target specific <link> tags with your own custom selector
$('link[data-scoped]').scopeLinkTags();Options
The scopeLinkTags() method optionally accepts an object with the following parameters:
styleTagSelector
Type: String (Default: 'style')
Can be used to change the selector used to find the <style> tags.
cssLinkSelector
Type: String (Default: 'link[type="text/css"]')
Can be used to change the selector used to find the <link> tags.
cssRuleRegex
Type: Regex
Can be used to change the Regex that is used to detect each separate CSS selector.
useScopedStyle
Type: Boolean (Default: true)
Define whether scoped <style> tags may be used when supported.
useParentElementID
Type: Boolean (Default: true)
Define whether the ID of the <link> parent element may be used when available. Otherwise a new unique [class] will be generated and used for each <link> tag.
scopeCssSelector
Type: String
Explicitly defines the parent CSS selector to be used for scoping.
Methods
destroy
You can revert the effects by using the destroy method:
$('body').scopeLinkTags('destroy');scopeCss(css, scopeSelector, cssRuleRegex)
The method that scopes the CSS rules is globally available:
var myCss = "p { color: blue; }";
var scopedCss = $.fn.scopeLinkTags.scopeCss(myCss, '.myScopedBlueArea');The jQuery plugin instance can be rertieved from the generated <style> tag with:
var instance $('.scopedArea > style').data('scopeLinkTags');Notes
- In case that the browser natively supports
<style scoped>, it will be used to scope the<link>tag CSS. Can be disabled using theuseScopedStyleoption. - When
<style scoped>is not supported, the plugin will use the[id]of the container element, or a newly created unique[class], as a parent selector for the CSS rules detected (using a REGEX replace).
Limitations
- Only
<link>tags that have the[type="text/css"]attribute will be processed. - Does not apply to externally loaded stylesheets (via @import).
- When wrapping the detected CSS with a parent CSS selector
- Expect to work on valid CSS, even when minified.
- Please open a ticket if you find a case that the used REGEX doesn't work