stylefy

• ::with-classes can now be used inside a style map definition.

• use-style function now accepts HTML attributes as the second parameter. This means that there is no need to merge the return value of use-style and HTML attributes anymore. This change is backwards compatible, so merging still works as expected.
• Updated deps (Clojure, ClojureScript & Reagent)
• stylefy now uses clj-chrome-devtools for running tests

Previously, the second parameter of use-style was an options map, containing only one keyword ::stylefy/with-classes. This feature is now deprecated, but works. If you want to provide additional classes to use-style, you should use the regular HTML :class attribute.

• Added support for globally defined vendor prefixes
• Added support for style caching using HTML5 local storage.

See readme for more info.

• Inline style map does not contain stylefy's namespaced keywords anymore(these were useless, only style properties can be used)
• Inline style map handles Garden's units and colors correctly by converting them to CSS strings
• New feature: Call stylefy/tag to reset the default style of a specific tag (like body)

• Styles containing feature queries are not returned as inline styles.

Now that all major CSS features are supported, it's time to release version 1.0!

• Added support for CSS feature queries (@supports). Media queries, modes and vendor prefixes inside @supports blocks are also supported. See README.md for examples.
• Added support for using vendor prefixes and modes in media queries
• Garden option {:pretty-print? false} is now supported in media queries (this change can only be seen in tests).

As always, all changes should be backwards compatible.

• prepare-styles now prepares all sub-styles recursively

• Adds support for deeper sub-style nesting by introducing a new core function: sub-style. See README & examples for information.

Thanks to @lllShamanlll for this idea!

• Makes sure prepare-styles also prepares sub-styles of the given styles

• Removes public reagent atoms: keyframes-in-dom? and font-faces-in-dom?. After init function was changed to add keyframes and font-faces into the DOM immediately, the values of these atoms were basically always true.
• Adds a new public API function prepare-styles. Calling this function asks stylefy to convert the styles to CSS and add them into the DOM immediately. Calling this function on :component-will-mount can be useful if a component is going to use styles with specific modes or media queries that cannot be present as inline style, and the component should not be hidden for the small period of time when the styles are prepared to be added into the DOM.

It's good to keep in mind that most of the time prepare-styles is not needed but calling use-style should be enough.

• stylefy/init immediately converts all font-faces, keyframes and custom classes in to CSS and adds the generated code in to DOM.

Previously, calling stylefy/init started requesting an animation frame to do the same process. However, it is useful to generate CSS code immediately so that font-faces, keyframes and custom classes are ready in the DOM before the first component is rendered.

• Makes it possible to define custom classes with custom names.

Useful when working with 3rd party libraries / frameworks. use-style should still be used when ever possible.

• Return component style as inline style if the style definition contains hover state

Normally, when a style definition constains modes, the component is hidden until the generated CSS has been added to DOM. However, :hover mode does not change the initial state of the component, so it can be rendered with inline style until DOM is ready and class can be used.

• Fixed invalid error logging

• When returning invisible component, also return the given style properties

This helps the component to take all the space it's going to need

• Uses a separate style tag for font-faces and keyframes.

This change was made because some browsers (Chrome) lose the font-face declaration when the style tag is updated. Since font-face and keyframes are not going to change, we keep them in a separate style tag which is not going to change.

• If style definition contains media queries or modes, {:visibility "hidden"} is returned.

This change has been made, because media queries and modes cannot be used in inline styles, so the components are probably going to be rendered incorrectly. It is better to hide them for the few milliseconds until DOM is ready.

• Added two new public Reagent atoms to core (font-faces-in-dom? & keyframes-in-dom?). This makes it possible to render components only when all font-faces and keyframes are added into DOM.

For example, IE11 requires that animation is present in DOM before it can be correctly used in a component.

• DOM is updated immidiately after font-faces or keyframes are defined

• Adds support for @font-face and @keyframes