How to Install:

Install globally on your machine:

npm i ds-variables-converter -g

What is it for

This is a cli-tool to aid in front end development to convert over from plain css values to design system values.

Basically the designs that we receive are often given in pixels and without Economist Design System variables for other css elements.

This package will make it easy to quickly convert these over with little to no trouble.

Currently this package is in beta but will be improved upon if there is a need for it in the organisation.

How to use

The run command for this package in the cli is:

formatDoc

If you need help:

formatDoc --help

Flags

To use this cli-tool you will need to provide the format falg -f. There are several predefined values you can provide:

['fontSize', 'coloursVars', 'fontFamily', 'toRem', 'toPx', 'all']

• -f all will do all the variables plus convert px to rem

• -f fontsize will replace px or rem values to the ds variable (this is an exact matcher - will be improved to closest ds variable eventually, e.g. 16px/1rem will match convert to var( --ds-type-scale-0) and 18px//1.125rem will convert to var( --ds-type-scale-1) BUT 17px/0.625rem will not convert to anything, see design system docs)

• -f coloursVars will convert hex values to ds vars. e.g #E3120B -> var(--ds-color-economist-red)

• -f fontFamily will convert font families. E.g. Milo TE -> var(--ds-type-system-serif)

• -f toPX will convert rem to px

• -f toRem will convert px to rem

Paths/Files

When using the tool, you basically need to give it a path to the file on your machine. It can either be the full path or a relative path to the file.

Or you can cd into the directory where the styles file you desire to convert is and just provide the file name with its extension.

The -p flag and path/file name is necessary:

-p <yourFilePath>

e.g:

Full path: -p /Users/someone/Documents/PersonalEconProj/cli-tool-v1/my-first-cli/this-component.ts

A relative path:

-p my-first-cli/this-component.ts

if you cd into the folder:

-p this-component.ts

Example full commands

To convert an entire file:

formatDoc -p episode.styles.ts -f all

Convert to rem:

formatDoc -p episode.styles.ts -f toRem

Convert the fontFamilies only:

formatDoc -p episode.styles.ts -f fontFamily

Removing it from your local machine

As it is a beta. To remove easily from your local machine:

npm uninstall -g ds-variables-converter

and check it is no longer there:

npm list -g --depth=0