Add plugins

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-box",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "Blazing Fast React UI Primitive",
   "contributors": [
     "Jeroen Ransijn (https://twitter.com/jeroen_ransijn)",

src/get-css.ts

@@ -2,6 +2,7 @@ import prefixer, {Rule} from './prefixer'
 import valueToString from './value-to-string'
 import getClassName, {PropertyInfo} from './get-class-name'
 import { EnhancedProp } from './types/enhancers'
+import { apply as applyPlugins, RuleSet } from './plugins'
 
 /**
  * Generates the class name and styles.
@@ -33,21 +34,30 @@ export default function getCss(propertyInfo: PropertyInfo, value: string | numbe
     rules = [{property: propertyInfo.cssName || '', value: valueString}]
   }
 
-  let styles: string
+  const ruleSet = applyPlugins({
+    selector: `.${className}`,
+    rules
+  })
+
+  const styles = stringifyRuleSet(ruleSet)
+
+  return {className, styles}
+}
+
+function stringifyRuleSet({ selector, rules }: RuleSet): string {
   if (process.env.NODE_ENV === 'production') {
     const rulesString = rules
       .map(rule => `${rule.property}:${rule.value}`)
       .join(';')
-    styles = `.${className}{${rulesString}}`
-  } else {
-    const rulesString = rules
-      .map(rule => `  ${rule.property}: ${rule.value};`)
-      .join('\n')
-    styles = `
-.${className} {
-${rulesString}
-}`
+    return `${selector}{${rulesString}}`
   }
 
-  return {className, styles}
+  const rulesString = rules
+    .map(rule => `  ${rule.property}: ${rule.value};`)
+    .join('\n')
+
+  return `
+${selector} {
+${rulesString}
+}`
 }

src/index.tsx

@@ -7,6 +7,7 @@ export { default as splitBoxProps } from './utils/split-box-props'
 export { setClassNamePrefix } from './get-class-name'
 export { configureSafeHref } from './utils/safeHref'
 export { BoxProps, BoxOwnProps, EnhancerProps, PropsOf, PolymorphicBoxProps, BoxComponent } from './types/box-types'
+export { use as usePlugin } from './plugins'
 
 export {
   background,

src/plugins.ts

@@ -0,0 +1,28 @@
+import { Rule } from './prefixer'
+
+export interface RuleSet {
+  selector: string,
+  rules: Rule[]
+}
+
+type Plugin = (set: RuleSet) => RuleSet
+
+const plugins: Plugin[] = []
+
+export function use(plugin: Plugin): void {
+  plugins.unshift(plugin)
+}
+
+export function apply(set: RuleSet) {
+  let newSet = {...set}
+
+  for (const plugin of plugins) {
+    newSet = plugin({...newSet})
+  }
+
+  return newSet
+}
+
+export function reset(): void {
+  plugins.length = 0
+}

test/get-css.ts

@@ -1,9 +1,11 @@
 import test from 'ava'
 import getCss from '../src/get-css'
+import * as plugins from '../src/plugins'
 
 const originalNodeEnv = process.env.NODE_ENV
 test.afterEach.always(() => {
   process.env.NODE_ENV = originalNodeEnv
+  plugins.reset()
 })
 
 test('supports basic prop + value', t => {
@@ -59,6 +61,30 @@ test('adds prefixes', t => {
   )
 })
 
+test('applies plugins', t => {
+  const propInfo = {
+    className: 'min-w',
+    cssName: 'min-width',
+    jsName: 'minWidth'
+  }
+
+  plugins.use(({ selector, rules }) => {
+    return {
+      selector: `#my-div ${selector}`,
+      rules
+    }
+  })
+
+  const result = getCss(propInfo, '10px')
+  t.deepEqual(result, {
+    className: 'ub-min-w_10px',
+    styles: `
+#my-div .ub-min-w_10px {
+  min-width: 10px;
+}`
+  })
+})
+
 test.serial('returns minified css in production', t => {
   process.env.NODE_ENV = 'production'
   const propInfo = {

test/plugins.ts

@@ -0,0 +1,30 @@
+import test from 'ava'
+import * as plugins from '../src/plugins'
+
+test.afterEach.always(() => {
+  plugins.reset()
+})
+
+test('applies a selector prefix to the styles', t => {
+  const ruleset = {
+    selector: '.ub-min-w_10px',
+    rules: [
+      { property: 'min-width', value: '10px' },
+      { property: 'user-select', value: 'none' }
+    ]
+  }
+  plugins.use(({ selector, rules }) => {
+    return {
+      selector: `#my-div ${selector}`,
+      rules
+    }
+  })
+  const result = plugins.apply(ruleset)
+  t.deepEqual(result, {
+    selector: '#my-div .ub-min-w_10px',
+    rules: [
+      { property: 'min-width', value: '10px' },
+      { property: 'user-select', value: 'none' }
+    ]
+  })
+})