Creating NPM CSS Packages with SuperflyCSS

Image by Christine Sponchia from Pixabay

An updated version of this article is available here:

Creating NPM CSS Packages with SuperflyCSS

Scenario

We want the font face rule for saira in a package that is NPM installable.

The name of the package will be @fireflysemantics/css-saira-font .

Approach

First install @superflycss/cli :

npm i -g @superflycss/cli

Create a new project for NPM package.

sfc new saira-font-package
cd saira-font-package

Thennpm i @superflycss/utilities-fonts , as we will be importing the saira font from there.

Replace the content in src/main/css/index.css with the saira font import such that the file looks like this:

@import "@superflycss/utilities-fonts/google/saira";

Try running sfc b and have a look at target/main/css/index.css . You will see the font face rules and utilities for the saira font are generated.

Now we will create the package install scripts. Replace package.json with this:

{
"name": "@fireflysemantics/css-saira-font",
"version": "1.0.0",
"description": "CSS Saira Font Package",
"scripts": {
    "i": "npm install -g del-cli && npm install -g @jsdevtools/version-bump-prompt && npm install -g npm-install-peers && npm i -g @superflycss/cli",
    "b": "sfc b",
    "s": "sfc s",
    "d": "sfc d",
    "p": "bump patch && del target && sfc b && cp package.json target/main/css/ && cd target/main/css && npm publish"
    },
    "main": "index.css",
    "keywords": [
        "css",
        "npm"
    ],
    "license": "MIT",
    "devDependencies": {
        "@superflycss/utilities-fonts": "^4.0.4"
    }
}

The script p will copy package.json into target/main/css and then run npm publish .

Thus now we can just run npm run p to publish the package.

Once published we can NPM install it like this:

npm i @fireflysemantics/css-saira-font

To use the package with Angular see this resource:

css-saira-font

Importing CSS from NPM Packages With Angular