New Transpiler (Limited AST)

docs/HOW_TO_CREATE_LIBRARY.md

@@ -0,0 +1,95 @@
+# How to create Library
+
+Library authors can use kaze-style to create pre-generated CSS in JS.
+
+In kaze-style, there are two ways to create a Library.
+
+## 1. Static assets
+
+type reference [style](./1.STYLE.md) | [globalStyle](./2.GLOBAL_STYLE.md)
+
+```ts
+// Example
+// @kaze-style/themes theme & globalTheme uses this method.
+
+import { style, globalStyle } from '@kaze-style/core';
+import { theme, globalTheme } from '@kaze-style/themes';
+
+globalStyle(globalTheme.reset());
+
+export const classes = style({
+  container: {
+    ...theme.animation('spin'),
+  },
+});
+```
+
+### how to create
+
+```ts
+// Example
+export const animation = {
+  spin: {
+    animationDuration: '1s',
+    animationIterationCount: 'infinite',
+    animationTimingFunction: 'linear',
+    animationName: {
+      from: {
+        transform: 'rotate(0deg)',
+      },
+      to: {
+        transform: 'rotate(360deg)',
+      },
+    },
+  },
+} as const;
+```
+
+## 2. Function API
+
+This one can do more than static assets, but is a bit more complicated.
+
+```ts
+// Example
+// @kaze-style/core style & globalStyle uses this method.
+
+import { cssVar } from 'your-lib';
+
+export const vars = cssVar({
+  darkColor: 'black',
+  lightColor: 'white',
+});
+```
+
+### how to create
+
+```ts
+// Example
+// @kaze-style/core style api
+import { isBuildTime } from './isBuildTime';
+import { resolveStyle } from './resolveStyle';
+import { setCssRules } from './setCssRules';
+import type { BuildArg, Classes } from './types/common';
+import type { KazeStyle } from './types/style';
+import { classesSerialize } from './utils/classesSerialize';
+
+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;
+}
+```

packages/babel-plugin/src/astNode.ts

@@ -0,0 +1,47 @@
+import type { types as t } from '@babel/core';
+import type { AstNode } from '@kaze-style/core';
+
+export const nodeToExpr = (node: AstNode): t.Expression => {
+  if (node.type === 'String') {
+    return { type: 'StringLiteral', value: node.value };
+  } else if (node.type === 'Number') {
+    return { type: 'NumericLiteral', value: node.value };
+  } else if (node.type === 'Boolean') {
+    return { type: 'BooleanLiteral', value: node.value };
+  } else if (node.type === 'Null') {
+    return { type: 'NullLiteral' };
+  } else if (node.type === 'Identifier') {
+    return {
+      type: 'Identifier',
+      name: node.name,
+    };
+  } else if (node.type === 'Call') {
+    return {
+      type: 'CallExpression',
+      callee: {
+        type: 'Identifier',
+        name: node.name,
+      },
+      arguments: node.arguments.map((value) => nodeToExpr(value)),
+    };
+  } else if (node.type === 'Array') {
+    return {
+      type: 'ArrayExpression',
+      elements: node.elements.map((value) => nodeToExpr(value)),
+    };
+  } else {
+    return {
+      type: 'ObjectExpression',
+      properties: node.properties.map(({ key, value }) => ({
+        type: 'ObjectProperty',
+        key: {
+          type: 'StringLiteral',
+          value: key,
+        },
+        value: nodeToExpr(value),
+        computed: false,
+        shorthand: false,
+      })),
+    };
+  }
+};

packages/babel-plugin/src/commonConfig.ts

@@ -0,0 +1,5 @@
+export type InputTransform = {
+  source: string;
+  from: string;
+  to: string;
+};

packages/babel-plugin/src/index.ts

@@ -2,6 +2,4 @@ export * from './preTransform';
 export * from './transform';
 export * from './preTransformPlugin';
 export * from './transformPlugin';
-export type { PreTransformOptions } from './preTransformPlugin';
-export type { TransformOptions } from './transformPlugin';
 export type { TransformOptions as BabelOptions } from '@babel/core';

packages/babel-plugin/src/preTransform.ts

@@ -2,31 +2,32 @@ import { transformAsync as babelTransform } from '@babel/core';
 import type { TransformOptions as BabelOptions } from '@babel/core';
 // @ts-expect-error type
 import typescriptSyntax from '@babel/plugin-syntax-typescript';
-import type { PreTransformOptions } from './preTransformPlugin';
 import { preTransformPlugin } from './preTransformPlugin';
 
 type Options = {
   filename: string;
-  preTransformOptions: PreTransformOptions;
-  babelOptions?: BabelOptions;
+  transform: Record<string, unknown>;
+  babel?: BabelOptions;
 };
 
 type Metadata = { isTransformed: boolean };
 type Result = [string, Metadata];
 
 export const preTransform = async (
   code: string,
-  { filename, preTransformOptions, babelOptions = {} }: Options,
+  options: Options,
 ): Promise<Result> => {
+  const babelOptions = options.babel || {};
+  const transformOptions = options.transform || {};
   const result = await babelTransform(code, {
-    filename,
+    filename: options.filename,
     caller: { name: 'kaze' },
     babelrc: false,
     configFile: false,
     compact: false,
     ...babelOptions,
     plugins: [
-      [preTransformPlugin, preTransformOptions],
+      [preTransformPlugin, transformOptions],
       [typescriptSyntax, { isTSX: true }],
       ...(babelOptions.plugins || []),
     ],