Quick Start

• Whats is Minion?
• Installation
• Usage
  • Options
• Features
  • Automatically generates Sourcemap
  • Ignore replacement
• Concepts
  • Class Maps
  • Extractor
  • Writer
• Integrations
  • Extractor
    • PostCSS
  • Writer
    • Rollup
• More Examples

What is Minion?

Minion is a tool used to change selectors in the Javascript code based on the Class Maps that passing in options.

Example:

Class Maps

Whats is Class Maps? See Class Maps.

{
  'text-4xl': 'a',
  'font-medium': 'b',
  'absolute': 'c',
  'rounded': 'd'
}

Example using Tailwind CSS Class

Javascript Input

document.getElementById('title').classList.add('text-4xl', 'font-medium')
document.getElementById('modal').classList.add('rounded', 'absolute')
document.getElementById('banner').classList.add('rounded')

After processing with Minion

document.getElementById('title').classList.add('a', 'b')
document.getElementById('modal').classList.add('d', 'c')
document.getElementById('banner').classList.add('d')

---

Installation

# NPM
npm i minion-js --save-dev

# Yarn
yarn add -D minion-js

---

Usage

import createMinion from 'minion-js'

const minion = createMinion({
  // In real case, Class Maps will automatically generated by Extractor.
  getClassMaps: () => ({
    'bg-gray-100': 'a',
    'border-3': 'b',
    'mt-2': 'c',
  })
})

const originalCode = `
document.getElementById('box').classList.add(['bg-gray-100']);
document.getElementsByClassName('mt-2');
console.log('border-3')
`
const modifiedCode = minion(originalCode)

console.log(modifiedCode.code)

Output

document.getElementById('box').classList.add(['a']);
document.getElementsByClassName('b');
console.log('c')

Options

sourcemap: boolean

If true, minion-js will generate a sourcemap from the modified code. Default true.

classMapsFieldName: string

Field name used to retrieve Class Maps data from the global object. Default classMaps.

getClassMaps: () => object

Have your own Class Maps? Please pass through this function.

---

Features

Automatically generates Sourcemap

Need a sourcemap? Relax, minion-js will automatically create it for you.

Ignore replacement

You can exclude some code from being modified by this package using inline-comment. The comment is minion-disable and minion-enable.

Example

Class Maps

{
  'object-cover': 'a',
  relative: 'b'
}

Input

// minion-disable
const someDescription = 'Gravity relative to the mass of the object.'
// minion-enable
const imageClass = 'relative object-cover rounded'

See "relative" word after "Gravity" word

Output

// minion-disable
const someDescription = 'Gravity relative to the mass of the object.'
// minion-enable
const imageClass = 'a b rounded'

Nothing has changed from the someDescription variable

---

Concepts

Class Maps

Object that contains the data set to replace. In real case, this object will automatically generated by Extractor.

Format

{
  '<target>': '<substitute>'
}

Example

{
  absolute: 'a',
  relative: 'b',
  block: 'c'
}

• absolute will be change to a.
• relative will be change to b.
• block will be change to c.

Extractor

Part that will generate the Class Maps from the existing CSS file.

Example

CSS

.text-black {
  color: black;
}

.italic {
  font-style: italic;
}

Will be converted to Class Maps by Extractor

{
  'text-black': 'a',
  'italic': 'b'
}

Writer

The section that writes the Class Maps from the Extractor to the build code.

minion-js is writer for Javascript code.

---

Integrations

Extractor

• PostCSS - postcss-minion

Writer

• Javascript - minion-js (You are here)

• Rollup - rollup-plugin-minion

• Rollup HTML - rollup-plugin-minion-html (Coming soon. PR welcome.)

• Webpack - minion-loader (Coming soon. PR welcome.)

• Webpack HTML - minion-html-loader (Coming soon. PR welcome.)

---

More Examples

Need more examples? See minion-examples.