@unocss/svelte-scoped 0.52.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-PRESENT Anthony Fu <https://github.com/antfu>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,7 @@
+# @unocss/svelte-scoped
+
+Place generated CSS for each Svelte component's utility styles directly into the Svelte component's `<style>` block instead of in a global CSS file. 
+
+## Documentation
+
+Please refer to the [documentation](https://unocss.dev/integrations/svelte-scoped).

package/dist/preprocess.cjs

@@ -0,0 +1,448 @@
+'use strict';
+
+const core = require('@unocss/core');
+const presetUno = require('@unocss/preset-uno');
+const config = require('@unocss/config');
+const MagicString = require('magic-string');
+const cssTree = require('css-tree');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
+
+const presetUno__default = /*#__PURE__*/_interopDefaultLegacy(presetUno);
+const MagicString__default = /*#__PURE__*/_interopDefaultLegacy(MagicString);
+
+const NOT_PRECEEDED_BY_DIGIT_OR_OPEN_PARENTHESIS_RE = /(?<![\d(])/;
+const SELECTOR_STARTING_WITH_BRACKET_OR_PERIOD_RE = /([[\.][\S\s]+?)/;
+const STYLES_RE = /({[\S\s]+?})/;
+const EXTRACT_SELECTOR_RE = new RegExp(NOT_PRECEEDED_BY_DIGIT_OR_OPEN_PARENTHESIS_RE.source + SELECTOR_STARTING_WITH_BRACKET_OR_PERIOD_RE.source + STYLES_RE.source, "g");
+function wrapSelectorsWithGlobal(css) {
+  return css.replace(EXTRACT_SELECTOR_RE, ":global($1)$2");
+}
+
+const classesRE$1 = /class=(["'\`])([\S\s]*?)\1/g;
+const classDirectivesRE = /class:([\S]+?)={/g;
+const classDirectivesShorthandRE = /class:([^=>\s/]+)[{>\s/]/g;
+function findClasses(code) {
+  const matchedClasses = [...code.matchAll(classesRE$1)];
+  const matchedClassDirectives = [...code.matchAll(classDirectivesRE)];
+  const matchedClassDirectivesShorthand = [...code.matchAll(classDirectivesShorthandRE)];
+  const classes = parseMatches(matchedClasses, "regular", 'class="'.length);
+  const classDirectives = parseMatches(matchedClassDirectives, "directive", "class:".length);
+  const classDirectivesShorthand = parseMatches(matchedClassDirectivesShorthand, "directiveShorthand", "class:".length);
+  return [...classes, ...classDirectives, ...classDirectivesShorthand];
+}
+function parseMatches(matches, type, prefixLength) {
+  return matches.map((match) => {
+    const body = match[type === "regular" ? 2 : 1];
+    const start = match.index + prefixLength;
+    return {
+      body: body.trim(),
+      start,
+      end: start + body.length,
+      type
+    };
+  }).filter(hasBody);
+}
+function hasBody(foundClass) {
+  return foundClass.body;
+}
+
+const notInCommentRE = /(?<!<!--\s*)/;
+const stylesTagWithCapturedDirectivesRE = /<style([^>]*)>[\s\S]*?<\/style\s*>/;
+const actualStylesTagWithCapturedDirectivesRE = new RegExp(notInCommentRE.source + stylesTagWithCapturedDirectivesRE.source, "g");
+const captureOpeningStyleTagWithAttributesRE = /(<style[^>]*>)/;
+function addGeneratedStylesIntoStyleBlock(code, styles) {
+  const preExistingStylesTag = code.match(actualStylesTagWithCapturedDirectivesRE);
+  if (preExistingStylesTag)
+    return code.replace(captureOpeningStyleTagWithAttributesRE, `$1${styles}`);
+  return `${code}
+<style>${styles}</style>`;
+}
+
+async function needsGenerated(token, uno) {
+  const inSafelist = uno.config.safelist.includes(token);
+  if (inSafelist)
+    return false;
+  const result = await uno.parseToken(token);
+  return !!result;
+}
+
+function hash(str) {
+  let i;
+  let l;
+  let hval = 2166136261;
+  for (i = 0, l = str.length; i < l; i++) {
+    hval ^= str.charCodeAt(i);
+    hval += (hval << 1) + (hval << 4) + (hval << 7) + (hval << 8) + (hval << 24);
+  }
+  return `00000${(hval >>> 0).toString(36)}`.slice(-6);
+}
+
+function generateClassName(body, options, filename) {
+  const {
+    classPrefix = "uno-",
+    combine = true,
+    hashFn = hash
+  } = options;
+  if (combine) {
+    const classPlusFilenameHash = hashFn(body + filename);
+    return `${classPrefix}${classPlusFilenameHash}`;
+  } else {
+    const filenameHash = hashFn(filename);
+    return `_${body}_${filenameHash}`;
+  }
+}
+
+function isShortcut(token, shortcuts) {
+  return shortcuts.some((s) => s[0] === token);
+}
+
+async function processDirective({ body: token, start, end, type }, options, uno, filename) {
+  const isShortcutOrUtility = isShortcut(token, uno.config.shortcuts) || await needsGenerated(token, uno);
+  if (!isShortcutOrUtility)
+    return;
+  const generatedClassName = generateClassName(token, options, filename);
+  const content = type === "directiveShorthand" ? `${generatedClassName}={${token}}` : generatedClassName;
+  return {
+    rulesToGenerate: { [generatedClassName]: [token] },
+    codeUpdate: { content, start, end }
+  };
+}
+
+async function sortClassesIntoCategories(body, options, uno, filename) {
+  const { combine = true } = options;
+  const rulesToGenerate = {};
+  const ignore = [];
+  const classes = body.trim().split(/\s+/);
+  const knownClassesToCombine = [];
+  for (const token of classes) {
+    const isShortcutOrUtility = isShortcut(token, uno.config.shortcuts) || await needsGenerated(token, uno);
+    if (!isShortcutOrUtility) {
+      ignore.push(token);
+      continue;
+    }
+    if (combine) {
+      knownClassesToCombine.push(token);
+    } else {
+      const generatedClassName = generateClassName(token, options, filename);
+      rulesToGenerate[generatedClassName] = [token];
+    }
+  }
+  if (knownClassesToCombine.length) {
+    const generatedClassName = generateClassName(knownClassesToCombine.join(" "), options, filename);
+    rulesToGenerate[generatedClassName] = knownClassesToCombine;
+  }
+  return { rulesToGenerate, ignore };
+}
+
+const expressionsRE = /{[^{}]+?}/g;
+const classesRE = /(["'\`])([\S\s]+?)\1/g;
+async function processExpressions(body, options, uno, filename) {
+  const rulesToGenerate = {};
+  const updatedExpressions = [];
+  let restOfBody = body;
+  const expressions = [...body.matchAll(expressionsRE)];
+  for (let [expression] of expressions) {
+    restOfBody = restOfBody.replace(expression, "").trim();
+    const classes = [...expression.matchAll(classesRE)];
+    for (const [withQuotes, quoteMark, withoutQuotes] of classes) {
+      const { rulesToGenerate: rulesFromExpression, ignore } = await sortClassesIntoCategories(withoutQuotes, options, uno, filename);
+      Object.assign(rulesToGenerate, rulesFromExpression);
+      const updatedClasses = Object.keys(rulesFromExpression).concat(ignore).join(" ");
+      expression = expression.replace(withQuotes, quoteMark + updatedClasses + quoteMark);
+    }
+    updatedExpressions.push(expression);
+  }
+  return { rulesToGenerate, updatedExpressions, restOfBody };
+}
+
+async function processClassBody({ body, start, end }, options, uno, filename) {
+  const expandedBody = core.expandVariantGroup(body);
+  const { rulesToGenerate: rulesFromExpressions, restOfBody, updatedExpressions } = await processExpressions(expandedBody, options, uno, filename);
+  const { rulesToGenerate: rulesFromRegularClasses, ignore } = await sortClassesIntoCategories(restOfBody, options, uno, filename);
+  const rulesToGenerate = { ...rulesFromExpressions, ...rulesFromRegularClasses };
+  if (!Object.keys(rulesToGenerate).length)
+    return {};
+  const content = Object.keys(rulesFromRegularClasses).concat(ignore).concat(updatedExpressions).join(" ");
+  const codeUpdate = {
+    content,
+    start,
+    end
+  };
+  return { rulesToGenerate, codeUpdate };
+}
+
+async function processClasses(classes, options, uno, filename) {
+  const result = {
+    rulesToGenerate: {},
+    codeUpdates: []
+  };
+  for (const foundClass of classes) {
+    if (foundClass.type === "regular") {
+      const { rulesToGenerate, codeUpdate } = await processClassBody(foundClass, options, uno, filename);
+      if (rulesToGenerate)
+        Object.assign(result.rulesToGenerate, rulesToGenerate);
+      if (codeUpdate)
+        result.codeUpdates.push(codeUpdate);
+    } else {
+      const { rulesToGenerate, codeUpdate } = await processDirective(foundClass, options, uno, filename) || {};
+      if (rulesToGenerate)
+        Object.assign(result.rulesToGenerate, rulesToGenerate);
+      if (codeUpdate)
+        result.codeUpdates.push(codeUpdate);
+    }
+  }
+  return result;
+}
+
+async function transformClasses({ content, filename, uno, options }) {
+  const classesToProcess = findClasses(content);
+  if (!classesToProcess.length)
+    return;
+  const { rulesToGenerate, codeUpdates } = await processClasses(classesToProcess, options, uno, filename);
+  if (!Object.keys(rulesToGenerate).length)
+    return;
+  const { map, code } = updateTemplateCodeIfNeeded(codeUpdates, content, filename);
+  const generatedStyles = await generateStyles(rulesToGenerate, uno);
+  const codeWithGeneratedStyles = addGeneratedStylesIntoStyleBlock(code, generatedStyles);
+  return {
+    code: codeWithGeneratedStyles,
+    map
+  };
+}
+function updateTemplateCodeIfNeeded(codeUpdates, source, filename) {
+  if (!codeUpdates.length)
+    return { code: source, map: void 0 };
+  const s = new MagicString__default(source);
+  for (const { start, end, content } of codeUpdates)
+    s.overwrite(start, end, content);
+  return {
+    code: s.toString(),
+    map: s.generateMap({ hires: true, source: filename })
+  };
+}
+const removeCommentsToMakeGlobalWrappingEasy = true;
+async function generateStyles(rulesToGenerate, uno) {
+  const originalShortcuts = uno.config.shortcuts;
+  const shortcutsForThisComponent = Object.entries(rulesToGenerate);
+  uno.config.shortcuts = [...originalShortcuts, ...shortcutsForThisComponent];
+  const selectorsToGenerate = Object.keys(rulesToGenerate);
+  const { css } = await uno.generate(
+    selectorsToGenerate,
+    {
+      preflights: false,
+      safelist: false,
+      minify: removeCommentsToMakeGlobalWrappingEasy
+    }
+  );
+  uno.config.shortcuts = originalShortcuts;
+  const cssPreparedForSvelteCompiler = wrapSelectorsWithGlobal(css);
+  return cssPreparedForSvelteCompiler;
+}
+
+function removeOuterQuotes(input) {
+  if (!input)
+    return "";
+  const match = input.match(/^(['"]).*\1$/);
+  return match ? input.slice(1, -1) : input;
+}
+
+function writeUtilStyles([, selector, body, parent], s, node, childNode) {
+  if (!selector)
+    return;
+  const selectorChanged = selector !== ".\\-";
+  if (!parent && !selectorChanged)
+    return s.appendRight(childNode.loc.end.offset, body);
+  const originalSelector = cssTree.generate(node.prelude);
+  if (parent && !selectorChanged) {
+    const css2 = `${parent}{${originalSelector}{${body}}}`;
+    return s.appendLeft(node.loc.end.offset, css2);
+  }
+  const utilSelector = selector.replace(core.regexScopePlaceholder, " ");
+  const updatedSelector = generateUpdatedSelector(utilSelector, node.prelude);
+  const svelteCompilerReadySelector = surroundAllButOriginalSelectorWithGlobal(originalSelector, updatedSelector);
+  const rule = `${svelteCompilerReadySelector}{${body}}`;
+  const css = parent ? `${parent}{${rule}}` : rule;
+  s.appendLeft(node.loc.end.offset, css);
+}
+function generateUpdatedSelector(selector, _prelude) {
+  const selectorAST = cssTree.parse(selector, {
+    context: "selector"
+  });
+  const prelude = cssTree.clone(_prelude);
+  prelude.children.forEach((child) => {
+    const parentSelectorAst = cssTree.clone(selectorAST);
+    parentSelectorAst.children.forEach((i) => {
+      if (i.type === "ClassSelector" && i.name === "\\-")
+        Object.assign(i, cssTree.clone(child));
+    });
+    Object.assign(child, parentSelectorAst);
+  });
+  return cssTree.generate(prelude);
+}
+function surroundAllButOriginalSelectorWithGlobal(originalSelector, updatedSelector) {
+  const wrapWithGlobal = (str) => `:global(${str})`;
+  const originalSelectors = originalSelector.split(",").map((s) => s.trim());
+  const updatedSelectors = updatedSelector.split(",").map((s) => s.trim());
+  const resultSelectors = originalSelectors.map((original, index) => {
+    const updated = updatedSelectors[index];
+    const [prefix, suffix] = updated.split(original).map((s) => s.trim());
+    const wrappedPrefix = prefix ? wrapWithGlobal(prefix) : "";
+    if (!suffix)
+      return `${wrappedPrefix} ${original}`.trim();
+    const indexOfFirstCombinator = findFirstCombinatorIndex(suffix);
+    if (indexOfFirstCombinator === -1)
+      return `${wrappedPrefix} ${original}${suffix}`.trim();
+    const pseudo = suffix.substring(0, indexOfFirstCombinator).trim();
+    const siblingsOrDescendants = suffix.substring(indexOfFirstCombinator).trim();
+    return `${wrappedPrefix} ${original}${pseudo} ${wrapWithGlobal(siblingsOrDescendants)}`.trim();
+  });
+  return resultSelectors.join(", ");
+}
+function findFirstCombinatorIndex(input) {
+  const combinators = [" ", ">", "~", "+"];
+  for (const c of combinators) {
+    const indexOfFirstCombinator = input.indexOf(c);
+    if (indexOfFirstCombinator !== -1)
+      return indexOfFirstCombinator;
+  }
+  return -1;
+}
+
+async function getUtils(body, uno) {
+  const classNames = core.expandVariantGroup(body).split(/\s+/g).map((className) => className.trim().replace(/\\/, ""));
+  const utils = await parseUtils(classNames, uno);
+  const sortedByRankIndex = utils.sort(([aIndex], [bIndex]) => aIndex - bIndex);
+  const sortedByParentOrders = sortedByRankIndex.sort(([, , , aParent], [, , , bParent]) => (aParent ? uno.parentOrders.get(aParent) ?? 0 : 0) - (bParent ? uno.parentOrders.get(bParent) ?? 0 : 0));
+  return sortedByParentOrders.reduce((acc, item) => {
+    const [, selector, body2, parent] = item;
+    const sibling = acc.find(([, targetSelector, , targetParent]) => targetSelector === selector && targetParent === parent);
+    if (sibling)
+      sibling[2] += body2;
+    else
+      acc.push([...item]);
+    return acc;
+  }, []);
+}
+async function parseUtils(classNames, uno) {
+  const foundUtils = [];
+  for (const token of classNames) {
+    const util = await uno.parseToken(token, "-");
+    if (util)
+      foundUtils.push(util);
+    else
+      core.warnOnce(`'${token}' not found. You have a typo or need to add a preset.`);
+  }
+  return foundUtils.flat();
+}
+
+const DEFAULT_APPLY_VARIABLES = ["--at-apply"];
+async function transformApply({ content, uno, prepend, applyVariables, filename }) {
+  applyVariables = core.toArray(applyVariables || DEFAULT_APPLY_VARIABLES);
+  const hasApply = content.includes("@apply") || applyVariables.some((v) => content.includes(v));
+  if (!hasApply)
+    return;
+  const s = new MagicString__default(content);
+  await walkCss({ s, uno, applyVariables });
+  if (!s.hasChanged())
+    return;
+  if (prepend)
+    s.prepend(prepend);
+  return {
+    code: s.toString(),
+    map: s.generateMap({ hires: true, source: filename || "" })
+  };
+}
+async function walkCss(ctx) {
+  const ast = cssTree.parse(ctx.s.original, {
+    parseAtrulePrelude: false,
+    positions: true
+  });
+  if (ast.type !== "StyleSheet")
+    return;
+  const stack = [];
+  cssTree.walk(ast, (node) => {
+    if (node.type === "Rule")
+      stack.push(handleApply(ctx, node));
+  });
+  await Promise.all(stack);
+}
+async function handleApply(ctx, node) {
+  const parsePromises = node.block.children.map(async (childNode) => {
+    await parseApply(ctx, node, childNode);
+  });
+  await Promise.all(parsePromises);
+}
+async function parseApply({ s, uno, applyVariables }, node, childNode) {
+  const body = getChildNodeValue(childNode, applyVariables);
+  if (!body)
+    return;
+  const utils = await getUtils(body, uno);
+  if (!utils.length)
+    return;
+  for (const util of utils)
+    writeUtilStyles(util, s, node, childNode);
+  s.remove(childNode.loc.start.offset, childNode.loc.end.offset);
+}
+function getChildNodeValue(childNode, applyVariables) {
+  if (childNode.type === "Atrule" && childNode.name === "apply" && childNode.prelude && childNode.prelude.type === "Raw")
+    return childNode.prelude.value.trim();
+  if (childNode.type === "Declaration" && applyVariables.includes(childNode.property) && childNode.value.type === "Raw")
+    return removeOuterQuotes(childNode.value.value.trim());
+}
+
+function UnocssSveltePreprocess(options = {}, unoContextFromVite) {
+  if (!options.classPrefix)
+    options.classPrefix = "spu-";
+  let uno;
+  return {
+    markup: async ({ content, filename }) => {
+      if (!uno)
+        uno = await getGenerator(options.configOrPath, unoContextFromVite);
+      return await transformClasses({ content, filename: filename || "", uno, options });
+    },
+    style: async ({ content, attributes, filename }) => {
+      const addPreflights = !!attributes["uno:preflights"];
+      const addSafelist = !!attributes["uno:safelist"];
+      const checkForApply = options.applyVariables !== false;
+      const changeNeeded = addPreflights || addSafelist || checkForApply;
+      if (!changeNeeded)
+        return;
+      if (!uno)
+        uno = await getGenerator(options.configOrPath);
+      let preflightsSafelistCss = "";
+      if (addPreflights || addSafelist) {
+        if (unoContextFromVite)
+          core.warnOnce("Do not place preflights or safelist within an individual component as they already placed in your global styles injected into the head tag. These options are only for component libraries.");
+        const { css } = await uno.generate([], { preflights: addPreflights, safelist: addSafelist, minify: true });
+        preflightsSafelistCss = css;
+      }
+      if (checkForApply) {
+        return await transformApply({
+          content,
+          prepend: preflightsSafelistCss,
+          uno,
+          applyVariables: options.applyVariables,
+          filename
+        });
+      }
+      if (preflightsSafelistCss)
+        return { code: preflightsSafelistCss };
+    }
+  };
+}
+async function getGenerator(configOrPath, unoContextFromVite) {
+  if (unoContextFromVite) {
+    await unoContextFromVite.ready;
+    return unoContextFromVite.uno;
+  }
+  const defaults = {
+    presets: [
+      presetUno__default()
+    ]
+  };
+  const { config: config$1 } = await config.loadConfig(process.cwd(), configOrPath);
+  return core.createGenerator(config$1, defaults);
+}
+
+module.exports = UnocssSveltePreprocess;

package/dist/preprocess.d.ts

@@ -0,0 +1,8 @@
+import { PreprocessorGroup } from 'svelte/types/compiler/preprocess';
+import { U as UnocssSveltePreprocessOptions, S as SvelteScopedContext } from './types.d-48b837f0.js';
+export { S as SvelteScopedContext, a as TransformApplyOptions, T as TransformClassesOptions, U as UnocssSveltePreprocessOptions } from './types.d-48b837f0.js';
+import '@unocss/core';
+
+declare function UnocssSveltePreprocess(options?: UnocssSveltePreprocessOptions, unoContextFromVite?: SvelteScopedContext): PreprocessorGroup;
+
+export { UnocssSveltePreprocess as default };