iammerrick

CSS Component

.MyComponent {
  @component children;
  background-color: #000;
  
  .icon {
    background: #FF0000;
    @component icon;
 }

iammerrick

CSS Component

.MyComponent {
  component: children;
  background-color: #000;
  
  .icon {
    background: #FF0000;
    component: icon;
 }

iammerrick

This is a very slow, very ghetto proof of concept. If you author your CSS using BEM you can make certain assumptions about the use of your classes and their application which allows you to confidentally delete CSS. This little script simply searches your code bases for all CSS classes and if a CSS class isn't use will inform you.

Run node unused-classnames.js in the root of your project. It will grab all your css files, parse for css classes, remove phseudo selectors and search your code for uses using Ag.

Running this in my project I get the following output:

Unused selector .icon-clock
Unused selector .icon-chevron-up
Unused selector .icon-chevron-down
Unused selector .icon-link

iammerrick

import { FluidRatio } from './FluidRatio';

<FluidRatio>
{(width, height) => (
  <div style={{ width, height }}>This will be a ratio of 3/4 with a width of whatever container it is rendered into.</div>
)}
</FluidRatio>

iammerrick

<Ratio width={Ratio.OPTIONS.FLUID} x={3} y={4}>
  {(width, height) => (
    <Chart id={this.props.id} width={width} height={height} />
  )}
</Ratio>

iammerrick

class SharedComponent extends React.Component { 
  render() {
    return <div>Shared Component</div>;
  }
}

const Compositor = (Component) => (
  class extends React.Component {
    constructor() {

iammerrick

class Lock extends React.Component {
  componentDidMount() {
    this.props.load();
  }
  render() {
    if (this.props.isLocked) return this.props.lockedView;
    return React.Children.only(this.props.children);
  }
}

iammerrick

import React from 'react';
import { connect } from 'react-redux';
import { selectNavigation, selectState } from 'state/home/navigation/navigationSelectors';
import { getNavigation } from 'state/home/navigation/navigationActions';

const ConnectHomeNavigation = (Component) => {
  return connect((state) => ({
    navigation: selectNavigation(state),
    state: selectState(state)
  }), {

iammerrick

export const load = (id) => {

  load.buffer = load.buffer || [];
  load.buffer.push(id);

  return (dispatch, getState) => {
    if (load.flush) clearTimeout(load.flush);
    load.flush = setTimeout(() => {
    }, 0);
  };

iammerrick

build:
  image: node:5
  commands: 
    - npm install
    - BASE_URL=http://localhost npm test
  compose:
    redirect:
      image: nginx
      ports:
        - "80:80"