feat(Compilers): add support for tailwindcss v4

hatemhosny · hatemhosny · commit cc90203d62fe · 2025-01-29T01:54:20.000+02:00
diff --git a/src/livecodes/languages/lightningcss/processor-lightningcss-compiler.ts b/src/livecodes/languages/lightningcss/processor-lightningcss-compiler.ts
@@ -31,3 +31,31 @@ import { vendorsBaseUrl } from '../../vendors';
     return new TextDecoder().decode(code) + sourceMap;
   };
 };
+
+// https://github.com/parcel-bundler/lightningcss/blob/fc7f350e5b26188941778514a1f0c0ae48282e72/node/flags.js
+export const lightningcssFeatures = {
+  Nesting: 1,
+  NotSelectorList: 2,
+  DirSelector: 4,
+  LangSelectorList: 8,
+  IsSelector: 16,
+  TextDecorationThicknessPercent: 32,
+  MediaIntervalSyntax: 64,
+  MediaRangeSyntax: 128,
+  CustomMediaQueries: 256,
+  ClampFunction: 512,
+  ColorFunction: 1024,
+  OklabColors: 2048,
+  LabColors: 4096,
+  P3Colors: 8192,
+  HexAlphaColors: 16384,
+  SpaceSeparatedColorNotation: 32768,
+  FontFamilySystemUi: 65536,
+  DoublePositionGradients: 131072,
+  VendorPrefixes: 262144,
+  LogicalProperties: 524288,
+  LightDark: 1048576,
+  Selectors: 31,
+  MediaQueries: 448,
+  Colors: 1113088,
+};
diff --git a/src/livecodes/languages/tailwindcss/processor-tailwindcss-compiler.ts b/src/livecodes/languages/tailwindcss/processor-tailwindcss-compiler.ts
@@ -1,32 +1,189 @@
-import type { CompilerFunction } from '../../models';
-// eslint-disable-next-line import/no-internal-modules
+/* eslint-disable import/no-internal-modules */
+/* eslint-disable camelcase */
+/* eslint-disable no-bitwise */
+import type { CompilerFunction, Config, Language } from '../../models';
+import { compileInCompiler } from '../../compiler';
 import { getLanguageCustomSettings } from '../../utils/utils';
-import { vendorsBaseUrl } from '../../vendors';
+import { tailwindcss3Url, tailwindcssBaseUrl, vendorsBaseUrl } from '../../vendors';
+import { lightningcssFeatures } from '../lightningcss/processor-lightningcss-compiler';
 
-const pluginsUrl = vendorsBaseUrl + 'tailwindcss-plugins/tailwindcss-plugins.js';
+declare const self: any;
 
