Port to React

Current workaround:

It’s not the best way, but if you want to use css-doodle in React you could try the following:

/* doodle.js */

import React from 'react';
import 'css-doodle';

export default ({ rule = '' }) => (
  <css-doodle>{ rule }</css-doodle>
)

/* example.js */

import Doodle from './doodle';

<Doodle rule={`
  :doodle {
    @grid: 2 / 200px;
    grid-gap: 1px;
  }
  background: @pick(red, pink);
`}/>

Better way:

Just use it directly!

import 'css-doodle';

function App() {
  return (
    <css-doodle>{`
      :doodle {
        @grid: 2 / 200px;
        grid: 1px;
      }
      background: @pick(red, pink);
    `}</css-doodle>
  );
}

[Mizumaki]

@papan01

Does this support tsx?

I don’t know the support means, but I use <css-doodle> in Doodle.tsx, and it works.

First, you need to extend JSX.IntrinsicElements interface.

declare namespace JSX {
  interface IntrinsicElements {
    'css-doodle': {}
  }
}

And then, you can use <css-doodle>. (Unfortunately, it seems that there is no type definition yet.)

import React from 'react';
import 'css-doodle';

const Doodle: React.FunctionComponent = () => {
  // code is referenced from https://alligator.io/css/patterns-css-doodle/
  return (
    <css-doodle>
      {`
      :doodle {
        @grid: 5x8 / 100% 15rem;
      }
      :after {
        content: "@index()"
      }
      background: pink;
      margin: .5rem;
    `}
    </css-doodle>
  );
};

export default Doodle;

hmm. Really nice 🥰

[simonmarton]

I think a template string helper would be nice too, similar to styled-components. Something like this:

/* doodle.js */

import React from 'react';
import 'css-doodle';

export default ([ rule = '' ]) => () => (
  <css-doodle>{ rule }</css-doodle>
);

/* example.js */

import Doodle from './doodle';

const FancyDoodle = Doodle`
  :doodle {
    @grid: 2 / 200px;
    grid-gap: 1px;
  }
  background: @pick(red, pink);
`;

...

<FancyDoodle />