Add test for standalone CLI importing / using JS APIs

integrations/cli/standalone.test.ts

@@ -1,6 +1,6 @@
 import os from 'node:os'
 import path from 'node:path'
-import { candidate, css, html, json, test } from '../utils'
+import { candidate, css, html, js, json, test } from '../utils'
 
 const STANDALONE_BINARY = (() => {
   switch (os.platform()) {
@@ -56,3 +56,110 @@ test(
     ])
   },
 )
+
+test(
+  'includes js APIs for plugins',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {}
+        }
+      `,
+      'index.html': html`
+        <div class="underline example1 example2 example3"></div>
+      `,
+      'src/index.css': css`
+        @import 'tailwindcss/theme' theme(reference);
+        @import 'tailwindcss/utilities';
+        @plugin './plugin.js';
+        @plugin './plugin.cjs';
+        @plugin './plugin.ts';
+      `,
+      'src/plugin.js': js`
+        import plugin from 'tailwindcss/plugin'
+
+        // Make sure all available JS APIs can be imported and used
+        import * as tw from 'tailwindcss'
+        import colors from 'tailwindcss/colors'
+        import flattenColorPalette from 'tailwindcss/lib/util/flattenColorPalette'
+        import defaultTheme from 'tailwindcss/defaultTheme'
+        import * as pkg from 'tailwindcss/package.json'
+
+        export default plugin(function ({ addUtilities }) {
+          addUtilities({
+            '.example1': {
+              '--version': pkg.version,
+              '--default-theme': typeof defaultTheme,
+              '--flatten-color-palette': typeof flattenColorPalette,
+              '--colors': typeof colors,
+              '--core': typeof tw,
+              color: 'red',
+            },
+          })
+        })
+      `,
+      'src/plugin.cjs': js`
+        const plugin = require('tailwindcss/plugin')
+
+        // Make sure all available JS APIs can be imported and used
+        const tw = require('tailwindcss')
+        const colors = require('tailwindcss/colors')
+        const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette')
+        const defaultTheme = require('tailwindcss/defaultTheme')
+        const pkg = require('tailwindcss/package.json')
+
+        module.exports = plugin(function ({ addUtilities }) {
+          addUtilities({
+            '.example2': {
+              '--version': pkg.version,
+              '--default-theme': typeof defaultTheme,
+              '--flatten-color-palette': typeof flattenColorPalette,
+              '--colors': typeof colors,
+              '--core': typeof tw,
+              color: 'red',
+            },
+          })
+        })
+      `,
+      'src/plugin.ts': js`
+        import plugin from 'tailwindcss/plugin'
+
+        // Make sure all available JS APIs can be imported and used
+        import * as tw from 'tailwindcss'
+        import colors from 'tailwindcss/colors'
+        import flattenColorPalette from 'tailwindcss/lib/util/flattenColorPalette'
+        import defaultTheme from 'tailwindcss/defaultTheme'
+        import * as pkg from 'tailwindcss/package.json'
+
+        export interface PluginOptions {
+        }
+
+        export default plugin(function ({ addUtilities }) {
+          addUtilities({
+            '.example3': {
+              '--version': pkg.version,
+              '--default-theme': typeof defaultTheme,
+              '--flatten-color-palette': typeof flattenColorPalette,
+              '--colors': typeof colors,
+              '--core': typeof tw,
+              color: 'red',
+            },
+          })
+        })
+      `,
+    },
+  },
+  async ({ fs, exec }) => {
+    await exec(
+      `${path.resolve(__dirname, `../../packages/@tailwindcss-standalone/dist/${STANDALONE_BINARY}`)} --input src/index.css --output dist/out.css`,
+    )
+
+    await fs.expectFileToContain('dist/out.css', [
+      candidate`underline`,
+      candidate`example1`,
+      candidate` example2`,
+      candidate`example3`,
+    ])
+  },
+)