npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@justeat/fozzie

v11.2.2

Published

UI Web Framework for the Just Eat Global Platform

Downloads

1,157

Readme

What is Fozzie?

Fozzie is an SCSS Helper Library that's used to help ensure web projects across JET have access to a set of baseline SCSS variables, mixins and functions.

By including this helper library, the consuming web application will have access to our shared PIE Design tokens, as well as common SCSS helper mixins and functions for things like font-size, spacing and setting media queries.

Usage

Pre-requisites

To use the fozzie SCSS helper library, you'll need to ensure a couple of things:

  1. That you use dart-sass to compile your Sass. The sass module uses dart-sass by default now, so if you use the latest version of this module, you'll be good-to-go.

    node-sass support in Sass has been officially deprecated and as this library uses up-to-date Sass syntax (namely @use and @forward, rather than @import), it won't work when compiling with node-sass.

  2. Your build tool supports importing via the node_modules folder.

    Both Webpack and Parcel support this by setting includePaths to point to the node_modules folder. More info on setting this up in your project can be found in the FAQ's (TODO: Add Link to docs).

Installation

  1. Install the fozzie module using NPM or Yarn:

    yarn add @justeat/fozzie
  2. Then within your Sass files, you will need to import this module.

    @use 'fozzie' as f;

Once you have imported fozzie into your Sass, you'll have access to the fozzie variables, mixins and functions, which can be used as in the following example:

  .myCoolComponent {
    // Using PIE Variables
    background: f.$color-background-default;
    border-radius: f.$radius-rounded-b;

    // Using helper mixins
    @include f.font-size('body-l');

    // Using helper functions
    padding: f.spacing('b');

    // Using media query helper
    @include media('>mid') {
      padding: f.spacing('c');
    }
  ]

Testing

We currently test our SCSS in two ways:

  1. Unit testing
  2. Snapshot testing

Unit Testing

We use a library called sass-true to enable writing unit tests for sass functions and mixins. These tests live in src/test/scss/unit-tests. We should use these as a means of documentation for our functions and mixins, as well as ensuring that API regressions aren't introduced.

Snapshot Testing

We use Jest to write snapshot tests of the compiled CSS for parts of Fozzie. These live in src/test/scss/snapshot-tests. Snapshot tests provide a means of ensuring that no unexpected styles will be introduced for consumers of the library. They can also be used to ensure that the compiled CSS is 100% valid, or to make sure there's simply nothing unexpected being rendered.

To write these tests, we can either import an SCSS file or write a line of SCSS we'd like to test and compile it using the compileToCss.js module. We can then use Jest to snapshot test the outputted string.