@battery/core - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

dist/classMetaData/addClassObjectData.js

@@ -19,7 +19,8 @@ import { generateClassObject } from '../utils/classObjects';
         }
-        var plugin = config.plugins.find(function (pluginConfig) { return pluginConfig.name === classMeta.valuePlugin; });
-        if (classMeta.valuePluginType === 'lookup') {
+        var plugin = classMeta.valuePlugin;
+        var valuePluginType = plugin.type;
+        if (valuePluginType === 'lookup') {
             value = plugin.values[classMeta.explodedSource.valueIdentifier];
         }
-        if (classMeta.valuePluginType === 'pattern') {
+        if (valuePluginType === 'pattern') {
             value = classMeta.explodedSource.valueIdentifier;
@@ -26,0 +27,0 @@ }

dist/classMetaData/addClassPluginData.js

@@ -23,3 +23,2 @@ var __assign = (this && this.__assign) || function () {
     var matchedModifier = matchedPlugin.modifiers.find(function (modifier) { return modifier.identifier === affix; });
-    var pluginName = matchedPlugin.name;
     var pluginType = matchedPlugin.type;
@@ -29,7 +28,7 @@ var modifierName = matchedModifier.name;
     if (pluginType === 'at-rule') {
-        affixData.atrulePlugin = pluginName;
+        affixData.atrulePlugin = matchedPlugin;
         affixData.atruleModifier = modifierName;
     }
     else if (pluginType === 'selector') {
-        affixData.selectorPlugin = pluginName;
+        affixData.selectorPlugin = matchedPlugin;
         affixData.selectorModifier = modifierName;
@@ -36,0 +35,0 @@ }

dist/classMetaData/addExplodedSourceData.js

@@ -38,3 +38,4 @@ var __assign = (this && this.__assign) || function () {
 var setValueSeparator = function (explodedSource, propConfig, classMeta) {
-    var _a = propConfig.valueSeparator, valueSeparator = _a === void 0 ? '' : _a, _b = propConfig.pluginSeparator, pluginSeparator = _b === void 0 ? '' : _b;
+    var _a = propConfig.valueSeparator, valueSeparator = _a === void 0 ? '' : _a, valuePlugin = propConfig.valuePlugin;
+    var pluginSeparator = (valuePlugin && valuePlugin.separator) || '';
     var valueOrPluginSeparator = classMeta.keyword
@@ -45,5 +46,5 @@ ? valueSeparator
 };
-var setModifierData = function (explodedSource, classMeta, matchers, plugins) {
-    var value = classMeta.source.match(matchers[classMeta.valuePlugin])[3];
-    var plugin = plugins.find(function (pluginConfig) { return pluginConfig.name === classMeta.valuePlugin; });
+var setModifierData = function (explodedSource, classMeta, matchers) {
+    var value = classMeta.source.match(matchers[classMeta.property.join('')])[3];
+    var plugin = classMeta.valuePlugin;
     if (plugin.modifiers) {
@@ -75,3 +76,3 @@ var valuePluginMatcher = generateValueMatcher(plugin, true);
 var determinePluginValueIdentifier = function (explodedSource, classMeta, matchers) {
-    var value = classMeta.source.match(matchers[classMeta.valuePlugin])[3];
+    var value = classMeta.source.match(matchers[classMeta.property.join('')])[3];
     var modifierIdentifier = explodedSource.modifierIdentifier, modifierSeparator = explodedSource.modifierSeparator;
@@ -108,3 +109,3 @@ return value.replace(modifierIdentifier, '').replace(modifierSeparator, '');
         var _b = __read(_a, 1), matcherName = _b[0];
-        return (matcherName === classMeta.valuePlugin ||
+        return (matcherName === classMeta.property.join('') ||
             (classMeta.keyword && matcherName === 'keyword'));
@@ -160,3 +161,3 @@ });
         else {
-            withModifierData = setModifierData(withValueSeparator, classMeta, matchers, plugins);
+            withModifierData = setModifierData(withValueSeparator, classMeta, matchers);
         }
@@ -163,0 +164,0 @@ var withValueIdentifier = setValueIdentifier(withModifierData, classMeta, matchers);

dist/classMetaData/addMetaData.js

@@ -1,17 +0,1 @@
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
 import { addClassObjectData } from './addClassObjectData';
@@ -25,21 +9,4 @@ import { addKeywordData } from './addKeywordData';
 import { addExplodedSourceData } from './addExplodedSourceData';
-import { addModifierPluginData } from './addModifierPluginData';
+import { addValueModifierPluginData } from './addValueModifierPluginData';
 import { addClassPluginData } from './addClassPluginData';
-var getPlugins = function (pluginTypes, matchers, plugins) {
-    if (!plugins)
-        return {};
-    return Object.entries(matchers)
-        .filter(function (_a) {
-        var _b = __read(_a, 1), matcherName = _b[0];
-        var valuePlugins = plugins
-            .filter(function (plugin) { return pluginTypes.includes(plugin.type); })
-            .map(function (plugin) { return "" + plugin.name; });
-        return valuePlugins.includes(matcherName);
-    })
-        .reduce(function (accum, _a) {
-        var _b = __read(_a, 2), matcherName = _b[0], regex = _b[1];
-        accum[matcherName] = regex;
-        return accum;
-    }, {});
-};
 var sortValidAndInvalid = function (classMeta) {
@@ -60,3 +27,2 @@ return classMeta.reduce(function (accum, obj) {
     var matchers = generateMatchers(config, keywords);
-    var valuePluginMatchers = getPlugins(['pattern', 'lookup'], matchers, config.plugins);
     // Adds: source, invalid, selector
@@ -67,4 +33,4 @@ var withSourceData = addSourceData(classNames, matchers);
     var withKeywordData = addKeywordData(validClassMeta, matchers);
-    // Adds: valuePlugin, valuePluginType
-    var withValuePluginData = addValuePluginData(withKeywordData, valuePluginMatchers, config.plugins);
+    // Adds: valuePlugin
+    var withValuePluginData = addValuePluginData(withKeywordData, matchers, config.props);
     // Adds: property
@@ -75,3 +41,3 @@ var withPropertyData = addPropertyData(withValuePluginData, matchers, config.props, keywords);
     // Adds: valueModifier
-    var withModifierPlugin = addModifierPluginData(withExplodedSourceData, config.plugins);
+    var withModifierPlugin = addValueModifierPluginData(withExplodedSourceData);
     // Adds: selectorPlugin, atrulePlugin
@@ -78,0 +44,0 @@ var withClassPluginData = addClassPluginData(withModifierPlugin, config.plugins);

dist/classMetaData/addMetaData.test.js

@@ -32,3 +32,3 @@ import { addMetaData } from './addMetaData';
                     },
-                    valuePlugin: 'lengthUnit',
+                    valuePlugin: lengthUnitsPlugin(),
                 },
@@ -109,3 +109,3 @@ ],
                     classNamespace: 'z',
-                    valuePlugin: 'integer',
+                    valuePlugin: integerPlugin(),
                 },
@@ -115,4 +115,3 @@ {
                     classNamespace: 'bg',
-                    pluginSeparator: '-',
-                    valuePlugin: 'color',
+                    valuePlugin: colorPlugin({ separator: '-' }),
                 },
@@ -127,3 +126,3 @@ {
                     },
-                    valuePlugin: 'lengthUnit',
+                    valuePlugin: lengthUnitsPlugin(),
                 },
@@ -133,6 +132,5 @@ {
                     classNamespace: 'w',
-                    valuePlugin: 'lengthUnit',
+                    valuePlugin: lengthUnitsPlugin(),
                 },
             ],
-            plugins: [integerPlugin, colorPlugin, lengthUnitsPlugin],
         };
@@ -147,4 +145,3 @@ var inputClassNames = ['bg-white', 'bg-white_10', 'z100', 'w3'];
                     property: ['background-color'],
-                    valuePlugin: 'color',
-                    valuePluginType: 'lookup',
+                    valuePlugin: colorPlugin(),
                     explodedSource: {
@@ -170,4 +167,3 @@ prefix: '',
                     property: ['background-color'],
-                    valuePlugin: 'color',
-                    valuePluginType: 'lookup',
+                    valuePlugin: colorPlugin(),
                     explodedSource: {
@@ -194,4 +190,3 @@ prefix: '',
                     property: ['z-index'],
-                    valuePlugin: 'integer',
-                    valuePluginType: 'pattern',
+                    valuePlugin: integerPlugin(),
                     explodedSource: {
@@ -217,4 +212,3 @@ prefix: '',
                     property: ['width'],
-                    valuePlugin: 'lengthUnit',
-                    valuePluginType: 'pattern',
+                    valuePlugin: lengthUnitsPlugin(),
                     explodedSource: {
@@ -245,3 +239,3 @@ prefix: '',
                     classNamespace: 'z',
-                    valuePlugin: 'integer',
+                    valuePlugin: integerPlugin(),
                 },
@@ -251,4 +245,3 @@ {
                     classNamespace: 'bg',
-                    pluginSeparator: '-',
-                    valuePlugin: 'color',
+                    valuePlugin: colorPlugin({ separator: '-' }),
                 },
@@ -263,3 +256,3 @@ {
                     },
-                    valuePlugin: 'lengthUnit',
+                    valuePlugin: lengthUnitsPlugin(),
                 },
@@ -269,13 +262,6 @@ {
                     classNamespace: 'w',
-                    valuePlugin: 'lengthUnit',
+                    valuePlugin: lengthUnitsPlugin(),
                 },
             ],
-            plugins: [
-                integerPlugin,
-                colorPlugin,
-                lengthUnitsPlugin,
-                breakpointPlugin,
-                pseudoPlugin,
-                hoverTargetPlugin,
-            ],
+            plugins: [breakpointPlugin(), pseudoPlugin(), hoverTargetPlugin()],
         };
@@ -295,5 +281,4 @@ var inputClassNames = [
                     property: ['background-color'],
-                    valuePlugin: 'color',
-                    valuePluginType: 'lookup',
-                    atrulePlugin: 'breakpoint',
+                    valuePlugin: colorPlugin(),
+                    atrulePlugin: breakpointPlugin(),
                     atruleModifier: 'responsiveMedium',
@@ -320,5 +305,4 @@ explodedSource: {
                     property: ['background-color'],
-                    valuePlugin: 'color',
-                    valuePluginType: 'lookup',
-                    selectorPlugin: 'pseudo',
+                    valuePlugin: colorPlugin(),
+                    selectorPlugin: pseudoPlugin(),
                     selectorModifier: 'hover',
@@ -346,5 +330,4 @@ explodedSource: {
                     property: ['z-index'],
-                    valuePlugin: 'integer',
-                    valuePluginType: 'pattern',
-                    atrulePlugin: 'breakpoint',
+                    valuePlugin: integerPlugin(),
+                    atrulePlugin: breakpointPlugin(),
                     atruleModifier: 'responsiveLarge',
@@ -371,3 +354,3 @@ explodedSource: {
                     property: ['background-size'],
-                    selectorPlugin: 'hoverTarget',
+                    selectorPlugin: hoverTargetPlugin(),
                     selectorModifier: 'hoverItem',
@@ -374,0 +357,0 @@ explodedSource: {

dist/classMetaData/addPropertyData.js

@@ -35,3 +35,5 @@ var __read = (this && this.__read) || function (o, n) {
         }
-        var pluginSeparatorsRegex = new RegExp("[" + props.map(function (prop) { return prop.pluginSeparator; }).join('') + "]");
+        var pluginSeparatorsRegex = new RegExp("[" + props
+            .map(function (prop) { return (prop.valuePlugin || {}).separator || ''; })
+            .join('') + "]");
         var classNamespace = classMeta.source
@@ -41,8 +43,9 @@ .match(regex)[2]
         var property = props.find(function (prop) {
+            var valuePluginKey = prop.cssProperty.join('');
             if (classNamespace.length > 0 && prop.classNamespace) {
                 var matched = prop.classNamespace.match(new RegExp(classNamespace));
-                return (prop.valuePlugin === matcherName && matched && matched.length > 0);
+                return valuePluginKey === matcherName && matched && matched.length > 0;
             }
             else if (classNamespace.length === 0 && prop.pluginDefault) {
-                return prop.valuePlugin === matcherName && prop.pluginDefault;
+                return valuePluginKey === matcherName && prop.pluginDefault;
             }
@@ -49,0 +52,0 @@ else {

dist/classMetaData/addValuePluginData.d.ts

@@ -0,4 +1,4 @@
+import { DeveloperPropertyConfig } from './../types/property-config';
 import { ClassMetaData } from '../types/classname';
 import { Matchers } from '../types/matchers';
-import { PluginConfig } from '../types/plugin-config';
-export declare const addValuePluginData: (classMetaArr: ClassMetaData[], valuePluginMatchers: Matchers, plugins: PluginConfig[]) => ClassMetaData[];
+export declare const addValuePluginData: (classMetaArr: ClassMetaData[], valuePluginMatchers: Matchers, propConfigs: DeveloperPropertyConfig[]) => ClassMetaData[];

dist/classMetaData/addValuePluginData.js

@@ -17,17 +17,14 @@ var __read = (this && this.__read) || function (o, n) {
 };
-export var addValuePluginData = function (classMetaArr, valuePluginMatchers, plugins) {
+export var addValuePluginData = function (classMetaArr, valuePluginMatchers, propConfigs) {
     return classMetaArr.map(function (classMeta) {
         if (classMeta.keyword)
             return classMeta;
-        var pluginName = Object.entries(valuePluginMatchers).find(function (_a) {
+        var _a = __read(Object.entries(valuePluginMatchers).find(function (_a) {
             var _b = __read(_a, 2), regex = _b[1];
             return regex.test(classMeta.source);
-        });
-        var plugin = plugins.find(function (pluginConfig) { return pluginConfig.name === pluginName[0]; });
-        classMeta.valuePlugin = plugin.name;
-        if (plugin.type === 'lookup' || plugin.type === 'pattern') {
-            classMeta.valuePluginType = plugin.type;
-        }
+        }), 2), matcherName = _a[0], regex = _a[1];
+        var propConfig = propConfigs.find(function (config) { return config.cssProperty.join('') === matcherName; });
+        classMeta.valuePlugin = propConfig.valuePlugin;
         return classMeta;
     });
 };

dist/classMetaData/keywordToMetaData.test.js

 import { keywordToMetaData } from './keywordToMetaData';
+import { lengthUnitsPlugin } from '../fixtures/plugins/lengthUnits';
 describe('keywordToMetaData', function () {
@@ -15,3 +16,3 @@ describe('Given a config containing keyword class definitions', function () {
                         },
-                        valuePlugin: 'lengthUnits',
+                        valuePlugin: lengthUnitsPlugin(),
                     },
@@ -18,0 +19,0 @@ ],

dist/config/processSubProps.js

@@ -71,3 +71,5 @@ var __assign = (this && this.__assign) || function () {
             var _b = __read(_a, 2), subPropGroup = _b[0], subPropIdentifier = _b[1];
-            var classNamespace = propConfig.classNamespace, _c = propConfig.subPropSeparator, subPropSeparator = _c === void 0 ? '' : _c, cssProperty = propConfig.cssProperty, rest = __rest(propConfig, ["classNamespace", "subPropSeparator", "cssProperty"]);
+            var classNamespace = propConfig.classNamespace, _c = propConfig.subPropSeparator, subPropSeparator = _c === void 0 ? '' : _c, cssProperty = propConfig.cssProperty, 
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            subProps = propConfig.subProps, rest = __rest(propConfig, ["classNamespace", "subPropSeparator", "cssProperty", "subProps"]);
             var newProp = processedProp(subPropMapper[subPropGroup], cssProperty[0]);
@@ -74,0 +76,0 @@ var newPropIdentifier = "" + classNamespace + subPropSeparator + subPropIdentifier;

dist/config/processSubProps.test.js

 import { convertSubProps } from './processSubProps';
+import { lengthUnitsPlugin } from '../fixtures/plugins/lengthUnits';
 describe('processSubProps', function () {
@@ -20,3 +21,3 @@ it('converts configs with subProps into their own separate configs', function () {
             },
-            valuePlugin: 'lengthUnit',
+            valuePlugin: lengthUnitsPlugin(),
         };
@@ -32,3 +33,3 @@ var props = [margin];
                 },
-                valuePlugin: 'lengthUnit',
+                valuePlugin: lengthUnitsPlugin(),
             },
@@ -42,3 +43,3 @@ {
                 },
-                valuePlugin: 'lengthUnit',
+                valuePlugin: lengthUnitsPlugin(),
             },
@@ -52,3 +53,3 @@ {
                 },
-                valuePlugin: 'lengthUnit',
+                valuePlugin: lengthUnitsPlugin(),
             },
@@ -62,3 +63,3 @@ {
                 },
-                valuePlugin: 'lengthUnit',
+                valuePlugin: lengthUnitsPlugin(),
             },
@@ -72,3 +73,3 @@ {
                 },
-                valuePlugin: 'lengthUnit',
+                valuePlugin: lengthUnitsPlugin(),
             },
@@ -82,3 +83,3 @@ {
                 },
-                valuePlugin: 'lengthUnit',
+                valuePlugin: lengthUnitsPlugin(),
             },
@@ -92,3 +93,3 @@ {
                 },
-                valuePlugin: 'lengthUnit',
+                valuePlugin: lengthUnitsPlugin(),
             },
@@ -95,0 +96,0 @@ ];

dist/css/classMetaToCSS.js

@@ -25,5 +25,3 @@ var __read = (this && this.__read) || function (o, n) {
     if (classMeta.selectorPlugin) {
-        var selectorModifier = plugins
-            .find(function (plugin) { return plugin.name === classMeta.selectorPlugin; })
-            .modifiers.find(function (modifier) { return modifier.name === classMeta.selectorModifier; });
+        var selectorModifier = classMeta.selectorPlugin.modifiers.find(function (modifier) { return modifier.name === classMeta.selectorModifier; });
         classMeta.selector = selectorModifier.modifierFn(classMeta.selector, classMeta.explodedSource.prefix);
@@ -30,0 +28,0 @@ }

dist/fixtures/plugins/breakpoint.d.ts

@@ -1,2 +0,1 @@
-import { PluginConfig } from '../../types/plugin-config';
-export declare const breakpointPlugin: PluginConfig;
+export declare const breakpointPlugin: (options?: Pick<import("../..").PluginConfig, "static" | "separator">) => import("../..").PluginConfig;

dist/fixtures/plugins/breakpoint.js

@@ -1,3 +0,3 @@
-export var breakpointPlugin = {
-    name: 'breakpoint',
+import { BatteryPlugin } from './../../battery-plugin';
+export var breakpointPlugin = BatteryPlugin({
     type: 'at-rule',
@@ -26,2 +26,2 @@ atrule: 'media',
     ],
-};
+});

dist/fixtures/plugins/color.d.ts

@@ -1,2 +0,1 @@
-import { PluginConfig } from '../../types/plugin-config';
-export declare const colorPlugin: PluginConfig;
+export declare const colorPlugin: (options?: Pick<import("../../types/plugin-config").PluginConfig, "static" | "separator">) => import("../../types/plugin-config").PluginConfig;

dist/fixtures/plugins/color.js

@@ -0,1 +1,2 @@
+import { BatteryPlugin } from './../../battery-plugin';
 var hexToRgba = function (hex, opacity) {
@@ -8,5 +9,4 @@ var hexValue = hex.replace('#', '');
 };
-export var colorPlugin = {
+export var colorPlugin = BatteryPlugin({
     type: 'lookup',
-    name: 'color',
     values: {
@@ -25,2 +25,2 @@ black: '#000000',
     ],
-};
+});

dist/fixtures/plugins/hoverTarget.d.ts

@@ -1,2 +0,1 @@
-import { PluginConfig } from '../../types/plugin-config';
-export declare const hoverTargetPlugin: PluginConfig;
+export declare const hoverTargetPlugin: (options?: Pick<import("../..").PluginConfig, "static" | "separator">) => import("../..").PluginConfig;

dist/fixtures/plugins/hoverTarget.js

@@ -1,3 +0,3 @@
-export var hoverTargetPlugin = {
-    name: 'hoverTarget',
+import { BatteryPlugin } from './../../battery-plugin';
+export var hoverTargetPlugin = BatteryPlugin({
     type: 'selector',
@@ -13,2 +13,2 @@ affixType: 'prefix',
     ],
-};
+});

dist/fixtures/plugins/integer.d.ts

@@ -1,2 +0,1 @@
-import { PluginConfig } from '../../types/plugin-config';
-export declare const integerPlugin: PluginConfig;
+export declare const integerPlugin: (options?: Pick<import("../..").PluginConfig, "static" | "separator">) => import("../..").PluginConfig;

dist/fixtures/plugins/integer.js

@@ -1,5 +0,5 @@
-export var integerPlugin = {
+import { BatteryPlugin } from './../../battery-plugin';
+export var integerPlugin = BatteryPlugin({
     type: 'pattern',
-    name: 'integer',
     identifier: /-?\d{1,4}/,
-};
+});

dist/fixtures/plugins/lengthUnits.d.ts

@@ -1,2 +0,1 @@
-import { PluginConfig } from '../../types/plugin-config';
-export declare const lengthUnitsPlugin: PluginConfig;
+export declare const lengthUnitsPlugin: (options?: Pick<import("../../types/plugin-config").PluginConfig, "static" | "separator">) => import("../../types/plugin-config").PluginConfig;

dist/fixtures/plugins/lengthUnits.js

@@ -0,1 +1,2 @@
+import { BatteryPlugin } from './../../battery-plugin';
 var pxToRem = function (value) { return parseInt(value) / 16 + "rem"; };
@@ -6,5 +7,4 @@ var ratio = function (value) {
 };
-export var lengthUnitsPlugin = {
+export var lengthUnitsPlugin = BatteryPlugin({
     type: 'pattern',
-    name: 'lengthUnit',
     identifier: /-?\d+/,
@@ -38,2 +38,2 @@ modifiers: [
     ],
-};
+});

dist/fixtures/plugins/pseudo.d.ts

@@ -1,2 +0,1 @@
-import { PluginConfig } from '../../types/plugin-config';
-export declare const pseudoPlugin: PluginConfig;
+export declare const pseudoPlugin: (options?: Pick<import("../..").PluginConfig, "static" | "separator">) => import("../..").PluginConfig;

dist/fixtures/plugins/pseudo.js

@@ -1,3 +0,3 @@
-export var pseudoPlugin = {
-    name: 'pseudo',
+import { BatteryPlugin } from './../../battery-plugin';
+export var pseudoPlugin = BatteryPlugin({
     type: 'selector',
@@ -19,2 +19,2 @@ affixType: 'prefix',
     ],
-};
+});

dist/fixtures/props/background-color.js

@@ -0,6 +1,6 @@
+import { colorPlugin } from '../plugins/color';
 export var backgroundColor = {
     cssProperty: 'background-color',
     classNamespace: 'bg',
-    pluginSeparator: '-',
-    valuePlugin: 'color',
+    valuePlugin: colorPlugin({ separator: '-' }),
 };

dist/fixtures/props/background-size.js

@@ -0,1 +1,2 @@
+import { lengthUnitsPlugin } from '../../fixtures/plugins/lengthUnits';
 export var backgroundSize = {
@@ -9,3 +10,3 @@ cssProperty: 'background-size',
     },
-    valuePlugin: 'lengthUnit',
+    valuePlugin: lengthUnitsPlugin(),
 };

dist/fixtures/props/color.js

@@ -0,1 +1,2 @@
+import { colorPlugin } from '../plugins/color';
 export var textColor = {
@@ -5,3 +6,3 @@ cssProperty: 'color',
     pluginDefault: true,
-    valuePlugin: 'color',
+    valuePlugin: colorPlugin(),
 };

dist/fixtures/props/fill.js

@@ -0,6 +1,6 @@
+import { colorPlugin } from '../plugins/color';
 export var fillColor = {
     cssProperty: 'fill',
     classNamespace: 'fill',
-    pluginSeparator: '-',
-    valuePlugin: 'color',
+    valuePlugin: colorPlugin({ separator: '-' }),
 };

dist/fixtures/props/flex.js

@@ -0,5 +1,6 @@
+import { integerPlugin } from '../plugins/integer';
 export var flex = {
     cssProperty: 'flex',
     classNamespace: 'flex',
-    valuePlugin: 'integer',
+    valuePlugin: integerPlugin(),
 };

dist/fixtures/props/margin.js

@@ -0,1 +1,2 @@
+import { lengthUnitsPlugin } from '../../fixtures/plugins/lengthUnits';
 export var margin = {
@@ -18,3 +19,3 @@ cssProperty: 'margin',
     },
-    valuePlugin: 'lengthUnit',
+    valuePlugin: lengthUnitsPlugin(),
 };

dist/fixtures/props/width.js

@@ -0,5 +1,6 @@
+import { lengthUnitsPlugin } from '../../fixtures/plugins/lengthUnits';
 export var width = {
     cssProperty: 'width',
     classNamespace: 'w',
-    valuePlugin: 'lengthUnit',
+    valuePlugin: lengthUnitsPlugin(),
 };

dist/fixtures/props/z-index.js

@@ -0,5 +1,6 @@
+import { integerPlugin } from '../plugins/integer';
 export var zIndex = {
     cssProperty: 'z-index',
     classNamespace: 'z',
-    valuePlugin: 'integer',
+    valuePlugin: integerPlugin(),
 };

dist/generateCSS.d.ts

 import { BatteryConfig } from './types/battery-config';
-export declare const generateCSS: (classNames: string[], config: BatteryConfig) => string;
+export declare const generateCSS: (classNames: string[], config: BatteryConfig, generateStaticLibrary?: boolean) => string;

dist/generateCSS.js

@@ -36,2 +36,3 @@ var __assign = (this && this.__assign) || function () {
 import { sortAlphaNum } from './utils/string';
+import { generateStaticValueClassNames } from './static/generateStaticValueClassNames';
 var processAtRulePlugins = function (classMetaArr, plugins) {
@@ -42,7 +43,7 @@ var atRuleProcessingOrder = plugins
         var pluginModifiers = plugin.modifiers.map(function (modifier) { return modifier.name; });
-        return [plugin.name, pluginModifiers];
+        return [plugin, pluginModifiers];
     });
     return atRuleProcessingOrder.reduce(function (accum, _a) {
-        var _b = __read(_a, 2), atRuleName = _b[0], modifierNames = _b[1];
-        var atRuleClassMeta = classMetaArr.filter(function (classMeta) { return classMeta.atrulePlugin === atRuleName; });
+        var _b = __read(_a, 2), atRulePlugin = _b[0], modifierNames = _b[1];
+        var atRuleClassMeta = classMetaArr.filter(function (classMeta) { return !!classMeta.atrulePlugin; });
         var atRuleCSSArr = modifierNames.reduce(function (cssArr, modifierName) {
@@ -56,5 +57,5 @@ var modifierClassMeta = atRuleClassMeta.filter(function (cm) { return cm.atruleModifier === modifierName; });
                 .join('');
-            var plugin = plugins.find(function (plugin) { return plugin.name === atRuleName; });
+            var plugin = plugins.find(function (plugin) { return plugin === atRulePlugin; });
             var modifier = plugin.modifiers.find(function (pluginModifier) { return pluginModifier.name === modifierName; });
-            var atRuleCss = "\n          @" + plugin.atrule + " " + modifier.condition + " { " + modifierCSS + " }\n        ";
+            var atRuleCss = "\n            @" + plugin.atrule + " " + modifier.condition + " { " + modifierCSS + " }\n          ";
             return cssArr.concat(atRuleCss);
@@ -101,12 +102,35 @@ }, []);
 };
+var generateStaticValuesArr = function (propertyConfig, autoGenerateStaticValues) {
+    if (autoGenerateStaticValues === void 0) { autoGenerateStaticValues = false; }
+    return autoGenerateStaticValues || propertyConfig.static
+        ? __assign(__assign({}, propertyConfig), { static: {
+                values: Object.keys(propertyConfig.values),
+            } }) : propertyConfig;
+};
+var wrapCSSPropertyInArray = function (propertyConfig) {
+    return __assign(__assign({}, propertyConfig), { cssProperty: [propertyConfig.cssProperty] });
+};
 var processConfig = function (config) {
-    var withStringCSSProperties = __assign(__assign({}, config), { props: config.props.map(function (prop) {
-            return __assign(__assign({}, prop), { cssProperty: [prop.cssProperty] });
+    var withStatic = __assign(__assign({}, config), { static: {
+            generateAllValues: (config.static && config.static.generateAllValues) || false,
+        } });
+    var withProcessedPropertyConfigs = __assign(__assign({}, withStatic), { props: config.props
+            .map(wrapCSSPropertyInArray)
+            .map(function (propertyConfig) {
+            return generateStaticValuesArr(propertyConfig, withStatic.static.generateAllValues);
         }) });
-    var withSubProps = convertSubProps(withStringCSSProperties);
+    var withSubProps = convertSubProps(withProcessedPropertyConfigs);
     return withSubProps;
 };
-export var generateCSS = function (classNames, config) {
+export var generateCSS = function (classNames, config, generateStaticLibrary) {
+    if (generateStaticLibrary === void 0) { generateStaticLibrary = false; }
     var processedConfig = processConfig(config);
-    var classMetaArr = addMetaData(classNames, processedConfig);
+    var processedClassNames;
+    if (generateStaticLibrary) {
+        processedClassNames = processedConfig.props.flatMap(generateStaticValueClassNames);
+    }
+    else {
+        processedClassNames = classNames;
+    }
+    var classMetaArr = addMetaData(processedClassNames, processedConfig);
     var withCssData = classMetaArr.map(function (classMeta) {
@@ -113,0 +137,0 @@ classMeta.css = classMetaToCSS(classMeta, processedConfig.plugins);

dist/generateCSS.test.js

 import { generateCSS } from './generateCSS';
+import { colorPlugin } from './fixtures/plugins/color';
+import { integerPlugin } from './fixtures/plugins/integer';
 import { pseudoPlugin } from './fixtures/plugins/pseudo';
@@ -12,3 +14,3 @@ import { hoverTargetPlugin } from './fixtures/plugins/hoverTarget';
     describe('Handles keywords', function () {
-        describe('with propIndicator', function () {
+        describe('with classNamespace', function () {
             var input = ['bg-contain', 'text-center'];
@@ -40,3 +42,3 @@ var config = {
         });
-        describe('with NO propIndicator', function () {
+        describe('with NO classNamespace', function () {
             var input = ['block', 'absolute'];
@@ -63,2 +65,27 @@ var config = {
         });
+        describe('with clashing classNamespaces', function () {
+            var input = ['bg-contain', 'bg100p', 'bg-black'];
+            var config = {
+                props: [
+                    {
+                        cssProperty: 'background-size',
+                        classNamespace: 'bg',
+                        valueSeparator: '-',
+                        valuePlugin: lengthUnitsPlugin(),
+                        values: {
+                            contain: 'contain',
+                            cover: 'cover',
+                        },
+                    },
+                    {
+                        cssProperty: 'background-color',
+                        classNamespace: 'bg',
+                        valuePlugin: colorPlugin({ separator: '-' }),
+                    },
+                ],
+            };
+            test('renders valid CSS', function () {
+                testOutput(generateCSS(input, config), '.bg-black { background-color: #000000 } .bg-contain { background-size: contain } .bg100p { background-size: 100% }');
+            });
+        });
         describe('with a default value', function () {
@@ -86,3 +113,3 @@ var input = ['border'];
                 props: [margin],
-                plugins: [lengthUnitsPlugin],
+                plugins: [],
             };
@@ -97,3 +124,3 @@ it('renders valid CSS', function () {
                 props: [margin],
-                plugins: [lengthUnitsPlugin],
+                plugins: [],
             };
@@ -127,3 +154,3 @@ it('renders valid CSS', function () {
                 ],
-                plugins: [lengthUnitsPlugin],
+                plugins: [],
             };
@@ -143,3 +170,3 @@ it('renders valid CSS', function () {
                         classNamespace: 'z',
-                        valuePlugin: 'integer',
+                        valuePlugin: integerPlugin(),
                     },
@@ -149,8 +176,6 @@ {
                         classNamespace: 'flex',
-                        valuePlugin: 'integer',
+                        valuePlugin: integerPlugin(),
                     },
                 ],
-                plugins: [
-                    { type: 'pattern', name: 'integer', identifier: /-?\d{1,4}/ },
-                ],
+                plugins: [],
             };
@@ -168,3 +193,3 @@ it('renders valid CSS', function () {
                         classNamespace: 'w',
-                        valuePlugin: 'lengthUnit',
+                        valuePlugin: lengthUnitsPlugin(),
                     },
@@ -174,19 +199,6 @@ {
                         classNamespace: 'h',
-                        valuePlugin: 'lengthUnit',
+                        valuePlugin: lengthUnitsPlugin(),
                     },
                 ],
-                plugins: [
-                    {
-                        type: 'pattern',
-                        name: 'lengthUnit',
-                        identifier: /-?\d{1,4}/,
-                        modifiers: [
-                            {
-                                name: 'percent',
-                                identifier: 'p',
-                                modifierFn: function (value) { return value + "%"; },
-                            },
-                        ],
-                    },
-                ],
+                plugins: [],
             };
@@ -204,25 +216,9 @@ it('renders valid CSS', function () {
                         classNamespace: 'm',
-                        valuePlugin: 'lengthUnit',
+                        valuePlugin: lengthUnitsPlugin(),
                     },
                 ],
-                plugins: [
-                    {
-                        type: 'pattern',
-                        name: 'lengthUnit',
-                        identifier: /-?\d{1,4}/,
-                        modifiers: [
-                            {
-                                name: 'baseline',
-                                defaultModifier: true,
-                                modifierFn: function (value) {
-                                    var number = (parseInt(value) * 6) / 10;
-                                    return number + "rem";
-                                },
-                            },
-                        ],
-                    },
-                ],
+                plugins: [],
             };
             it('renders valid CSS', function () {
-                testOutput(generateCSS(input, config), '.m3 { margin: 1.8rem }');
+                testOutput(generateCSS(input, config), '.m3 { margin: 1.125rem }');
             });
@@ -239,3 +235,3 @@ });
                         pluginDefault: true,
-                        valuePlugin: 'color',
+                        valuePlugin: colorPlugin(),
                     },
@@ -245,13 +241,6 @@ {
                         classNamespace: 'bg',
-                        pluginSeparator: '-',
-                        valuePlugin: 'color',
+                        valuePlugin: colorPlugin({ separator: '-' }),
                     },
                 ],
-                plugins: [
-                    {
-                        type: 'lookup',
-                        name: 'color',
-                        values: { black: '#000000', white: '#FFFFFF' },
-                    },
-                ],
+                plugins: [],
             };
@@ -276,3 +265,3 @@ it('renders valid CSS', function () {
                         pluginDefault: true,
-                        valuePlugin: 'color',
+                        valuePlugin: colorPlugin(),
                     },
@@ -282,21 +271,6 @@ {
                         classNamespace: 'bg',
-                        pluginSeparator: '-',
-                        valuePlugin: 'color',
+                        valuePlugin: colorPlugin({ separator: '-' }),
                     },
                 ],
-                plugins: [
-                    {
-                        type: 'lookup',
-                        name: 'color',
-                        values: { black: '#000000', white: '#FFFFFF' },
-                        modifiers: [
-                            {
-                                name: 'opacity',
-                                modifierFn: hexToRgba,
-                                separator: '_',
-                                identifier: /\d+/,
-                            },
-                        ],
-                    },
-                ],
+                plugins: [],
             };
@@ -330,3 +304,3 @@ it('renders valid CSS', function () {
             ],
-            plugins: [pseudoPlugin, hoverTargetPlugin],
+            plugins: [pseudoPlugin(), hoverTargetPlugin()],
         };
@@ -361,3 +335,3 @@ describe('', function () {
             ],
-            plugins: [breakpointPlugin],
+            plugins: [breakpointPlugin()],
         };
@@ -404,3 +378,3 @@ describe('', function () {
                 props: [margin, backgroundSize, textAlign],
-                plugins: [lengthUnitsPlugin],
+                plugins: [],
             };
@@ -426,3 +400,3 @@ it('renders valid CSS', function () {
                 props: [margin],
-                plugins: [lengthUnitsPlugin],
+                plugins: [],
             };
@@ -434,2 +408,49 @@ it('renders valid CSS', function () {
     });
+    describe('When in static mode', function () {
+        describe('Handles generating values from a PropertyConfig', function () {
+            var textAlign = {
+                cssProperty: 'text-align',
+                classNamespace: 'text',
+                valueSeparator: '-',
+                values: {
+                    center: 'center',
+                    left: 'left',
+                    right: 'right',
+                },
+                static: {
+                    values: ['center', 'left', 'right'],
+                },
+            };
+            var config = {
+                props: [textAlign],
+            };
+            it('renders valid CSS', function () {
+                testOutput(generateCSS([], config, true), "\n          .text-center { text-align: center }\n          .text-left { text-align: left }\n          .text-right { text-align: right }\n          ");
+            });
+        });
+        describe('Handles automatically generating all values from a PropertyConfig', function () {
+            var display = {
+                cssProperty: 'display',
+                classNamespace: '',
+                values: {
+                    inline: 'inline',
+                    block: 'block',
+                    'display-none': 'none',
+                    flex: 'flex',
+                    'inline-flex': 'inline-flex',
+                    table: 'table',
+                    grid: 'grid',
+                },
+            };
+            var config = {
+                props: [display],
+                static: {
+                    generateAllValues: true,
+                },
+            };
+            it('renders valid CSS', function () {
+                testOutput(generateCSS([], config, true), "\n            .block { display: block }\n            .display-none { display: none }\n            .flex { display: flex }\n            .grid { display: grid }\n            .inline { display: inline }\n            .inline-flex { display: inline-flex }\n            .table { display: table }\n          ");
+            });
+        });
+    });
 });

dist/matchers/generateKeywordMatcher.test.js

 import { generateKeywordMatcher } from '../matchers/generateKeywordMatcher';
+import { pseudoPlugin } from '../fixtures/plugins/pseudo';
 describe('generateKeywordMatchers', function () {
@@ -44,24 +45,3 @@ describe('Given a valid batteryConfig', function () {
         describe('Handle prefixes', function () {
-            var formatPseudo = function (cx, pseudo) { return cx + ":" + pseudo; };
-            var classPlugins = [
-                {
-                    name: 'pseudos',
-                    type: 'selector',
-                    affixType: 'prefix',
-                    modifiers: [
-                        {
-                            name: 'hover',
-                            separator: '-',
-                            identifier: 'hover',
-                            modifierFn: formatPseudo,
-                        },
-                        {
-                            name: 'focus',
-                            separator: '-',
-                            identifier: 'focus',
-                            modifierFn: formatPseudo,
-                        },
-                    ],
-                },
-            ];
+            var classPlugins = [pseudoPlugin()];
             var classMetaData = [
@@ -68,0 +48,0 @@ {

dist/matchers/generateMatchers.test.js

@@ -31,3 +31,3 @@ import { generateMatchers } from '../matchers/generateMatchers';
                     type: 'lookup',
-                    name: 'color',
+                    separator: '-',
                     values: {
@@ -44,4 +44,3 @@ black: '#000000',
                             classNamespace: 'fill',
-                            pluginSeparator: '-',
-                            valuePlugin: 'color',
+                            valuePlugin: colorPlugin,
                         },
@@ -51,4 +50,3 @@ {
                             classNamespace: 'bg',
-                            pluginSeparator: '-',
-                            valuePlugin: 'color',
+                            valuePlugin: colorPlugin,
                         },
@@ -59,8 +57,13 @@ {
                             pluginDefault: true,
-                            valuePlugin: 'color',
+                            valuePlugin: colorPlugin,
                         },
                     ],
-                    plugins: [colorPlugin],
+                    plugins: [],
                 };
-                expect(generateMatchers(config, []).color).toEqual(/(^)(fill-|bg-|)(black|white|pink)($)/);
+                var matchers = generateMatchers(config, []);
+                expect(matchers).toEqual({
+                    color: /(^)()(black|white|pink)($)/,
+                    fill: /(^)(fill-)(black|white|pink)($)/,
+                    'background-color': /(^)(bg-)(black|white|pink)($)/,
+                });
             });
@@ -67,0 +70,0 @@ });

dist/matchers/generateValuePluginMatcher.d.ts

 import { PluginConfig } from '../types/plugin-config';
 import { DeveloperPropertyConfig } from '../types/property-config';
 export declare const generateValueMatcher: (plugin: PluginConfig, captureSubGroups?: boolean) => string;
-export declare const generateValuePluginMatcher: (plugins: PluginConfig[], propConfigs: DeveloperPropertyConfig[]) => {
+export declare const generateValuePluginMatcher: (globalPlugins: PluginConfig[], propConfigs: DeveloperPropertyConfig[]) => {
     [k: string]: RegExp;
 };

dist/matchers/generateValuePluginMatcher.js

@@ -33,3 +33,3 @@ import { toCapture, toGroup } from '../utils/array';
         default:
-            console.log("The plugin \"" + plugin.name + "\" must have a type.");
+            console.log("The plugin must have a type.");
     }
@@ -43,3 +43,4 @@ };
         .map(function (propConfig) {
-        var classNamespace = propConfig.classNamespace, _a = propConfig.pluginSeparator, pluginSeparator = _a === void 0 ? '' : _a;
+        var classNamespace = propConfig.classNamespace, valuePlugin = propConfig.valuePlugin;
+        var pluginSeparator = (valuePlugin && valuePlugin.separator) || '';
         return "" + classNamespace + pluginSeparator;
@@ -49,17 +50,22 @@ });
 };
-export var generateValuePluginMatcher = function (plugins, propConfigs) {
-    if (!plugins || plugins.length < 1) {
+export var generateValuePluginMatcher = function (globalPlugins, propConfigs) {
+    var configsWithValuePlugins = propConfigs.filter(function (_a) {
+        var valuePlugin = _a.valuePlugin;
+        return !!valuePlugin;
+    });
+    var valuePlugins = configsWithValuePlugins.map(function (_a) {
+        var valuePlugin = _a.valuePlugin;
+        return valuePlugin;
+    });
+    if ((!valuePlugins || valuePlugins.length < 1) &&
+        (!globalPlugins || globalPlugins.length < 1)) {
         return {};
     }
-    var _a = generatePrefixSuffixdMatchers(plugins), prefixes = _a.prefixes, suffixes = _a.suffixes;
-    var matchers = plugins.reduce(function (accum, plugin) {
-        var pluginName = plugin.name;
-        var pluginProps = propConfigs.filter(function (propConfig) { return propConfig.valuePlugin === pluginName; });
-        if (pluginProps.length === 0) {
-            return accum;
-        }
-        var propMatcher = generatePropMatcher(pluginProps);
-        var valueMatcher = generateValueMatcher(plugin);
+    var _a = generatePrefixSuffixdMatchers(globalPlugins), prefixes = _a.prefixes, suffixes = _a.suffixes;
+    var matchers = configsWithValuePlugins.reduce(function (accum, config) {
+        var propMatcher = generatePropMatcher([config]);
+        var valueMatcher = generateValueMatcher(config.valuePlugin);
         var regex = new RegExp("(" + prefixes + ")" + propMatcher + valueMatcher + "(" + suffixes + ")");
-        accum[pluginName] = regex;
+        var cssPropertyKey = config.cssProperty.join('');
+        accum[cssPropertyKey] = regex;
         return accum;
@@ -66,0 +72,0 @@ }, {});

dist/matchers/generateValuePluginMatcher.test.js

@@ -0,6 +1,6 @@
+import { BatteryPlugin } from './../battery-plugin';
 import { generateValuePluginMatcher } from '../matchers/generateValuePluginMatcher';
 describe('generateValuePluginMatcher', function () {
-    var colorPlugin = {
+    var colorPlugin = BatteryPlugin({
         type: 'lookup',
-        name: 'color',
         values: {
@@ -11,7 +11,7 @@ black: '#000000',
         },
-    };
+    });
     describe('Value plugins', function () {
         describe('Handle no multiple props', function () {
             it('Then it generates a regex to match classes using the plugin', function () {
-                var plugins = [colorPlugin];
+                var plugins = [];
                 var props = [
@@ -21,4 +21,3 @@ {
                         classNamespace: 'bg',
-                        pluginSeparator: '-',
-                        valuePlugin: 'color',
+                        valuePlugin: colorPlugin({ separator: '-' }),
                     },
@@ -28,8 +27,8 @@ {
                         classNamespace: 'fill',
-                        pluginSeparator: '-',
-                        valuePlugin: 'color',
+                        valuePlugin: colorPlugin({ separator: '-' }),
                     },
                 ];
                 expect(generateValuePluginMatcher(plugins, props)).toEqual({
-                    color: /(^)(fill-|bg-)(black|white|pink)($)/,
+                    'background-color': /(^)(bg-)(black|white|pink)($)/,
+                    fill: /(^)(fill-)(black|white|pink)($)/,
                 });
@@ -39,3 +38,3 @@ });
         describe('Handle single prop set as plugin default', function () {
-            var plugins = [colorPlugin];
+            var plugins = [];
             var props = [
@@ -46,3 +45,3 @@ {
                     pluginDefault: true,
-                    valuePlugin: 'color',
+                    valuePlugin: colorPlugin(),
                 },
@@ -52,3 +51,3 @@ ];
                 expect(generateValuePluginMatcher(plugins, props)).toEqual({
-                    color: /(^)(black|white|pink)($)/,
+                    color: /(^)()(black|white|pink)($)/,
                 });
@@ -58,3 +57,3 @@ });
         describe('Handle multiple props with one set as plugin default', function () {
-            var plugins = [colorPlugin];
+            var plugins = [];
             var props = [
@@ -65,3 +64,3 @@ {
                     pluginDefault: true,
-                    valuePlugin: 'color',
+                    valuePlugin: colorPlugin(),
                 },
@@ -71,4 +70,3 @@ {
                     classNamespace: 'bg',
-                    pluginSeparator: '-',
-                    valuePlugin: 'color',
+                    valuePlugin: colorPlugin({ separator: '-' }),
                 },
@@ -78,3 +76,4 @@ ];
                 expect(generateValuePluginMatcher(plugins, props)).toEqual({
-                    color: /(^)(bg-|)(black|white|pink)($)/,
+                    'background-color': /(^)(bg-)(black|white|pink)($)/,
+                    color: /(^)()(black|white|pink)($)/,
                 });
@@ -84,3 +83,3 @@ });
         describe('Handle no props using the plugin', function () {
-            var plugins = [colorPlugin];
+            var plugins = [];
             var props = [];
@@ -92,5 +91,4 @@ it('does NOT generate a matcher', function () {
         describe('"Lookup" type plugin', function () {
-            var lookupPlugin = {
+            var lookupPlugin = BatteryPlugin({
                 type: 'lookup',
-                name: 'color',
                 values: {
@@ -101,4 +99,4 @@ black: '#000000',
                 },
-            };
-            var plugins = [lookupPlugin];
+            });
+            var plugins = [];
             var props = [
@@ -108,4 +106,3 @@ {
                     classNamespace: 'bg',
-                    pluginSeparator: '-',
-                    valuePlugin: 'color',
+                    valuePlugin: lookupPlugin({ separator: '-' }),
                 },
@@ -123,3 +120,2 @@ ];
                 type: 'pattern',
-                name: 'integer',
                 identifier: /-?\d{1,4}/,
@@ -134,7 +130,7 @@ };
                             classNamespace: 'z',
-                            valuePlugin: 'integer',
+                            valuePlugin: integerPlugin,
                         },
                     ];
                     expect(generateValuePluginMatcher(plugins, props)).toEqual({
-                        integer: /(^)(z)(-?\d{1,4})($)/,
+                        'z-index': /(^)(z)(-?\d{1,4})($)/,
                     });
@@ -149,3 +145,2 @@ });
             var pseudoPlugin = {
-                name: 'pseudos',
                 type: 'selector',
@@ -168,3 +163,3 @@ affixType: 'prefix',
             };
-            var plugins = [colorPlugin, pseudoPlugin];
+            var plugins = [pseudoPlugin];
             var props = [
@@ -175,3 +170,3 @@ {
                     pluginDefault: true,
-                    valuePlugin: 'color',
+                    valuePlugin: colorPlugin(),
                 },
@@ -181,4 +176,3 @@ {
                     classNamespace: 'bg',
-                    pluginSeparator: '-',
-                    valuePlugin: 'color',
+                    valuePlugin: colorPlugin({ separator: '-' }),
                 },
@@ -188,3 +182,4 @@ ];
                 expect(generateValuePluginMatcher(plugins, props)).toEqual({
-                    color: /(hover-|focus-|^)(bg-|)(black|white|pink)($)/,
+                    'background-color': /(hover-|focus-|^)(bg-)(black|white|pink)($)/,
+                    color: /(hover-|focus-|^)()(black|white|pink)($)/,
                 });
@@ -195,3 +190,2 @@ });
             var breakpointsPlugin = {
-                name: 'breakpoints',
                 type: 'at-rule',
@@ -221,3 +215,3 @@ atrule: 'media',
             };
-            var plugins = [colorPlugin, breakpointsPlugin];
+            var plugins = [breakpointsPlugin];
             var props = [
@@ -228,3 +222,3 @@ {
                     pluginDefault: true,
-                    valuePlugin: 'color',
+                    valuePlugin: colorPlugin(),
                 },
@@ -234,4 +228,3 @@ {
                     classNamespace: 'bg',
-                    pluginSeparator: '-',
-                    valuePlugin: 'color',
+                    valuePlugin: colorPlugin({ separator: '-' }),
                 },
@@ -241,3 +234,4 @@ ];
                 expect(generateValuePluginMatcher(plugins, props)).toEqual({
-                    color: /(^)(bg-|)(black|white|pink)(-sm|-md|-lg|$)/,
+                    'background-color': /(^)(bg-)(black|white|pink)(-sm|-md|-lg|$)/,
+                    color: /(^)()(black|white|pink)(-sm|-md|-lg|$)/,
                 });
@@ -244,0 +238,0 @@ });

dist/types/battery-config.d.ts

@@ -6,2 +6,5 @@ import { PropertyConfig, DeveloperPropertyConfig } from './property-config';
     plugins?: PluginConfig[];
+    static?: {
+        generateAllValues: boolean;
+    };
 }
@@ -8,0 +11,0 @@ export interface DeveloperBatteryConfig {

dist/types/classname.d.ts

 import { CSSProperties } from '../types/css';
+import { PluginConfig } from './plugin-config';
 export declare type ClassObject = {
@@ -25,7 +26,6 @@ [key in CSSProperties]?: string;
     keyword?: boolean;
-    valuePlugin?: string;
-    valuePluginType?: 'pattern' | 'lookup';
-    atrulePlugin?: string;
+    valuePlugin?: PluginConfig;
+    atrulePlugin?: PluginConfig;
     atruleModifier?: string;
-    selectorPlugin?: string;
+    selectorPlugin?: PluginConfig;
     selectorModifier?: string;
@@ -32,0 +32,0 @@ valueModifier?: string;

dist/types/plugin-config.d.ts

@@ -12,3 +12,2 @@ export declare type ModifierFn = (value: string, modifierValue?: string) => string;
     type: 'pattern' | 'lookup' | 'selector' | 'at-rule';
-    name: string;
     atrule?: 'media' | 'font-face';
@@ -22,3 +21,7 @@ affixType?: 'prefix' | 'suffix';
     };
+    separator?: string;
+    static?: {
+        [k: string]: string[];
+    };
 }
 export {};

dist/types/property-config.d.ts

 import { CSSProperties } from '../types/css';
+import { PluginConfig } from './plugin-config';
 export declare type SubPropKeys = 'top' | 'right' | 'bottom' | 'left' | 'horizontal' | 'vertical' | 'all';
@@ -6,6 +7,2 @@ declare type SubProp = {
 };
-interface ModifierSubset {
-    name: string;
-    modifiers: string[];
-}
 interface CorePropertyConfig {
@@ -16,3 +13,2 @@ classNamespace?: string;
     subPropSeparator?: string;
-    pluginSeparator?: string;
     valueSeparator?: string;
@@ -22,3 +18,6 @@ values?: {
     };
-    valuePlugin?: string | ModifierSubset[];
+    valuePlugin?: PluginConfig;
+    static?: {
+        values: string[];
+    };
 }
@@ -25,0 +24,0 @@ export interface PropertyConfig extends CorePropertyConfig {

dist/utils/array.js

@@ -24,3 +24,3 @@ var __read = (this && this.__read) || function (o, n) {
     if (arr.length < 1) {
-        return '';
+        return '()';
     }
@@ -27,0 +27,0 @@ var optionalRegex = optional ? '|' : '';

package.json

 {
   "name": "@battery/core",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "main": "dist/index.js",
@@ -11,3 +11,5 @@ "types": "dist/index.d.ts",
   "dependencies": {
-    "csstype": "^2.6.9"
+    "@types/lodash.merge": "^4.6.6",
+    "csstype": "^2.6.9",
+    "lodash.merge": "^4.6.2"
   },
@@ -14,0 +16,0 @@ "devDependencies": {

src/classMetaData/addClassObjectData.ts

@@ -29,11 +29,10 @@ import { ClassMetaData } from '../types/classname';
 
-    const plugin: PluginConfig = config.plugins.find(
-      pluginConfig => pluginConfig.name === classMeta.valuePlugin,
-    );
+    const plugin = classMeta.valuePlugin;
+    const valuePluginType = plugin.type;
 
-    if (classMeta.valuePluginType === 'lookup') {
+    if (valuePluginType === 'lookup') {
       value = plugin.values[classMeta.explodedSource.valueIdentifier];
     }
 
-    if (classMeta.valuePluginType === 'pattern') {
+    if (valuePluginType === 'pattern') {
       value = classMeta.explodedSource.valueIdentifier;
@@ -40,0 +39,0 @@ }

src/classMetaData/addClassPluginData.ts

@@ -24,3 +24,2 @@ import { ClassMetaData } from '../types/classname';
 
-  const pluginName = matchedPlugin.name;
   const pluginType = matchedPlugin.type;
@@ -30,5 +29,5 @@ const modifierName = matchedModifier.name;
   let affixData: {
-    atrulePlugin?: string;
+    atrulePlugin?: PluginConfig;
     atruleModifier?: string;
-    selectorPlugin?: string;
+    selectorPlugin?: PluginConfig;
     selectorModifier?: string;
@@ -38,6 +37,6 @@ } = {};
   if (pluginType === 'at-rule') {
-    affixData.atrulePlugin = pluginName;
+    affixData.atrulePlugin = matchedPlugin;
     affixData.atruleModifier = modifierName;
   } else if (pluginType === 'selector') {
-    affixData.selectorPlugin = pluginName;
+    affixData.selectorPlugin = matchedPlugin;
     affixData.selectorModifier = modifierName;
@@ -44,0 +43,0 @@ }

src/classMetaData/addExplodedSourceData.ts

@@ -26,3 +26,5 @@ import { ClassMetaData, ExplodedClassSource } from '../types/classname';
 ): ExplodedClassSource => {
-  const { valueSeparator = '', pluginSeparator = '' } = propConfig;
+  const { valueSeparator = '', valuePlugin } = propConfig;
+  const pluginSeparator = (valuePlugin && valuePlugin.separator) || '';
+
   const valueOrPluginSeparator = classMeta.keyword
@@ -39,9 +41,9 @@ ? valueSeparator
   matchers: Matchers,
-  plugins: PluginConfig[],
 ): ExplodedClassSource => {
-  const value = classMeta.source.match(matchers[classMeta.valuePlugin])[3];
-  const plugin = plugins.find(
-    pluginConfig => pluginConfig.name === classMeta.valuePlugin,
-  );
+  const value = classMeta.source.match(
+    matchers[classMeta.property.join('')],
+  )[3];
 
+  const plugin = classMeta.valuePlugin;
+
   if (plugin.modifiers) {
@@ -93,3 +95,6 @@ const valuePluginMatcher = generateValueMatcher(plugin, true);
 ) => {
-  const value = classMeta.source.match(matchers[classMeta.valuePlugin])[3];
+  const value = classMeta.source.match(
+    matchers[classMeta.property.join('')],
+  )[3];
+
   const { modifierIdentifier, modifierSeparator } = explodedSource;
@@ -151,3 +156,3 @@
     return (
-      matcherName === classMeta.valuePlugin ||
+      matcherName === classMeta.property.join('') ||
       (classMeta.keyword && matcherName === 'keyword')
@@ -229,3 +234,2 @@ );
         matchers,
-        plugins,
       );
@@ -232,0 +236,0 @@ }

src/classMetaData/addMetaData.test.ts

@@ -34,3 +34,3 @@ import { DeveloperBatteryConfig } from '../types/battery-config';
           },
-          valuePlugin: 'lengthUnit',
+          valuePlugin: lengthUnitsPlugin(),
         },
@@ -113,3 +113,3 @@ ],
           classNamespace: 'z',
-          valuePlugin: 'integer',
+          valuePlugin: integerPlugin(),
         },
@@ -119,4 +119,3 @@ {
           classNamespace: 'bg',
-          pluginSeparator: '-',
-          valuePlugin: 'color',
+          valuePlugin: colorPlugin({ separator: '-' }),
         },
@@ -131,3 +130,3 @@ {
           },
-          valuePlugin: 'lengthUnit',
+          valuePlugin: lengthUnitsPlugin(),
         },
@@ -137,6 +136,5 @@ {
           classNamespace: 'w',
-          valuePlugin: 'lengthUnit',
+          valuePlugin: lengthUnitsPlugin(),
         },
       ],
-      plugins: [integerPlugin, colorPlugin, lengthUnitsPlugin],
     };
@@ -152,4 +150,3 @@ const inputClassNames = ['bg-white', 'bg-white_10', 'z100', 'w3'];
           property: ['background-color'],
-          valuePlugin: 'color',
-          valuePluginType: 'lookup',
+          valuePlugin: colorPlugin(),
           explodedSource: {
@@ -175,4 +172,3 @@ prefix: '',
           property: ['background-color'],
-          valuePlugin: 'color',
-          valuePluginType: 'lookup',
+          valuePlugin: colorPlugin(),
           explodedSource: {
@@ -199,4 +195,3 @@ prefix: '',
           property: ['z-index'],
-          valuePlugin: 'integer',
-          valuePluginType: 'pattern',
+          valuePlugin: integerPlugin(),
           explodedSource: {
@@ -222,4 +217,3 @@ prefix: '',
           property: ['width'],
-          valuePlugin: 'lengthUnit',
-          valuePluginType: 'pattern',
+          valuePlugin: lengthUnitsPlugin(),
           explodedSource: {
@@ -251,3 +245,3 @@ prefix: '',
           classNamespace: 'z',
-          valuePlugin: 'integer',
+          valuePlugin: integerPlugin(),
         },
@@ -257,4 +251,3 @@ {
           classNamespace: 'bg',
-          pluginSeparator: '-',
-          valuePlugin: 'color',
+          valuePlugin: colorPlugin({ separator: '-' }),
         },
@@ -269,3 +262,3 @@ {
           },
-          valuePlugin: 'lengthUnit',
+          valuePlugin: lengthUnitsPlugin(),
         },
@@ -275,13 +268,6 @@ {
           classNamespace: 'w',
-          valuePlugin: 'lengthUnit',
+          valuePlugin: lengthUnitsPlugin(),
         },
       ],
-      plugins: [
-        integerPlugin,
-        colorPlugin,
-        lengthUnitsPlugin,
-        breakpointPlugin,
-        pseudoPlugin,
-        hoverTargetPlugin,
-      ],
+      plugins: [breakpointPlugin(), pseudoPlugin(), hoverTargetPlugin()],
     };
@@ -302,5 +288,4 @@ const inputClassNames = [
           property: ['background-color'],
-          valuePlugin: 'color',
-          valuePluginType: 'lookup',
-          atrulePlugin: 'breakpoint',
+          valuePlugin: colorPlugin(),
+          atrulePlugin: breakpointPlugin(),
           atruleModifier: 'responsiveMedium',
@@ -327,5 +312,4 @@ explodedSource: {
           property: ['background-color'],
-          valuePlugin: 'color',
-          valuePluginType: 'lookup',
-          selectorPlugin: 'pseudo',
+          valuePlugin: colorPlugin(),
+          selectorPlugin: pseudoPlugin(),
           selectorModifier: 'hover',
@@ -353,5 +337,4 @@ explodedSource: {
           property: ['z-index'],
-          valuePlugin: 'integer',
-          valuePluginType: 'pattern',
-          atrulePlugin: 'breakpoint',
+          valuePlugin: integerPlugin(),
+          atrulePlugin: breakpointPlugin(),
           atruleModifier: 'responsiveLarge',
@@ -378,3 +361,3 @@ explodedSource: {
           property: ['background-size'],
-          selectorPlugin: 'hoverTarget',
+          selectorPlugin: hoverTargetPlugin(),
           selectorModifier: 'hoverItem',
@@ -381,0 +364,0 @@ explodedSource: {

src/classMetaData/addMetaData.ts

@@ -10,32 +10,6 @@ import { ClassMetaData } from '../types/classname';
 import { addValuePluginData } from './addValuePluginData';
-import { Matchers } from '../types/matchers';
-import { PluginConfig } from '../types/plugin-config';
 import { addExplodedSourceData } from './addExplodedSourceData';
-import { addModifierPluginData } from './addModifierPluginData';
+import { addValueModifierPluginData } from './addValueModifierPluginData';
 import { addClassPluginData } from './addClassPluginData';
 
-const getPlugins = (
-  pluginTypes: string[],
-  matchers: Matchers,
-  plugins: PluginConfig[],
-) => {
-  if (!plugins) return {};
-
-  return Object.entries(matchers)
-    .filter(([matcherName]) => {
-      const valuePlugins = plugins
-        .filter(plugin => pluginTypes.includes(plugin.type))
-        .map(plugin => `${plugin.name}`);
-
-      return valuePlugins.includes(matcherName);
-    })
-    .reduce(
-      (accum, [matcherName, regex]) => {
-        accum[matcherName] = regex;
-        return accum;
-      },
-      {} as Matchers,
-    );
-};
-
 const sortValidAndInvalid = (classMeta: ClassMetaData[]) =>
@@ -66,7 +40,2 @@ classMeta.reduce(
   const matchers = generateMatchers(config, keywords);
-  const valuePluginMatchers = getPlugins(
-    ['pattern', 'lookup'],
-    matchers,
-    config.plugins,
-  );
 
@@ -80,7 +49,7 @@ // Adds: source, invalid, selector
 
-  // Adds: valuePlugin, valuePluginType
+  // Adds: valuePlugin
   const withValuePluginData = addValuePluginData(
     withKeywordData,
-    valuePluginMatchers,
-    config.plugins,
+    matchers,
+    config.props,
   );
@@ -105,6 +74,3 @@
   // Adds: valueModifier
-  const withModifierPlugin = addModifierPluginData(
-    withExplodedSourceData,
-    config.plugins,
-  );
+  const withModifierPlugin = addValueModifierPluginData(withExplodedSourceData);
 
@@ -111,0 +77,0 @@ // Adds: selectorPlugin, atrulePlugin

src/classMetaData/addPropertyData.ts

@@ -33,3 +33,5 @@ import { ClassMetaData } from '../types/classname';
     const pluginSeparatorsRegex = new RegExp(
-      `[${props.map(prop => prop.pluginSeparator).join('')}]`,
+      `[${props
+        .map(prop => (prop.valuePlugin || {}).separator || '')
+        .join('')}]`,
     );
@@ -42,9 +44,9 @@
     const property = props.find(prop => {
+      const valuePluginKey = prop.cssProperty.join('');
+
       if (classNamespace.length > 0 && prop.classNamespace) {
         const matched = prop.classNamespace.match(new RegExp(classNamespace));
-        return (
-          prop.valuePlugin === matcherName && matched && matched.length > 0
-        );
+        return valuePluginKey === matcherName && matched && matched.length > 0;
       } else if (classNamespace.length === 0 && prop.pluginDefault) {
-        return prop.valuePlugin === matcherName && prop.pluginDefault;
+        return valuePluginKey === matcherName && prop.pluginDefault;
       } else {
@@ -51,0 +53,0 @@ return false;

src/classMetaData/addValuePluginData.ts

@@ -0,4 +1,4 @@
+import { DeveloperPropertyConfig } from './../types/property-config';
 import { ClassMetaData } from '../types/classname';
 import { Matchers } from '../types/matchers';
-import { PluginConfig } from '../types/plugin-config';
 
@@ -8,19 +8,16 @@ export const addValuePluginData = (
   valuePluginMatchers: Matchers,
-  plugins: PluginConfig[],
+  propConfigs: DeveloperPropertyConfig[],
 ): ClassMetaData[] => {
   return classMetaArr.map(classMeta => {
     if (classMeta.keyword) return classMeta;
-    const pluginName = Object.entries(valuePluginMatchers).find(([, regex]) => {
-      return regex.test(classMeta.source);
-    });
 
-    const plugin: PluginConfig = plugins.find(
-      pluginConfig => pluginConfig.name === pluginName[0],
+    const [matcherName, regex] = Object.entries(valuePluginMatchers).find(
+      ([, regex]) => regex.test(classMeta.source),
     );
 
-    classMeta.valuePlugin = plugin.name;
+    const propConfig = propConfigs.find(
+      config => config.cssProperty.join('') === matcherName,
+    );
 
-    if (plugin.type === 'lookup' || plugin.type === 'pattern') {
-      classMeta.valuePluginType = plugin.type;
-    }
+    classMeta.valuePlugin = propConfig.valuePlugin;
 
@@ -27,0 +24,0 @@ return classMeta;

src/classMetaData/keywordToMetaData.test.ts

 import { keywordToMetaData } from './keywordToMetaData';
 import { DeveloperBatteryConfig } from '../types/battery-config';
 import { ClassMetaData } from '../types/classname';
+import { lengthUnitsPlugin } from '../fixtures/plugins/lengthUnits';
 
@@ -18,3 +19,3 @@ describe('keywordToMetaData', () => {
             },
-            valuePlugin: 'lengthUnits',
+            valuePlugin: lengthUnitsPlugin(),
           },
@@ -21,0 +22,0 @@ ],

src/config/processSubProps.test.ts

 import { convertSubProps } from './processSubProps';
 import { DeveloperPropertyConfig } from '../types/property-config';
 import { DeveloperBatteryConfig } from '../types/battery-config';
+import { lengthUnitsPlugin } from '../fixtures/plugins/lengthUnits';
 
@@ -23,3 +24,3 @@ describe('processSubProps', () => {
       },
-      valuePlugin: 'lengthUnit',
+      valuePlugin: lengthUnitsPlugin(),
     };
@@ -36,3 +37,3 @@
         },
-        valuePlugin: 'lengthUnit',
+        valuePlugin: lengthUnitsPlugin(),
       },
@@ -46,3 +47,3 @@ {
         },
-        valuePlugin: 'lengthUnit',
+        valuePlugin: lengthUnitsPlugin(),
       },
@@ -56,3 +57,3 @@ {
         },
-        valuePlugin: 'lengthUnit',
+        valuePlugin: lengthUnitsPlugin(),
       },
@@ -66,3 +67,3 @@ {
         },
-        valuePlugin: 'lengthUnit',
+        valuePlugin: lengthUnitsPlugin(),
       },
@@ -76,3 +77,3 @@ {
         },
-        valuePlugin: 'lengthUnit',
+        valuePlugin: lengthUnitsPlugin(),
       },
@@ -86,3 +87,3 @@ {
         },
-        valuePlugin: 'lengthUnit',
+        valuePlugin: lengthUnitsPlugin(),
       },
@@ -96,3 +97,3 @@ {
         },
-        valuePlugin: 'lengthUnit',
+        valuePlugin: lengthUnitsPlugin(),
       },
@@ -99,0 +100,0 @@ ];

src/config/processSubProps.ts

@@ -41,2 +41,4 @@ import { SubPropKeys, DeveloperPropertyConfig } from '../types/property-config';
             cssProperty,
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            subProps,
             ...rest
@@ -43,0 +45,0 @@ } = propConfig;

src/css/classMetaToCSS.ts

@@ -15,5 +15,5 @@ import { ClassMetaData } from '../types/classname';
   if (classMeta.selectorPlugin) {
-    const selectorModifier = plugins
-      .find(plugin => plugin.name === classMeta.selectorPlugin)
-      .modifiers.find(modifier => modifier.name === classMeta.selectorModifier);
+    const selectorModifier = classMeta.selectorPlugin.modifiers.find(
+      modifier => modifier.name === classMeta.selectorModifier,
+    );
 
@@ -20,0 +20,0 @@ classMeta.selector = selectorModifier.modifierFn(

src/fixtures/plugins/breakpoint.ts

@@ -1,5 +0,4 @@
-import { PluginConfig } from '../../types/plugin-config';
+import { BatteryPlugin } from './../../battery-plugin';
 
-export const breakpointPlugin: PluginConfig = {
-  name: 'breakpoint',
+export const breakpointPlugin = BatteryPlugin({
   type: 'at-rule',
@@ -28,2 +27,2 @@ atrule: 'media',
   ],
-};
+});

src/fixtures/plugins/color.ts

@@ -1,2 +0,3 @@
-import { PluginConfig, ModifierFn } from '../../types/plugin-config';
+import { BatteryPlugin } from './../../battery-plugin';
+import { ModifierFn } from '../../types/plugin-config';
 
@@ -12,5 +13,4 @@ const hexToRgba: ModifierFn = (hex, opacity) => {
 
-export const colorPlugin: PluginConfig = {
+export const colorPlugin = BatteryPlugin({
   type: 'lookup',
-  name: 'color',
   values: {
@@ -29,2 +29,2 @@ black: '#000000',
   ],
-};
+});

src/fixtures/plugins/hoverTarget.ts

@@ -1,5 +0,4 @@
-import { PluginConfig } from '../../types/plugin-config';
+import { BatteryPlugin } from './../../battery-plugin';
 
-export const hoverTargetPlugin: PluginConfig = {
-  name: 'hoverTarget',
+export const hoverTargetPlugin = BatteryPlugin({
   type: 'selector',
@@ -15,2 +14,2 @@ affixType: 'prefix',
   ],
-};
+});

src/fixtures/plugins/integer.ts

@@ -1,7 +0,6 @@
-import { PluginConfig } from '../../types/plugin-config';
+import { BatteryPlugin } from './../../battery-plugin';
 
-export const integerPlugin: PluginConfig = {
+export const integerPlugin = BatteryPlugin({
   type: 'pattern',
-  name: 'integer',
   identifier: /-?\d{1,4}/,
-};
+});

src/fixtures/plugins/lengthUnits.ts

@@ -1,2 +0,3 @@
-import { ModifierFn, PluginConfig } from '../../types/plugin-config';
+import { BatteryPlugin } from './../../battery-plugin';
+import { ModifierFn } from '../../types/plugin-config';
 
@@ -10,5 +11,4 @@ const pxToRem: ModifierFn = value => `${parseInt(value) / 16}rem`;
 
-export const lengthUnitsPlugin: PluginConfig = {
+export const lengthUnitsPlugin = BatteryPlugin({
   type: 'pattern',
-  name: 'lengthUnit',
   identifier: /-?\d+/,
@@ -42,2 +42,2 @@ modifiers: [
   ],
-};
+});

src/fixtures/plugins/pseudo.ts

@@ -1,5 +0,4 @@
-import { PluginConfig } from '../../types/plugin-config';
+import { BatteryPlugin } from './../../battery-plugin';
 
-export const pseudoPlugin: PluginConfig = {
-  name: 'pseudo',
+export const pseudoPlugin = BatteryPlugin({
   type: 'selector',
@@ -21,2 +20,2 @@ affixType: 'prefix',
   ],
-};
+});

src/fixtures/props/background-color.ts

 import { PropertyConfig } from '../../types/property-config';
+import { colorPlugin } from '../plugins/color';
 
@@ -6,4 +7,3 @@ export const backgroundColor: PropertyConfig = {
   classNamespace: 'bg',
-  pluginSeparator: '-',
-  valuePlugin: 'color',
+  valuePlugin: colorPlugin({ separator: '-' }),
 };

src/fixtures/props/background-size.ts

 import { PropertyConfig } from '../../types/property-config';
+import { lengthUnitsPlugin } from '../../fixtures/plugins/lengthUnits';
 
@@ -11,3 +12,3 @@ export const backgroundSize: PropertyConfig = {
   },
-  valuePlugin: 'lengthUnit',
+  valuePlugin: lengthUnitsPlugin(),
 };

src/fixtures/props/color.ts

 import { PropertyConfig } from '../../types/property-config';
+import { colorPlugin } from '../plugins/color';
 
@@ -7,3 +8,3 @@ export const textColor: PropertyConfig = {
   pluginDefault: true,
-  valuePlugin: 'color',
+  valuePlugin: colorPlugin(),
 };

src/fixtures/props/fill.ts

 import { PropertyConfig } from '../../types/property-config';
+import { colorPlugin } from '../plugins/color';
 
@@ -6,4 +7,3 @@ export const fillColor: PropertyConfig = {
   classNamespace: 'fill',
-  pluginSeparator: '-',
-  valuePlugin: 'color',
+  valuePlugin: colorPlugin({ separator: '-' }),
 };

src/fixtures/props/flex.ts

 import { PropertyConfig } from '../../types/property-config';
+import { integerPlugin } from '../plugins/integer';
 
@@ -6,3 +7,3 @@ export const flex: PropertyConfig = {
   classNamespace: 'flex',
-  valuePlugin: 'integer',
+  valuePlugin: integerPlugin(),
 };

src/fixtures/props/margin.ts

 import { PropertyConfig } from '../../types/property-config';
+import { lengthUnitsPlugin } from '../../fixtures/plugins/lengthUnits';
 
@@ -20,3 +21,3 @@ export const margin: PropertyConfig = {
   },
-  valuePlugin: 'lengthUnit',
+  valuePlugin: lengthUnitsPlugin(),
 };

src/fixtures/props/width.ts

 import { PropertyConfig } from '../../types/property-config';
+import { lengthUnitsPlugin } from '../../fixtures/plugins/lengthUnits';
 
@@ -6,3 +7,3 @@ export const width: PropertyConfig = {
   classNamespace: 'w',
-  valuePlugin: 'lengthUnit',
+  valuePlugin: lengthUnitsPlugin(),
 };

src/fixtures/props/z-index.ts

 import { PropertyConfig } from '../../types/property-config';
+import { integerPlugin } from '../plugins/integer';
 
@@ -6,3 +7,3 @@ export const zIndex: PropertyConfig = {
   classNamespace: 'z',
-  valuePlugin: 'integer',
+  valuePlugin: integerPlugin(),
 };

src/generateCSS.test.ts

 import { generateCSS } from './generateCSS';
 import { BatteryConfig } from './types/battery-config';
 import { ModifierFn } from './types/plugin-config';
+import { colorPlugin } from './fixtures/plugins/color';
+import { integerPlugin } from './fixtures/plugins/integer';
 import { pseudoPlugin } from './fixtures/plugins/pseudo';
@@ -17,3 +19,3 @@ import { hoverTargetPlugin } from './fixtures/plugins/hoverTarget';
   describe('Handles keywords', () => {
-    describe('with propIndicator', () => {
+    describe('with classNamespace', () => {
       const input = ['bg-contain', 'text-center'];
@@ -50,3 +52,3 @@ const config: BatteryConfig = {
 
-    describe('with NO propIndicator', () => {
+    describe('with NO classNamespace', () => {
       const input = ['block', 'absolute'];
@@ -78,2 +80,32 @@ const config: BatteryConfig = {
 
+    describe('with clashing classNamespaces', () => {
+      const input = ['bg-contain', 'bg100p', 'bg-black'];
+      const config: BatteryConfig = {
+        props: [
+          {
+            cssProperty: 'background-size',
+            classNamespace: 'bg',
+            valueSeparator: '-',
+            valuePlugin: lengthUnitsPlugin(),
+            values: {
+              contain: 'contain',
+              cover: 'cover',
+            },
+          },
+          {
+            cssProperty: 'background-color',
+            classNamespace: 'bg',
+            valuePlugin: colorPlugin({ separator: '-' }),
+          },
+        ],
+      };
+
+      test('renders valid CSS', () => {
+        testOutput(
+          generateCSS(input, config),
+          '.bg-black { background-color: #000000 } .bg-contain { background-size: contain } .bg100p { background-size: 100% }',
+        );
+      });
+    });
+
     describe('with a default value', () => {
@@ -106,3 +138,3 @@ const input = ['border'];
         props: [margin],
-        plugins: [lengthUnitsPlugin],
+        plugins: [],
       };
@@ -126,3 +158,3 @@ it('renders valid CSS', () => {
         props: [margin],
-        plugins: [lengthUnitsPlugin],
+        plugins: [],
       };
@@ -163,3 +195,3 @@ it('renders valid CSS', () => {
         ],
-        plugins: [lengthUnitsPlugin],
+        plugins: [],
       };
@@ -186,3 +218,3 @@ it('renders valid CSS', () => {
             classNamespace: 'z',
-            valuePlugin: 'integer',
+            valuePlugin: integerPlugin(),
           },
@@ -192,8 +224,6 @@ {
             classNamespace: 'flex',
-            valuePlugin: 'integer',
+            valuePlugin: integerPlugin(),
           },
         ],
-        plugins: [
-          { type: 'pattern', name: 'integer', identifier: /-?\d{1,4}/ },
-        ],
+        plugins: [],
       };
@@ -216,3 +246,3 @@
             classNamespace: 'w',
-            valuePlugin: 'lengthUnit',
+            valuePlugin: lengthUnitsPlugin(),
           },
@@ -222,19 +252,6 @@ {
             classNamespace: 'h',
-            valuePlugin: 'lengthUnit',
+            valuePlugin: lengthUnitsPlugin(),
           },
         ],
-        plugins: [
-          {
-            type: 'pattern',
-            name: 'lengthUnit',
-            identifier: /-?\d{1,4}/,
-            modifiers: [
-              {
-                name: 'percent',
-                identifier: 'p',
-                modifierFn: value => `${value}%`,
-              },
-            ],
-          },
-        ],
+        plugins: [],
       };
@@ -257,26 +274,10 @@
             classNamespace: 'm',
-            valuePlugin: 'lengthUnit',
+            valuePlugin: lengthUnitsPlugin(),
           },
         ],
-        plugins: [
-          {
-            type: 'pattern',
-            name: 'lengthUnit',
-            identifier: /-?\d{1,4}/,
-            modifiers: [
-              {
-                name: 'baseline',
-                defaultModifier: true,
-                modifierFn: value => {
-                  const number = (parseInt(value) * 6) / 10;
-                  return `${number}rem`;
-                },
-              },
-            ],
-          },
-        ],
+        plugins: [],
       };
 
       it('renders valid CSS', () => {
-        testOutput(generateCSS(input, config), '.m3 { margin: 1.8rem }');
+        testOutput(generateCSS(input, config), '.m3 { margin: 1.125rem }');
       });
@@ -294,3 +295,3 @@ });
             pluginDefault: true,
-            valuePlugin: 'color',
+            valuePlugin: colorPlugin(),
           },
@@ -300,13 +301,6 @@ {
             classNamespace: 'bg',
-            pluginSeparator: '-',
-            valuePlugin: 'color',
+            valuePlugin: colorPlugin({ separator: '-' }),
           },
         ],
-        plugins: [
-          {
-            type: 'lookup',
-            name: 'color',
-            values: { black: '#000000', white: '#FFFFFF' },
-          },
-        ],
+        plugins: [],
       };
@@ -338,3 +332,3 @@
             pluginDefault: true,
-            valuePlugin: 'color',
+            valuePlugin: colorPlugin(),
           },
@@ -344,21 +338,6 @@ {
             classNamespace: 'bg',
-            pluginSeparator: '-',
-            valuePlugin: 'color',
+            valuePlugin: colorPlugin({ separator: '-' }),
           },
         ],
-        plugins: [
-          {
-            type: 'lookup',
-            name: 'color',
-            values: { black: '#000000', white: '#FFFFFF' },
-            modifiers: [
-              {
-                name: 'opacity',
-                modifierFn: hexToRgba,
-                separator: '_',
-                identifier: /\d+/,
-              },
-            ],
-          },
-        ],
+        plugins: [],
       };
@@ -397,3 +376,3 @@
       ],
-      plugins: [pseudoPlugin, hoverTargetPlugin],
+      plugins: [pseudoPlugin(), hoverTargetPlugin()],
     };
@@ -433,3 +412,3 @@
       ],
-      plugins: [breakpointPlugin],
+      plugins: [breakpointPlugin()],
     };
@@ -488,3 +467,3 @@
         props: [margin, backgroundSize, textAlign],
-        plugins: [lengthUnitsPlugin],
+        plugins: [],
       };
@@ -526,3 +505,3 @@ it('renders valid CSS', () => {
         props: [margin],
-        plugins: [lengthUnitsPlugin],
+        plugins: [],
       };
@@ -542,2 +521,71 @@ it('renders valid CSS', () => {
   });
+
+  describe('When in static mode', () => {
+    describe('Handles generating values from a PropertyConfig', () => {
+      const textAlign: PropertyConfig = {
+        cssProperty: 'text-align',
+        classNamespace: 'text',
+        valueSeparator: '-',
+        values: {
+          center: 'center',
+          left: 'left',
+          right: 'right',
+        },
+        static: {
+          values: ['center', 'left', 'right'],
+        },
+      };
+      const config: BatteryConfig = {
+        props: [textAlign],
+      };
+      it('renders valid CSS', () => {
+        testOutput(
+          generateCSS([], config, true),
+          `
+          .text-center { text-align: center }
+          .text-left { text-align: left }
+          .text-right { text-align: right }
+          `,
+        );
+      });
+    });
+
+    describe('Handles automatically generating all values from a PropertyConfig', () => {
+      const display: PropertyConfig = {
+        cssProperty: 'display',
+        classNamespace: '',
+        values: {
+          inline: 'inline',
+          block: 'block',
+          'display-none': 'none',
+          flex: 'flex',
+          'inline-flex': 'inline-flex',
+          table: 'table',
+          grid: 'grid',
+        },
+      };
+
+      const config: BatteryConfig = {
+        props: [display],
+        static: {
+          generateAllValues: true,
+        },
+      };
+
+      it('renders valid CSS', () => {
+        testOutput(
+          generateCSS([], config, true),
+          `
+            .block { display: block }
+            .display-none { display: none }
+            .flex { display: flex }
+            .grid { display: grid }
+            .inline { display: inline }
+            .inline-flex { display: inline-flex }
+            .table { display: table }
+          `,
+        );
+      });
+    });
+  });
 });

src/generateCSS.ts

@@ -8,2 +8,7 @@ import { BatteryConfig } from './types/battery-config';
 import { sortAlphaNum } from './utils/string';
+import { generateStaticValueClassNames } from './static/generateStaticValueClassNames';
+import {
+  PropertyConfig,
+  DeveloperPropertyConfig,
+} from './types/property-config';
 
@@ -14,41 +19,49 @@ const processAtRulePlugins = (
 ) => {
-  const atRuleProcessingOrder: [string, string[]][] = plugins
+  const atRuleProcessingOrder: [PluginConfig, string[]][] = plugins
     .filter(plugin => plugin.atrule)
     .map(plugin => {
       const pluginModifiers = plugin.modifiers.map(modifier => modifier.name);
-      return [plugin.name, pluginModifiers];
+
+      return [plugin, pluginModifiers];
     });
 
-  return atRuleProcessingOrder.reduce((accum, [atRuleName, modifierNames]) => {
-    const atRuleClassMeta = classMetaArr.filter(
-      classMeta => classMeta.atrulePlugin === atRuleName,
-    );
+  return atRuleProcessingOrder.reduce(
+    (accum, [atRulePlugin, modifierNames]) => {
+      const atRuleClassMeta = classMetaArr.filter(
+        classMeta => !!classMeta.atrulePlugin,
+      );
 
-    const atRuleCSSArr = modifierNames.reduce(
-      (cssArr, modifierName) => {
-        const modifierClassMeta = atRuleClassMeta.filter(
-          cm => cm.atruleModifier === modifierName,
-        );
+      const atRuleCSSArr = modifierNames.reduce(
+        (cssArr, modifierName) => {
+          const modifierClassMeta = atRuleClassMeta.filter(
+            cm => cm.atruleModifier === modifierName,
+          );
 
-        if (modifierClassMeta.length < 1) {
-          return cssArr;
-        }
-        const modifierCSS = modifierClassMeta
-          .map(classMeta => classMeta.css)
-          .join('');
-        const plugin = plugins.find(plugin => plugin.name === atRuleName);
-        const modifier = plugin.modifiers.find(
-          pluginModifier => pluginModifier.name === modifierName,
-        );
+          if (modifierClassMeta.length < 1) {
+            return cssArr;
+          }
 
-        const atRuleCss = `
-          @${plugin.atrule} ${modifier.condition} { ${modifierCSS} }
-        `;
-        return cssArr.concat(atRuleCss);
-      },
-      [] as string[],
-    );
+          const modifierCSS = modifierClassMeta
+            .map(classMeta => classMeta.css)
+            .join('');
 
-    return accum.concat(atRuleCSSArr);
-  }, []);
+          const plugin = plugins.find(plugin => plugin === atRulePlugin);
+
+          const modifier = plugin.modifiers.find(
+            pluginModifier => pluginModifier.name === modifierName,
+          );
+
+          const atRuleCss = `
+            @${plugin.atrule} ${modifier.condition} { ${modifierCSS} }
+          `;
+
+          return cssArr.concat(atRuleCss);
+        },
+        [] as string[],
+      );
+
+      return accum.concat(atRuleCSSArr);
+    },
+    [],
+  );
 };
@@ -61,3 +74,3 @@
   Object.values(
-    classMetaArr.reduce(
+    classMetaArr.reduce<{ [k: string]: ClassMetaData[] }>(
       (accum, classMeta) => {
@@ -72,3 +85,3 @@ accum[classMeta.property[0]]
       },
-      {} as { [k: string]: ClassMetaData[] },
+      {},
     ),
@@ -106,10 +119,46 @@ )
 
+const generateStaticValuesArr = (
+  propertyConfig: DeveloperPropertyConfig,
+  autoGenerateStaticValues: boolean = false,
+): DeveloperPropertyConfig => {
+  return autoGenerateStaticValues || propertyConfig.static
+    ? {
+        ...propertyConfig,
+        static: {
+          values: Object.keys(propertyConfig.values),
+        },
+      }
+    : propertyConfig;
+};
+
+const wrapCSSPropertyInArray = (
+  propertyConfig: PropertyConfig,
+): DeveloperPropertyConfig => {
+  return {
+    ...propertyConfig,
+    cssProperty: [propertyConfig.cssProperty],
+  };
+};
+
 const processConfig = (config: BatteryConfig) => {
-  const withStringCSSProperties = {
+  const withStatic: BatteryConfig = {
     ...config,
-    props: config.props.map(prop => {
-      return { ...prop, cssProperty: [prop.cssProperty] };
-    }),
+    static: {
+      generateAllValues:
+        (config.static && config.static.generateAllValues) || false,
+    },
   };
-  const withSubProps = convertSubProps(withStringCSSProperties);
+
+  const withProcessedPropertyConfigs = {
+    ...withStatic,
+    props: config.props
+      .map(wrapCSSPropertyInArray)
+      .map(propertyConfig =>
+        generateStaticValuesArr(
+          propertyConfig,
+          withStatic.static.generateAllValues,
+        ),
+      ),
+  };
+  const withSubProps = convertSubProps(withProcessedPropertyConfigs);
   return withSubProps;
@@ -121,6 +170,17 @@ };
   config: BatteryConfig,
+  generateStaticLibrary: boolean = false,
 ): string => {
   const processedConfig = processConfig(config);
-  const classMetaArr = addMetaData(classNames, processedConfig);
+  let processedClassNames: string[];
 
+  if (generateStaticLibrary) {
+    processedClassNames = processedConfig.props.flatMap(
+      generateStaticValueClassNames,
+    );
+  } else {
+    processedClassNames = classNames;
+  }
+
+  const classMetaArr = addMetaData(processedClassNames, processedConfig);
+
   const withCssData = classMetaArr.map(classMeta => {
@@ -127,0 +187,0 @@ classMeta.css = classMetaToCSS(classMeta, processedConfig.plugins);

src/matchers/generateKeywordMatcher.test.ts

 import { generateKeywordMatcher } from '../matchers/generateKeywordMatcher';
 import { ClassMetaData } from '../types/classname';
-import { ModifierFn, PluginConfig } from '../types/plugin-config';
+import { pseudoPlugin } from '../fixtures/plugins/pseudo';
+import { PluginConfig } from '../types/plugin-config';
 
@@ -53,24 +54,3 @@ describe('generateKeywordMatchers', () => {
     describe('Handle prefixes', () => {
-      const formatPseudo: ModifierFn = (cx, pseudo) => `${cx}:${pseudo}`;
-      const classPlugins: PluginConfig[] = [
-        {
-          name: 'pseudos',
-          type: 'selector',
-          affixType: 'prefix',
-          modifiers: [
-            {
-              name: 'hover',
-              separator: '-',
-              identifier: 'hover',
-              modifierFn: formatPseudo,
-            },
-            {
-              name: 'focus',
-              separator: '-',
-              identifier: 'focus',
-              modifierFn: formatPseudo,
-            },
-          ],
-        },
-      ];
+      const classPlugins: PluginConfig[] = [pseudoPlugin()];
 
@@ -77,0 +57,0 @@ const classMetaData: ClassMetaData[] = [

src/matchers/generateMatchers.test.ts

@@ -39,3 +39,3 @@ import { generateMatchers } from '../matchers/generateMatchers';
           type: 'lookup',
-          name: 'color',
+          separator: '-',
           values: {
@@ -53,4 +53,3 @@ black: '#000000',
               classNamespace: 'fill',
-              pluginSeparator: '-',
-              valuePlugin: 'color',
+              valuePlugin: colorPlugin,
             },
@@ -60,4 +59,3 @@ {
               classNamespace: 'bg',
-              pluginSeparator: '-',
-              valuePlugin: 'color',
+              valuePlugin: colorPlugin,
             },
@@ -68,10 +66,15 @@ {
               pluginDefault: true,
-              valuePlugin: 'color',
+              valuePlugin: colorPlugin,
             },
           ],
-          plugins: [colorPlugin],
+          plugins: [],
         };
-        expect(generateMatchers(config, []).color).toEqual(
-          /(^)(fill-|bg-|)(black|white|pink)($)/,
-        );
+
+        const matchers = generateMatchers(config, []);
+
+        expect(matchers).toEqual({
+          color: /(^)()(black|white|pink)($)/,
+          fill: /(^)(fill-)(black|white|pink)($)/,
+          'background-color': /(^)(bg-)(black|white|pink)($)/,
+        });
       });
@@ -78,0 +81,0 @@ });

src/matchers/generatePrefixSuffixMatchers.ts

@@ -8,2 +8,3 @@ import { PluginConfig } from '../types/plugin-config';
   };
+
   if (!plugins || plugins.length < 1) {
@@ -10,0 +11,0 @@ return baseObject;

src/matchers/generateValuePluginMatcher.test.ts

@@ -0,1 +1,2 @@
+import { BatteryPlugin } from './../battery-plugin';
 import { generateValuePluginMatcher } from '../matchers/generateValuePluginMatcher';
@@ -6,5 +7,4 @@ import { PluginConfig, ModifierFn } from '../types/plugin-config';
 describe('generateValuePluginMatcher', () => {
-  const colorPlugin: PluginConfig = {
+  const colorPlugin = BatteryPlugin({
     type: 'lookup',
-    name: 'color',
     values: {
@@ -15,7 +15,9 @@ black: '#000000',
     },
-  };
+  });
+
   describe('Value plugins', () => {
     describe('Handle no multiple props', () => {
       it('Then it generates a regex to match classes using the plugin', () => {
-        const plugins: PluginConfig[] = [colorPlugin];
+        const plugins: PluginConfig[] = [];
+
         const props: DeveloperPropertyConfig[] = [
@@ -25,4 +27,3 @@ {
             classNamespace: 'bg',
-            pluginSeparator: '-',
-            valuePlugin: 'color',
+            valuePlugin: colorPlugin({ separator: '-' }),
           },
@@ -32,4 +33,3 @@ {
             classNamespace: 'fill',
-            pluginSeparator: '-',
-            valuePlugin: 'color',
+            valuePlugin: colorPlugin({ separator: '-' }),
           },
@@ -39,3 +39,4 @@ ];
         expect(generateValuePluginMatcher(plugins, props)).toEqual({
-          color: /(^)(fill-|bg-)(black|white|pink)($)/,
+          'background-color': /(^)(bg-)(black|white|pink)($)/,
+          fill: /(^)(fill-)(black|white|pink)($)/,
         });
@@ -46,3 +47,4 @@ });
     describe('Handle single prop set as plugin default', () => {
-      const plugins: PluginConfig[] = [colorPlugin];
+      const plugins: PluginConfig[] = [];
+
       const props: DeveloperPropertyConfig[] = [
@@ -53,3 +55,3 @@ {
           pluginDefault: true,
-          valuePlugin: 'color',
+          valuePlugin: colorPlugin(),
         },
@@ -59,3 +61,3 @@ ];
         expect(generateValuePluginMatcher(plugins, props)).toEqual({
-          color: /(^)(black|white|pink)($)/,
+          color: /(^)()(black|white|pink)($)/,
         });
@@ -66,3 +68,3 @@ });
     describe('Handle multiple props with one set as plugin default', () => {
-      const plugins: PluginConfig[] = [colorPlugin];
+      const plugins: PluginConfig[] = [];
       const props: DeveloperPropertyConfig[] = [
@@ -73,3 +75,3 @@ {
           pluginDefault: true,
-          valuePlugin: 'color',
+          valuePlugin: colorPlugin(),
         },
@@ -79,4 +81,3 @@ {
           classNamespace: 'bg',
-          pluginSeparator: '-',
-          valuePlugin: 'color',
+          valuePlugin: colorPlugin({ separator: '-' }),
         },
@@ -87,3 +88,4 @@ ];
         expect(generateValuePluginMatcher(plugins, props)).toEqual({
-          color: /(^)(bg-|)(black|white|pink)($)/,
+          'background-color': /(^)(bg-)(black|white|pink)($)/,
+          color: /(^)()(black|white|pink)($)/,
         });
@@ -94,3 +96,3 @@ });
     describe('Handle no props using the plugin', () => {
-      const plugins: PluginConfig[] = [colorPlugin];
+      const plugins: PluginConfig[] = [];
       const props: DeveloperPropertyConfig[] = [];
@@ -104,5 +106,4 @@
     describe('"Lookup" type plugin', () => {
-      const lookupPlugin: PluginConfig = {
+      const lookupPlugin = BatteryPlugin({
         type: 'lookup',
-        name: 'color',
         values: {
@@ -113,5 +114,5 @@ black: '#000000',
         },
-      };
+      });
 
-      const plugins: PluginConfig[] = [lookupPlugin];
+      const plugins: PluginConfig[] = [];
       const props: DeveloperPropertyConfig[] = [
@@ -121,4 +122,3 @@ {
           classNamespace: 'bg',
-          pluginSeparator: '-',
-          valuePlugin: 'color',
+          valuePlugin: lookupPlugin({ separator: '-' }),
         },
@@ -138,3 +138,2 @@ ];
         type: 'pattern',
-        name: 'integer',
         identifier: /-?\d{1,4}/,
@@ -150,3 +149,3 @@ };
               classNamespace: 'z',
-              valuePlugin: 'integer',
+              valuePlugin: integerPlugin,
             },
@@ -156,3 +155,3 @@ ];
           expect(generateValuePluginMatcher(plugins, props)).toEqual({
-            integer: /(^)(z)(-?\d{1,4})($)/,
+            'z-index': /(^)(z)(-?\d{1,4})($)/,
           });
@@ -168,3 +167,2 @@ });
       const pseudoPlugin: PluginConfig = {
-        name: 'pseudos',
         type: 'selector',
@@ -187,4 +185,5 @@ affixType: 'prefix',
       };
-      const plugins: PluginConfig[] = [colorPlugin, pseudoPlugin];
 
+      const plugins: PluginConfig[] = [pseudoPlugin];
+
       const props: DeveloperPropertyConfig[] = [
@@ -195,3 +194,3 @@ {
           pluginDefault: true,
-          valuePlugin: 'color',
+          valuePlugin: colorPlugin(),
         },
@@ -201,4 +200,3 @@ {
           classNamespace: 'bg',
-          pluginSeparator: '-',
-          valuePlugin: 'color',
+          valuePlugin: colorPlugin({ separator: '-' }),
         },
@@ -209,3 +207,4 @@ ];
         expect(generateValuePluginMatcher(plugins, props)).toEqual({
-          color: /(hover-|focus-|^)(bg-|)(black|white|pink)($)/,
+          'background-color': /(hover-|focus-|^)(bg-)(black|white|pink)($)/,
+          color: /(hover-|focus-|^)()(black|white|pink)($)/,
         });
@@ -217,3 +216,2 @@ });
       const breakpointsPlugin: PluginConfig = {
-        name: 'breakpoints',
         type: 'at-rule',
@@ -244,3 +242,3 @@ atrule: 'media',
 
-      const plugins: PluginConfig[] = [colorPlugin, breakpointsPlugin];
+      const plugins: PluginConfig[] = [breakpointsPlugin];
 
@@ -252,3 +250,3 @@ const props: DeveloperPropertyConfig[] = [
           pluginDefault: true,
-          valuePlugin: 'color',
+          valuePlugin: colorPlugin(),
         },
@@ -258,4 +256,3 @@ {
           classNamespace: 'bg',
-          pluginSeparator: '-',
-          valuePlugin: 'color',
+          valuePlugin: colorPlugin({ separator: '-' }),
         },
@@ -266,3 +263,4 @@ ];
         expect(generateValuePluginMatcher(plugins, props)).toEqual({
-          color: /(^)(bg-|)(black|white|pink)(-sm|-md|-lg|$)/,
+          'background-color': /(^)(bg-)(black|white|pink)(-sm|-md|-lg|$)/,
+          color: /(^)()(black|white|pink)(-sm|-md|-lg|$)/,
         });
@@ -269,0 +267,0 @@ });

src/matchers/generateValuePluginMatcher.ts

@@ -52,3 +52,3 @@ import { PluginConfig } from '../types/plugin-config';
     default:
-      console.log(`The plugin "${plugin.name}" must have a type.`);
+      console.log(`The plugin must have a type.`);
   }
@@ -64,3 +64,5 @@ };
     .map(propConfig => {
-      const { classNamespace, pluginSeparator = '' } = propConfig;
+      const { classNamespace, valuePlugin } = propConfig;
+      const pluginSeparator = (valuePlugin && valuePlugin.separator) || '';
+
       return `${classNamespace}${pluginSeparator}`;
@@ -73,31 +75,41 @@ });
 export const generateValuePluginMatcher = (
-  plugins: PluginConfig[],
+  globalPlugins: PluginConfig[],
   propConfigs: DeveloperPropertyConfig[],
 ): { [k: string]: Matcher } => {
-  if (!plugins || plugins.length < 1) {
+  const configsWithValuePlugins = propConfigs.filter(
+    ({ valuePlugin }) => !!valuePlugin,
+  );
+
+  const valuePlugins = configsWithValuePlugins.map(
+    ({ valuePlugin }) => valuePlugin,
+  );
+
+  if (
+    (!valuePlugins || valuePlugins.length < 1) &&
+    (!globalPlugins || globalPlugins.length < 1)
+  ) {
     return {};
   }
 
-  const { prefixes, suffixes } = generatePrefixSuffixdMatchers(plugins);
-  const matchers: Matchers = plugins.reduce((accum: Matchers, plugin) => {
-    const { name: pluginName } = plugin;
-    const pluginProps = propConfigs.filter(
-      propConfig => propConfig.valuePlugin === pluginName,
-    );
+  const { prefixes, suffixes } = generatePrefixSuffixdMatchers(globalPlugins);
 
-    if (pluginProps.length === 0) {
-      return accum;
-    }
+  const matchers: Matchers = configsWithValuePlugins.reduce(
+    (accum: Matchers, config) => {
+      const propMatcher = generatePropMatcher([config]);
+      const valueMatcher = generateValueMatcher(config.valuePlugin);
 
-    const propMatcher = generatePropMatcher(pluginProps);
-    const valueMatcher = generateValueMatcher(plugin);
+      const regex = new RegExp(
+        `(${prefixes})${propMatcher}${valueMatcher}(${suffixes})`,
+      );
 
-    const regex = new RegExp(
-      `(${prefixes})${propMatcher}${valueMatcher}(${suffixes})`,
-    );
+      const cssPropertyKey = config.cssProperty.join('');
 
-    accum[pluginName] = regex;
-    return accum;
-  }, {});
+      accum[cssPropertyKey] = regex;
+
+      return accum;
+    },
+    {},
+  );
+
   return matchers;
 };

src/types/battery-config.ts

@@ -7,2 +7,5 @@ import { PropertyConfig, DeveloperPropertyConfig } from './property-config';
   plugins?: PluginConfig[];
+  static?: {
+    generateAllValues: boolean;
+  };
 }
@@ -9,0 +12,0 @@

src/types/classname.ts

 import { CSSProperties } from '../types/css';
+import { PluginConfig } from './plugin-config';
 
@@ -26,7 +27,6 @@ export type ClassObject = { [key in CSSProperties]?: string };
   keyword?: boolean;
-  valuePlugin?: string;
-  valuePluginType?: 'pattern' | 'lookup';
-  atrulePlugin?: string;
+  valuePlugin?: PluginConfig;
+  atrulePlugin?: PluginConfig;
   atruleModifier?: string;
-  selectorPlugin?: string;
+  selectorPlugin?: PluginConfig;
   selectorModifier?: string;
@@ -33,0 +33,0 @@ valueModifier?: string;

src/types/plugin-config.ts

@@ -14,3 +14,2 @@ export type ModifierFn = (value: string, modifierValue?: string) => string;
   type: 'pattern' | 'lookup' | 'selector' | 'at-rule';
-  name: string;
   atrule?: 'media' | 'font-face';
@@ -22,2 +21,6 @@ affixType?: 'prefix' | 'suffix';
   values?: { [k: string]: string };
+  separator?: string;
+
+  // todo: can this be more strictly typed?
+  static?: { [k: string]: string[] };
 }

src/types/property-config.ts

 import { CSSProperties } from '../types/css';
+import { PluginConfig } from './plugin-config';
 
@@ -23,6 +24,6 @@ export type SubPropKeys =
   subPropSeparator?: string;
-  pluginSeparator?: string;
   valueSeparator?: string;
   values?: { [k: string]: string };
-  valuePlugin?: string | ModifierSubset[];
+  valuePlugin?: PluginConfig;
+  static?: { values: string[] };
 }
@@ -29,0 +30,0 @@

src/utils/array.ts

@@ -6,3 +6,3 @@ export const baseToCapture = (nonCapture: boolean) => (
   if (arr.length < 1) {
-    return '';
+    return '()';
   }
@@ -9,0 +9,0 @@ const optionalRegex = optional ? '|' : '';

No alert changes

Improved metrics

Total package byte prevSize

259751

increased by2.83%

Number of package files

179

increased by4.07%

Lines of code

6568

increased by1.58%

Worsened metrics

Dependency count

3

increased by200%

Dependency changes

• + Added@types/lodash.merge@^4.6.6

• + Addedlodash.merge@^4.6.2

• + Added@types/lodash@4.17.16(transitive)

• + Added@types/lodash.merge@4.6.9(transitive)

• + Addedlodash.merge@4.6.2(transitive)