Frontity release: 4 November 2019

👨‍💻 Framework Development Releases
1

We added support for fonts in webpack (woff, woff2, ttf and eot).
The way to use them is as follows:

import { css, Global } from "frontity";

// Import your own font file.
import aclonica from "./fonts/aclonica-v10-latin-regular.woff";

const styleWithFont = css`
  @font-face {
    font-family: "Aclonica";
    font-style: normal;
    font-weight: 400;

    /* Use it inside the CSS */
    src: url(${aclonica});
  }
`;

const Theme = () => (
  ...
  <Global styles={styleWithFont} />
  ...
);

Also, several fixes are included in this new release, most related to the emotion library:

  • The name of the styled component now appears in the CSS class of those components. This makes much easier to identify styled components in the HTML code.

  • Source maps for styled components are fixed too so now they can be properly inspected and debugged using browser dev tools.

:bulb: To keep Frontity and its packages updated, you can follow this guide of our documentation.

Features

  • webpack: add support for fonts to webpack (2148823)

Bug Fixes

  • core: add labels and source maps (#227) (d5af653)
  • emotion: fix Global css not ending up in head (e8c3430)
  • emotion: fix Global leak (baad509)
  • post-type: fix handler if a query is present (0c36a7c)
  • styles: add styles for form inputs (#231) (0d6385b)

Versions

 - babel-plugin-frontity@1.0.1
 - @frontity/components@1.1.14
 - @frontity/core@1.4.0
 - @frontity/file-settings@1.1.5
 - frontity@1.4.2
 - @frontity/hooks@1.1.13
 - @frontity/html2react@1.1.14
 - @frontity/mars-theme@1.2.3
 - @frontity/router@1.0.17
 - @frontity/source@1.0.16
 - @frontity/tiny-router@1.0.17
 - @frontity/wp-source@1.4.2
 - @frontity/yoast@1.1.5
7 Likes