tailwindcss-turbine
Version:
Component generator for Tailwind CSS
63 lines • 2.21 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
const plugin_1 = __importDefault(require("tailwindcss/plugin"));
const turbineConfig_1 = require("./models/turbineConfig");
const util_1 = require("./util");
function getColorValidator(config) {
var _a;
return (_a = config.colorValidator) !== null && _a !== void 0 ? _a : ((_color, _values) => true);
}
function parseStyles(config) {
return {
...config,
baseStyles: config.baseStyles && util_1.prependApply(config.baseStyles),
modifiers: config.modifiers && Object.entries(config.modifiers).reduce((res, [key, val]) => {
return {
...res,
[key]: util_1.prependApply(val)
};
}, {})
};
}
/**
* Tailwind CSS plugin which will generate class-based components using
* a provided config object and your color theme.
*
* @defaultValue Not providing a configuration object will generate tail-kit-styled buttons
*
* @see [Docs](https://github.com/SuperiorJT/tailwindcss-turbine)
*
* @param config The configuration object to generate components from.
*/
const turbine = plugin_1.default.withOptions((config = turbineConfig_1.DEFAULTS) => {
return ({ addComponents, theme }) => {
const colorValidator = getColorValidator(config);
config = parseStyles(config);
let all = {};
if (config.baseStyles) {
all = {
...all,
...util_1.calculateBaseStyles(config),
...util_1.calculateModifierStyles(config)
};
}
const themed = Object.entries(theme('colors'))
.filter(([color, values]) => colorValidator(color, values))
.reduce((res, [color, _]) => {
return {
...res,
...util_1.calculateBaseColorStyles(config, color),
...util_1.calculateModifierColorStyles(config, color)
};
}, {});
all = {
...all,
...themed
};
addComponents(all);
};
});
module.exports = turbine;
//# sourceMappingURL=index.js.map