README
Style Engine
The Style Engine powering global styles and block customizations.
Installation
Install the module
npm install @wordpress/style-engine --save
This package assumes that your code will run in an ES2015+ environment. If you're using an environment that has limited or no support for such language features and APIs, you should include the polyfill shipped in @wordpress/babel-preset-default
in your code.
Important
This Package is considered experimental at the moment. The idea is to have a package used to generate styles based on a style object that is consistent between: backend, frontend, block style object and theme.json.
Currently it's not a package that generates a wp.styleEngine global because it's not ready yet, it's still a bundled package but ultimately, we want it to be so, once the roadmap is finished:
TODO List:
- Add style definitions for all the currently supported styles in blocks and theme.json.
- the CSS variable shortcuts for values (for presets...)
- Support generating styles in the frontend.
- Support generating styles in the backend (block supports and theme.json stylesheet).
- Refactor all block styles to use the style engine server side.
- Refactor all blocks to consistently use the "style" attribute for all customizations (get rid of the preset specific attributes).
Usage
generate
Generates a stylesheet for a given style object and selector.
Parameters
- style
Style
: Style object. - options
StyleOptions
: Options object with settings to adjust how the styles are generated.
Returns
string
: generated stylesheet.
getCSSRules
Returns a JSON representation of the generated CSS rules.
Parameters
- style
Style
: Style object. - options
StyleOptions
: Options object with settings to adjust how the styles are generated.
Returns
GeneratedCSSRule[]
: generated styles.