fela-beautifier

fela-beautifier

The beautifier enhancer is a developer tool that automatically formats the rendered CSS markup on every change. It uses cssbeautify to achieve this.

Installation

npm i --save fela-beautifier

Assuming you are using npm as your package mananger you can just npm install.
Otherwise we also provide a UMD. You can easily use it via unpkg. It registers a FelaBeautifier global.

<!-- Fela (Development): Unminified version including all warnings -->
<script src="https://unpkg.com/fela-beautifier@1.2.0/dist/fela-beautifier.js"></script>
<!-- Fela (Production): Minified version -->
<script src="https://unpkg.com/fela-beautifier@1.2.0/dist/fela-beautifier.min.js"></script>

Example

Usage

import { createRenderer } from 'fela'
import beautifier from 'fela-beautifier'

const enhancer = beautifier({
  ident: '  ',
  openbrace: 'separate-line',
  autosemicolon: 'false'
})

const renderer = createRenderer({ enhancers: [enhancer] })

Configuration

Uses the same options as cssbeautify does.

option	value	default	description
ident	string	(2 spaces)	a string used for the indentation of the declaration
openbrace	end-of-line, separate-line	end-of-line	placement of open curly brace
autosemicolon	boolean	false	insert semicolon after the last rule

License

Fela is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann and all the great contributors.

Changelog

11.2.0

| Package | Changes | | --- | --- | | fela | (#756) Added a generateClassName function to renderer which can now be overwritten | | fela<br>fela-dom<br>react-fela<br>preact-fela<br>infero-fela<br>reason-fela<br>fela-bindings | (#768) Added a new renderer option styleNodeAttributes for adding custom attributes to generated style nodes | | fela-utils | (#766) Fixed IE 11 compatibility issues | | fela-sort-media-query-mobile-first<br>fela-preset-web | (#769) Updated TypeScript definitions | | fela<br>fela-plugin-prefixer<br>react-fela | (#763) Added UMD builds for these specific packages - more to come |