An open API service indexing awesome lists of open source software.

https://github.com/artdecocode/closure-stylesheets

A Node API to Closure Stylesheets.
https://github.com/artdecocode/closure-stylesheets

Last synced: 6 months ago
JSON representation

A Node API to Closure Stylesheets.

Awesome Lists containing this project

README

          

# closure-stylesheets

[![npm version](https://badge.fury.io/js/closure-stylesheets.svg)](https://www.npmjs.com/package/closure-stylesheets)

`closure-stylesheets` is A Node API to Closure Stylesheets.

```sh
yarn add closure-stylesheets
```

## Table Of Contents

- [Table Of Contents](#table-of-contents)
- [API](#api)
- [`async compileStylesheets(css, config, log=): ClosureReturn`](#async-compilestylesheetscss-stringarraystringconfig-closurestylesheetsconfiglog-function-closurereturn)
* [`ClosureStylesheetsConfig`](#type-closurestylesheetsconfig)
* [`ClosureReturn`](#type-closurereturn)
- [`compileStylesheetsSync(css, config, log=): ClosureReturn`](#compilestylesheetssynccss-stringarraystringconfig-closurestylesheetsconfiglog-function-closurereturn)
- [Copyright](#copyright)



## API

The package is available by importing its default function:

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



## async compileStylesheets(
  `css: (string|!Array),`
  `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:_

```css
.MyElement {
color: green;
}
```

```js
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)
})()
```
```js
{
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),`
  `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.

```js
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)
```
```js
{ renameMap: {}, stylesheet: '.HelloWorld .MyElement{color:green}' }
```



## Copyright




Art Deco


© Art Deco™ 2020