naci.js evolution (syntax)

naci.scss

// --------------------------------------------------------
// v1

$button: component(
  name("Button"),
  type("button"),
  props(
    prop(size, (default large)),
  ),
);

@include stylesheet($button) {
  @apply py-1 px-2;
  @include when(size is large) {
    @apply py-4 px-6;
  }
}

// --------------------------------------------------------
// v2

$button: definition(Button, (
  element: button,
  variants: (
    size: options(default large)
  )
));

@include styles($button) {
  @apply py-1 px-2;
  @include variants(size is large) {
    @apply py-4 px-6;
  }
}

@include export($button);

// --------------------------------------------------------
// v3

@include component(Button, (
  element: button,
  variants: (
    size: options(default large)
  )
)) {
  @apply py-1 px-2;
  @include variants(size is large) {
    @apply py-4 px-6;
  }
}

// --------------------------------------------------------
// v4 (now)

@include component(Button) {
  @include element(button);
  @include variants {
    @include new(size, default large);
  }
  
  @include stylesheet {
    @apply py-1 px-2;
    @include variant(size is large) {
      @apply py-4 px-6;
    }
  }
}