-(self as any).createTailwindcssCompiler = (): CompilerFunction => {
+self.createTailwindcssCompiler = (): CompilerFunction => {
+  const pluginsUrl = vendorsBaseUrl + 'tailwindcss/tailwindcss-plugins.js';
   let cachedPlugins: Record<string, any>;
-  return async (code, { config, options }) => {
-    const customSettings = getLanguageCustomSettings('tailwindcss', config);
-    const officialPlugins = [
-      '@tailwindcss/forms',
-      '@tailwindcss/typography',
-      '@tailwindcss/aspect-ratio',
-      '@tailwindcss/line-clamp',
-    ];
 
+  const officialPlugins = [
+    '@tailwindcss/forms',
+    '@tailwindcss/typography',
+    '@tailwindcss/aspect-ratio',
+    '@tailwindcss/line-clamp',
+  ];
+
+  const loadPlugins = () => {
+    self.importScripts(pluginsUrl);
+    cachedPlugins = self.tailwindcssPlugins.plugins;
+  };
+
+  const scan = (code: string) => {
+    const classes = new Set<string>();
+    // https://regexr.com/8bfi6
+    const stringsPattern = /((?:`(?:.|\n|\r)+?`)|(?:'.+?')|(?:".+?"))/g;
+    const strings = code.match(new RegExp(stringsPattern)) ?? [];
+    for (const str of strings) {
+      str
+        .slice(1, -1) // remove quotes
+        .replace(/[\n\r]/g, ' ')
+        .split(' ')
+        .forEach((c) => {
+          c = c.trim();
+          if (c === '' || classes.has(c)) return;
+          classes.add(c);
+        });
+    }
+    return Array.from(classes);
+  };
+
+  const loadStylesheet = async (id: string, base: string) => {
+    const fetchFromCDN = (file: string) => {
+      const url = tailwindcssBaseUrl + file;
+      return fetch(url).then((res) => res.text());
+    };
+
+    const load = async () => {
+      if (id === 'tailwindcss') {
+        return {
+          base,
+          content: await fetchFromCDN('index.css'),
+        };
+      } else if (
+        id === 'tailwindcss/preflight' ||
+        id === 'tailwindcss/preflight.css' ||
+        id === './preflight.css'
+      ) {
+        return {
+          base,
+          content: await fetchFromCDN('preflight.css'),
+        };
+      } else if (
+        id === 'tailwindcss/theme' ||
+        id === 'tailwindcss/theme.css' ||
+        id === './theme.css'
+      ) {
+        return {
+          base,
+          content: await fetchFromCDN('theme.css'),
+        };
+      } else if (
+        id === 'tailwindcss/utilities' ||
+        id === 'tailwindcss/utilities.css' ||
+        id === './utilities.css'
+      ) {
+        return {
+          base,
+          content: await fetchFromCDN('utilities.css'),
+        };
+      }
+
+      return {
+        base,
+        content: await fetch(id)
+          .then((res) => res.text())
+          .catch(() => ''),
+      };
+    };
+
+    try {
+      return load();
+    } catch (err) {
+      throw err;
+    }
+  };
+
+  const loadModule = async (id: string) => {
+    if (officialPlugins.includes(id) && !cachedPlugins) {
+      loadPlugins();
+    }
+    if (cachedPlugins && cachedPlugins[id]) {
+      return {
+        base: '/',
+        module: cachedPlugins[id],
+      };
+    }
+    try {
+      const module = await import(id);
+      return {
+        base: '/',
+        module: module.default ?? module,
+      };
+    } catch {
+      throw new Error(`Tailwind CSS plugin "${id}" could not be loaded.`);
+    }
+  };
+
+  const checkVersion = (code: string) => {
+    // https://regexr.com/8bfbb
+    const directivesPattern = /@tailwind\s+((base)|(components)|(utilities))\s*;?/g;
+    if (code.match(new RegExp(directivesPattern))) return 3;
+    return 4;
+  };
+
+  const processInLightningCss: typeof compileInCompiler = async (
+    output,
+    language,
+    config,
+    options,
+  ) => {
+    const Features = lightningcssFeatures;
+    // https://github.com/tailwindlabs/tailwindcss/blob/515a9bdc5ff77291d6f41cd1d4c22e9d24ea91bc/packages/%40tailwindcss-cli/src/commands/build/index.ts#L439
+    const lightningConfig = {
+      minify: false,
+      sourceMap: false,
+      drafts: { customMedia: true },
+      nonStandard: { deepSelectorCombinator: true },
+      include: Features.Nesting,
+      exclude: Features.LogicalProperties | Features.DirSelector | Features.LightDark,
+      targets: {
+        safari: (16 << 16) | (4 << 8),
+        ios_saf: (16 << 16) | (4 << 8),
+        firefox: 128 << 16,
+        chrome: 111 << 16,
+      },
+      errorRecovery: true,
+    };
+    const modifiedConfig: Config = {
+      ...config,
+      customSettings: {
+        ...config.customSettings,
+        lightningcss: {
+          ...lightningConfig,
+          ...config.customSettings.lightningcss,
+        },
+      },
+    };
+
+    // process twice
+    // https://github.com/tailwindlabs/tailwindcss/blob/515a9bdc5ff77291d6f41cd1d4c22e9d24ea91bc/packages/%40tailwindcss-cli/src/commands/build/index.ts#L462-L464
+    const compiled1 = await compileInCompiler(output, language, modifiedConfig, options);
+    const compiledStr = typeof compiled1 === 'string' ? compiled1 : compiled1.code;
+    return compileInCompiler(compiledStr, language, modifiedConfig, options);
+  };
+
+  const tailwind3: CompilerFunction = (code, { config, options }) => {
+    if (!self.createTailwindcss) {
+      self.importScripts(tailwindcss3Url);
+    }
+    const customSettings = getLanguageCustomSettings('tailwindcss', config);
     const selectedPluginNames: string[] =
       customSettings.plugins?.filter((p: string) => officialPlugins.includes(p)) || [];
 
     if (!cachedPlugins && selectedPluginNames.length > 0) {
-      (self as any).importScripts(pluginsUrl);
-      cachedPlugins = (self as any).tailwindcssPlugins.plugins;
+      loadPlugins();
     }
 
     const loadedPlugins = selectedPluginNames.map((p) => cachedPlugins[p]);
 
-    const tailwind = (self as any).createTailwindcss({
+    const tailwind = self.createTailwindcss({
       tailwindConfig: {
         ...customSettings,
         ...(loadedPlugins.length > 0 ? { plugins: loadedPlugins } : {}),
@@ -37,4 +194,31 @@ const pluginsUrl = vendorsBaseUrl + 'tailwindcss-plugins/tailwindcss-plugins.js'
       `<template>${options.html}\n<script>${config.script.content}</script></template>`,
     ]);
   };
+
+  const tailwind4: CompilerFunction = async (code, { config, options }) => {
+    let css = code;
+    const html = `<template>${options.html}\n<script>${config.script.content}</script></template>`;
+    if (!css.includes('@import')) {
+      css = `@import "tailwindcss";${css}`;
+    }
+    try {
+      const compiler = await self.tailwindcss.compile(css, {
+        base: '/',
+        loadStylesheet,
+        loadModule,
+      });
+      const candidates = scan(html);
+      const output: string = compiler.build(candidates);
+      return processInLightningCss(output, 'lightningcss' as Language, config, options);
+    } catch (e: any) {
+      // eslint-disable-next-line no-console
+      console.error('Error compiling Tailwind CSS.', e.message || e);
+    }
+    return css;
+  };
+
+  return (cssCode, compileOptions) =>
+    checkVersion(cssCode) === 3
+      ? tailwind3(cssCode, compileOptions)
+      : tailwind4(cssCode, compileOptions);
 };
diff --git a/src/livecodes/languages/tailwindcss/processor-tailwindcss.ts b/src/livecodes/languages/tailwindcss/processor-tailwindcss.ts
@@ -1,13 +1,13 @@
 import type { ProcessorSpecs } from '../../models';
-import { tailwindcssUrl } from '../../vendors';
+import { vendorsBaseUrl } from '../../vendors';
 
 export const tailwindcss: ProcessorSpecs = {
   name: 'tailwindcss',
   title: 'Tailwind CSS',
   isPostcssPlugin: false,
   needsHTML: true,
   compiler: {
-    url: tailwindcssUrl,
+    url: vendorsBaseUrl + 'tailwindcss/tailwindcss.js',
     factory: (_config, baseUrl) => {
       (self as any).importScripts(baseUrl + '{{hash:processor-tailwindcss-compiler.js}}');
       return (self as any).createTailwindcssCompiler();
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
@@ -4,7 +4,7 @@ import { modulesService } from './services/modules';
 const { getUrl, getModuleUrl } = modulesService;
 
 export const vendorsBaseUrl = // 'https://127.0.0.1:8081/';
-  /* @__PURE__ */ getUrl('@live-codes/browser-compilers@0.18.0/dist/');
+  /* @__PURE__ */ getUrl('@live-codes/browser-compilers@0.19.1/dist/');
 
 export const acornUrl = /* @__PURE__ */ getUrl('acorn@8.12.1/dist/acorn.js');
 
@@ -406,7 +406,9 @@ export const svgbobWasmCdnUrl = /* @__PURE__ */ getUrl('svgbob-wasm@0.4.1-a0/svg
 
 export const tagifyBaseUrl = /* @__PURE__ */ getUrl('@yaireo/tagify@4.25.1/dist/');
 
-export const tailwindcssUrl = /* @__PURE__ */ getUrl(
+export const tailwindcssBaseUrl = /* @__PURE__ */ getUrl('tailwindcss@4.0.0/');
+
+export const tailwindcss3Url = /* @__PURE__ */ getUrl(
   '@mhsdesign/jit-browser-tailwindcss@0.4.1/dist/cdn.min.js',
 );
 
