Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New Transpiler (Limited AST) #123

Merged
merged 47 commits into from
Mar 23, 2023
Merged

New Transpiler (Limited AST) #123

merged 47 commits into from
Mar 23, 2023

Conversation

taishinaritomi
Copy link
Owner

@taishinaritomi taishinaritomi commented Feb 21, 2023

Note

This PR does not support single file styles.

TODO

  • core
  • swc-plugin
  • babel-plugin
  • webpack-plugin
  • vite-plugin
  • docs

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
Copy link
Owner Author

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

@taishinaritomi
Copy link
Owner Author

I frustration to Single file support....

@taishinaritomi taishinaritomi force-pushed the new-transpiler branch 5 times, most recently from d3e907e to 1f625b2 Compare February 27, 2023 07:28
@Zn4rK
Copy link

Zn4rK commented Mar 2, 2023

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

@taishinaritomi
Copy link
Owner Author

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
Copy link
Owner Author

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

@taishinaritomi taishinaritomi changed the title New Transpiler New Transpiler (Limited AST) Mar 14, 2023
@taishinaritomi taishinaritomi merged commit b7243aa into main Mar 23, 2023
@taishinaritomi taishinaritomi deleted the new-transpiler branch March 23, 2023 13:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants