Extended CSS Plug-in

This is an abstract base DITA-OT Plug-in to extend HTML processing and allow additional plug-ins to add an extra CSS stylesheet to the <header> of each HTML page. By default the plug-in does nothing apart from creating a temporary file extend.css.file - it is designed to be extended so other plugins can add CSS to the blank file.

It offers three extension-points for further CSS processing.

Install

This is a standalone plug-in without dependencies which can be installed from the command line.

Run the plug-in installation commands: 

dita install https://github.com/jason-fox/jason.fox.extend.css/archive/master.zip

The dita command line tool requires no additional configuration.

Usage

Run any HTML dita transform e.g.: 

dita --format html5 --output out --input document.ditamap

Each HTML output file will include an additional line in the <head>. 

<head>
    ...
    <link rel="stylesheet" type="text/css" href="common-extended.css">
</head>
Figure 1. Output

The file common-extended.css will include any CSS added via the extension points described below.

Extension points

CSS rules are always position dependent - the rule defined last in a file will supersede previous definitions. This plug-in is offers three extension points where CSS can be appended to a file so that CSS rules can be added in order.

  • extend.css.process.pre - Runs an additional ANT target before the extended css processing stage.
  • extend.css.process - Runs an additional ANT target as part of the extended css processing stage.
  • extend.css.process.post - Runs an additional ANT target after the extended css processing.

Example

The following plugin.xml will invoke an extension point and append additional CSS to extend.css.file which is copied to the output 

<plugin id="com.example.extended.css">
  <feature extension="ant.import" file="build.xml"/>
  <require plugin="fox.jason.extend.css"/>
  <feature extension="extend.css.process" value="example.css.copy"/>
</plugin>
Figure 2. Plugin.xml
<project name="com.example.extended.css">
  <target name="example.css.copy">
    <loadfile property="extra.css" srcFile="/path/to/css"/>
    <echo append="true" message="${line.separator}${extra.css}" file="${extend.css.file}"/>
  </target>
</project>
Figure 3. ANT Target

Working examples can be found in the DITA-OT Swagger plug-in and DITA-OT Prism-JS plug-in repositories.