UI Options and !important

[Colin Clark]

Hi again,

In certain cases, UI Options needs to be able to override the styling of a page, regardless of any customizations performed by the site's designer. In previous releases of Infusion, we made the mistake of shipping FSS with strategically placed !important declarations, which made it easy for UI Options to win but more difficult to customize an FSS theme.

Here's the JIRA that covers this issue:

http://issues.fluidproject.org/browse/FLUID-4219

In Infusion 1.4, we have removed the pesky !important declarations from the FSS. Instead, UI Options will use special versions of the themes, which will automatically include the necessary overrides. We'll generate these special stylesheets directly from the FSS themes at build time.

We've found a nice JavaScript CSS parser that makes the process quite simple:

http://glazman.org/JSCSSP/

Here are our next steps:

1. Determine the list of declarations that require !important to be added to them. 
2. Implement the code to read, parse, prioritize and serialize the stylesheet inside a browser (so we have access to good developer tools like Firebug).  We'll parameterize the strategy we use to read and write CSS so that it will be easy to port this code to our Ant-driven JavaScript build system. 
4. Write unit tests for the code that can be run in the browser.
5. Link the parser to our build process and add a task to the system for generating these UIO-specific stylesheets.

We're working on the code in Michelle's Github Infusion fork:

https://github.com/michelled/infusion/tree/FLUID-4219

Colin

---
Colin Clark
Technical Lead, Fluid Project
http://fluidproject.org