Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dynamically load and unload stylesheets #771

Closed
catamphetamine opened this issue Apr 16, 2012 · 4 comments
Closed

Dynamically load and unload stylesheets #771

catamphetamine opened this issue Apr 16, 2012 · 4 comments

Comments

@catamphetamine
Copy link

I'm making a website with HTML5 ajax navigation (dynamically changing page url and just replacing body content).
Therefore is the need to dynamically unload previous page styles and load new page styles.
Here is a working piece of code I'm using on my website.
It would be nice if you included something like this in your Less.js, so that we wouldn't need to hack into it again when newer versions are released.
I'm not making a pull request since this code extensively uses jQuery and I doubt that you'd like jQuery in your repo.
You may just rewrite this code the way you like it and include in the distribution.

/**  Less custom changes begin */

window.Less = {}
var Less = window.Less

Less.id = function(link)
{
    link = encodeURI(link)
    link = link.replace(/\?.*$/, '')
    return get_sheet_id('', link)
}

function get_sheet_id(title, href)
{
    return 'less:' + (title || extractId(href))
}

Less.unload_style = function(link)
{
    var head = $('head')
    head.find('style[id="' + Less.id(link) + '"]').remove()
    head.find('link[href="' + link + '"]').remove()
}

Less.load_style = function(link, callback)
{
    var style_element = $('head').find('link[href="' + link + '"]')

    // loadStyleSheet(sheet, callback, reload, remaining)
    // callback(error, root, data, sheet, { local: false, lastModified: lastModified, remaining: remaining });

    var internal_callback = function(error, parsed_document, data, sheet, info)
    {
        if (parsed_document)
            createCSS(parsed_document.toCSS(), sheet, info.lastModified)

        callback()
    }

    loadStyleSheet(style_element[0], internal_callback, false, 0)
}

/**  Less custom changes end */
@ghost
Copy link

ghost commented Feb 14, 2014

This is pretty great, I would also like it if something like this was included in less.js

@levithomason
Copy link
Contributor

Fixed in #2233. Please move any further conversation to that PR.

levithomason added a commit to levithomason/less.js that referenced this issue Oct 16, 2014
@seven-phases-max
Copy link
Member

Btw, should not we close this then? (Assuming Less is not a stylesheets manipulation library it's barely to include methods like above, and #2233 fixes this considering you load/unload stylesheets by whatever suitable methods externally (e.g. using jQuery)).

@levithomason
Copy link
Contributor

Agree, this is solved.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants