Initial v3

package.json

@@ -75,7 +75,7 @@
     "build:lib": "microbundle --entry src/index.js --name goober --no-sourcemap --generateTypes false",
     "build:dist": "npm run build:lib -- --output dist",
     "build:debug": "npm run build:lib -- --output debug --no-compress",
-    "dev": "npm run clean && microbundle watch --entry src/index.js --output dist --name goober",
+    "dev": "npm run clean && microbundle watch --entry src/index.js --output dist --name goober --generateTypes false",
     "sandbox": "wmr --public sandbox/wmr",
     "deploy": "npm run build && npm publish",
     "format": "prettier \"**/*.{js,ts,tsx,md}\" --write"

prefixer/package.json

@@ -25,6 +25,9 @@
     "jest": "^24.1.0",
     "style-vendorizer": "^2.0.0"
   },
+  "peerDependencies": {
+    "goober": ">= 3.0.0"
+  },
   "keywords": [
     "goober",
     "prefixer",

prefixer/src/index.js

@@ -1,6 +1,7 @@
+import { css } from 'goober';
 import { cssPropertyAlias, cssPropertyPrefixFlags, cssValuePrefixFlags } from 'style-vendorizer';
 
-export function prefix(property, value) {
+css.p(function prefix(property, value) {
     let cssText = '';
 
     /* Resolve aliases, e.g. `gap` -> `grid-gap` */
@@ -25,4 +26,4 @@ export function prefix(property, value) {
     cssText += `${property}:${value};`;
 
     return cssText;
-}
+});

src/css.js

@@ -1,6 +1,7 @@
 import { hash } from './core/hash';
 import { compile } from './core/compile';
 import { getSheet } from './core/get-sheet';
+import { parse } from './core/parse';
 
 /**
  * css entry
@@ -25,16 +26,12 @@ function css(val) {
     );
 }
 
-/**
- * CSS Global function to declare global styles
- * @type {Function}
- */
-let glob = css.bind({ g: 1 });
-
 /**
  * `keyframes` function for defining animations
  * @type {Function}
  */
 let keyframes = css.bind({ k: 1 });
 
-export { css, glob, keyframes };
+css.p = (val) => (parse.p = val);
+
+export { css, keyframes };

src/index.js

@@ -1,3 +1,3 @@
 export { styled, setup } from './styled';
 export { extractCss } from './core/update';
-export { css, glob, keyframes } from './css';
+export { css, keyframes } from './css';

src/styled.js

@@ -1,23 +1,18 @@
 import { css } from './css';
-import { parse } from './core/parse';
-
-let h, useTheme, fwdProp;
-function setup(pragma, prefix, theme, forwardProps) {
-    // This one needs to stay in here, so we won't have cyclic dependencies
-    parse.p = prefix;
 
+let h, useTheme;
+function setup(pragma, theme) {
     // These are scope to this context
     h = pragma;
     useTheme = theme;
-    fwdProp = forwardProps;
 }
 
 /**
  * styled function
  * @param {string} tag
- * @param {function} forwardRef
+ * @param {options} options
  */
-function styled(tag, forwardRef) {
+function styled(tag, options) {
     let _ctx = this || {};
 
     return function wrapper() {
@@ -43,7 +38,7 @@ function styled(tag, forwardRef) {
                 css.apply(_ctx, _args) + (_previousClassName ? ' ' + _previousClassName : '');
 
             // If the forwardRef fun is defined we have the ref
-            if (forwardRef) {
+            if (options.forwardRef) {
                 _props.ref = ref;
             }
 
@@ -59,8 +54,8 @@ function styled(tag, forwardRef) {
             }
 
             // Handle the forward props filter if defined and _as is a string
-            if (fwdProp && _as[0]) {
-                fwdProp(_props);
+            if (options.shouldForwardProp && _as[0]) {
+                options.shouldForwardProp(_props);
             }
 
             return h(_as, _props);