diff --git a/package.json b/package.json index 81fa931b..bd06287e 100644 --- a/package.json +++ b/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" diff --git a/prefixer/package.json b/prefixer/package.json index 5711b7ed..090381af 100644 --- a/prefixer/package.json +++ b/prefixer/package.json @@ -25,6 +25,9 @@ "jest": "^24.1.0", "style-vendorizer": "^2.0.0" }, + "peerDependencies": { + "goober": ">= 3.0.0" + }, "keywords": [ "goober", "prefixer", diff --git a/prefixer/src/index.js b/prefixer/src/index.js index d872e225..db64b900 100644 --- a/prefixer/src/index.js +++ b/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; -} +}); diff --git a/src/css.js b/src/css.js index 6d1d1610..ec6d4ed3 100644 --- a/src/css.js +++ b/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 }; diff --git a/src/index.js b/src/index.js index bc554ae3..638ca9c7 100644 --- a/src/index.js +++ b/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'; diff --git a/src/styled.js b/src/styled.js index 65bd6682..0a75f6d7 100644 --- a/src/styled.js +++ b/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);