taishinaritomi / kaze-style

Kaze [風] zero-runtime CSS in JS
https://npmjs.com/package/@kaze-style/core
MIT License
25 stars 1 forks source link

update version v0.16.0 #101

Closed taishinaritomi closed 1 year ago

taishinaritomi commented 1 year ago

Migration

Change @kaze-style/react -> @kaze-style/core

Deprecated @kaze-style/react to support multiple libraries. You can use @kaze-style/core.

- yarn add @kaze-style/react or npm i @kaze-style/react
+ yarn add @kaze-style/core or npm i @kaze-style/core
- import { createStyle, crateGlobalStyle, mergeStyle } from '@kaze-style/react';
+ import { createStyle, crateGlobalStyle, mergeStyle } from '@kaze-style/core';
// *.style.ts
// import { createStyle } from '@kaze-style/react';
import { createStyle } from '@kaze-style/core';

export const classes = createStyle({
  base: {
    display: 'flex',
    gap: '5px',
  },
});

Generate Atomic CSS

Atomic CSS is now generated by adding $ prefix. For styles that do not merge, not atomic has higher performance.

import { createStyle, mergeStyle } from '@kaze-style/core';

export const classes = createStyle({
  // Not Atomic CSS
  base: {
    display: 'flex',
    gap: '5px',
  },
  //  Atomic CSS (add $ prefix)
  $base: {
    display: 'flex',
    gap: '5px',
  },
  $baseAction: {
    display: 'block',
  },
});

// Not Work
mergeStyle(classes.base, classes.$baseAction)

// Work
mergeStyle(classes.$base, classes.$baseAction)

PR

Fix support RSC #96 Next solution #98 Fix docs #99 Fix core type #100