Hello, with a simple palette:

export default {
    palette: {
        primary: "#6ab04c",
        primaryText: "#fff",
    }
}

If I set the palette prop to a component, as your doc mentioned, I can use background: ${palette()}; to get the palette color. But how can I get the text color? without doing:

background: ${props => props.theme.palette[`${props.palette}Text`]};

The following does not work of course:
background: ${palette(prop(`${props => props.palette)Text`};

Thank you very much

Trying to make an Icon component a little more modular by allowing a prop for palette level to be passed. Here is the original:

  color: ${ifProp('palette', palette({ grayscale: 0 }, 3), 'currentcolor')};

and here is what I am trying to change it to:

  color: ${ifProp('palette', palette({ grayscale: 0 }, **prop('paletteLevel')**), 'currentcolor')};

however this doesn't work for me. Should the function prop('paletteLevel') not evaluate to the prop I pass in (2 in this case)?

I am trying to use switchProp but for some reason values are empty. http://jmp.sh/mEP6Wtm

PopupButton.defaultProps = {
  titleAlign: 'left',
}

const Container = styled.View`
  flex: 1;
`

const Button = styled.TouchableHighlight`
  flex:1;
  justify-content:center;
  align-items: ${switchProp('titleAlign', {
    center: 'center',
    left: 'flex-start',
  })};
  padding-top: ${palette.SXL};
  padding-bottom: ${palette.SXL};

`

Any idea where the problem might be?

In this example:

const Button = styled.button`
  color: ${prop('theme.colors.white', '#fff')};
  font-size: ${ifProp({ size: 'large' }, prop('theme.sizes.lg', '20px'), prop('theme.sizes.md', '14px'))};
  background-color: ${prop('tgeme.colors.black', '#000')};
  
  ${ifProp('disabled', css`
    background-color: ${prop('theme.colors.gray', '#999')};
    pointer-events: none;
  `)}
`

we have ${ifProp('disabled', css but css is neither defined nor needed.

So it should be like that:

const Button = styled.button`
  color: ${prop('theme.colors.white', '#fff')};
  font-size: ${ifProp({ size: 'large' }, prop('theme.sizes.lg', '20px'), prop('theme.sizes.md', '14px'))};
  background-color: ${prop('tgeme.colors.black', '#000')};
  
  ${ifProp('disabled', `
    background-color: ${prop('theme.colors.gray', '#999')};
    pointer-events: none;
  `)}
`

Is there a plan for Typescript support?

I ended up finding a solution to my problem while writing this issue, but I believe it's something that styled-tools should handle by default. I'm working with the sample below which a reakit theme, and the issue is in contrastText. What ends up happening is that bg resolves to a prop-getter function instead of a string. The reason being that bgNeedle is a prop-getter that resolves to a prop-getter which is not supported by withProp. What I ended up doing is writing a custom implementation of withProp (below the example) that recursively resolves prop-getter functions. It would be useful if this was either the default behavior of withProp or was exposed as a separate function.

// utils.ts

import { range } from 'lodash-es';
import { getLuminance, lighten } from 'polished';
import { Needle, palette as p, withProp } from 'styled-tools';

export const contrastText = (bgNeedle: Needle<any>) =>
  withProp(
    [bgNeedle, p('black'), p('white')] as any,
    (bg: string, black: string, white: string) => {
      // bg ends up being a prop getter function here instead of a string.
      return getLuminance(bg) > 0.179 ? black : white;
    },
  );

export const contrastPalette = (palette: string, tone?: number) =>
  contrastText(p(palette, tone));

export const lightenPalette = (
  amount: number,
  palette: string,
  tone?: number,
) =>
  withProp([p(palette, tone)] as any, (color: string) =>
    lighten(amount, color),
  );

export const tonePalette = (palette: string) => [
  p(palette),
  ...range(0.1, 0.5, 0.1).map(i => lightenPalette(i, palette)),
];

export const tonePaletteText = (palette: string) =>
  range(5).map(i => contrastPalette(palette, i));

export const tonePaletteWithText = (name: string, palette: string) => ({
  [name]: tonePalette(palette),
  [`${name}Text`]: tonePaletteText(name)
});

// index.ts

import { tonePaletteWithText } from './utils';

export const palette = {
  white: '#fff',
  black: '#000',

  astronautBlue: '#003a5d',

  ...tonePaletteWithText('primary', 'astronautBlue'),
};

Solution

// simple deepWithProp

const deepWithProp = <Props extends object, T = undefined>(
  needle: Needle<Props> | Needle<Props>[],
  fn: (...args: any[]) => T
) => (props = {}): T => {
  if (Array.isArray(needle)) {
    const needles = needle.map(arg => deepWithProp(arg, x => x)(props));
    return fn(...needles);
  }
  if (typeof needle === "function") {
    return fn(deepWithProp(needle(props as Props), x => x)(props));
  }
  return fn(prop(needle, needle)(props));
};

Bug In Documentation

As of now it lists that the second argument for palette is always any, but when there are three arguments the type interfaces enforces the second argument to be of type number. This can be better labeled in the documentation/readme

Feature Request

It seems a bit weird to switch on the expected types, where the second value can be either the index or the default value. A possible extension of this could be to actually allow for string | number for both the first and second arguments and to declare the default as the prop within the component.

palette(arg1) => props.theme.palette[arg1] || defaultColor
palette(arg1, arg2) => props.theme.palette[arg1][arg2] || defaultColor
palette(arg1, arg2, arg3) => props.theme.palette[arg1]?.[arg2] || arg3

<ThemeProvider>
  <SomeElement defaultColor="#000000" />
</ThemeProvider>

What this allows is for each argument to be either a string or number, and to access either an array or an object in the same way. This gives for some nicer formatting of palette when there are several different color organization options, in addition to extending the model to support more options.

const theme = {
  palette: {
    solids: {
      black: '#000000',
      white: '#FFFFFF',
    },
    gradients: {
      blue: 'linear-gradient(135deg, #75F094 0%, #75B2F0 100%)',
    }
  }
}

If going with the latter solution, the documentation issue is moot and can be ignored.

Hey there!

Thanks for a great package full of lovely tools!

I'm running into an issue I don't quite understand:

background: ${darken(0.1, theme("green", "red")};

causes a TypeScript error (in my TS codebase):

[ts] Argument of type '<Props, Theme extends { [key: string]: any; }>(props: Props & { theme: Theme; }) => string | Theme[keyof Theme]' is not assignable to parameter of type 'string'.

The best I can figure out is that darkens types (darken(amount: string | number, color: string): string) expect a string, but theme isn't necessarily giving a string (it could be giving Theme[keyof Theme]). Would you have any understanding of how to solve this problem?

Thanks!

Example:

${ifProp('toggle' and 'pressed', cssbackground: red;)

If the component has toggle and pressed, he should have background red.

I'm trying to pass a palette color as a prop, and everything is working fine in my program, but I'm getting this error:

Warning: Invalid value for prop color on tag. Either remove it from the element, or pass a string or number value to keep it in the DOM

here is the styled component:

const ColoredText = styled.span`
  font-family: ${font('cursive')};
  color: ${props => props.color};
`

and here is where I am rendering it:

<ColoredText color={palette('secondary', 2)}>way</ColoredText>

is this error something to be concerned about, or can I safely ignore it? The text is rendering the color as I'd expect

First off, thanks for the great library! Really cleans up a lot of the boilerplate in our styled components 👍

I've currently got the following code:

const Container = styled.div`
  height: ${prop('height', 'auto')};
`

then elsewhere something is using this:

const Component = ({ height }) => (
 <Container height={height} />
)

Component.defaultProps = {
  height: null
}

Passing something like 400px into the height prop works fine, but not passing anything gives me this when it's rendered:

Is this not working properly or am I missing something obvious? Should it not be rendering height: auto;?

Thanks again!

Version 7.2.1 of babel-eslint just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As babel-eslint is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Suggested on Twitter: https://twitter.com/djungst/status/883903002787987457

Something like this?

import styled, { css } from 'styled-components'
import { prop, switchProp } from 'styled-tools'

const Button = styled.button`
  font-size: ${switchProp('size', {
    small: prop('theme.sizes.sm', '12px'),
    large: prop('theme.sizes.lg', '20px'),
    default: prop('theme.sizes.md', '16px'),
  })};
  ${switchProp('theme.kind', {
    light: css`
      color: ...
    `,
    dark: css`
      ...
    `,
    default: ...
  })}
`

<Button size="large" theme={{ kind: 'light' }} />

It's not consistent between prop and ifProp for example. (ifProp should be kept though).

Also, we need to start supporting multiple props in withProp

Issue

Bundling styled-tools with Rollup produces the following error:

[!] Error: 'prop' is not exported by node_modules/styled-tools/index.js
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module

As per https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module and https://github.com/rollup/rollup-plugin-commonjs#custom-named-exports this can be solved by using custom named exports.

However, the better solution would be to create a package that exports not only a CommonJS but also an ES Modules version. This would avoid the extra Rollup config and have the added benefit of tree shaking

Test case

In order to reproduce the issue you need a new project with these files:

• package.json
• rollup.config.js
• index.js

From the root of the project run:

npm install && npm run build

package.json

{
  "scripts": {
    "build": "rollup -c"
  },
  "devDependencies": {
    "rollup": "^0.55.0",
    "rollup-plugin-node-resolve": "^3.0.2"
  },
  "dependencies": {
    "styled-tools": "^0.2.3"
  }
}

rollup.config.js

import resolve from 'rollup-plugin-node-resolve';

export default {
  input: 'index.js',
  output: {
    format: 'es',
  },
  plugins: [resolve()],
};

index.js

import { prop } from 'styled-tools';

prop('color', 'red');

I'm using styled-tools within my project (using your ARc boilerplate), and noticed that in your .babelrc you are just targeting the last 2 browsers. When I try to build my app, it ignores /node_modules/ so it won't try and transpile the source code of this package. Because this package is not transpiling to ES5, UglifyJS is throwing an error because it cannot read the source code and the build will fail. Can you update this package to transpile to ES5? Will also have the same issue with styled-theme.

I think it might be nice to have a default case option for the switchProp() function. Having a generic else case without having to specifically write out every other possible prop value would be nice. Plus, it makes it closer to mirroring the functionality of an actual switch statement! 😉

I think adding a third optional argument (identical to how prop() 's defaultCase argument works) would be fine, as it wouldn't break backwards compatibility with current usage of the function.

I think it would be nice to add comments to the typescript definitions, using the same documentation as is in this repository. I already did it on local but I don't have the permissions for PR's of course.

This is for the usage with VScode, following the TS doc format:

Version 2.4.0 of eslint-plugin-import just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As eslint-plugin-import is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

I'm trying to use prop within ifProp, but getting an error that:

[ts]
Argument of type '<Props>(props?: Props) => Props[keyof Props]' is not assignable to parameter of type 'Interpolation<ThemeProps<ThemeInterface>>'.
  Type '<Props>(props?: Props) => Props[keyof Props]' is not assignable to type 'InterpolationFunction<ThemeProps<ThemeInterface>>'.
    Type 'ThemeInterface' is not assignable to type 'Interpolation<ThemeProps<ThemeInterface>>'.
      Type 'ThemeInterface' is not assignable to type 'ReadonlyArray<string | number | false | Styles | Keyframes | StyledComponentClass<any, any, any> | InterpolationFunction<ThemeProps<ThemeInterface>> | ReadonlyArray<FlattenInterpolation<ThemeProps<ThemeInterface>>>>'.
        Property 'length' is missing in type 'ThemeInterface'. [2345]

interface SpaceProps {
  around?: string;
  bottom?: string;
  left?: string;
  right?: string;
  top?: string;
}

export const Space = styled.div<SpaceProps>`
  ${ifProp(
    'around',
    css`
      margin: ${prop('around')}em;
    `
  )};
  ${ifProp(
    'top',
    css`
      margin-top: ${prop('top')}em;
    `
  )};
  ${ifProp(
    'right',
    css`
      margin-right: ${prop('right')}em;
    `
  )};
  ${ifProp(
    'bottom',
    css`
      margin-bottom: ${prop('bottom')}em;
    `
  )};
  ${ifProp(
    'left',
    css`
      margin-left: ${prop('left')}em;
    `
  )};
`;

I'm assuming I'm doing something wrong, but can't quite pinpoint what the problem may be.

Hello!

I use typescript in my project and it would be perfect to have type definitions for your library.
http://definitelytyped.org/

Thanks.

Hi ! I just want to share this for other people who will run into a similar issue.

We use code similar to this (simplified):

const StyledElement = styled.div`
  cursor: ${ifProp('onClick', 'pointer', 'inherit')}
`

This worked fine with 1.6.0, but in 1.7.0 we had some weird issue: our router was navigating to the wrong page, seemingly with no reason. Turns out this is because styled-tools will now call the our onClick prop (or anything that looks like a function) i n relation to this new feature: #55
So in our case, it was calling a route change with improper parameters (something like /user/undefined), simply by rendering a component.

We fixed it by reverting to the standard styled-components callback:

const StyledElement = styled.div`
  cursor: ${({ onClick }) => onClick ? 'pointer' : 'inherit'}
`

We could also have ensured the prop we use is a boolean (perhaps using an additional prop).

This may impact a few places in our code, so we're thinking of making our own simple version of ifProp that respects the legacy behaviour, so that changing our existing code is easier.