PostCSS and CSSNext

Custom selectors and properties

by booktu8

PostCSS (Stage 0+)

@custom-selector :--enter :hover, :focus;

:root {
  --button-theme: {
    background: #0084ff;
    border: none;
    border-radius: 5px;
    padding: 8px 14px;
    font-size: 15px;
    color: #fff;
  }
  --message-theme: {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    font-size: 20px;
    text-align: center;
    transition: all 0.2s;
    margin: 0 auto;
    width: 300px;
  }
  --message-theme-enter: {
    background: #0084ff;
    color: #fff;
    margin-top: 10px;
    width: 300px;
  }
  --button-theme-enter: {
    background: #fff;
    color: #000;
  }
}

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  @apply --message-theme;
}

button {
  @apply --button-theme;
}

#banner-message:--enter {
  @apply --message-theme-enter;
}

#banner-message:--enter button {
  @apply --button-theme-enter;
}

JavaScript

fetch("https://jsfiddle.net/booktu8/6oswj0uf/").then((response) => {
  const reader = response.body.getReader();
  console.log(reader)
  const stream = new ReadableStream({
    start(controller) {
      // 下面的函数处理每个数据块
      function push() {
        // "done"是一个布尔型，"value"是一个Unit8Array
        reader.read().then(({ done, value }) => {
          // 判断是否还有可读的数据？
          if (done) {
            // 告诉浏览器已经结束数据发送。
            controller.close();
            return;
          }

          // 取得数据并将它通过controller发送给浏览器。
          controller.enqueue(value);
          push();
        });
      };
      
      push();
    }
  });

  return new Response(stream, { headers: { "Content-Type": "text/html" } });
});