Add "type": "module"

README.md

@@ -7,18 +7,15 @@
 ## Install
 
 ```bash
-npm i -D babel-plugin-solid-styled
-npm i solid-styled
+npm i solid-styled babel-plugin-solid-styled
 ```
 
 ```bash
-yarn add -D babel-plugin-solid-styled
-yarn add solid-styled
+yarn add solid-styled babel-plugin-solid-styled
 ```
 
 ```bash
-pnpm add -D babel-plugin-solid-styled
-pnpm add solid-styled
+pnpm add solid-styled babel-plugin-solid-styled
 ```
 
 ## Features
@@ -64,7 +61,7 @@ export default {
     solidPlugin({
       babel: (source, id, ssr) => ({
         plugins: [
-          [solidStyled, { ssr }]
+          [solidStyled, { mode: ssr ? 'ssr' : 'dom' }]
         ],
       }),
     }),
@@ -74,7 +71,7 @@ export default {
 
 ### Babel
 
-```json
+```js
 {
   "plugins": [
     "babel-plugin-solid-styled"
@@ -84,7 +81,7 @@ export default {
 
 ### Config options
 
-```js
+```json
 {
   // Toggle verbose scope names based
   // on the owning component's name,
@@ -97,14 +94,17 @@ export default {
   // Default: undefined ('')
   "prefix": "example",
 
-  // Opt to SSR mode, allows
+  // Opt to different mode, allows
   // ids to be consistent
   // on separate bundles.
-  "ssr": false,
+  // e.g. if you're building for client and server
+  // you'll use "client" and "server. If you're producing
+  // different formats, you can do "client+esm", "client+cjs", etc.
+  "mode": "default",
 }
 ```
 
-**TIP**: if `solid-styled` transform is applied before SolidJS transform (e.g. shipping preserved JSX), you can skip the `ssr` option.
+**TIP**: if `solid-styled` transform is applied before SolidJS transform (e.g. shipping preserved JSX), you can skip the `mode` option.
 
 ### `<StyleRegistry>`
 

packages/babel-plugin-solid-styled/package.json

@@ -1,17 +1,15 @@
 {
   "name": "babel-plugin-solid-styled",
   "version": "0.4.1",
-  "types": "dist/types/index.d.ts",
-  "main": "dist/cjs/production/index.js",
-  "module": "dist/esm/production/index.js",
+  "type": "module",
   "exports": {
     ".": {
       "development": {
-        "require": "./dist/cjs/development/index.js",
-        "import": "./dist/esm/development/index.js"
+        "require": "./dist/cjs/development/index.cjs",
+        "import": "./dist/esm/development/index.mjs"
       },
-      "require": "./dist/cjs/production/index.js",
-      "import": "./dist/esm/production/index.js",
+      "require": "./dist/cjs/production/index.cjs",
+      "import": "./dist/esm/production/index.mjs",
       "types": "./dist/types/index.d.ts"
     }
   },
@@ -30,7 +28,7 @@
     "@types/node": "^17.0.25",
     "eslint": "^8.18.0",
     "eslint-config-lxsmnsyc": "^0.4.4",
-    "pridepack": "2.0.1",
+    "pridepack": "2.1.2",
     "solid-styled": "0.4.1",
     "tslib": "^2.4.0",
     "typescript": "^4.7.4"

packages/babel-plugin-solid-styled/src/index.ts

@@ -5,8 +5,8 @@ import * as t from '@babel/types';
 import * as csstree from 'css-tree';
 import UniqueIdGenerator from './id-generator';
 
-const ssrUniqueId = new UniqueIdGenerator();
-const domUniqueId = new UniqueIdGenerator();
+const uniqueIdMap = new Map<string, UniqueIdGenerator>();
+
 const TAGGED_TEMPLATE = 'css';
 const SOURCE_MODULE = 'solid-styled';
 const SOLID_STYLED_ATTR = 'data-s';
@@ -17,7 +17,7 @@ const GLOBAL_SELECTOR = 'global';
 export interface SolidStyledOptions {
   verbose?: boolean;
   prefix?: string;
-  ssr?: boolean;
+  mode?: string;
 }
 
 interface StateContext {
@@ -27,12 +27,20 @@ interface StateContext {
   opts: SolidStyledOptions;
 }
 
-function getPrefix(ctx: StateContext) {
-  return ctx.opts.prefix ? `${ctx.opts.prefix}-` : '';
+function getUniqueId(ctx: StateContext) {
+  const mode = ctx.opts.mode ?? 'default';
+  let idgen = uniqueIdMap.get(mode);
+
+  if (!idgen) {
+    idgen = new UniqueIdGenerator();
+    uniqueIdMap.set(mode, idgen);
+  }
+
+  return idgen.next();
 }
 
-function nextId(ctx: StateContext) {
-  return ctx.opts.ssr ? ssrUniqueId.next() : domUniqueId.next();
+function getPrefix(ctx: StateContext) {
+  return ctx.opts.prefix ? `${ctx.opts.prefix}-` : '';
 }
 
 function getHookIdentifier(
@@ -132,7 +140,7 @@ function generateSheet(
   }
   const program = functionParent.getProgramParent();
   const sheet = program.generateUidIdentifier(SHEET_ID);
-  const baseID = nextId(ctx);
+  const baseID = getUniqueId(ctx);
   const verboseId = ctx.opts.verbose
     ? `${getFunctionParentName(functionParent)}-${baseID}`
     : baseID;
@@ -237,7 +245,7 @@ function replaceDynamicTemplate(
     if (currentExpr < expressions.length) {
       const expr = expressions[currentExpr];
       if (t.isExpression(expr)) {
-        const id = `--s-${getPrefix(ctx)}${nextId(ctx)}`;
+        const id = `--s-${getPrefix(ctx)}${getUniqueId(ctx)}`;
         sheet = `${sheet}var(${id})`;
         variables.push(t.objectProperty(
           t.stringLiteral(id),

packages/solid-styled/README.md

@@ -61,7 +61,7 @@ export default {
     solidPlugin({
       babel: (source, id, ssr) => ({
         plugins: [
-          [solidStyled, { ssr }]
+          [solidStyled, { mode: ssr ? 'ssr' : 'dom' }]
         ],
       }),
     }),

packages/solid-styled/package.json

@@ -1,17 +1,15 @@
 {
   "name": "solid-styled",
   "version": "0.4.1",
-  "types": "dist/types/index.d.ts",
-  "main": "dist/cjs/production/index.jsx",
-  "module": "dist/esm/production/index.jsx",
+  "type": "module",
   "exports": {
     ".": {
       "development": {
-        "require": "./dist/cjs/development/index.jsx",
-        "import": "./dist/esm/development/index.jsx"
+        "require": "./dist/cjs/development/index.cjs",
+        "import": "./dist/esm/development/index.mjs"
       },
-      "require": "./dist/cjs/production/index.jsx",
-      "import": "./dist/esm/production/index.jsx",
+      "require": "./dist/cjs/production/index.cjs",
+      "import": "./dist/esm/production/index.mjs",
       "types": "./dist/types/index.d.ts"
     }
   },
@@ -27,7 +25,7 @@
     "@types/node": "^17.0.25",
     "eslint": "^8.18.0",
     "eslint-config-lxsmnsyc": "^0.4.4",
-    "pridepack": "2.0.1",
+    "pridepack": "2.1.2",
     "solid-js": "^1.4.4",
     "tslib": "^2.4.0",
     "typescript": "^4.7.4"

packages/solid-styled/pridepack.json

@@ -1,4 +1,3 @@
 {
-  "target": "es2017",
-  "jsx": "preserve"
+  "target": "es2017"
 }

packages/solid-styled/src/core.tsx → packages/solid-styled/src/core.ts

@@ -1,4 +1,5 @@
 import {
+  createComponent,
   createContext,
   createMemo,
   createRoot,
@@ -68,9 +69,12 @@ export function StyleRegistry(props: StyleRegistryProps): JSX.Element {
   }
 
   return (
-    <StyleRegistryContext.Provider value={{ insert, remove }}>
-      {props.children}
-    </StyleRegistryContext.Provider>
+    createComponent(StyleRegistryContext.Provider, {
+      value: { insert, remove },
+      get children() {
+        return props.children;
+      },
+    })
   );
 }