add support for raw content extensions

Author: bradlc

src/jit/lib/expandTailwindAtRules.js

@@ -25,15 +25,13 @@ function getDefaultExtractor(fileExtension) {
   }
 }
 
-function getExtractor(tailwindConfig, fileName) {
+function getExtractor(tailwindConfig, fileExtension) {
   const purgeOptions = tailwindConfig && tailwindConfig.purge && tailwindConfig.purge.options
 
-  if (!fileName) {
+  if (!fileExtension) {
     return (purgeOptions && purgeOptions.defaultExtractor) || getDefaultExtractor()
   }
 
-  const fileExtension = path.extname(fileName).slice(1)
-
   if (!purgeOptions) {
     return getDefaultExtractor(fileExtension)
   }
@@ -213,13 +211,13 @@ export default function expandTailwindAtRules(context, registerDependency) {
     env.DEBUG && console.time('Reading changed files')
     for (let file of context.changedFiles) {
       let content = fs.readFileSync(file, 'utf8')
-      let extractor = getExtractor(context.tailwindConfig, file)
+      let extractor = getExtractor(context.tailwindConfig, path.extname(file).slice(1))
       getClassCandidates(content, extractor, contentMatchCache, candidates, seen)
     }
     env.DEBUG && console.timeEnd('Reading changed files')
 
-    for (let content of context.rawContent) {
-      let extractor = getExtractor(context.tailwindConfig)
+    for (let { content, extension } of context.rawContent) {
+      let extractor = getExtractor(context.tailwindConfig, extension)
       getClassCandidates(content, extractor, contentMatchCache, candidates, seen)
     }
 

src/jit/lib/setupContext.js

@@ -788,7 +788,9 @@ export default function setupContext(configOrPath) {
       candidateFiles: purgeContent
         .filter((item) => typeof item === 'string')
         .map((path) => normalizePath(path)),
-      rawContent: purgeContent.filter((item) => typeof item.raw === 'string').map(({ raw }) => raw),
+      rawContent: purgeContent
+        .filter((item) => typeof item.raw === 'string')
+        .map(({ raw, extension }) => ({ content: raw, extension })),
       variantMap: new Map(),
       stylesheetCache: null,
       fileModifiedMap: new Map(),

tests/jit/raw-content.test.js

@@ -1,15 +1,20 @@
 import postcss from 'postcss'
 import fs from 'fs'
 import path from 'path'
-import tailwind from '../../src/jit/index.js'
 
-function run(input, config = {}) {
+beforeEach(() => {
+  jest.resetModules()
+})
+
+function run(tailwind, input, config = {}) {
   return postcss(tailwind(config)).process(input, {
     from: path.resolve(__filename),
   })
 }
 
 test('raw content', () => {
+  let tailwind = require('../../src/jit/index.js').default
+
   let config = {
     mode: 'jit',
     purge: [{ raw: fs.readFileSync(path.resolve(__dirname, './raw-content.test.html'), 'utf8') }],
@@ -24,10 +29,57 @@ test('raw content', () => {
     @tailwind utilities;
   `
 
-  return run(css, config).then((result) => {
+  return run(tailwind, css, config).then((result) => {
     let expectedPath = path.resolve(__dirname, './raw-content.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
     expect(result.css).toMatchFormattedCss(expected)
   })
 })
+
+test('raw content with extension', () => {
+  let tailwind = require('../../src/jit/index.js').default
+
+  let config = {
+    mode: 'jit',
+    purge: {
+      content: [
+        {
+          raw: fs.readFileSync(path.resolve(__dirname, './raw-content.test.html'), 'utf8'),
+          extension: 'html',
+        },
+      ],
+      options: {
+        extractors: [
+          {
+            extractor: () => [],
+            extensions: ['html'],
+          },
+        ],
+      },
+    },
+    corePlugins: { preflight: false },
+    theme: {},
+    plugins: [],
+  }
+
+  let css = `
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+  `
+
+  return run(tailwind, css, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(`
+      * {
+        --tw-shadow: 0 0 #0000;
+        --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
+        --tw-ring-offset-width: 0px;
+        --tw-ring-offset-color: #fff;
+        --tw-ring-color: rgba(59, 130, 246, 0.5);
+        --tw-ring-offset-shadow: 0 0 #0000;
+        --tw-ring-shadow: 0 0 #0000;
+      }
+    `)
+  })
+})