@codecademy/variance NPM

`@codecademy/variance`

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.

import styled from '@emotion/styled';
import { variance } from '@codecademy/variance';

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

<Container w="100%" p={[16, 24]}>
  Contained!
</Container>;

Composition

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

import { variance } from '@codecademy/variance';

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

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

const combinedProps = variance.compose(spacing, dimensions);

const Box = styled.div(combinedProps);

Static CSS

import styled from '@emotion/styled';
import { variance } from '@codecademy/variance';

const css = variance.createCss({
  m: { property: 'padding', scale: 'margin' },
  p: { property: 'padding', scale: 'spacing' },
});

const MyCoolThing = styled.div(
  css({
    width: '100%',
    height: '500px',
    p: [32, , 64],
  })
);

const variant = variance.createVariant({
  m: { property: 'padding', scale: 'margin' },
  p: { property: 'padding', scale: 'spacing' },
});

const MyCoolThing = styled.div(
  variant({
    base: { width: '100%' },
    variants: {
      big: {
        height: '500px',
        p: [32, , 64],
      },
      small: {
        height: '250px',
        p: [16, , 32],
      },
    },
  })
);

css css-in-js emotion styles

csstype lodash

@codecademy/gamut-labs @codecademy/styleguide @codecademy/gamut @codecademy/gamut-kit @infinitebrahmanuniverse/nolb-_codec @everything-registry/sub-chunk-183 @zalastax/nolb-_codec @codecademy/gamut-icons @codecademy/gamut-patterns @codecademy/gamut-styles @codecademy/brand

0.21.3

10 days ago

0.21.3-alpha.f1f5df.0

10 days ago

0.21.3-alpha.ef0343.0

10 days ago

0.21.3-alpha.4bbac1.0

10 days ago

0.21.3-alpha.0071d2.0

10 days ago

0.21.3-alpha.23ec48.0

12 days ago

0.21.3-alpha.e14546.0

12 days ago

0.21.3-alpha.aa13ed.0

12 days ago

0.21.3-alpha.817a81.0

12 days ago

0.21.2

8 months ago

0.21.1

8 months ago

0.21.1-alpha.5bf9ff.0

8 months ago

67.0.0-alpha.35c6c5.0

10 months ago

0.21.1-alpha.2b1053.0

8 months ago

0.21.1-alpha.187436.0

8 months ago

67.0.0-alpha.ccfdc5.0

10 months ago

0.21.1-alpha.d71088.0

8 months ago

0.21.2-alpha.6a1d33.0

8 months ago

0.21.2-alpha.cd6532.0

8 months ago

0.21.2-alpha.ab0105.0

8 months ago

0.21.1-alpha.0f0cb9.0

8 months ago

0.21.1-alpha.472d6c.0

8 months ago

0.21.1-alpha.9d771e.0

8 months ago

0.21.1-alpha.d60f39.0

8 months ago

67.0.0-alpha.09ad1e.0

10 months ago

67.0.0-alpha.7455bb.0

12 months ago

67.0.0-alpha.387605.0

12 months ago

0.20.6-alpha.edcdf7.0

1 year ago

0.20.6-alpha.17d685.0

1 year ago

0.20.6-alpha.7eddc2.0

1 year ago

0.20.6-alpha.72cf52.0

1 year ago

1.0.0-alpha.b02418.0

1 year ago

0.21.0

1 year ago

0.20.6-alpha.2d69f5.0

1 year ago

0.20.6-alpha.a73ccb.0

1 year ago

0.20.6-alpha.9b50db.0

1 year ago

0.20.6-alpha.2a06db.0

1 year ago

0.20.6-alpha.9fa786.0

1 year ago

0.20.6-alpha.c3b77f.0

1 year ago

1.0.0-alpha.4b1500.0

1 year ago

0.20.6-alpha.ae778b.0

1 year ago

0.20.6-alpha.85968e.0

1 year ago

0.20.6-alpha.87ed94.0

1 year ago

0.20.6-alpha.3e81a0.0

1 year ago

0.20.6-alpha.186a97.0

1 year ago

0.20.6-alpha.73e740.0

1 year ago

0.20.6-alpha.a01756.0

1 year ago

0.21.1-alpha.63b306.0

1 year ago

0.20.6-alpha.90c336.0

1 year ago

0.20.6-alpha.7f6942.0

1 year ago

0.20.6-alpha.d1ac8d.0

1 year ago

0.20.6-alpha.64be05.0

1 year ago

0.21.1-alpha.d9da73.0

1 year ago

0.20.6-alpha.9461f1.0

1 year ago

0.20.6-alpha.5531c4.0

1 year ago

0.20.6-alpha.407697.0

1 year ago

1.0.0-alpha.c56b1c.0

1 year ago

0.20.6-alpha.7d4aaf.0

1 year ago

0.20.6-alpha.801403.0

1 year ago

0.20.4-alpha.f7684c.0

1 year ago

0.20.4-alpha.75cbe7.0

2 years ago

0.20.6-alpha.0c5982.0

1 year ago

0.20.4-alpha.718461.0

2 years ago

0.20.6-alpha.3e1199.0

1 year ago

0.20.6-alpha.b6a8d8.0

1 year ago

0.20.5

1 year ago

0.20.4

1 year ago

0.20.4-alpha.eca005.0

1 year ago

0.20.6-alpha.3c0164.0

1 year ago

0.20.4-alpha.61dd4b.0

2 years ago

0.20.5-alpha.33d22e.0

1 year ago

0.20.4-alpha.5f7e8b.0

1 year ago

0.20.6-alpha.2f3a19.0

1 year ago

0.20.4-alpha.04d122.0

1 year ago

0.20.5-alpha.b44e47.0

1 year ago

0.20.6-alpha.a32846.0

1 year ago

0.20.6-alpha.6c1d55.0

1 year ago

0.20.4-alpha.2a2889.0

2 years ago

0.20.4-alpha.b4ac54.0

2 years ago

0.20.6-alpha.a0fbe3.0

1 year ago

0.20.6-alpha.365241.0

1 year ago

0.20.6-alpha.646aac.0

1 year ago

0.20.5-alpha.df5381.0

1 year ago

0.20.4-alpha.54ddb4.0

1 year ago

0.20.4-alpha.d4e81c.0

1 year ago

0.20.4-alpha.4963a0.0

1 year ago

0.20.4-alpha.4a8515.0

1 year ago

0.20.4-alpha.52c766.0

2 years ago

0.20.6-alpha.a07b64.0

1 year ago

0.20.6-alpha.86dcc7.0

1 year ago

0.20.4-alpha.5ea335.0

2 years ago

0.20.4-alpha.f3486d.0

2 years ago

0.20.4-alpha.e376eb.0

2 years ago

0.20.1

2 years ago

0.20.1-alpha.ccf430.0

2 years ago

0.20.2-alpha.bc2c34.0

2 years ago

0.20.3-alpha.3ee664.0

2 years ago

0.20.2-alpha.a12b2d.0

2 years ago

0.20.1-alpha.8fa1eb.0

2 years ago

0.20.3-alpha.7557c8.0

2 years ago

0.20.1-alpha.b947b1.0

2 years ago

0.20.3-alpha.0b16c6.0

2 years ago

0.20.2-alpha.44a62c.0

2 years ago

0.20.1-alpha.54c5f5.0

2 years ago

0.20.3

2 years ago

0.20.2

2 years ago

0.20.1-alpha.65b932.0

2 years ago

0.20.3-alpha.ab5b76.0

2 years ago

0.20.1-alpha.a6206c.0

2 years ago

0.20.3-alpha.d5109b.0

2 years ago

0.20.1-alpha.825c81.0

2 years ago

0.20.1-alpha.fe86ea.0

2 years ago

0.20.3-alpha.e38060.0

2 years ago

0.20.1-alpha.7b7eab.0

2 years ago

0.20.3-alpha.cc15c2.0

2 years ago

0.20.2-alpha.818cb7.0

2 years ago

0.20.3-alpha.9e36ef.0

2 years ago

0.20.1-alpha.868d87.0

2 years ago

0.20.2-alpha.0e532d.0

2 years ago

0.20.3-alpha.4d61d4.0

2 years ago

0.20.1-alpha.b04559.0

2 years ago

0.20.1-alpha.029fea.0

2 years ago

0.20.1-alpha.b9b96b.0

2 years ago

0.20.3-alpha.20ffe4.0

2 years ago

0.20.2-alpha.364c12.0

2 years ago

0.20.3-alpha.e8b96f.0

2 years ago

0.20.1-alpha.6c28e2.0

2 years ago

0.20.3-alpha.7abce2.0

2 years ago

0.20.3-alpha.b1ae40.0

2 years ago

0.20.2-alpha.bbb6c1.0

2 years ago

0.20.3-alpha.01c13d.0

2 years ago

0.20.3-alpha.424f85.0

2 years ago

0.20.1-alpha.f24332.0

2 years ago

0.20.2-alpha.111771.0

2 years ago

0.20.3-alpha.d9ce94.0

2 years ago

0.20.3-alpha.ad9693.0

2 years ago

0.20.1-alpha.25d8b9.0

2 years ago

0.20.3-alpha.cf5b5a.0

2 years ago

0.20.3-alpha.f58fb6.0

2 years ago

0.20.3-alpha.4a9de5.0

2 years ago

0.20.3-alpha.41f2a3.0

2 years ago

0.20.1-alpha.9bfc43.0

2 years ago

0.20.3-alpha.4400b2.0

2 years ago

0.20.1-alpha.c246a8.0

2 years ago

0.20.3-alpha.f7a56e.0

2 years ago

0.20.3-alpha.dcddc8.0

2 years ago

0.20.3-alpha.f2294e.0

2 years ago

0.20.3-alpha.712f83.0

2 years ago

0.20.3-alpha.1afa32.0

2 years ago

0.20.0

2 years ago

1.0.0-alpha.760be3.0

2 years ago

0.20.1-alpha.32ef98.0

2 years ago

0.20.1-alpha.b8cbe2.0

2 years ago

1.0.0-alpha.97744b.0

2 years ago

0.20.1-alpha.cdc086.0

2 years ago

0.20.1-alpha.e38a27.0

2 years ago

0.20.1-alpha.447c4d.0

2 years ago

1.0.0-alpha.bf8990.0

2 years ago

1.0.0-alpha.618f3b.0

2 years ago

1.0.0-alpha.f6cb5a.0

2 years ago

0.19.1-alpha.a809e8.0

2 years ago

0.20.1-alpha.38c5ee.0

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.19.0-alpha.7725c9.0

3 years ago

0.19.0-alpha.aa37ee.0

3 years ago

0.19.0

3 years ago

0.18.2-alpha.ac83cf.0

3 years ago

0.18.2-alpha.044bd4.0

3 years ago

0.18.1

3 years ago

0.18.1-alpha.cb7aca.0

3 years ago

0.18.0

3 years ago

0.18.0-alpha.024d4b.0

3 years ago

0.18.0-alpha.4f0ba0.0

3 years ago

0.18.0-alpha.56644e.0

3 years ago

0.18.0-alpha.9c9d3a.0

3 years ago

0.17.5-alpha.d23da5.0

3 years ago

0.18.0-alpha.ad39ee.0

3 years ago

0.18.0-alpha.29766a.0

3 years ago

0.18.0-alpha.9dd65d.0

3 years ago

0.18.0-alpha.d0d91f.0

3 years ago

0.18.0-alpha.2e1090.0

3 years ago

0.18.0-alpha.bb29f4.0

3 years ago

0.18.0-alpha.1d1939.0

3 years ago

0.17.4

3 years ago

0.17.4-alpha.651073.0

3 years ago

0.17.4-alpha.ee426d.0

3 years ago

0.17.4-alpha.b57b69.0

3 years ago

0.17.4-alpha.2ed92f.0

3 years ago

