import LRU from 'quick-lru' import * as sharedState from './sharedState' import { generateRules } from './generateRules' import bigSign from '../util/bigSign' import log from '../util/log' import cloneNodes from '../util/cloneNodes' import { defaultExtractor } from './defaultExtractor' let env = sharedState.env const builtInExtractors = { DEFAULT: defaultExtractor, } const builtInTransformers = { DEFAULT: (content) => content, svelte: (content) => content.replace(/(?:^|\s)class:/g, ' '), } function getExtractor(context, fileExtension) { let extractors = context.tailwindConfig.content.extract return ( extractors[fileExtension] || extractors.DEFAULT || builtInExtractors[fileExtension] || builtInExtractors.DEFAULT(context) ) } function getTransformer(tailwindConfig, fileExtension) { let transformers = tailwindConfig.content.transform return ( transformers[fileExtension] || transformers.DEFAULT || builtInTransformers[fileExtension] || builtInTransformers.DEFAULT ) } let extractorCache = new WeakMap() // Scans template contents for possible classes. This is a hot path on initial build but // not too important for subsequent builds. The faster the better though — if we can speed // up these regexes by 50% that could cut initial build time by like 20%. function getClassCandidates(content, extractor, candidates, seen) { if (!extractorCache.has(extractor)) { extractorCache.set(extractor, new LRU({ maxSize: 25000 })) } for (let line of content.split('\n')) { line = line.trim() if (seen.has(line)) { continue } seen.add(line) if (extractorCache.get(extractor).has(line)) { for (let match of extractorCache.get(extractor).get(line)) { candidates.add(match) } } else { let extractorMatches = extractor(line).filter((s) => s !== '!*') let lineMatchesSet = new Set(extractorMatches) for (let match of lineMatchesSet) { candidates.add(match) } extractorCache.get(extractor).set(line, lineMatchesSet) } } } function buildStylesheet(rules, context) { let sortedRules = rules.sort(([a], [z]) => bigSign(a - z)) let returnValue = { base: new Set(), defaults: new Set(), components: new Set(), utilities: new Set(), variants: new Set(), // All the CSS that is not Tailwind related can be put in this bucket. This // will make it easier to later use this information when we want to // `@apply` for example. The main reason we do this here is because we // still need to make sure the order is correct. Last but not least, we // will make sure to always re-inject this section into the css, even if // certain rules were not used. This means that it will look like a no-op // from the user's perspective, but we gathered all the useful information // we need. user: new Set(), } for (let [sort, rule] of sortedRules) { if (sort >= context.minimumScreen) { returnValue.variants.add(rule) continue } if (sort & context.layerOrder.base) { returnValue.base.add(rule) continue } if (sort & context.layerOrder.defaults) { returnValue.defaults.add(rule) continue } if (sort & context.layerOrder.components) { returnValue.components.add(rule) continue } if (sort & context.layerOrder.utilities) { returnValue.utilities.add(rule) continue } if (sort & context.layerOrder.user) { returnValue.user.add(rule) continue } } return returnValue } export default function expandTailwindAtRules(context) { return (root) => { let layerNodes = { base: null, components: null, utilities: null, variants: null, } root.walkAtRules((rule) => { // Make sure this file contains Tailwind directives. If not, we can save // a lot of work and bail early. Also we don't have to register our touch // file as a dependency since the output of this CSS does not depend on // the source of any templates. Think Vue