Styled components with rfs sizing

Question

How to use RFS with styled-components? It seems that rfs has a PostCSS plugin but do some one used it before.

Answer 1

Based on new updates on https://github.com/twbs/rfs/issues/209.

So RFS is a bunch of logic whose job is to output CSS, and styled-components's job is just to take CSS and do stuff with it under the hood. That means styled-components doesn't actually need to know RFS exists; all you need to do is find some way to stick RFS's output directly into styled-components's input, and you'll have them working with each other just fine. And, happily enough, the only SASS features RFS uses (rule-nesting and the & selector) happen to be understood by styled-components as well -- meaning you don't have to rearrange RFS's internals at all to do that!

We can use it is a way like this:

import styled from 'styled-components';

import rfs from 'rfs.js';

const Button = styled.a`
  background-color: lightblue;
  ${rfs('3rem', 'height')}
  ${rfs.padding('2rem')}
  ${rfs.paddingBottom('0')}
  ${rfs('1rem')} /* font-size, also rfs.fontSize('1rem') or rfs('1rem', 'font-size') */
`