Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@emotion/styled-base

Package Overview
Dependencies
Maintainers
3
Versions
73
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@emotion/styled-base - npm Package Compare versions

Comparing version 11.0.0-next.2 to 11.0.0-next.3

index.js

126

CHANGELOG.md
# @emotion/styled-base
## 11.0.0-next.2
## 11.0.0-next.3
### Major Changes
- [`79036056`](https://github.com/emotion-js/emotion/commit/79036056808eefc81a77225254f7c25c2ff9d967) [#967](https://github.com/emotion-js/emotion/pull/967) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Remove support for deprecated `innerRef` prop
* [`79036056`](https://github.com/emotion-js/emotion/commit/79036056808eefc81a77225254f7c25c2ff9d967) [#967](https://github.com/emotion-js/emotion/pull/967) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Use hooks internally for improved bundle size and a better tree in React DevTools
### Patch Changes
- Updated dependencies [[`79036056`](https://github.com/emotion-js/emotion/commit/79036056808eefc81a77225254f7c25c2ff9d967)]:
- @emotion/core@11.0.0-next.2
## 11.0.0-next.1
### Major Changes
- [`1eaa3a38`](https://github.com/emotion-js/emotion/commit/1eaa3a389876d4a623ce66735dc6db093cb2a8e6) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - TypeScript types have been restructured. These changes:
- Reduce build times when using emotion
- In many cases remove the need for manually specifying generic parameters for your emotion components.
If you encounter build issues after upgrade, try removing any manually specified generic types and let them be inferred. Otherwise refer to the breaking changes list below.
## Improvements
- useTheme added to EmotionTheming interface and can now create your own closed variation of withTheme. More information in the docs under the theming section.
- Union types as props are better supported and should be inferred properly
- Build times should be reduced significantly in larger projects.
## Breaking changes
- withTheme can now have the Theme type specified when calling it. For example `withTheme<MyTheme>(MyComponent)`
**Breaking change:** Generic argument changed, if you were specifying the ComponentType you will need to remove the generic parameter. Recommend following example setup in the TypeScript docs under theming section
- `css` function has been restricted to prevent passing of invalid types
- `CreateStyled` functions no longer take a second `ExtraProps` argument. Instead move it to after the create styled call. For example
`styled<typeof MyComponent, ExtraProps>(MyComponent)({})`
to
`styled(MyComponent)<ExtraProps>({})`
- `StyledComponent` type no longer supports the third generic `Theme` parameter. Instead add the `theme` prop to the first `Props` argument. For example:
`StyledComponent<Props, {}, MyTheme>`
to
`StyledComponent<Props & { theme?: MyTheme }>`
### Patch Changes
- [`22935470`](https://github.com/emotion-js/emotion/commit/2293547000ce78d044d054d17564f6c2aa670687) [#1588](https://github.com/emotion-js/emotion/pull/1588) Thanks [@FezVrasta](https://github.com/FezVrasta)! - StyledComponent Flow type is now polymorphic, that means you can now define the component prop types to get better type safety.
- Updated dependencies [[`1eaa3a38`](https://github.com/emotion-js/emotion/commit/1eaa3a389876d4a623ce66735dc6db093cb2a8e6)]:
- @emotion/serialize@1.0.0-next.0
- @emotion/core@11.0.0-next.1
## 11.0.0-next.0
### Patch Changes
- Updated dependencies [[`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555)]:
- @emotion/core@11.0.0-next.0
## 10.0.24
### Patch Changes
- Updated dependencies [[`5e17e456`](https://github.com/emotion-js/emotion/commit/5e17e456a66857bb3a3a5b39c9cd8f8dd89301e5)]:
- @emotion/is-prop-valid@0.8.5
## 10.0.23
### Patch Changes
- [`97673098`](https://github.com/emotion-js/emotion/commit/97673098945a75b716d4cac100c1af46a5ae18f2) [#1570](https://github.com/emotion-js/emotion/pull/1570) Thanks [@FezVrasta](https://github.com/FezVrasta)! - Fixed package's Flow types
- Updated dependencies [[`a55f3d49`](https://github.com/emotion-js/emotion/commit/a55f3d49c2febdf7eb1bede3f12da13c3efa1399), [`ca95f385`](https://github.com/emotion-js/emotion/commit/ca95f385f7ce3da6d53de1a652b3b219f11434c4), [`6cdb5695`](https://github.com/emotion-js/emotion/commit/6cdb56959bc4b64d7178604f1eb64a058c2e58c2)]:
- @emotion/serialize@0.11.14
- @emotion/is-prop-valid@0.8.4
## 10.0.22
### Patch Changes
- [`4fc5657a`](https://github.com/emotion-js/emotion/commit/4fc5657ac8d0002322321cfbfc254b7196d27387) [#1219](https://github.com/emotion-js/emotion/pull/1219) Thanks [@Andarist](https://github.com/Andarist)! - Add dev hint about css object being stringified by accident
* [`c3f0bc10`](https://github.com/emotion-js/emotion/commit/c3f0bc101833fff1ee4e27c7a730b821a7df4a15) [#1545](https://github.com/emotion-js/emotion/pull/1545) Thanks [@jgroszko](https://github.com/jgroszko)! - Accept objects as `className` in styled components (they are stringified) to match React behavior
* Updated dependencies [[`4fc5657a`](https://github.com/emotion-js/emotion/commit/4fc5657ac8d0002322321cfbfc254b7196d27387), [`2fc75f26`](https://github.com/emotion-js/emotion/commit/2fc75f266b23cf48fb842953bc47eebcb5241cbd), [`10211951`](https://github.com/emotion-js/emotion/commit/10211951051729b149930a8646de14bae9ae1bbc), [`57a767ea`](https://github.com/emotion-js/emotion/commit/57a767ea3dd18eefbbdc7269cc13128caad65286)]:
- @emotion/core@10.0.22
- @emotion/serialize@0.11.12
## 10.0.19
- Updated dependencies [c81c0033]:
- @emotion/serialize@0.11.11
- @emotion/is-prop-valid@0.8.3
## 10.0.17
### Patch Changes
- [66cda641](https://github.com/emotion-js/emotion/commit/66cda64128631790b81e3c9df273a972358ea593) [#1478](https://github.com/emotion-js/emotion/pull/1478) Thanks [@Andarist](https://github.com/Andarist)! - Add warnings about using illegal escape sequences
- [66cda641](https://github.com/emotion-js/emotion/commit/66cda64128631790b81e3c9df273a972358ea593) [#1478](https://github.com/emotion-js/emotion/pull/1478) Thanks [@Andarist](https://github.com/Andarist)! - Update Babel dependencies
## 10.0.15
### Patch Changes
- [8638c416](https://github.com/emotion-js/emotion/commit/8638c416) [#1421](https://github.com/emotion-js/emotion/pull/1421) Thanks [@Andarist](https://github.com/Andarist)! - TS: Disallow Theme parameter when it was already parametrized by using CustomStyled
## 10.0.14
### Patch Changes
- [c0eb604d](https://github.com/emotion-js/emotion/commit/c0eb604d) [#1419](https://github.com/emotion-js/emotion/pull/1419) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Update build tool
- [c673e200](https://github.com/emotion-js/emotion/commit/c673e200) [#1405](https://github.com/emotion-js/emotion/pull/1405) Thanks [@ryanswanson](https://github.com/ryanswanson)! - PropsOf<C> TypeScript utilities - Support defaultProps by delegating to new JSX and React types.
## 10.0.13
- Updated dependencies [52bd655b]:
- @emotion/is-prop-valid@0.8.1
## 10.0.12
- Updated dependencies [06426c95]:
- @emotion/is-prop-valid@0.8.0
- [`f9feab1a`](https://github.com/emotion-js/emotion/commit/f9feab1a5d1ca88e53c3f7a063be5d5871cc93e8) [#1575](https://github.com/emotion-js/emotion/pull/1575) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Removed support for `@emotion/styled-base` package. It has been moved to `@emotion/styled` and is available as `@emotion/styled/base`. This simplifies how the regular and base versions relate to each other and eliminates problems with stricter package managers when `@emotion/styled-base` was not installed explicitly by a user.
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
var React = require('react');
var isPropValid = _interopDefault(require('@emotion/is-prop-valid'));
var core = require('@emotion/core');
var utils = require('@emotion/utils');
var serialize = require('@emotion/serialize');
var testOmitPropsOnStringTag = isPropValid;
var testOmitPropsOnComponent = function testOmitPropsOnComponent(key) {
return key !== 'theme';
};
var getDefaultShouldForwardProp = function getDefaultShouldForwardProp(tag) {
return typeof tag === 'string' && // 96 is one less than the char code
// for "a" so this is checking that
// it's a lowercase character
tag.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent;
};
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
var isBrowser = typeof document !== 'undefined';
var createStyled = function createStyled(tag, options) {
if (process.env.NODE_ENV !== 'production') {
if (tag === undefined) {
throw new Error('You are trying to create a styled element with an undefined component.\nYou may have forgotten to import it.');
}
}
var identifierName;
var shouldForwardProp;
var targetClassName;
if (options !== undefined) {
identifierName = options.label;
targetClassName = options.target;
shouldForwardProp = tag.__emotion_forwardProp && options.shouldForwardProp ? function (propName) {
return tag.__emotion_forwardProp(propName) && // $FlowFixMe
options.shouldForwardProp(propName);
} : options.shouldForwardProp;
}
var isReal = tag.__emotion_real === tag;
var baseTag = isReal && tag.__emotion_base || tag;
if (typeof shouldForwardProp !== 'function' && isReal) {
shouldForwardProp = tag.__emotion_forwardProp;
}
var defaultShouldForwardProp = shouldForwardProp || getDefaultShouldForwardProp(baseTag);
var shouldUseAs = !defaultShouldForwardProp('as');
return function () {
var args = arguments;
var styles = isReal && tag.__emotion_styles !== undefined ? tag.__emotion_styles.slice(0) : [];
if (identifierName !== undefined) {
styles.push("label:" + identifierName + ";");
}
if (args[0] == null || args[0].raw === undefined) {
styles.push.apply(styles, args);
} else {
if (process.env.NODE_ENV !== 'production' && args[0][0] === undefined) {
console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);
}
styles.push(args[0][0]);
var len = args.length;
var i = 1;
for (; i < len; i++) {
if (process.env.NODE_ENV !== 'production' && args[0][i] === undefined) {
console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);
}
styles.push(args[i], args[0][i]);
}
} // $FlowFixMe: we need to cast StatelessFunctionalComponent to our PrivateStyledComponent class
var Styled = core.withEmotionCache(function (props, cache, ref) {
var finalTag = shouldUseAs && props.as || baseTag;
var className = '';
var classInterpolations = [];
var mergedProps = props;
if (props.theme == null) {
mergedProps = {};
for (var key in props) {
mergedProps[key] = props[key];
}
mergedProps.theme = React.useContext(core.ThemeContext);
}
if (typeof props.className === 'string') {
className = utils.getRegisteredStyles(cache.registered, classInterpolations, props.className);
} else if (props.className != null) {
className = props.className + " ";
}
var serialized = serialize.serializeStyles(styles.concat(classInterpolations), cache.registered, mergedProps);
var rules = utils.insertStyles(cache, serialized, typeof finalTag === 'string');
className += cache.key + "-" + serialized.name;
if (targetClassName !== undefined) {
className += " " + targetClassName;
}
var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(finalTag) : defaultShouldForwardProp;
var newProps = {};
for (var _key in props) {
if (shouldUseAs && _key === 'as') continue;
if ( // $FlowFixMe
finalShouldForwardProp(_key)) {
newProps[_key] = props[_key];
}
}
newProps.className = className;
newProps.ref = ref;
var ele = React.createElement(finalTag, newProps);
if (!isBrowser && rules !== undefined) {
var _ref;
var serializedNames = serialized.name;
var next = serialized.next;
while (next !== undefined) {
serializedNames += ' ' + next.name;
next = next.next;
}
return React.createElement(React.Fragment, null, React.createElement("style", (_ref = {}, _ref["data-emotion-" + cache.key] = serializedNames, _ref.dangerouslySetInnerHTML = {
__html: rules
}, _ref.nonce = cache.sheet.nonce, _ref)), ele);
}
return ele;
});
Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")";
Styled.defaultProps = tag.defaultProps;
Styled.__emotion_real = Styled;
Styled.__emotion_base = baseTag;
Styled.__emotion_styles = styles;
Styled.__emotion_forwardProp = shouldForwardProp;
Object.defineProperty(Styled, 'toString', {
value: function value() {
if (targetClassName === undefined && process.env.NODE_ENV !== 'production') {
return 'NO_COMPONENT_SELECTOR';
} // $FlowFixMe: coerce undefined to string
return "." + targetClassName;
}
});
Styled.withComponent = function (nextTag, nextOptions) {
return createStyled(nextTag, nextOptions !== undefined ? _objectSpread({}, options || {}, {}, nextOptions) : options).apply(void 0, styles);
};
return Styled;
};
};
exports.default = createStyled;
throw new Error('A new entrypoint in the `@emotion/styled` package, `@emotion/styled/base`, has replaced the `@emotion/styled-base` package. Please remove this package and use `@emotion/styled/base` instead.');
"use strict";
function _interopDefault(ex) {
return ex && "object" == typeof ex && "default" in ex ? ex.default : ex;
}
Object.defineProperty(exports, "__esModule", {
value: !0
});
var _defineProperty = _interopDefault(require("@babel/runtime/helpers/defineProperty")), React = require("react"), isPropValid = _interopDefault(require("@emotion/is-prop-valid")), core = require("@emotion/core"), utils = require("@emotion/utils"), serialize = require("@emotion/serialize"), testOmitPropsOnStringTag = isPropValid, testOmitPropsOnComponent = function(key) {
return "theme" !== key;
}, getDefaultShouldForwardProp = function(tag) {
return "string" == typeof tag && tag.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent;
};
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
enumerableOnly && (symbols = symbols.filter(function(sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
})), keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread(target) {
for (var i = 1; i < arguments.length; i++) {
var source = null != arguments[i] ? arguments[i] : {};
i % 2 ? ownKeys(source, !0).forEach(function(key) {
_defineProperty(target, key, source[key]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(source).forEach(function(key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
return target;
}
var isBrowser = "undefined" != typeof document, createStyled = function createStyled(tag, options) {
var identifierName, shouldForwardProp, targetClassName;
void 0 !== options && (identifierName = options.label, targetClassName = options.target,
shouldForwardProp = tag.__emotion_forwardProp && options.shouldForwardProp ? function(propName) {
return tag.__emotion_forwardProp(propName) && options.shouldForwardProp(propName);
} : options.shouldForwardProp);
var isReal = tag.__emotion_real === tag, baseTag = isReal && tag.__emotion_base || tag;
"function" != typeof shouldForwardProp && isReal && (shouldForwardProp = tag.__emotion_forwardProp);
var defaultShouldForwardProp = shouldForwardProp || getDefaultShouldForwardProp(baseTag), shouldUseAs = !defaultShouldForwardProp("as");
return function() {
var args = arguments, styles = isReal && void 0 !== tag.__emotion_styles ? tag.__emotion_styles.slice(0) : [];
if (void 0 !== identifierName && styles.push("label:" + identifierName + ";"), null == args[0] || void 0 === args[0].raw) styles.push.apply(styles, args); else {
styles.push(args[0][0]);
for (var len = args.length, i = 1; i < len; i++) styles.push(args[i], args[0][i]);
}
var Styled = core.withEmotionCache(function(props, cache, ref) {
var finalTag = shouldUseAs && props.as || baseTag, className = "", classInterpolations = [], mergedProps = props;
if (null == props.theme) {
for (var key in mergedProps = {}, props) mergedProps[key] = props[key];
mergedProps.theme = React.useContext(core.ThemeContext);
}
"string" == typeof props.className ? className = utils.getRegisteredStyles(cache.registered, classInterpolations, props.className) : null != props.className && (className = props.className + " ");
var serialized = serialize.serializeStyles(styles.concat(classInterpolations), cache.registered, mergedProps), rules = utils.insertStyles(cache, serialized, "string" == typeof finalTag);
className += cache.key + "-" + serialized.name, void 0 !== targetClassName && (className += " " + targetClassName);
var finalShouldForwardProp = shouldUseAs && void 0 === shouldForwardProp ? getDefaultShouldForwardProp(finalTag) : defaultShouldForwardProp, newProps = {};
for (var _key in props) shouldUseAs && "as" === _key || finalShouldForwardProp(_key) && (newProps[_key] = props[_key]);
newProps.className = className, newProps.ref = ref;
var ele = React.createElement(finalTag, newProps);
if (!isBrowser && void 0 !== rules) {
for (var _ref, serializedNames = serialized.name, next = serialized.next; void 0 !== next; ) serializedNames += " " + next.name,
next = next.next;
return React.createElement(React.Fragment, null, React.createElement("style", ((_ref = {})["data-emotion-" + cache.key] = serializedNames,
_ref.dangerouslySetInnerHTML = {
__html: rules
}, _ref.nonce = cache.sheet.nonce, _ref)), ele);
}
return ele;
});
return Styled.displayName = void 0 !== identifierName ? identifierName : "Styled(" + ("string" == typeof baseTag ? baseTag : baseTag.displayName || baseTag.name || "Component") + ")",
Styled.defaultProps = tag.defaultProps, Styled.__emotion_real = Styled, Styled.__emotion_base = baseTag,
Styled.__emotion_styles = styles, Styled.__emotion_forwardProp = shouldForwardProp,
Object.defineProperty(Styled, "toString", {
value: function() {
return "." + targetClassName;
}
}), Styled.withComponent = function(nextTag, nextOptions) {
return createStyled(nextTag, void 0 !== nextOptions ? _objectSpread({}, options || {}, {}, nextOptions) : options).apply(void 0, styles);
}, Styled;
};
};
exports.default = createStyled;
throw new Error("A new entrypoint in the `@emotion/styled` package, `@emotion/styled/base`, has replaced the `@emotion/styled-base` package. Please remove this package and use `@emotion/styled/base` instead.");
{
"name": "@emotion/styled-base",
"version": "11.0.0-next.2",
"description": "base styled API for emotion",
"version": "11.0.0-next.3",
"description": "Deprecated package which became `@emotion/styled/base`",
"main": "dist/styled-base.cjs.js",
"module": "dist/styled-base.esm.js",
"browser": {
"./dist/styled-base.cjs.js": "./dist/styled-base.browser.cjs.js",
"./dist/styled-base.esm.js": "./dist/styled-base.browser.esm.js"
},
"types": "types/index.d.ts",
"license": "MIT",
"repository": "https://github.com/emotion-js/emotion/tree/master/packages/styled-base",
"scripts": {
"test:typescript": "dtslint types"
"test:typescript": "exit 0"
},
"dependencies": {
"@babel/runtime": "^7.5.5",
"@emotion/is-prop-valid": "0.8.5",
"@emotion/serialize": "^1.0.0-next.0",
"@emotion/utils": "0.11.2"
},
"devDependencies": {
"@emotion/core": "^11.0.0-next.2",
"@types/react": "^16.9.11",
"dtslint": "^0.3.0",
"react": "^16.11.0"
},
"peerDependencies": {
"@emotion/core": "^11.0.0-next.2",
"react": ">=16.8.0"
},
"publishConfig": {
"access": "public"
},
"files": [
"src",
"dist",
"types"
],
"umd:main": "dist/styled-base.umd.min.js",
"preconstruct": {
"umdName": "emotionStyledBase"
"source": "index"
}
}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc