Skip to main content

Expand CSS and javascript dependency links in HTML

Project description

Use with Python 3.

This module supports clean separation of markup, presentation, and behavior in HTML. It looks for special dependency comments atop CSS and javascript files and within <style> or <script> tags of the form:

/* :depends module1, module2 */

The comma separated list following the :depends string indicates CSS or javascript modules that need to be linked into the markup just before each <style> or <script> tag enclosing a dependency comment.

After processing, the HTML will contain all the required links to CSS or javascript modules listed in the markup, along with any of their dependencies.

When a CSS or javascript module file requires other modules to be loaded first, it should provide a dependency comment toward the beginning the source code. CSS modules may only depend upon other CSS modules, and javascript modules may depend only on other javascript modules. There may only be one dependency comment in any module file, and the comment should be somewhere in the first five lines of the source code.

Module names correspond to filenames without an extension, e.g. <style>/*:depends site*/</style> depends on a file named site.css. Module names must only consist of the ASCII characters matching the regular expression [a-zA-Z0-9_-].

Moudle files are located by looking in the current working directory and then via whatever paths have been optionally specified in the $HTMLDEPS environment variable (formatted just like the ubiquitous $PATH variable). In addition, the list of paths to search may also be adjusted via the config object.

Within the original HTML, the :depends string must only appear in comments inside of <script> or <style> tags. When a tag contains a dependency comment, is must not contain any other CSS or javascript expressions: the comment and its enclosing tag will be removed from the HTML output and replaced with links to external files. The same module will not be included more than once in the HTML output.

Attributes in the original <script> or <style> tags will be written into the transformed HTML. For example:

<style media="print">/* :depends print */</style>

Might render something like this:

<link rel="stylesheet" href="print.css" media="print">

(For XHTML, <link rel="stylesheet" href="print.css" media="print" />)

All HTML, CSS, and javascript files must be encoded in utf-8.

This module may also be invoked directly from the command line by passing it to the python interpreter. Run the script with --help to see the available command flags:

python htmldeps.py --help

Project details


Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page