feat(components): add twin.macro for styling

[anniehu4]

Summary:

Builds on #224

Adds twin.macro and updates the playground example. The tw styles are copied from button.scss so they should look the same

Test Plan:

NOTE: both Jest tests & storybook are currently broken 😬

Jest error:

FAIL src/playground/button.spec.tsx
● Test suite failed to run
     TypeError: /Users/ahu/Documents/lp-design-system/packages/components/src/playground/button.tsx: Cannot destructure property 'end' of 'ex.node.loc' as it is undefined.
       at end (node_modules/@linaria/babel-preset/src/evaluators/templateProcessor.ts:123:17)
           at Array.forEach (<anonymous>)
       at forEach (node_modules/@linaria/babel-preset/src/evaluators/templateProcessor.ts:92:18)
       at process (node_modules/@linaria/babel-preset/src/extract.ts:201:41)
           at Array.forEach (<anonymous>)
       at PluginPass.forEach (node_modules/@linaria/babel-preset/src/extract.ts:201:23)
       at newFn (node_modules/@babel/core/node_modules/@babel/traverse/lib/visitors.js:175:21)
       at NodePath._call (node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:55:20)
       at NodePath.call (node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:42:17)
       at NodePath.visit (node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:92:31)

Storybook: same errors as #224

Once that's fixed, will confirm that:

• Percy doesn't show visual changes on the buttons
• npm start works
• Jest tests pass

[anniehu4]

the stories don't compile right now :/ still looking into it

[anniehu4]

I saw warnings that vue, autoprefixer, and postcss were peer dependencies

[dcwither]

we definitely shouldn't need vue - I'm guessing this is a weird peer dependency that is meant to define what versions it's compatible with. We should try to exclude it even if there are warnings.

[anniehu4]

These are the Storybook errors I'm seeing:

@chanzuckerberg/czedi-kit-components: ERROR in ./node_modules/resolve/lib/async.js
@chanzuckerberg/czedi-kit-components: Module not found: Error: Can't resolve 'fs' in '/Users/ahu/Documents/lp-design-system/packages/components/node_modules/resolve/lib'

This thread shows the same errors and warnings: ben-rogerson/twin.macro#125, and one of the answers says

Those errors pop up when twin is run through the typescript compiler rather than the babel compiler.
You'll need to replace the typescript loader with babel-loader.

It's fixed in [email protected], but I'm not sure what the version we're on (5.3.18) does

[anniehu4]

there are a lot of ways to use Linaria's API -- this is based on their Theming example but isn't exactly the same. I didn't have a strong feel for what's best

[github-actions]

size-limit report

Path	Size
packages/components/dist/button/button.js	0 B (-100%)
packages/styles/dist/all.css	313 B (0%)
packages/components/dist/playground/button.js	997 B (+100% 🔺)