@styled-system/css - npm Package Compare versions

Comparing version 1.0.0-1 to 1.0.0

dist.js

		@@ -34,4 +34,4 @@ "use strict";

		var systemProps = ['theme', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'm', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'color', 'bg', 'backgroundColor', 'fontSize', 'fontWeight', 'lineHeight'];
		var systemRE = new RegExp("^(".concat(systemProps.join('\|'), ")$"));
		var systemProps = [].concat(_toConsumableArray(Object.keys(_objectSpread({}, _styledSystem.space.propTypes, _styledSystem.color.propTypes, _styledSystem.fontFamily.propTypes, _styledSystem.fontSize.propTypes, _styledSystem.fontWeight.propTypes, _styledSystem.lineHeight.propTypes))), ['theme', 'mx', 'my', 'px', 'py', 'color']);
		var systemRegExp = new RegExp("^(".concat(systemProps.join('\|'), ")$"));

		@@ -58,3 +58,3 @@ var styles = function styles(props) {
		if (!value \|\| _typeof(value) !== 'object') continue;
		if (systemRE.test(key)) continue;
		if (systemRegExp.test(key)) continue;
		styles.push(_defineProperty({}, key, css(value)({
		@@ -61,0 +61,0 @@ theme: theme

index.js

		@@ -16,35 +16,19 @@ import {
		const systemProps = [
		...Object.keys({
		...space.propTypes,
		...color.propTypes,
		...fontFamily.propTypes,
		...fontSize.propTypes,
		...fontWeight.propTypes,
		...lineHeight.propTypes,
		}),
		'theme',
		'margin',
		'marginTop',
		'marginRight',
		'marginBottom',
		'marginLeft',
		'padding',
		'paddingTop',
		'paddingRight',
		'paddingBottom',
		'paddingLeft',
		'm',
		'mt',
		'mr',
		'mb',
		'ml',
		'mx',
		'my',
		'p',
		'pt',
		'pr',
		'pb',
		'pl',
		'px',
		'py',
		'color',
		'bg',
		'backgroundColor',
		'fontSize',
		'fontWeight',
		'lineHeight',
		]
		const systemRE = new RegExp(

		const systemRegExp = new RegExp(
		`^(${systemProps.join('\|')})$`
		@@ -65,2 +49,3 @@ )


		export const css = style => (props = {}) => {
		@@ -75,3 +60,3 @@ const theme = props.theme \|\| props
		if (!value \|\| typeof value !== 'object') continue
		if (systemRE.test(key)) continue
		if (systemRegExp.test(key)) continue
		styles.push({
		@@ -78,0 +63,0 @@ [key]: css(value)({ theme })

package.json

README.md


		# @styled-system/css

		Overload style objects with theme-aware Styled System props

		```sh
		@@ -23,1 +25,53 @@ npm i @styled-system/css
		```

		```jsx
		// usage with the css prop
		import React from 'react'
		import css from '@styled-system/css'

		const Boop = props =>
		<div
		{...props}
		css={css({
		fontSize: [4, 5, 6],
		color: 'primary',
		})}
		/>
		```

		## Props

		When using `@styled-system/css` with styled components,
		Styled System props can be used on the resulting component.

		```jsx
		<Beep
		color='primary'
		bg='black'
		/>
		```

		The following style props will be available on the component:

		- `fontFamily`
		- `fontSize`
		- `fontWeight`
		- `lineHeight`
		- `color`
		- `bg`
		- `m`
		- `mt`
		- `mr`
		- `mb`
		- `ml`
		- `mx`
		- `my`
		- `p`
		- `pt`
		- `pr`
		- `pb`
		- `pl`
		- `px`
		- `py`

		MIT License

New alerts