0.17.3-alpha.35a64e.0

3 years ago

0.17.3

3 years ago

0.17.3-alpha.8588b0.0

3 years ago

0.17.3-alpha.dc88cf.0

3 years ago

0.17.3-alpha.7d1201.0

3 years ago

0.17.3-alpha.7aeed7.0

3 years ago

0.18.0-alpha.c27cac.0

3 years ago

0.17.2

3 years ago

0.17.2-alpha.e07022.0

3 years ago

0.17.2-alpha.511c51.0

3 years ago

0.17.1

3 years ago

0.17.1-alpha.293997.0

3 years ago

0.17.1-alpha.be029d.0

3 years ago

0.17.1-alpha.9affc9.0

3 years ago

0.17.1-alpha.144766.0

3 years ago

0.17.1-alpha.576611.0

3 years ago

0.17.0

3 years ago

0.16.1-alpha.8a6ed5.0

3 years ago

0.16.1-alpha.4e3274.0

3 years ago

0.16.1-alpha.1ec560.0

3 years ago

0.14.1-alpha.a22809.0

3 years ago

0.15.0

3 years ago

0.15.1-alpha.a41c18.0

3 years ago

0.16.0

3 years ago

0.15.1-alpha.eaa240.0

3 years ago

0.14.1-alpha.127bfd.0

3 years ago

0.14.1-alpha.7313f0.0

3 years ago

0.15.0-alpha.a8e1b7.0

3 years ago

0.14.1-alpha.33ae17.0

3 years ago

0.14.1-alpha.838302.0

3 years ago

0.12.2-alpha.5d7f36.0

3 years ago

0.12.2-alpha.d7ddac.0

3 years ago

0.12.1-alpha.5bdcfc.0

3 years ago

0.12.2-alpha.f6df21.0

3 years ago

0.13.1-alpha.082a78.0

3 years ago

0.12.2-alpha.18751b.0

3 years ago

0.12.1-alpha.054d6e.0

3 years ago

0.12.2-alpha.645ebf.0

3 years ago

0.12.2-alpha.0abea0.0

3 years ago

0.13.0

3 years ago

0.12.1-alpha.cdddd7.0

3 years ago

0.12.2-alpha.ad9306.0

3 years ago

0.12.2-alpha.eb8871.0

3 years ago

0.12.2-alpha.7b3e46.0

3 years ago

0.14.0

3 years ago

0.12.2-alpha.ebf9ac.0

3 years ago

0.12.2-alpha.2fd033.0

3 years ago

0.12.2-alpha.2dff32.0

3 years ago

0.13.1-alpha.783329.0

3 years ago

0.12.1

3 years ago

0.12.1-alpha.03179b.0

3 years ago

0.12.1-alpha.3d0bdb.0

3 years ago

0.11.3-alpha.deee7d.0

3 years ago

0.9.1-alpha.07d22c.0

3 years ago

0.10.2-alpha.15c45f.0

3 years ago

0.9.1-alpha.9d54d2.0

3 years ago

0.9.1-alpha.acbb93.0

3 years ago

0.10.1-alpha.2e9620.0

3 years ago

0.9.1-alpha.4cced8.0

3 years ago

0.9.1-alpha.65aa96.0

3 years ago

0.11.3-alpha.6613b8.0

3 years ago

0.11.3-alpha.fedd7c.0

3 years ago

0.12.1-alpha.b8a33f.0

3 years ago

0.11.3-alpha.08eadf.0

3 years ago

0.9.1-alpha.5849c8.0

3 years ago

0.11.3-alpha.e660de.0

3 years ago

0.10.2-alpha.c46aa9.0

3 years ago

0.11.2-alpha.55bbfd.0

3 years ago

0.9.1-alpha.62fe34.0

3 years ago

0.11.3-alpha.0e043b.0

3 years ago

0.11.3-alpha.205a30.0

3 years ago

0.10.1

3 years ago

0.9.1-alpha.55d35b.0

3 years ago

0.11.2-alpha.eece80.0

3 years ago

0.11.2-alpha.4bbb27.0

