Fixes to use the package as ESM

babel/index.js → babel/index.cjs

@@ -1,11 +1,11 @@
 // @ts-check
 const PACKAGE_NAME = "css-variable";
-const hash = require("./hash");
+const hash = require("./hash.cjs");
 const pathRelative = require("path").relative;
 
 /** @typedef {import("@babel/core")} babel */
 
-/** 
+/**
  * The context of a babel plugin run
  * @typedef {{
  *  minifyVariables: boolean,
@@ -14,7 +14,7 @@ const pathRelative = require("path").relative;
  *  isImportedInCurrentFile: boolean,
  *  localVarNames: string[],
  *  opts: babel.PluginOptions & { displayName?: boolean }
- * } & babel.PluginPass} PluginPass 
+ * } & babel.PluginPass} PluginPass
  */
 
 /**
@@ -36,10 +36,14 @@ module.exports = function (babel) {
       return;
     }
     const callee = path.node.callee;
-    if (!("name" in callee) || !pluginPass.localVarNames.includes(callee.name)) {
+    if (
+      !("name" in callee) ||
+      !pluginPass.localVarNames.includes(callee.name)
+    ) {
       return;
     }
-    const readableName = !pluginPass.minifyVariables && dashed(getNameByUsage(path));
+    const readableName =
+      !pluginPass.minifyVariables && dashed(getNameByUsage(path));
     const readablePrefix = readableName ? `${readableName}--` : "";
     //
     // Inject the variable prefix
@@ -51,7 +55,9 @@ module.exports = function (babel) {
     const firstArg = constructorArguments[0];
     if (!firstArg || firstArg.type !== "StringLiteral") {
       constructorArguments.unshift(
-        stringLiteral(readablePrefix + getUniqueHash(pluginPass) + pluginPass.varCount++)
+        stringLiteral(
+          readablePrefix + getUniqueHash(pluginPass) + pluginPass.varCount++
+        )
       );
     }
     //
@@ -60,16 +66,17 @@ module.exports = function (babel) {
     // side effects and is save to be removed
     //
     path.addComment("leading", "@__PURE__");
-  }
+  };
 
   return {
     name: `${PACKAGE_NAME} unique variable name injector`,
     pre() {
       this.isImportedInCurrentFile = false;
       this.varCount = 0;
-      this.minifyVariables = this.opts.displayName !== undefined ?
-        !this.opts.displayName
-        : this.file.opts.envName !== "development";
+      this.minifyVariables =
+        this.opts.displayName !== undefined
+          ? !this.opts.displayName
+          : this.file.opts.envName !== "development";
       this.localVarNames = [];
     },
     visitor: {
@@ -106,7 +113,6 @@ module.exports = function (babel) {
   };
 };
 
-
 /**
  * Tries to extract the name for readable names in developments
  * e.g.:
@@ -138,9 +144,9 @@ function getNameByUsage(path) {
 function dashed(val) {
   /** handle camelCase and CONSTANT_CASE */
   return val
-  .replace(/([0-9a-z])([A-Z])/g, "$1-$2")
-  .toLowerCase()
-  .replace(/_/g, "-");
+    .replace(/([0-9a-z])([A-Z])/g, "$1-$2")
+    .toLowerCase()
+    .replace(/_/g, "-");
 }
 
 /** @type {WeakMap<babel.PluginPass, string>} */

examples/styled-components/babel.config.js

@@ -0,0 +1,11 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ["next/babel"],
+    plugins: [
+      "@babel/plugin-transform-runtime",
+      ["css-variable/babel", { async: false }],
+      ["babel-plugin-styled-components", { ssr: true }],
+    ],
+  };
+};

examples/styled-components/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

examples/styled-components/next.config.js

@@ -1,3 +1,10 @@
 module.exports = {
-  pageExtensions: ['page.tsx'],
-};
+  pageExtensions: ["page.tsx"],
+  webpack: (config, { isServer }) => {
+    config.resolve.extensionAlias = {
+      ".js": [".js", ".mjs"],
+    };
+    return config;
+  },
+  transpilePackages: ["css-variable"],
+};

