CSSTools is a package for importing CSS files into the Wolfram Language. CSSTools supports 11.0 and later versions of Wolfram Language deployments for the desktop, including Wolfram Desktop and Mathematica.
The initial release of CSSTools contains the core CSS Level 2 Revision 1 specification. The tokenizer follows the CSS Syntax Module Level 3 specification and the selectors follow Selectors Level 3. Additional supported modules include:
- CSS Namespaces Module Level 3
- CSS Colors Module Level 4
- CSS Media Queries Level 4
- CSS Custom Properties for Cascading Variables Module Level 1
- CSS Values and Units Module Level 3
- CSS Images Module Level 3
The Wolfram Desktop front end uses its own stylesheet system and translation from CSS to Wolfram Desktop is not one-to-one. Regardless, the goal is to conform with all included specifications as much as possible. The listed modules indicate which CSS properties can be validated while importing into Wolfram Desktop. Though the properties can be validated and imported, not all imported CSS properties have a corresponding option in the Wolfram Desktop front end.
The CSSTools release comes in the form of a .paclet file, which contains the entire package and its documentation. Download the latest release from this latest release link. To install, run the following command in the Wolfram Language:
PacletInstall["/full/path/to/CSSTools.paclet"]
This will permanently install the CSSTools paclet. The Wolfram Language will always use the latest installed version of CSSTools. Installed versions can be enumerated using the command:
PacletFind["CSSTools"]
And all versions can be uninstalled using the command:
PacletUninstall["CSSTools"]
To access the documentation, open the notebook interface help viewer and search for CSSTools. The two results will be a guide page enumerating the most commonly used functions in CSSTools, and a detailed tutorial.
To start, load the CSSTools package and try importing some basic CSS rules.
Needs["CSSTools`"]
cssData = ImportString["h1 {font-size:14pt; color:red}", "CSS"]
The result is a Dataset expression that matches a canonical layout of a CSS file with additional interpretations. Use the CSSCascade function to perform the CSS cascade algorithm and translate the imported CSS to Wolfram Desktop options.
CSSCascade[All (*all properties*), Cell (*as cell-level options*), cssData, All (*all rulesets*)]
More details can be found in the included documentation.
CSSTools is a paclet maintained by Kevin Daily of Wolfram Research. He began building CSSTools because he thought it would be neat to use the CSS stylesheet language in Wolfram Desktop. He did not realize how hard it would be to translate CSS to Wolfram Desktop options including the multitude of additional CSS modules that must all work together.
CSSTools is implemented completely in the Wolfram Language. It might have been better suited to build off of an existing library, but none were found that exactly matched the translations that were needed to match Wolfram Language code.
The hope is for CSSTools to be further developed by community support. Using the tokenizer and its related functions, additional properties should be straightforward to add to the package. Some CSS features that would be nice to see are vendor-specific properties added as recognizable properties. More ambitious additions would be animation rules.
See the following files for more information:
- [video] [notebook] Wolfram Technology Conference 2019 Presentation
- COPYING.md - CSSTools license
- CONTRIBUTING.md - Guidelines for contributing to CSSTools
- ForDevelopers.md - Walkthrough of how to contribute new features to CSSTools
- HowToBuild.md - Instructions for building CSSTools as a paclet