Vendor cssesc dependency (#1710)

Author: askoufis

.changeset/eight-tigers-poke.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/css': patch
+---
+
+Replace `cssesc` dependency with vendored version

.changeset/hot-geese-end.md

@@ -0,0 +1,7 @@
+---
+'@vanilla-extract/compiler': minor
+---
+
+Don't mark `cssesc` dependency as `external`
+
+`cssesc` has been vendored into the `@vanilla-extract/css` package due to its lack of ESM support

packages/compiler/src/compiler.ts

@@ -130,11 +130,6 @@ const createViteServer = async ({
     },
     ssr: {
       noExternal: true,
-      // `cssesc` is CJS-only, so we need to mark it as external as Vite's transform pipeline
-      // can't handle CJS during dev-time.
-      // See https://github.com/withastro/astro/blob/0879cc2ce7e15a2e7330c68d6667d9a2edea52ab/packages/astro/src/core/create-vite.ts#L86
-      // and https://github.com/withastro/astro/issues/11395
-      external: ['cssesc'],
     },
     plugins: [
       {

packages/css/package.json

@@ -121,7 +121,6 @@
     "@emotion/hash": "^0.9.0",
     "@vanilla-extract/private": "workspace:^",
     "css-what": "^6.1.0",
-    "cssesc": "^3.0.0",
     "csstype": "^3.2.3",
     "dedent": "^1.5.3",
     "deep-object-diff": "^1.1.9",
@@ -130,8 +129,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 @@
+/* eslint-disable regexp/control-character-escape */
+/* eslint-disable no-control-regex */
+/* eslint-disable regexp/no-optional-assertion */
+/* eslint-disable regexp/no-useless-escape */
+/* eslint-disable regexp/no-obscure-range */
+// ESM vendored version of cssesc: https://github.com/mathiasbynens/cssesc/blob/cb894eb42f27c8d3cd793f16afe35b3ab38000a1/cssesc.js
+// See https://github.com/vanilla-extract-css/vanilla-extract/pull/1710
+
+const regexAnySingleEscape = /[ -,\.\/:-@\[-\^`\{-~]/;
+const regexSingleEscape = /[ -,\.\/:-@\[\]\^`\{-~]/;
+const regexExcessiveSpaces =
+  /(^|\\+)?(\\[A-F0-9]{1,6})\x20(?![a-fA-F0-9\x20])/g;
+
+interface Options {
+  escapeEverything: boolean;
+  isIdentifier: boolean;
+  quotes: 'single' | 'double';
+  wrap: boolean;
+}
+
+const DEFAULT_OPTIONS: Options = {
+  escapeEverything: false,
+  isIdentifier: false,
+  quotes: 'single',
+  wrap: false,
+};
+
+export function cssesc(string: string, options: Partial<Options> = {}) {
+  options = { ...DEFAULT_OPTIONS, ...options };
+  const quote = options.quotes === 'double' ? '"' : "'";
+  const { isIdentifier } = options;
+
+  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: string;
+    // 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,3 @@
-import cssesc from 'cssesc';
 import dedent from 'dedent';
 import deepmerge from 'deepmerge';
 
@@ -19,6 +18,7 @@ import {
 import { getFileScope, hasFileScope } from './fileScope';
 import { generateIdentifier } from './identifier';
 import { dedupeAndJoinClassList } from './utils';
+import { cssesc } from './cssesc';
 
 function composedStyle(rules: Array<StyleRule | ClassNames>, debugId?: string) {
   const className = generateIdentifier(debugId);

packages/css/src/transformCss.ts

@@ -1,5 +1,4 @@
 import { getVarName } from '@vanilla-extract/private';
-import cssesc from 'cssesc';
 import AhoCorasick from 'modern-ahocorasick';
 
 import type {
@@ -21,6 +20,7 @@ import { validateSelector } from './validateSelector';
 import { ConditionalRuleset } from './conditionalRulesets';
 import { simplePseudos, simplePseudoLookup } from './simplePseudos';
 import { validateMediaQuery } from './validateMediaQuery';
+import { cssesc } from './cssesc';
 
 const DECLARATION = '__DECLARATION';
 

packages/css/src/validateSelector.ts

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

packages/css/src/vars.ts

@@ -7,14 +7,14 @@ import {
   type MapLeafNodes,
   type CSSVarFunction,
 } from '@vanilla-extract/private';
-import cssesc from 'cssesc';
 
 import type { Tokens, NullableTokens, ThemeVars } from './types';
 import { validateContract } from './validateContract';
 import { getFileScope } from './fileScope';
 import { generateIdentifier } from './identifier';
 import type { PropertySyntax } from './types';
 import { appendCss } from './adapter';
+import { cssesc } from './cssesc';
 
 type VarDeclaration =
   | {