closure-stylesheets

closure-stylesheets is A Node API to Closure Stylesheets.

yarn add closure-stylesheets

Table Of Contents

• Table Of Contents
• API
• async compileStylesheets(css, config, log=): ClosureReturn
  • ClosureStylesheetsConfig
  • ClosureReturn
• compileStylesheetsSync(css, config, log=): ClosureReturn
• Copyright

API

The package is available by importing its default function:

import closureStylesheets, { closureStylesheetsSync } from 'closure-stylesheets'

async compileStylesheets(
  css: (string|!Array<string>),
  config: !ClosureStylesheetsConfig,
  log=: !Function,
): ClosureReturn

Compiles stylesheets asynchronously.

• css* (string | !Array<string>): The resolved path to the CSS file to compile.
• config* !ClosureStylesheetsConfig: Additional configuration to transform into arguments to Java. Requires at list path to the JAR file.
• log !Function (optional): The logging function.

ClosureStylesheetsConfig: Configuration options.

Name	Type & Description	Default
path*	string	-
	The path to the closure JAR. You can use closure-stylesheets-java package to install it via Node.
skipHTMLEscaping	boolean	false
	By default, the compiler will escape [<>\"&'] from output to make it suitable for safe embedding in HTML tags and attributes. When standalone CSS is generated, this is not necessary and can be skipped.
expandBrowserPrefix	boolean	false
	Expand CSS rules to include vendor-prefixed declarations.
outputBrowserPrefix	string	-
	The location of the file where to output the prefixed version of the CSS. Works only when expandBrowserPrefix is set. The filename should end with .css and the compiler will also create a .json file at the same location with the map to check for support.
prefixes	!Array<string>	-
	CSS rule prefixes (position:sticky, -ms-hyphens.) to include in the main output CSS rather than browser prefix file.
prettyPrint	boolean	false
	Whether to format the output with newlines and indents so that it is more readable.
sourceMap	string	-
	Provides a mapping from the generated output to their original source code location.
rootSelector	string	-
	The string to prepend to selectors of each ruleset.
allowUnrecognizedProperties	boolean	false
	Allow unrecognized properties.
preserveImportantComments	boolean	false
	Preserve important comments from sources into minified output css. Important comments are marked with /＊! ＊/, ＠license, or ＠preserve.
cssRenamingPrefix	string	-
	Add a prefix to all renamed css class names.
whitelist	!Array<string>	-
	Excluded classes from renaming.
outputRenamingMap	string	-
	How to format the output from the CSS class renaming.
inputRenamingMap	string	-
	The input filename for the CSS class renaming. The file must provide a map of class names that will be used for renaming. If a class name is not found in file, a new name will be generated. --input-renaming-map
rename	string	-
	How CSS classes should be renamed. Defaults to NONE. Can be CLOSURE, SIMPLE, DEBUG.
excludedClassesFromRenaming	!Array<string>	-
	Pass the compiler a list of CSS class names that shouldn't be renamed.

ClosureReturn: Returns stylesheet and rename map if successful, or parsed info, stderr and status otherwise.

Name	Type & Description
block	string
	Parsed error information with CLI colour.
stderr	string
	Full stderr output in case of error.
status	number
	Exit error code.
renameMap	Object
	If renaming was on, this is the generated map parsed into an object.
stylesheet	string
	The actual compiled stylesheet in case of success.

For example, we can compile this simple stylesheet:

.MyElement {
  color: green;
}

import compileStylesheets from 'closure-stylesheets'
import path from 'closure-stylesheets-java'
 
(async () => {
  const res = await compileStylesheets('example/style.css', {
    path,
    rootSelector: '.Example',
  }, console.error)
  console.log(res)
})()

{
  renameMap: { MyElement: 'a' },
  stylesheet: '.Example .a{color:green}'
}

Logging of the executed command will be done into console.error since it was passed as the third argument.

java -jar /Users/zavr/node_modules/closure-stylesheets-java/target/closure-stylesheets-1.12.1-SNAPSHOT-jar-with-dependencies.jar "example/style.css" --root-selector .Example --output-renaming-map temp-rename-map.json --output-renaming-map-format JSON --rename SIMPLE

The sync version with the same API is also available.

compileStylesheetsSync(
  css: (string|!Array<string>),
  config: !ClosureStylesheetsConfig,
  log=: !Function,
): ClosureReturn

Compiles stylesheets in a sync manner.

• css* (string | !Array<string>): The resolved path to the CSS file to compile.
• config* !ClosureStylesheetsConfig: Additional configuration to transform into arguments to Java. Requires at list path to the JAR file.
• log !Function (optional): The logging function.

import { compileStylesheetsSync } from 'closure-stylesheets'
import path from 'closure-stylesheets-java'
 
const resSync = compileStylesheetsSync('example/style.css', {
  path,
  rootSelector: '.HelloWorld',
  whitelist: ['MyElement'],
}, console.error)
console.log(resSync)

{ renameMap: {}, stylesheet: '.HelloWorld .MyElement{color:green}' }

Copyright

	© Art Deco™ 2020