		@@ -6,4 +6,4 @@ # Change Log

		### 0.0.2-alpha.b383b9.0 (2021-02-12)
		### 0.0.2-alpha.b92e44.0 (2021-03-01)

		Note: Version bump only for package @codecademy/variance

dist/index.js

		@@ -1,1 +0,2 @@
		export { variance } from './variance/core';
		export { variance } from './core';
		export * from './types/props';

package.json

		{
		"name": "@codecademy/variance",
		"description": "Contraint based styles for flexibility",
		"version": "0.0.2-alpha.b383b9.0",
		"description": "Constraint based CSS in JS for building scalable design systems",
		"version": "0.0.2-alpha.b92e44.0",
		"keywords": [
		@@ -16,8 +16,3 @@ "emotion",
		"module": "dist/index.js",
		"directories": {
		"lib": "src"
		},
		"files": [
		"src"
		],
		"types": "dist/index.d.ts",
		"publishConfig": {
		@@ -38,12 +33,15 @@ "access": "public"
		"peerDependencies": {
		"csstype": ">=3.0.0",
		"lodash": "^>=4.0.0",
		"typescript": ">=4.1.0"
		},
		"dependencies": {
		"csstype": "^3.0.7",
		"lodash": "^4.17.5"
		},
		"devDependencies": {
		"@emotion/jest": "^11.1.0",
		"@emotion/react": "^11.1.4",
		"@emotion/styled": "^11.0.0"
		"@emotion/styled": "^11.0.0",
		"@types/react-test-renderer": "^17.0.1"
		},
		"gitHead": "258ecdf118c0f3a82e7f0259948648bce1af97d1"
		"gitHead": "d83a9de1b456a4b3782658e84cf01012f98b4f5e"
		}

README.md

		# `@codecademy/variance`

		> TODO: description
		This is an experimental package for creating dynamic and typesafe style props.

		## Usage

		Configure your props with a simple configuration object. The keys of your object become your prop names and their values describe their responsibilities and valid types.

		```tsx
		import { Theme } from '@emotion/react';
		import styled from '@emotion/styled';
		import { variance } from '@codecademy/variance';

		const varianceProps = variance.withTheme<Theme>();

		const Container = styled.div(
		variance.create({
		w: { property: 'width' },
		p: { property: 'padding', scale: 'spacing' },
		})
		);

		<Container w="100%" p={[16, 24]}>
		Contained!
		</Container>;
		```
		const variance = require('@codecademy/variance');

		// TODO: DEMONSTRATE API
		## Composition

		You can compose props that you've created seperately to create new prop functions.

		```tsx
		import { varianceProps } from './variance';

		const spacing = varianceProps.create({
		m: { property: 'padding', scale: 'margin' },
		p: { property: 'padding', scale: 'spacing' },
		});

		const dimensions = varianceProps.create({
		w: { property: 'width' },
		h: { property: 'height' },
		});

		// Uses just spacing
		const Spacer = styled.div(spacing);

		// Uses both props
		const Box = styled.div(varianceProps.compose(spacing, dimensions));
		```

src/index.ts

src/variance/__tests__/variance-test.ts

src/variance/core.ts

src/variance/props/background.ts

src/variance/props/borders.ts

src/variance/props/colors.ts

src/variance/props/flex.ts

src/variance/props/grid.ts

src/variance/props/index.ts

src/variance/props/layout.ts

src/variance/props/position.ts

src/variance/props/shadow.ts

src/variance/props/spacing.ts

src/variance/props/typography.ts

src/variance/transforms/index.ts

src/variance/types/props.ts

src/variance/types/utils.ts

@codecademy/variance - npm Package Compare versions

New alerts