[RFC] Pluggable styling API

What

I propose to establishing a support for different CSS-in-JS libraries to help developers take benefits of Atomic Layout using their favorite styling solution.

Why

• The library operates on CSS properties Object, which can be computed into string (when needed), and be compliant with about any modern CiJ solution

Implementation

To enable such support it has been decided to convert the library to a monorepo that consist of the following parts:

• core library (@atomic-layout/core, responsible for media queries calculation, areas parsing, parametric components generation without attachment to any specific styling/rendering solution)
• rendering libraries (i.e. @atomic-layout/emotion)

All rendering libraries would list @atomic-layout/core as a dependency and utilize functions and types the core library exports.

Usage

To use Atomic Layout with another styling solution (implying that such solution is supported) import the respective @atomic-layout/X package and use it with the same API described in the documentation:

import React from 'react'
import { Composition } from '@atomic-layout/emotion'

const MyComponent = () => (
  <Composition templateCols="250px 1fr">
    <span>Emotion support</span>
    <span>Example</span>
  </Composition>
)

[kettanaito]

@bitttttten thanks for the feedback. The first step to support emotion is coming to an end, I’m yet to verify a few nuances and about to merge. The second step would be to create and publish the actual @atomic-layout/emotion package.

[bitttttten]

Ahh you pulled it off! Congrats ✨