3 years ago

0.10.0

3 years ago

0.9.1-alpha.b003f3.0

3 years ago

0.11.3-alpha.53a6e2.0

3 years ago

0.9.1-alpha.ff36f8.0

3 years ago

0.10.1-alpha.99226f.0

3 years ago

0.9.1-alpha.bc9a0d.0

3 years ago

0.11.3-alpha.bc6e93.0

3 years ago

0.11.3-alpha.df0012.0

3 years ago

0.9.1-alpha.0f51a9.0

3 years ago

0.9.1-alpha.c3534c.0

3 years ago

0.11.3-alpha.e9537c.0

3 years ago

0.11.3-alpha.15d553.0

3 years ago

0.11.3-alpha.c12cc9.0

3 years ago

0.11.3-alpha.e10248.0

3 years ago

0.11.3-alpha.60fa78.0

3 years ago

0.9.1-alpha.1f23fd.0

3 years ago

0.11.3-alpha.42827.0

3 years ago

0.11.2-alpha.d8c191.0

3 years ago

0.9.1-alpha.2fd74c.0

3 years ago

0.9.1-alpha.29cae4.0

3 years ago

0.9.1-alpha.a05191.0

3 years ago

0.10.2-alpha.eeea1b.0

3 years ago

0.11.3-alpha.cdff67.0

3 years ago

0.11.3-alpha.f087cd.0

3 years ago

0.9.1-alpha.81384c.0

3 years ago

0.9.1-alpha.f982c1.0

3 years ago

0.9.1-alpha.88358c.0

3 years ago

0.11.3-alpha.20e976.0

3 years ago

0.11.3-alpha.2519d8.0

3 years ago

0.11.3-alpha.e977a3.0

3 years ago

0.11.3-alpha.6dc648.0

3 years ago

0.9.1-alpha.178d15.0

3 years ago

0.11.3-alpha.a3c1a0.0

3 years ago

0.9.1-alpha.b5fe5a.0

3 years ago

0.11.2-alpha.7324a7.0

3 years ago

0.10.1-alpha.658721.0

3 years ago

0.9.1-alpha.7e882c.0

3 years ago

0.11.3-alpha.bcb3fb.0

3 years ago

0.11.3-alpha.e0566f.0

3 years ago

0.11.3-alpha.edd35e.0

3 years ago

0.11.3-alpha.0a1301.0

3 years ago

0.11.3-alpha.3e80b8.0

3 years ago

0.11.1-alpha.51a272.0

3 years ago

0.11.3-alpha.df6f8d.0

3 years ago

0.11.3-alpha.5d5070.0

3 years ago

0.9.1-alpha.736c05.0

3 years ago

0.9.1-alpha.4b188c.0

3 years ago

0.11.3-alpha.dc7eac.0

3 years ago

0.11.3-alpha.502a81.0

3 years ago

0.11.3-alpha.e70728.0

3 years ago

0.11.0

3 years ago

0.11.1

3 years ago

0.10.1-alpha.7a0737.0

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

0.10.2-alpha.a2a505.0

3 years ago

0.11.3-alpha.7b9161.0

3 years ago

0.11.2-alpha.7e5194.0

3 years ago

0.11.3-alpha.355a86.0

3 years ago

0.11.3-alpha.fb0deb.0

3 years ago

0.11.3-alpha.042f66.0

3 years ago

0.10.1-alpha.81b6f1.0

3 years ago

0.9.1-alpha.7e78a5.0

3 years ago

0.11.2-alpha.285b71.0

3 years ago

0.9.1-alpha.8a618d.0

3 years ago

0.12.0

3 years ago

0.11.3-alpha.97f3d1.0

3 years ago

0.10.1-alpha.3dde9d.0

3 years ago

0.11.3-alpha.5ee894.0

3 years ago

0.9.1-alpha.541098.0

3 years ago

0.9.1-alpha.e14215.0

3 years ago

0.9.1-alpha.7e8217.0

3 years ago

0.11.3-alpha.0c95cb.0

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago