feat: add support for ESM (#31)

.changeset/slimy-queens-develop.md

@@ -0,0 +1,6 @@
+---
+"@excss/compiler": patch
+"excss": patch
+---
+
+feat: add support for ESM

.eslintrc.json

@@ -60,6 +60,8 @@
       "files": [
         "./**/vite.config.ts",
         "./**/vitest.config.ts",
+        "./**/next.config.mjs",
+        "./**/webpack.config.mjs",
         "./packages/excss/src/compiler.ts",
         "./packages/excss/src/plugins/webpack/{virtualLoader,loader}.ts",
         "./playground/next/src/app/**/{page,layout,loading,error,template,head}.tsx",

packages/compiler/tests/compiler.spec.ts

@@ -1,6 +1,6 @@
 import { format } from "prettier";
 import { describe, it, expect } from "vitest";
-import { transform } from "../binding/wasm-node/excss_compiler";
+import { transform } from "../binding/wasm-node/excss_compiler.js";
 
 describe("transform", () => {
   it("basic", async () => {

packages/excss/scripts/build.ts

@@ -1,6 +1,4 @@
 import childProcess from "node:child_process";
-import fs from "node:fs";
-import path from "node:path";
 import * as esBuild from "esbuild";
 
 function cmd(command: string) {
@@ -59,27 +57,9 @@ async function js() {
   await Promise.all(buildQueue);
 }
 
-async function dts() {
-  const typesOutDir = path.join("dist/_types");
-  fs.mkdirSync(typesOutDir, { recursive: true });
-  fs.writeFileSync(
-    path.join(typesOutDir, "package.json"),
-    JSON.stringify({ type: "commonjs" }),
-  );
-
-  await cmd(
-    [
-      "tsc",
-      "--declaration --emitDeclarationOnly",
-      `--outDir ${typesOutDir}`,
-      "-p tsconfig.build.json",
-    ].join(" "),
-  );
-}
-
 async function main() {
   await js();
-  await dts();
+  await cmd("tsc -p tsconfig.build.json");
 }
 
 await main();

packages/excss/src/ex.spec.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect, expectTypeOf } from "vitest";
-import type { Ex } from "./ex";
-import { ex } from "./ex";
+import type { Ex } from "./ex.ts";
+import { ex } from "./ex.ts";
 
 describe("ex", () => {
   it("basic", () => {

packages/excss/src/ex.ts

@@ -3,7 +3,7 @@ import type {
   ToLiteral,
   Required as _Required,
   Optional as _Optional,
-} from "./utils/types";
+} from "./utils/types.ts";
 
 export { ex };
 export type { Ex };

packages/excss/src/index.ts

@@ -1,4 +1,4 @@
-export { css } from "./css";
-export { FILE_ID } from "./FILE_ID";
-export { ex } from "./ex";
-export type { Ex } from "./ex";
+export { css } from "./css.ts";
+export { FILE_ID } from "./FILE_ID.ts";
+export { ex } from "./ex.ts";
+export type { Ex } from "./ex.ts";

packages/excss/src/plugins/next.ts

@@ -1,11 +1,11 @@
 import type { Variants } from "@excss/compiler";
 import type { NextConfig } from "next";
-import { lazyPostCSS } from "next/dist/build/webpack/config/blocks/css";
-import { getGlobalCssLoader } from "next/dist/build/webpack/config/blocks/css/loaders";
-import type { ConfigurationContext } from "next/dist/build/webpack/config/utils";
+import { lazyPostCSS } from "next/dist/build/webpack/config/blocks/css/index.js";
+import { getGlobalCssLoader } from "next/dist/build/webpack/config/blocks/css/loaders/index.js";
+import type { ConfigurationContext } from "next/dist/build/webpack/config/utils.js";
 import type { Configuration, RuleSetRule } from "webpack";
-import type { ExcssOption } from "./webpack/plugin";
-import { ExcssPlugin } from "./webpack/plugin";
+import type { ExcssOption } from "./webpack/plugin.ts";
+import { ExcssPlugin } from "./webpack/plugin.ts";
 
 type ExcssConfig = {
   /**

packages/excss/src/plugins/webpack/plugin.ts

@@ -1,7 +1,7 @@
 import fs from "node:fs";
 import path from "node:path";
 import type { Compiler } from "webpack";
-import type { ExcssLoaderOption } from "./loader";
+import type { ExcssLoaderOption } from "./loader.ts";
 
 export type ExcssOption = Omit<
   ExcssLoaderOption,

packages/excss/tsconfig.build.json

@@ -1,4 +1,10 @@
 {
   "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist/_types",
+    "noEmit": false,
+    "declaration": true,
+    "emitDeclarationOnly": true
+  },
   "exclude": ["src/__fixture__/**", "src/**/*.spec.*"]
 }

playground/next/next.config.js → playground/next/next.config.mjs

@@ -1,5 +1,5 @@
-const createBundleAnalyzer = require("@next/bundle-analyzer");
-const { createExcss } = require("excss/next");
+import createBundleAnalyzer from "@next/bundle-analyzer";
+import { createExcss } from "excss/next";
 
 const withBundleAnalyzer = createBundleAnalyzer({
   enabled: process.env["ANALYZE"] === "true",
@@ -18,4 +18,4 @@ const nextConfig = {
   swcMinify: true,
 };
 
-module.exports = withBundleAnalyzer(withExcss(nextConfig));
+export default withBundleAnalyzer(withExcss(nextConfig));

playground/next/tsconfig.json

@@ -1,12 +1,12 @@
 {
   "extends": "../../types/tsconfig.base.json",
   "compilerOptions": {
+    "moduleResolution": "bundler",
     "baseUrl": ".",
     "target": "ES2018",
     "lib": ["dom", "dom.iterable", "esnext"],
     "module": "esnext",
     "jsx": "preserve",
-    "moduleResolution": "node",
     "noEmit": true,
     "isolatedModules": true,
     "resolveJsonModule": true,

playground/react-vite/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "../../types/tsconfig.base.json",
   "compilerOptions": {
+    "moduleResolution": "bundler",
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "esModuleInterop": false,
     "useDefineForClassFields": true,

playground/react-webpack/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "../../types/tsconfig.base.json",
   "compilerOptions": {
-    "jsx": "preserve"
+    "moduleResolution": "bundler",
+    "noEmit": true
   }
 }

playground/react-webpack/webpack.config.cjs → playground/react-webpack/webpack.config.mjs

@@ -1,9 +1,13 @@
-const path = require("node:path");
-const { ExcssPlugin } = require("excss/webpack");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { ExcssPlugin } from "excss/webpack";
+import HtmlWebpackPlugin from "html-webpack-plugin";
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
 
-module.exports = {
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default {
   mode: "production",
   entry: path.join(__dirname, "./src/index.tsx"),
   resolve: {

playground/solid-vite/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "../../types/tsconfig.base.json",
   "compilerOptions": {
+    "moduleResolution": "bundler",
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "esModuleInterop": false,
     "useDefineForClassFields": true,

types/tsconfig.base.json

@@ -3,7 +3,9 @@
   "compilerOptions": {
     "target": "esnext",
     "module": "esnext",
-    "moduleResolution": "node",
+    "noEmit": true,
+    "moduleResolution": "nodenext",
+    "allowImportingTsExtensions": true,
     "jsx": "preserve",
     "checkJs": false
   }