d3dc / classier-react

Use stylesheets for styles, not Javascript
ISC License
1 stars 0 forks source link

[WIP] Block proxy #5

Closed d3dc closed 6 years ago

d3dc commented 6 years ago

A solution to #2. Enables the following style where Box is omitted.

I'm not sure I like it, as it gives the appearance of a lot of magic happening.

import { Component } from 'react'
import { Comp, createBlock } from 'classier-react'

import logo from './logo.svg'

const AppContainer = createBlock(require('./App.css'))

export default class App extends Component {
  render() {
    return (
      <AppContainer hover={{ bg: 'blue' }}>
        <AppContainer.Header border={['solid', 'black']} is="header">
          <Comp as={AppContainer.Logo}>
            <img src={logo} alt="logo" />
          </Comp>
          <AppContainer.Title is="h1">Welcome to React</AppContainer.Title>
        </AppContainer.Header>
        <AppContainer.Intro is="p">
          To get started, edit <code>src/App.js</code> and save to reload.
        </AppContainer.Intro>
      </AppContainer>
    )
  }
}
d3dc commented 6 years ago

I've inadvertently gone and passed an object to createBlock here.

This is the object the proxy for unknown classes sits on top of.

You don't need a proxy when there is an object. The proxy is for the case when there is a string namespace to add. Can this just return a specialized Box or something instead of a proxy?