Super hacky POC

src/lib/setupTrackingContext.js

@@ -28,7 +28,7 @@ function getCandidateFiles(context, tailwindConfig) {
 }
 
 // Get the config object based on a path
-function getTailwindConfig(configOrPath) {
+function getTailwindConfig(configOrPath, cssThemeValues) {
   let userConfigPath = resolveConfigPath(configOrPath)
 
   if (userConfigPath !== null) {
@@ -56,14 +56,19 @@ function getTailwindConfig(configOrPath) {
     for (let file of newDeps) {
       delete require.cache[file]
     }
-    let newConfig = validateConfig(resolveConfig(loadConfig(userConfigPath)))
+    let newConfig = validateConfig(
+      resolveConfig({ theme: cssThemeValues }, loadConfig(userConfigPath))
+    )
     let newHash = hash(newConfig)
     configPathCache.set(userConfigPath, [newConfig, newHash, newDeps, newModified])
     return [newConfig, userConfigPath, newHash, newDeps]
   }
 
   // It's a plain object, not a path
-  let newConfig = resolveConfig(configOrPath?.config ?? configOrPath ?? {})
+  let newConfig = resolveConfig(
+    { theme: cssThemeValues },
+    configOrPath?.config ?? configOrPath ?? {}
+  )
 
   newConfig = validateConfig(newConfig)
 
@@ -75,11 +80,11 @@ function getTailwindConfig(configOrPath) {
 // Retrieve an existing context from cache if possible (since contexts are unique per
 // source path), or set up a new one (including setting up watchers and registering
 // plugins) then return it
-export default function setupTrackingContext(configOrPath) {
+export default function setupTrackingContext(configOrPath, cssThemeValues) {
   return ({ tailwindDirectives, registerDependency }) => {
     return (root, result) => {
       let [tailwindConfig, userConfigPath, tailwindConfigHash, configDependencies] =
-        getTailwindConfig(configOrPath)
+        getTailwindConfig(configOrPath, cssThemeValues)
 
       let contextDependencies = new Set(configDependencies)
 

src/plugin.js

@@ -23,7 +23,26 @@ module.exports = function tailwindcss(configOrPath) {
         // path for the file being processed
         configOrPath = findAtConfigPath(root, result) ?? configOrPath
 
-        let context = setupTrackingContext(configOrPath)
+        // Begin CSS-first theme configuration proof-of-concept
+        let themeValues = { extend: { colors: {} } }
+
+        root.each((node) => {
+          if (node.type === 'rule' && node.selector === ':theme') {
+            // Walk :theme pseudo and extract values
+            node.walkDecls((decl) => {
+              if (decl.prop.startsWith('--colors-')) {
+                themeValues.extend.colors[decl.prop.slice(9)] = decl.value
+              }
+            })
+
+            node.remove()
+          }
+        })
+
+        // context.tailwindConfig.theme
+        // End CSS-first theme configuration proof-of-concept
+
+        let context = setupTrackingContext(configOrPath, themeValues)
 
         if (root.type === 'document') {
           let roots = root.nodes.filter((node) => node.type === 'root')

tests/css-configuration.test.js

@@ -0,0 +1,37 @@
+import { run, html, css } from './util/run'
+
+test('it does something', () => {
+  let config = {
+    darkMode: 'class',
+    content: [
+      {
+        raw: html`
+          <div class="text-black"></div>
+          <div class="text-potato"></div>
+        `,
+      },
+    ],
+  }
+
+  return run(
+    css`
+      @tailwind utilities;
+
+      :theme {
+        --colors-potato: #facade;
+      }
+    `,
+    config
+  ).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      .text-black {
+        --tw-text-opacity: 1;
+        color: rgb(0 0 0 / var(--tw-text-opacity));
+      }
+      .text-potato {
+        --tw-text-opacity: 1;
+        color: rgb(250 202 222 / var(--tw-text-opacity));
+      }
+    `)
+  })
+})