css-in-js-preprocessor

Preprocess your css-in-js files to replace references to design system tokens with actual values

import { preprocessor } from 'css-in-js-preprocessor';

"scripts": {
  "compile": "tsc && node bin/style-preprocess.js"
}

{
  "backgroundAccentColor": "#ccc",
  "fontSizeMedium": 12,
  "paddingMedium": 16
}

import tokens from './my-tokens';

export const someStyle = {
  backgroundColor: tokens.backgroundAccentColor,
  fontSize: tokens.fontSizeMedium,
  padding: tokens.paddingMedium,
};

const { preprocessor } = require('css-in-js-preprocessor');
const fs = require('fs');
const path = require('path');
const tokens = require('./my-tokens');

// Setup preprocessor:
const preprocess = preprocessor(tokens, './my-tokens');

// Read the file:
let file = fs.readFileSync('./styles.js', 'utf8');

// Preprocess the file:
file = preprocess(file);

// Save the file:
// Note that this example overwrites the original file which 
// should be the compiled version of the file and not the 
// original source file. 
fs.writeFileSync(path.join('./styles.js'), file, 'utf8');

export const someStyle = {
  backgroundColor: '#fff',
  fontSize: 12,
  padding: 16,
};

const changePaddingToMargin = file => file.replace('padding: ', 'margin: ');
const addTimeStamp = file => `${file}\n\n// Compiled: ${(new Date()).toString()}`;

// Setup preprocessor:
const preprocess = preprocessor(tokens, './my-tokens', [changePaddingToMargin, addTimeStamp]);

export const something = {
  backgroundColor: '#fff,
  fontSize: 12,
  margin: 16,
};

// Compiled: Tue Mar 16 2021 06:15:06 GMT-0500 (Central Daylight Time)

const { preprocessor } = require('css-in-js-preprocessor');
const fs = require('fs');
const path = require('path');
const tokens = require('./my-tokens');

// Setup preprocessor:
const preprocess = preprocessor(tokens, './my-tokens');

const files = (fs.readdirsync(pathToDir) || []).filter(file => file.endsWith('.js'));

for (const fileName of files) {
  // Read the file:
  let file = fs.readFileSync(path.join(pathToDir, fileName), 'utf8');

  // Preprocess the file:
  file = preprocess(file);

  // Save the file:
  // Note that this example overwrites the original files which 
  // should be the compiled versions of the files and not the 
  // original source files. 
  fs.writeFileSync(path.join(pathToDir, fileName), file, 'utf8');
}

For your token imports, you may use:

• default import
• named import
• default require
• named require

You may also name your tokens anything you wish:

import tokens from './my-tokens';
import { myTokens } from './my-tokens';
const tokenObj = require('./my-tokens');
const { tokenzzz } = require('./my-tokens');

css-in-js-preprocessor will pick up the name of your tokens object and get to work.

Within the module you'll find the following directories and files:

package.json
CHANGELOG.md -- history of changes to the module
LICENSE
README.md -- this file
/lib
  └───/es5
      └───index.d.ts - 48 Bytes
      └───index.js - 289 Bytes
    └───/preprocessor
      └───index.d.ts - 679 Bytes
      └───index.js - 1.29 KB
    └───/_private
      └───preprocessTokens - 2.16 KB
      └───removeImport - 1.23 KB
      └───utils - 1.16 KB
  └───/es6
      └───index.d.ts - 48 Bytes
      └───index.js - 48 Bytes
    └───/preprocessor
      └───index.d.ts - 679 Bytes
      └───index.js - 1.12 KB
    └───/_private
      └───preprocessTokens - 1.98 KB
      └───removeImport - 1.08 KB
      └───utils - 942 Bytes

MIT