Inline cssesc dependency

Author: askoufis

.changeset/polite-rats-allow.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/css': patch
+---
+
+Inline `cssesc` dependency to fix CJS interop issues in certain Vite apps

packages/css/package.json

@@ -119,7 +119,6 @@
     "@emotion/hash": "^0.9.0",
     "@vanilla-extract/private": "workspace:^",
     "css-what": "^6.1.0",
-    "cssesc": "^3.0.0",
     "csstype": "^3.0.7",
     "dedent": "^1.5.3",
     "deep-object-diff": "^1.1.9",
@@ -128,8 +127,5 @@
     "media-query-parser": "^2.0.2",
     "modern-ahocorasick": "^1.0.0",
     "picocolors": "^1.0.0"
-  },
-  "devDependencies": {
-    "@types/cssesc": "^3.0.0"
   }
 }

packages/css/src/cssesc.ts

@@ -0,0 +1,104 @@
+// Modified from https://github.com/mathiasbynens/cssesc/blob/cb894eb42f27c8d3cd793f16afe35b3ab38000a1/src/cssesc.js
+// Does not support globally overriding options
+
+interface Options {
+  escapeEverything: boolean;
+  isIdentifier: boolean;
+  quotes: string;
+  wrap: boolean;
+}
+
+const regexAnySingleEscape = /[ -,\.\/:-@\[-\^`\{-~]/;
+const regexSingleEscape = /[ -,\.\/:-@\[\]\^`\{-~]/;
+const regexExcessiveSpaces =
+  /(^|\\+)?(\\[A-F0-9]{1,6})\x20(?![a-fA-F0-9\x20])/g;
+
+const defaultOptions: Options = {
+  escapeEverything: false,
+  isIdentifier: false,
+  quotes: 'single',
+  wrap: false,
+};
+
+// https://mathiasbynens.be/notes/css-escapes#css
+export const cssesc = (string: string, options: Partial<Options>) => {
+  options = { ...defaultOptions, ...options };
+
+  if (options.quotes != 'single' && options.quotes != 'double') {
+    options.quotes = 'single';
+  }
+  const quote = options.quotes == 'double' ? '"' : "'";
+  const isIdentifier = options.isIdentifier;
+
+  const firstChar = string.charAt(0);
+  let output = '';
+  let counter = 0;
+  const length = string.length;
+  while (counter < length) {
+    const character = string.charAt(counter++);
+    let codePoint = character.charCodeAt(0);
+    let value;
+    // If it’s not a printable ASCII character…
+    if (codePoint < 0x20 || codePoint > 0x7e) {
+      if (codePoint >= 0xd800 && codePoint <= 0xdbff && counter < length) {
+        // It’s a high surrogate, and there is a next character.
+        const extra = string.charCodeAt(counter++);
+        if ((extra & 0xfc00) == 0xdc00) {
+          // next character is low surrogate
+          codePoint = ((codePoint & 0x3ff) << 10) + (extra & 0x3ff) + 0x10000;
+        } else {
+          // It’s an unmatched surrogate; only append this code unit, in case
+          // the next code unit is the high surrogate of a surrogate pair.
+          counter--;
+        }
+      }
+      value = '\\' + codePoint.toString(16).toUpperCase() + ' ';
+    } else {
+      if (options.escapeEverything) {
+        if (regexAnySingleEscape.test(character)) {
+          value = '\\' + character;
+        } else {
+          value = '\\' + codePoint.toString(16).toUpperCase() + ' ';
+        }
+      } else if (/[\t\n\f\r\x0B]/.test(character)) {
+        value = '\\' + codePoint.toString(16).toUpperCase() + ' ';
+      } else if (
+        character == '\\' ||
+        (!isIdentifier &&
+          ((character == '"' && quote == character) ||
+            (character == "'" && quote == character))) ||
+        (isIdentifier && regexSingleEscape.test(character))
+      ) {
+        value = '\\' + character;
+      } else {
+        value = character;
+      }
+    }
+    output += value;
+  }
+
+  if (isIdentifier) {
+    if (/^-[-\d]/.test(output)) {
+      output = '\\-' + output.slice(1);
+    } else if (/\d/.test(firstChar)) {
+      output = '\\3' + firstChar + ' ' + output.slice(1);
+    }
+  }
+
+  // Remove spaces after `\HEX` escapes that are not followed by a hex digit,
+  // since they’re redundant. Note that this is only possible if the escape
+  // sequence isn’t preceded by an odd number of backslashes.
+  output = output.replace(regexExcessiveSpaces, function ($0, $1, $2) {
+    if ($1 && $1.length % 2) {
+      // It’s not safe to remove the space, so don’t.
+      return $0;
+    }
+    // Strip the space.
+    return ($1 || '') + $2;
+  });
+
+  if (!isIdentifier && options.wrap) {
+    return quote + output + quote;
+  }
+  return output;
+};

packages/css/src/style.ts

@@ -1,4 +1,4 @@
-import cssesc from 'cssesc';
+import { cssesc } from './cssesc';
 import dedent from 'dedent';
 import deepmerge from 'deepmerge';
 

packages/css/src/transformCss.ts

@@ -1,5 +1,5 @@
 import { getVarName } from '@vanilla-extract/private';
-import cssesc from 'cssesc';
+import { cssesc } from './cssesc';
 import AhoCorasick from 'modern-ahocorasick';
 
 import type {

packages/css/src/validateSelector.ts

@@ -1,5 +1,5 @@
 import { parse } from 'css-what';
-import cssesc from 'cssesc';
+import { cssesc } from './cssesc';
 import dedent from 'dedent';
 
 // https://stackoverflow.com/questions/3561493/is-there-a-regexp-escape-function-in-javascript

packages/css/src/vars.ts

@@ -7,7 +7,7 @@ import {
   MapLeafNodes,
   CSSVarFunction,
 } from '@vanilla-extract/private';
-import cssesc from 'cssesc';
+import { cssesc } from './cssesc';
 
 import { Tokens, NullableTokens, ThemeVars } from './types';
 import { validateContract } from './validateContract';

packages/integration/src/compiler.ts

@@ -111,6 +111,11 @@ const createViteServer = async ({
     ssr: {
       noExternal: true,
     },
+    build: {
+      rollupOptions: {
+        external: ['cssesc'],
+      },
+    },
     plugins: [
       {
         name: 'vanilla-extract-externalize',

packages/vite-plugin/src/index.ts

@@ -106,6 +106,9 @@ export function vanillaExtractPlugin({
     config(_userConfig, _configEnv) {
       configEnv = _configEnv;
       return {
+        optimizeDeps: {
+          include: ['@vanilla-extract/css > cssesc'],
+        },
         ssr: {
           external: [
             '@vanilla-extract/css',