taishinaritomi / kaze-style

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

New Transpiler (Limited AST) #123

Closed taishinaritomi closed 1 year ago

taishinaritomi commented 1 year ago

Note

This PR does not support single file styles.

TODO

Change

Limited AST for Pre Extraction

{
  "type": "Object",
  "properties": [
    {
      "key": "color",
      "value": {
        "type": "String",
        "value": "red"
      },
    },
  ],
}

This feature makes it easy to create a CSS in JS library using kaze style.

Abolition of __pre***

Merge __pre*** into style & globalStyle

before

// style
export const style = <K extends string>(styles: KazeStyle<K>): Classes<K> => {
  const [cssRules, classes] = resolveStyle(styles);
  if (typeof document !== 'undefined') setCssRules(cssRules);
  return classes;
};
// __preStyle
export const __preStyle = <K extends string>(
  styles: KazeStyle<K>,
  forBuild: ForBuild<K>,
  filename: string,
  index: number,
): Classes<K> => {
  const [cssRules, classes, staticClasses] = resolveStyle(styles);
  if (forBuild[0] === filename) {
    forBuild[1].push(...cssRules);
    forBuild[2].push([staticClasses, index]);
  }

  return classes;
};

after

// style
export function style<K extends string>(styles: KazeStyle<K>): Classes<K>;
export function style<K extends string>(
  styles: KazeStyle<K>,
  buildArg: BuildArg,
  index: number,
): Classes<K>;
export function style<K extends string>(
  styles: KazeStyle<K>,
  buildArg?: BuildArg,
  index?: number,
): Classes<K> {
  const [cssRules, classes, staticClasses] = resolveStyle(styles);
  if (isBuildTime(buildArg) && typeof index !== 'undefined') {
    const classesNode = classesSerialize(staticClasses);
    buildArg.injector.cssRules.push(...cssRules);
    buildArg.injector.args.push({ value: [classesNode], index });
  } else if (typeof document !== 'undefined') setCssRules(cssRules);
  return classes;
}

121

taishinaritomi commented 1 year ago

TreeShake does not work at Webpack Child Compiler for NodeTarget, cause unknown.

taishinaritomi commented 1 year ago

I frustration to Single file support....

taishinaritomi commented 1 year ago

github actions crash swc-plugin (https://github.com/swc-project/swc/issues/6807)

Zn4rK commented 1 year ago

I will try to take a look this weekend 👍 Great work so far!

taishinaritomi commented 1 year ago

As for the Limited AST, it is almost complete. However, I am struggling a lot with Single file styles.

I would like to support multiple UI libraries, but single file syles are very dependent on the behavior of the UI library.

taishinaritomi commented 1 year ago

This PR does not seem to be able to support single file styles.