examples/styled-components/package.json

@@ -8,6 +8,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@babel/runtime": "^7.22.0",
     "@types/react": "17.0.20",
     "@types/react-dom": "17.0.9",
     "@types/styled-components": "5.1.14",
@@ -18,5 +19,9 @@
     "react-dom": "^18.2.0",
     "styled-components": "^6.1.11",
     "typescript": "5.4.5"
+  },
+  "devDependencies": {
+    "@babel/plugin-transform-runtime": "^7.25.7",
+    "@types/node": "22.7.5"
   }
-}
+}

package.json

@@ -3,13 +3,15 @@
   "version": "4.0.0",
   "description": "define CSS custom properties (variables) in JS",
   "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "require": "./dist/index.js",
-      "import": "./dist/index.mjs"
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
     },
-    "./babel": "./babel/index.js",
+    "./babel": "./babel/index.cjs",
     "./swc": "./swc/target/wasm32-wasi/release/swc_plugin_css_variable.wasm"
   },
   "types": "./dist/index.d.ts",
@@ -24,8 +26,8 @@
   "scripts": {
     "prepublishOnly": "npm run build && npm run build:swc",
     "build": "npm run build:types && npm run build:commonjs && npm run build:module && npm run build:modulemin",
-    "build:commonjs": "babel --config-file=./babel.commonjs.js -o dist/index.js src/index.ts",
-    "build:module": "babel --config-file=./babel.config.js -o dist/index.mjs src/index.ts",
+    "build:commonjs": "babel --config-file=./babel.commonjs.cjs -o dist/index.js src/index.ts",
+    "build:module": "babel --config-file=./babel.config.cjs -o dist/index.mjs src/index.ts",
     "build:types": "tsc --skipLibCheck --emitDeclarationOnly --declaration --target ESNext --outDir dist src/index.ts",
     "build:modulemin": "terser ./dist/index.mjs -o ./dist/index.min.mjs -m --ecma 2017 --module --toplevel -b -c",
     "build:swc": "cargo build --manifest-path ./swc/Cargo.toml --release --target=wasm32-wasi",
@@ -58,11 +60,11 @@
   "homepage": "https://css-variable.js.org/",
   "devDependencies": {
     "@babel/cli": "7.19.3",
-    "@babel/core": "7.20.2",
+    "@babel/core": "7.22.0",
     "@babel/plugin-transform-modules-commonjs": "^7.19.6",
     "@babel/preset-typescript": "^7.18.6",
     "@babel/runtime": "^7.20.1",
-    "@babel/types": "^7.20.2",
+    "@babel/types": "^7.22.0",
     "@swc/core": "1.4.17",
     "@swc/jest": "^0.2.36",
     "@types/jest": "^29.2.3",

tsconfig.json

@@ -11,7 +11,7 @@
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 
     /* Language and Environment */
-    "target": "ESNext",                                     /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "target": "ESNext" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
     // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
     // "jsx": "preserve",                                /* Specify what JSX code is generated. */
     // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
@@ -24,9 +24,9 @@
     // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
 
     /* Modules */
-    "module": "commonjs",                                /* Specify what module code is generated. */
+    "module": "commonjs" /* Specify what module code is generated. */,
     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
-    // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
+    "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
@@ -68,12 +68,12 @@
     /* Interop Constraints */
     // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
     // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
-    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */
+    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
     // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
-    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
+    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
 
     /* Type Checking */
-    "strict": true,                                      /* Enable all strict type-checking options. */
+    "strict": true /* Enable all strict type-checking options. */,
     // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied `any` type.. */
     // "strictNullChecks": true,                         /* When type checking, take into account `null` and `undefined`. */
     // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
@@ -95,6 +95,6 @@
 
     /* Completeness */
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
-    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
-  },
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */
+  }
 }