Minion is a tool used to change selectors in the Javascript code based on the Class Maps that passing in options.
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')# NPM
npm i minion-js --save-dev
# Yarn
yarn add -D minion-jsimport 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')If true, minion-js will generate a sourcemap from the modified code. Default true.
Field name used to retrieve Class Maps data from the global object. Default classMaps.
Have your own Class Maps? Please pass through this function.
Need a sourcemap? Relax, minion-js will automatically create it for you.
You can exclude some code from being modified by this package using inline-comment. The comment is minion-disable and minion-enable.
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
someDescriptionvariable
Object that contains the data set to replace. In real case, this object will automatically generated by Extractor.
{
'<target>': '<substitute>'
}{
absolute: 'a',
relative: 'b',
block: 'c'
}absolutewill be change toa.relativewill be change tob.blockwill be change toc.
Part that will generate the Class Maps from the existing CSS file.
CSS
.text-black {
color: black;
}
.italic {
font-style: italic;
}Will be converted to Class Maps by Extractor
{
'text-black': 'a',
'italic': 'b'
}The section that writes the Class Maps from the Extractor to the build code.
minion-jsis writer for Javascript code.
- PostCSS - postcss-minion
-
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.)
Need more examples? See minion-examples.