Usage with styled-components

[timsuchanek]

Thanks for building this awesome library! The API is really simple and awesome.

Sometimes, tachyons are too limited. Do you see a way to integrate this with styled-components? Maybe something like

import styledComponent from 'styled-components'
import {tachyonify} from 'tachyons-components'

const styled = tachyonify(styledComponent)

const Box = styled.div`
  br-2 bg-blue white
  margin-left: 27px;
`

This wrapping could be something tachyons-components could do under the hood.

[YoungElPaso]

Just ran into this as well. In other words we're looking for compatibility between tachyons-components and styled-components. This sounds hard! Would be amazing though.

Wonder what happens if we just try wrapping a tachyons-components component in a styled-component... turns out it works great!

Here's what I did:

// Default import for tachyons-components.
import styled from 'tachyons-components'

// Aliasing styled-components to 'styling'.
import styling from 'styled-components'

// Then created a fairly standard tachyons-components component.
const MainContainer = styled('div')`
  ph3
`
// Then wrap it with SC 
const WrapMainContainer = styling(MainContainer)`
  color: blue;
  strong {
	  color: red
  }`

This seems to work fine. I get a Tachyons styled padded container component, that also has nested CSS rules.

Maybe there's some downside I'm missing, but so far so good.

[three60five]

Just in case you don't know, you can use tachyons with styled-components out of the box already like this:

import 'tachyons/css/tachyons.min.css';
import styled from 'styled-components';

const Box = styled.div.attrs({
  className: 'flex items-center',
})`
  color: #999999;
`;

[linonetwo]

Just found this, I just wrote https://github.com/linonetwo/styled-tachyons yesterday, but still found it verbose:

import styled from 'styled-components';
import is from 'styled-is';
import ty from 'styled-tachyons';

const Article = styled.article`
  ${ty`
    ${is('black')`
      bg-black
    `};
    ph2
    ${({ fine }) => fine && 'ph3_m'}
  `};
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
`;

I still have to type lots of $ { and `.

I think we can do what @timsuchanek wants, only if tachyons-components does some syntax parsing. Better if styled-components supports a plugin system that can insert some intermediate parsing steps.

[linonetwo]

I have an idea: what if we tokenlize all input to tachyons-components, and expand those string that is a key in tachyons-js (https://github.com/jongold/tachyons-js/blob/master/index.js is a JSON), and leave all normal css untouched. So we can write:

import styled from 'tachyons-components'

const Box = styled.div`
  br-2 bg-blue white
  margin-left: 27px;
`