@dialpad/dialtone-css 8.81.0-next.1 → 8.81.0-next.2

package/lib/build/js/dialtone_migrate/index.mjs

@@ -363,6 +363,7 @@ function parseArgs (args) {
     help: args.includes('--help'),
     dryRun: args.includes('--dry-run'),
     autoYes: args.includes('--yes'),
+    noImport: args.includes('--no-import'),
     healthCheck: args.includes('--health-check'),
     all: args.includes('--all'),
     cwd: cwdIndex !== -1 && args[cwdIndex + 1]
@@ -778,6 +779,7 @@ async function runStandaloneMigration (migration, opts) {
   const args = ['--cwd', opts.cwd];
   if (opts.dryRun) args.push('--dry-run');
   if (opts.autoYes) args.push('--yes');
+  if (opts.noImport) args.push('--no-import');
 
   return new Promise((resolve, reject) => {
     const child = spawn(process.execPath, [scriptPath, ...args], {

package/lib/build/js/dialtone_migrate_flex_to_stack/index.mjs

@@ -1028,15 +1028,28 @@ async function processFile(filePath, options) {
       newContent = newContent.slice(0, r.start) + r.replacement + newContent.slice(r.end);
     }
 
-    await fs.writeFile(filePath, newContent, 'utf-8');
-    console.log(log.green(`   ✓ Saved ${changes} change(s)`));
+    // Auto-inject DtStack import before writing; fall back to manual instructions if needed.
+    // Skipped entirely when --no-import is set (e.g. DtStack is globally registered).
+    const importCheck = options.noImport ? null : detectMissingStackImport(newContent, changes > 0);
+    let finalContent = newContent;
+    if (importCheck?.needsImport) {
+      const injected = injectComponentImport(newContent, 'DtStack', importCheck.suggestedPath);
+      if (injected) finalContent = injected;
+    }
+
+    await fs.writeFile(filePath, finalContent, 'utf-8');
 
-    // Check if file needs DtStack import
-    const importCheck = detectMissingStackImport(newContent, changes > 0);
     if (importCheck?.needsImport) {
+      if (finalContent !== newContent) {
+        console.log(log.green(`   ✓ Saved ${changes} change(s) + added DtStack import`));
+        return { changes, skipped, needsImport: false };
+      }
+      console.log(log.green(`   ✓ Saved ${changes} change(s)`));
       printImportInstructions(filePath, importCheck);
       return { changes, skipped, needsImport: true };
     }
+
+    console.log(log.green(`   ✓ Saved ${changes} change(s)`));
   }
 
   return { changes, skipped, needsImport: false };
@@ -1133,6 +1146,70 @@ function detectImportPattern(content) {
   return '@/components/stack';
 }
 
+/**
+ * Attempt to auto-insert a component import (and Options API registration) into a Vue SFC.
+ * Returns updated content on success, or null when the insertion can't be made safely
+ * (caller should fall back to printing manual instructions).
+ *
+ * Handles:
+ *   - <script setup>: inserts import after the last existing import; no components
+ *     registration needed (auto-registered when imported in setup context).
+ *   - Options API with existing `components: {}`: inserts import + adds to the object.
+ *   - Options API without a components object: returns null (manual step required).
+ */
+function injectComponentImport(content, componentName, importPath) {
+  if (new RegExp(`import\\s+(?:\\{[^}]*\\b${componentName}\\b[^}]*\\}|${componentName})\\s+from`).test(content)) {
+    return null; // already imported
+  }
+
+  const isScriptSetup = /<script\b[^>]*\bsetup\b/.test(content);
+  const scriptBlockRe = isScriptSetup
+    ? /<script\b[^>]*\bsetup\b[^>]*>([\s\S]*?)<\/script>/
+    : /<script\b(?![^>]*\bsetup\b)[^>]*>([\s\S]*?)<\/script>/;
+  const scriptMatch = scriptBlockRe.exec(content);
+  if (!scriptMatch) return null;
+
+  const scriptInnerStart = scriptMatch.index + scriptMatch[0].indexOf('>') + 1;
+  const scriptInner = scriptMatch[1];
+
+  const importLineRe = /^import\s.+from\s+['"][^'"]+['"]\s*;?/gm;
+  let lastImportMatch = null;
+  let m;
+  while ((m = importLineRe.exec(scriptInner)) !== null) lastImportMatch = m;
+
+  const insertOffset = lastImportMatch
+    ? scriptInnerStart + lastImportMatch.index + lastImportMatch[0].length
+    : scriptInnerStart;
+
+  const importLine = `\nimport { ${componentName} } from '${importPath}';`;
+  let out = content.slice(0, insertOffset) + importLine + content.slice(insertOffset);
+
+  if (isScriptSetup) return out; // import alone is sufficient for <script setup>
+
+  // Options API: also register in components: {}
+  // Re-exec against the updated content to get current positions, then restrict
+  // the components: { search to within the script block and after export default
+  // to avoid matching template bindings or helper objects that appear earlier.
+  const scriptMatchUpdated = scriptBlockRe.exec(out);
+  if (!scriptMatchUpdated) return null;
+  const scriptBodyStart = scriptMatchUpdated.index + scriptMatchUpdated[0].indexOf('>') + 1;
+  const scriptBodyText = scriptMatchUpdated[1];
+  const exportDefaultMatch = /\bexport\s+default\b/.exec(scriptBodyText);
+  if (!exportDefaultMatch) return null;
+  const searchFrom = scriptBodyStart + exportDefaultMatch.index;
+  const compMatchInSlice = /components\s*:\s*\{/.exec(out.slice(searchFrom));
+  if (!compMatchInSlice) return null; // no components object — can't safely auto-register
+  const compAbsIndex = searchFrom + compMatchInSlice.index;
+
+  const lineStart = out.lastIndexOf('\n', compAbsIndex) + 1;
+  const compIndent = out.slice(lineStart, compAbsIndex).match(/^[ \t]*/)[0];
+  const memberIndent = compIndent + '  ';
+  const insertAt = compAbsIndex + compMatchInSlice[0].length;
+  out = out.slice(0, insertAt) + `\n${memberIndent}${componentName},` + out.slice(insertAt);
+
+  return out;
+}
+
 /**
  * Print instructions for adding DtStack import and registration
  * @param {string} filePath - Path to the file
@@ -1179,6 +1256,7 @@ function parseArgs() {
     files: [], // Explicit file list via --file flag
     showOutline: false, // Add migration marker for visual debugging
     removeOutline: false, // Remove migration markers (cleanup mode)
+    noImport: false, // Skip import injection (for apps that globally register DtStack)
   };
 
   for (let i = 0; i < args.length; i++) {
@@ -1206,11 +1284,12 @@ Options:
   --yes, -y        Apply all changes without prompting
   --show-outline   Add data-migrate-outline attribute for visual debugging
   --remove-outline Remove data-migrate-outline attributes after review
+  --no-import      Skip import injection (use when DtStack is globally registered)
   --help, -h       Show help
 
 Post-Migration Steps:
   1. Review template changes with data-migrate-outline markers
-  2. Add DtStack imports as instructed by the script
+  2. Add DtStack imports as instructed by the script (skipped with --no-import)
   3. Test your application
   4. Run with --remove-outline to clean up markers
 
@@ -1252,6 +1331,8 @@ Examples:
       options.showOutline = true;
     } else if (arg === '--remove-outline') {
       options.removeOutline = true;
+    } else if (arg === '--no-import') {
+      options.noImport = true;
     } else if (arg === '--file' && args[i + 1]) {
       const filePath = args[++i];
       options.files.push(filePath);
@@ -1348,6 +1429,7 @@ async function main() {
         yes: options.yes,
         showOutline: options.showOutline,
         validate: options.validate,
+        noImport: options.noImport,
       });
     }
 

package/lib/build/js/dialtone_migrate_typography/index.mjs

@@ -1002,17 +1002,31 @@ function flagDynamicClasses (content) {
   const re = new RegExp(DYNAMIC_CLASS_PATTERN);
   if (!re.test(content)) return content;
 
-  const lines = content.split('\n');
-  const out = lines.map(line => {
-    if (!/:class=|v-bind:class=/.test(line)) return line;
-    if (!new RegExp(DYNAMIC_CLASS_PATTERN).test(line)) return line;
-    // Preserve the line's indentation; put the marker on its own line above.
-    const indentMatch = line.match(/^[ \t]*/);
-    const indent = indentMatch ? indentMatch[0] : '';
-    return `${indent}<!-- dt-text-migrate: review dynamic class -->\n${line}`;
-  });
+  // Walk whole opening tags (quote-aware) so the marker is never injected between
+  // attributes of a multi-line element. The old line-by-line approach would insert
+  // the comment before the :class= line, which lands it between attributes when the
+  // opening tag spans multiple lines.
+  const tagRe = new RegExp(`<[a-zA-Z][\\w-]*(${ATTR_BODY})>`, 'g');
+  const insertions = [];
+  let m;
 
-  return out.join('\n');
+  while ((m = tagRe.exec(content)) !== null) {
+    if (!new RegExp(DYNAMIC_CLASS_PATTERN).test(m[0])) continue;
+    const before = content.slice(Math.max(0, m.index - 80), m.index);
+    if (/<!--\s*dt-text-migrate:\s*review dynamic class\s*-->/.test(before)) continue;
+    insertions.push(m.index);
+  }
+
+  if (insertions.length === 0) return content;
+
+  let out = content;
+  for (const idx of insertions.reverse()) {
+    const lineStart = out.lastIndexOf('\n', idx - 1) + 1;
+    const indent = out.slice(lineStart, idx).match(/^[ \t]*/)[0];
+    const marker = `${indent}<!-- dt-text-migrate: review dynamic class -->\n`;
+    out = out.slice(0, lineStart) + marker + out.slice(lineStart);
+  }
+  return out;
 }
 
 // Find composed typography classes on tags outside the rewrite scope
@@ -1245,6 +1259,70 @@ function detectMissingDtTextImport (content, usesText) {
   };
 }
 
+/**
+ * Attempt to auto-insert a component import (and Options API registration) into a Vue SFC.
+ * Returns updated content on success, or null when the insertion can't be made safely
+ * (caller should fall back to printing manual instructions).
+ *
+ * Handles:
+ *   - <script setup>: inserts import after the last existing import; no components
+ *     registration needed (auto-registered when imported in setup context).
+ *   - Options API with existing `components: {}`: inserts import + adds to the object.
+ *   - Options API without a components object: returns null (manual step required).
+ */
+export function injectComponentImport (content, componentName, importPath) {
+  if (new RegExp(`import\\s+(?:\\{[^}]*\\b${componentName}\\b[^}]*\\}|${componentName})\\s+from`).test(content)) {
+    return null; // already imported
+  }
+
+  const isScriptSetup = /<script\b[^>]*\bsetup\b/.test(content);
+  const scriptBlockRe = isScriptSetup
+    ? /<script\b[^>]*\bsetup\b[^>]*>([\s\S]*?)<\/script>/
+    : /<script\b(?![^>]*\bsetup\b)[^>]*>([\s\S]*?)<\/script>/;
+  const scriptMatch = scriptBlockRe.exec(content);
+  if (!scriptMatch) return null;
+
+  const scriptInnerStart = scriptMatch.index + scriptMatch[0].indexOf('>') + 1;
+  const scriptInner = scriptMatch[1];
+
+  const importLineRe = /^import\s.+from\s+['"][^'"]+['"]\s*;?/gm;
+  let lastImportMatch = null;
+  let m;
+  while ((m = importLineRe.exec(scriptInner)) !== null) lastImportMatch = m;
+
+  const insertOffset = lastImportMatch
+    ? scriptInnerStart + lastImportMatch.index + lastImportMatch[0].length
+    : scriptInnerStart;
+
+  const importLine = `\nimport { ${componentName} } from '${importPath}';`;
+  let out = content.slice(0, insertOffset) + importLine + content.slice(insertOffset);
+
+  if (isScriptSetup) return out; // import alone is sufficient for <script setup>
+
+  // Options API: also register in components: {}
+  // Re-exec against the updated content to get current positions, then restrict
+  // the components: { search to within the script block and after export default
+  // to avoid matching template bindings or helper objects that appear earlier.
+  const scriptMatchUpdated = scriptBlockRe.exec(out);
+  if (!scriptMatchUpdated) return null;
+  const scriptBodyStart = scriptMatchUpdated.index + scriptMatchUpdated[0].indexOf('>') + 1;
+  const scriptBodyText = scriptMatchUpdated[1];
+  const exportDefaultMatch = /\bexport\s+default\b/.exec(scriptBodyText);
+  if (!exportDefaultMatch) return null;
+  const searchFrom = scriptBodyStart + exportDefaultMatch.index;
+  const compMatchInSlice = /components\s*:\s*\{/.exec(out.slice(searchFrom));
+  if (!compMatchInSlice) return null; // no components object — can't safely auto-register
+  const compAbsIndex = searchFrom + compMatchInSlice.index;
+
+  const lineStart = out.lastIndexOf('\n', compAbsIndex) + 1;
+  const compIndent = out.slice(lineStart, compAbsIndex).match(/^[ \t]*/)[0];
+  const memberIndent = compIndent + '  ';
+  const insertAt = compAbsIndex + compMatchInSlice[0].length;
+  out = out.slice(0, insertAt) + `\n${memberIndent}${componentName},` + out.slice(insertAt);
+
+  return out;
+}
+
 function printImportInstructions (filePath, importCheck) {
   console.log(log.yellow('\n⚠️  ACTION REQUIRED: Add DtText import and registration'));
   log.cyan(`   File: ${filePath}`);
@@ -1450,9 +1528,6 @@ async function processFile (filePath, options) {
 
   if (!shouldApply) return { changes: 0, needsImport: false };
 
-  await fs.writeFile(filePath, transformed, 'utf-8');
-  console.log(log.green('   ✓ Saved'));
-
   // Only warn about missing DtText import when we actually INSERTED new <dt-text> elements
   // — review-marker-only changes (eyebrow/d-code--sm/d-fs-* flags) don't require an import.
   // Use a count delta (not boolean presence) so partial migrations on a file that already
@@ -1460,14 +1535,34 @@ async function processFile (filePath, options) {
   const beforeCount = (content.match(/<dt-text\b/g) || []).length;
   const afterCount = (transformed.match(/<dt-text\b/g) || []).length;
   const addedDtText = afterCount > beforeCount;
-  const importCheck = detectMissingDtTextImport(transformed, addedDtText);
-  if (importCheck?.needsImport) printImportInstructions(filePath, importCheck);
+  // Auto-inject DtText import before writing; fall back to manual instructions if needed.
+  // Skipped entirely when --no-import is set (e.g. DtText is globally registered).
+  const importCheck = options.noImport ? null : detectMissingDtTextImport(transformed, addedDtText);
+
+  let finalContent = transformed;
+  if (importCheck?.needsImport) {
+    const injected = injectComponentImport(transformed, 'DtText', importCheck.suggestedPath);
+    if (injected) finalContent = injected;
+  }
+
+  await fs.writeFile(filePath, finalContent, 'utf-8');
+
+  if (importCheck?.needsImport) {
+    if (finalContent !== transformed) {
+      console.log(log.green('   ✓ Saved + added DtText import'));
+    } else {
+      console.log(log.green('   ✓ Saved'));
+      printImportInstructions(filePath, importCheck);
+    }
+  } else {
+    console.log(log.green('   ✓ Saved'));
+  }
 
   if (notes.length > 0) {
     for (const note of notes) log.gray(`   ℹ ${note}`);
   }
 
-  return { changes: 1, needsImport: !!importCheck?.needsImport };
+  return { changes: 1, needsImport: importCheck?.needsImport && finalContent === transformed };
 }
 
 //------------------------------------------------------------------------------
@@ -1484,6 +1579,7 @@ function parseArgs () {
     files: [],
     removeMarkers: false,
     validate: false,
+    noImport: false, // Skip import injection (for apps that globally register DtText)
   };
 
   for (let i = 0; i < args.length; i++) {
@@ -1503,6 +1599,7 @@ Options:
   --remove-markers    Strip all <!-- dt-text-migrate: review ... --> comments
   --validate          Read-only mode: scan existing <dt-text> for prop bugs
                       (object syntax, invalid values, mixed CSS classes)
+  --no-import         Skip import injection (use when DtText is globally registered)
   --help, -h          Show help
 
 Examples:
@@ -1512,7 +1609,7 @@ Examples:
   npx dialtone-migrate-typography --remove-markers --cwd ./src
 
 Post-Migration Steps:
-  1. Add DtText imports as instructed by the script
+  1. Add DtText imports as instructed by the script (skipped with --no-import)
   2. Review files marked with <!-- dt-text-migrate: review --> comments
   3. Run with --remove-markers to clean up all markers after manual review
 `);
@@ -1531,6 +1628,8 @@ Post-Migration Steps:
       options.removeMarkers = true;
     } else if (arg === '--validate') {
       options.validate = true;
+    } else if (arg === '--no-import') {
+      options.noImport = true;
     }
   }
 

package/lib/build/js/dialtone_migrate_typography/test.mjs

@@ -12,6 +12,7 @@ import {
   detectImportPathFor,
   removeMarkersForTest,
   validateDtTextProps,
+  injectComponentImport,
 } from './index.mjs';
 
 function run (input) {
@@ -987,6 +988,26 @@ describe('wrapper safety — positive cases still convert (no false positives)',
   });
 });
 
+describe('dynamic :class flagging — multi-line element', () => {
+  it('marker goes before the opening < of a multi-line element, not between attributes', () => {
+    const input = [
+      '<div',
+      '  v-if="condition"',
+      '  :class="{ \'d-headline--md\': isHeading }"',
+      '>x</div>',
+    ].join('\n');
+    const out = run(input);
+    // Marker must appear on its own line before <div, never inside the tag
+    assert.ok(out.includes('<!-- dt-text-migrate: review dynamic class -->'), 'should emit marker');
+    const markerIdx = out.indexOf('<!-- dt-text-migrate: review dynamic class -->');
+    const divIdx = out.indexOf('<div');
+    assert.ok(markerIdx < divIdx, 'marker must precede the opening <div');
+    // The tag itself must remain structurally intact (comment not injected mid-tag)
+    assert.ok(out.includes('  :class='), ':class line must be unchanged');
+    assert.ok(out.includes('  v-if='), 'v-if line must be unchanged');
+  });
+});
+
 describe('wrapper safety — override path (d-fw-*, d-fc-*, etc.) with component children', () => {
   // Override path mirrors the composed-path safety: if the rewriteable tag
   // wraps a component/block child, skip auto-conversion. Behavior here is a
@@ -1018,3 +1039,152 @@ describe('wrapper safety — override path (d-fw-*, d-fc-*, etc.) with component
     );
   });
 });
+
+// ---------------------------------------------------------------------------
+// injectComponentImport — auto import insertion
+// ---------------------------------------------------------------------------
+
+describe('injectComponentImport — <script setup>', () => {
+  it('inserts import after the last existing import', () => {
+    const content = [
+      '<script setup>',
+      'import { DtStack } from \'@dialpad/dialtone-vue\';',
+      '</script>',
+      '<template><p>x</p></template>',
+    ].join('\n');
+    const out = injectComponentImport(content, 'DtText', '@dialpad/dialtone-vue');
+    assert.ok(out.includes('import { DtText } from \'@dialpad/dialtone-vue\';'), 'import inserted');
+    const stackIdx = out.indexOf('DtStack');
+    const textIdx = out.indexOf('DtText');
+    assert.ok(textIdx > stackIdx, 'DtText import comes after DtStack import');
+  });
+
+  it('inserts import when no existing imports present', () => {
+    const content = [
+      '<script setup>',
+      'const x = 1;',
+      '</script>',
+    ].join('\n');
+    const out = injectComponentImport(content, 'DtText', '@dialpad/dialtone-vue');
+    assert.ok(out.includes('import { DtText } from \'@dialpad/dialtone-vue\';'), 'import inserted');
+  });
+
+  it('returns null when component is already imported', () => {
+    const content = [
+      '<script setup>',
+      'import { DtText } from \'@dialpad/dialtone-vue\';',
+      '</script>',
+    ].join('\n');
+    assert.equal(injectComponentImport(content, 'DtText', '@dialpad/dialtone-vue'), null);
+  });
+
+  it('does not add to components object (not needed for script setup)', () => {
+    const content = [
+      '<script setup>',
+      'import { DtStack } from \'@dialpad/dialtone-vue\';',
+      '</script>',
+    ].join('\n');
+    const out = injectComponentImport(content, 'DtText', '@dialpad/dialtone-vue');
+    assert.ok(!out.includes('components:'), 'no components object added for script setup');
+  });
+
+  it('handles <script setup lang="ts">', () => {
+    const content = [
+      '<script setup lang="ts">',
+      'import { DtStack } from \'@dialpad/dialtone-vue\';',
+      '</script>',
+    ].join('\n');
+    const out = injectComponentImport(content, 'DtText', '@dialpad/dialtone-vue');
+    assert.ok(out !== null, 'should succeed');
+    assert.ok(out.includes('import { DtText } from \'@dialpad/dialtone-vue\';'));
+  });
+});
+
+describe('injectComponentImport — Options API', () => {
+  it('inserts import and adds to existing components object', () => {
+    const content = [
+      '<script>',
+      'import { DtStack } from \'@dialpad/dialtone-vue\';',
+      'export default {',
+      '  components: {',
+      '    DtStack,',
+      '  },',
+      '};',
+      '</script>',
+    ].join('\n');
+    const out = injectComponentImport(content, 'DtText', '@dialpad/dialtone-vue');
+    assert.ok(out.includes('import { DtText } from \'@dialpad/dialtone-vue\';'), 'import inserted');
+    assert.ok(out.includes('DtText,'), 'DtText added to components');
+    assert.ok(out.includes('DtStack,'), 'existing DtStack preserved');
+  });
+
+  it('returns null when no components object exists', () => {
+    const content = [
+      '<script>',
+      'export default {',
+      '  data () { return {}; },',
+      '};',
+      '</script>',
+    ].join('\n');
+    assert.equal(injectComponentImport(content, 'DtText', '@dialpad/dialtone-vue'), null);
+  });
+
+  it('returns null when no script block found', () => {
+    const content = '<template><p>x</p></template>';
+    assert.equal(injectComponentImport(content, 'DtText', '@dialpad/dialtone-vue'), null);
+  });
+
+  it('returns null when component is already imported', () => {
+    const content = [
+      '<script>',
+      'import { DtText } from \'@dialpad/dialtone-vue\';',
+      'export default { components: { DtText } };',
+      '</script>',
+    ].join('\n');
+    assert.equal(injectComponentImport(content, 'DtText', '@dialpad/dialtone-vue'), null);
+  });
+
+  it('does not corrupt a helper object with components: { before export default', () => {
+    const content = [
+      '<script>',
+      'import { DtStack } from \'@dialpad/dialtone-vue\';',
+      'const editorConfig = { components: { toolbar: true } };',
+      'export default {',
+      '  components: {',
+      '    DtStack,',
+      '  },',
+      '};',
+      '</script>',
+    ].join('\n');
+    const out = injectComponentImport(content, 'DtText', '@dialpad/dialtone-vue');
+    assert.ok(out, 'should return updated content');
+    assert.ok(out.includes('import { DtText } from \'@dialpad/dialtone-vue\';'), 'import inserted');
+    // DtText must be added to export default components, not to the editorConfig object
+    const editorConfigIdx = out.indexOf('editorConfig');
+    const dtTextIdx = out.indexOf('DtText,');
+    const exportDefaultIdx = out.indexOf('export default');
+    assert.ok(dtTextIdx > exportDefaultIdx, 'DtText registered after export default');
+    assert.ok(dtTextIdx > editorConfigIdx, 'DtText not inserted into editorConfig helper');
+    assert.ok(!out.slice(0, exportDefaultIdx).includes('DtText,'), 'DtText not in pre-export-default scope');
+  });
+
+  it('returns null when components: { appears only in a template binding, not in export default', () => {
+    // Simulate a file where the script has no components option but the template
+    // has a :config="{ components: { ... } }" binding — the template is masked
+    // during injectComponentImport (which operates on the full SFC), so the
+    // components: { in the template must not be matched.
+    const content = [
+      '<template>',
+      '  <some-editor :config="{ components: { toolbar: MyBar } }" />',
+      '</template>',
+      '<script>',
+      'import { DtStack } from \'@dialpad/dialtone-vue\';',
+      'export default {',
+      '  data () { return {}; },',
+      '};',
+      '</script>',
+    ].join('\n');
+    // No components: { in export default → should return null (can't auto-register)
+    assert.equal(injectComponentImport(content, 'DtText', '@dialpad/dialtone-vue'), null);
+  });
+});

package/lib/dist/js/dialtone_migrate/index.mjs

@@ -363,6 +363,7 @@ function parseArgs (args) {
     help: args.includes('--help'),
     dryRun: args.includes('--dry-run'),
     autoYes: args.includes('--yes'),
+    noImport: args.includes('--no-import'),
     healthCheck: args.includes('--health-check'),
     all: args.includes('--all'),
     cwd: cwdIndex !== -1 && args[cwdIndex + 1]
@@ -778,6 +779,7 @@ async function runStandaloneMigration (migration, opts) {
   const args = ['--cwd', opts.cwd];
   if (opts.dryRun) args.push('--dry-run');
   if (opts.autoYes) args.push('--yes');
+  if (opts.noImport) args.push('--no-import');
 
   return new Promise((resolve, reject) => {
     const child = spawn(process.execPath, [scriptPath, ...args], {

package/lib/dist/js/dialtone_migrate_flex_to_stack/index.mjs

@@ -1028,15 +1028,28 @@ async function processFile(filePath, options) {
       newContent = newContent.slice(0, r.start) + r.replacement + newContent.slice(r.end);
     }
 
-    await fs.writeFile(filePath, newContent, 'utf-8');
-    console.log(log.green(`   ✓ Saved ${changes} change(s)`));
+    // Auto-inject DtStack import before writing; fall back to manual instructions if needed.
+    // Skipped entirely when --no-import is set (e.g. DtStack is globally registered).
+    const importCheck = options.noImport ? null : detectMissingStackImport(newContent, changes > 0);
+    let finalContent = newContent;
+    if (importCheck?.needsImport) {
+      const injected = injectComponentImport(newContent, 'DtStack', importCheck.suggestedPath);
+      if (injected) finalContent = injected;
+    }
+
+    await fs.writeFile(filePath, finalContent, 'utf-8');
 
-    // Check if file needs DtStack import
-    const importCheck = detectMissingStackImport(newContent, changes > 0);
     if (importCheck?.needsImport) {
+      if (finalContent !== newContent) {
+        console.log(log.green(`   ✓ Saved ${changes} change(s) + added DtStack import`));
+        return { changes, skipped, needsImport: false };
+      }
+      console.log(log.green(`   ✓ Saved ${changes} change(s)`));
       printImportInstructions(filePath, importCheck);
       return { changes, skipped, needsImport: true };
     }
+
+    console.log(log.green(`   ✓ Saved ${changes} change(s)`));
   }
 
   return { changes, skipped, needsImport: false };
@@ -1133,6 +1146,70 @@ function detectImportPattern(content) {
   return '@/components/stack';
 }
 
+/**
+ * Attempt to auto-insert a component import (and Options API registration) into a Vue SFC.
+ * Returns updated content on success, or null when the insertion can't be made safely
+ * (caller should fall back to printing manual instructions).
+ *
+ * Handles:
+ *   - <script setup>: inserts import after the last existing import; no components
+ *     registration needed (auto-registered when imported in setup context).
+ *   - Options API with existing `components: {}`: inserts import + adds to the object.
+ *   - Options API without a components object: returns null (manual step required).
+ */
+function injectComponentImport(content, componentName, importPath) {
+  if (new RegExp(`import\\s+(?:\\{[^}]*\\b${componentName}\\b[^}]*\\}|${componentName})\\s+from`).test(content)) {
+    return null; // already imported
+  }
+
+  const isScriptSetup = /<script\b[^>]*\bsetup\b/.test(content);
+  const scriptBlockRe = isScriptSetup
+    ? /<script\b[^>]*\bsetup\b[^>]*>([\s\S]*?)<\/script>/
+    : /<script\b(?![^>]*\bsetup\b)[^>]*>([\s\S]*?)<\/script>/;
+  const scriptMatch = scriptBlockRe.exec(content);
+  if (!scriptMatch) return null;
+
+  const scriptInnerStart = scriptMatch.index + scriptMatch[0].indexOf('>') + 1;
+  const scriptInner = scriptMatch[1];
+
+  const importLineRe = /^import\s.+from\s+['"][^'"]+['"]\s*;?/gm;
+  let lastImportMatch = null;
+  let m;
+  while ((m = importLineRe.exec(scriptInner)) !== null) lastImportMatch = m;
+
+  const insertOffset = lastImportMatch
+    ? scriptInnerStart + lastImportMatch.index + lastImportMatch[0].length
+    : scriptInnerStart;
+
+  const importLine = `\nimport { ${componentName} } from '${importPath}';`;
+  let out = content.slice(0, insertOffset) + importLine + content.slice(insertOffset);
+
+  if (isScriptSetup) return out; // import alone is sufficient for <script setup>
+
+  // Options API: also register in components: {}
+  // Re-exec against the updated content to get current positions, then restrict
+  // the components: { search to within the script block and after export default
+  // to avoid matching template bindings or helper objects that appear earlier.
+  const scriptMatchUpdated = scriptBlockRe.exec(out);
+  if (!scriptMatchUpdated) return null;
+  const scriptBodyStart = scriptMatchUpdated.index + scriptMatchUpdated[0].indexOf('>') + 1;
+  const scriptBodyText = scriptMatchUpdated[1];
+  const exportDefaultMatch = /\bexport\s+default\b/.exec(scriptBodyText);
+  if (!exportDefaultMatch) return null;
+  const searchFrom = scriptBodyStart + exportDefaultMatch.index;
+  const compMatchInSlice = /components\s*:\s*\{/.exec(out.slice(searchFrom));
+  if (!compMatchInSlice) return null; // no components object — can't safely auto-register
+  const compAbsIndex = searchFrom + compMatchInSlice.index;
+
+  const lineStart = out.lastIndexOf('\n', compAbsIndex) + 1;
+  const compIndent = out.slice(lineStart, compAbsIndex).match(/^[ \t]*/)[0];
+  const memberIndent = compIndent + '  ';
+  const insertAt = compAbsIndex + compMatchInSlice[0].length;
+  out = out.slice(0, insertAt) + `\n${memberIndent}${componentName},` + out.slice(insertAt);
+
+  return out;
+}
+
 /**
  * Print instructions for adding DtStack import and registration
  * @param {string} filePath - Path to the file
@@ -1179,6 +1256,7 @@ function parseArgs() {
     files: [], // Explicit file list via --file flag
     showOutline: false, // Add migration marker for visual debugging
     removeOutline: false, // Remove migration markers (cleanup mode)
+    noImport: false, // Skip import injection (for apps that globally register DtStack)
   };
 
   for (let i = 0; i < args.length; i++) {
@@ -1206,11 +1284,12 @@ Options:
   --yes, -y        Apply all changes without prompting
   --show-outline   Add data-migrate-outline attribute for visual debugging
   --remove-outline Remove data-migrate-outline attributes after review
+  --no-import      Skip import injection (use when DtStack is globally registered)
   --help, -h       Show help
 
 Post-Migration Steps:
   1. Review template changes with data-migrate-outline markers
-  2. Add DtStack imports as instructed by the script
+  2. Add DtStack imports as instructed by the script (skipped with --no-import)
   3. Test your application
   4. Run with --remove-outline to clean up markers
 
@@ -1252,6 +1331,8 @@ Examples:
       options.showOutline = true;
     } else if (arg === '--remove-outline') {
       options.removeOutline = true;
+    } else if (arg === '--no-import') {
+      options.noImport = true;
     } else if (arg === '--file' && args[i + 1]) {
       const filePath = args[++i];
       options.files.push(filePath);
@@ -1348,6 +1429,7 @@ async function main() {
         yes: options.yes,
         showOutline: options.showOutline,
         validate: options.validate,
+        noImport: options.noImport,
       });
     }
 

package/lib/dist/js/dialtone_migrate_typography/index.mjs

@@ -1002,17 +1002,31 @@ function flagDynamicClasses (content) {
   const re = new RegExp(DYNAMIC_CLASS_PATTERN);
   if (!re.test(content)) return content;
 
-  const lines = content.split('\n');
-  const out = lines.map(line => {
-    if (!/:class=|v-bind:class=/.test(line)) return line;
-    if (!new RegExp(DYNAMIC_CLASS_PATTERN).test(line)) return line;
-    // Preserve the line's indentation; put the marker on its own line above.
-    const indentMatch = line.match(/^[ \t]*/);
-    const indent = indentMatch ? indentMatch[0] : '';
-    return `${indent}<!-- dt-text-migrate: review dynamic class -->\n${line}`;
-  });
+  // Walk whole opening tags (quote-aware) so the marker is never injected between
+  // attributes of a multi-line element. The old line-by-line approach would insert
+  // the comment before the :class= line, which lands it between attributes when the
+  // opening tag spans multiple lines.
+  const tagRe = new RegExp(`<[a-zA-Z][\\w-]*(${ATTR_BODY})>`, 'g');
+  const insertions = [];
+  let m;
 
-  return out.join('\n');
+  while ((m = tagRe.exec(content)) !== null) {
+    if (!new RegExp(DYNAMIC_CLASS_PATTERN).test(m[0])) continue;
+    const before = content.slice(Math.max(0, m.index - 80), m.index);
+    if (/<!--\s*dt-text-migrate:\s*review dynamic class\s*-->/.test(before)) continue;
+    insertions.push(m.index);
+  }
+
+  if (insertions.length === 0) return content;
+
+  let out = content;
+  for (const idx of insertions.reverse()) {
+    const lineStart = out.lastIndexOf('\n', idx - 1) + 1;
+    const indent = out.slice(lineStart, idx).match(/^[ \t]*/)[0];
+    const marker = `${indent}<!-- dt-text-migrate: review dynamic class -->\n`;
+    out = out.slice(0, lineStart) + marker + out.slice(lineStart);
+  }
+  return out;
 }
 
 // Find composed typography classes on tags outside the rewrite scope
@@ -1245,6 +1259,70 @@ function detectMissingDtTextImport (content, usesText) {
   };
 }
 
+/**
+ * Attempt to auto-insert a component import (and Options API registration) into a Vue SFC.
+ * Returns updated content on success, or null when the insertion can't be made safely
+ * (caller should fall back to printing manual instructions).
+ *
+ * Handles:
+ *   - <script setup>: inserts import after the last existing import; no components
+ *     registration needed (auto-registered when imported in setup context).
+ *   - Options API with existing `components: {}`: inserts import + adds to the object.
+ *   - Options API without a components object: returns null (manual step required).
+ */
+export function injectComponentImport (content, componentName, importPath) {
+  if (new RegExp(`import\\s+(?:\\{[^}]*\\b${componentName}\\b[^}]*\\}|${componentName})\\s+from`).test(content)) {
+    return null; // already imported
+  }
+
+  const isScriptSetup = /<script\b[^>]*\bsetup\b/.test(content);
+  const scriptBlockRe = isScriptSetup
+    ? /<script\b[^>]*\bsetup\b[^>]*>([\s\S]*?)<\/script>/
+    : /<script\b(?![^>]*\bsetup\b)[^>]*>([\s\S]*?)<\/script>/;
+  const scriptMatch = scriptBlockRe.exec(content);
+  if (!scriptMatch) return null;
+
+  const scriptInnerStart = scriptMatch.index + scriptMatch[0].indexOf('>') + 1;
+  const scriptInner = scriptMatch[1];
+
+  const importLineRe = /^import\s.+from\s+['"][^'"]+['"]\s*;?/gm;
+  let lastImportMatch = null;
+  let m;
+  while ((m = importLineRe.exec(scriptInner)) !== null) lastImportMatch = m;
+
+  const insertOffset = lastImportMatch
+    ? scriptInnerStart + lastImportMatch.index + lastImportMatch[0].length
+    : scriptInnerStart;
+
+  const importLine = `\nimport { ${componentName} } from '${importPath}';`;
+  let out = content.slice(0, insertOffset) + importLine + content.slice(insertOffset);
+
+  if (isScriptSetup) return out; // import alone is sufficient for <script setup>
+
+  // Options API: also register in components: {}
+  // Re-exec against the updated content to get current positions, then restrict
+  // the components: { search to within the script block and after export default
+  // to avoid matching template bindings or helper objects that appear earlier.
+  const scriptMatchUpdated = scriptBlockRe.exec(out);
+  if (!scriptMatchUpdated) return null;
+  const scriptBodyStart = scriptMatchUpdated.index + scriptMatchUpdated[0].indexOf('>') + 1;
+  const scriptBodyText = scriptMatchUpdated[1];
+  const exportDefaultMatch = /\bexport\s+default\b/.exec(scriptBodyText);
+  if (!exportDefaultMatch) return null;
+  const searchFrom = scriptBodyStart + exportDefaultMatch.index;
+  const compMatchInSlice = /components\s*:\s*\{/.exec(out.slice(searchFrom));
+  if (!compMatchInSlice) return null; // no components object — can't safely auto-register
+  const compAbsIndex = searchFrom + compMatchInSlice.index;
+
+  const lineStart = out.lastIndexOf('\n', compAbsIndex) + 1;
+  const compIndent = out.slice(lineStart, compAbsIndex).match(/^[ \t]*/)[0];
+  const memberIndent = compIndent + '  ';
+  const insertAt = compAbsIndex + compMatchInSlice[0].length;
+  out = out.slice(0, insertAt) + `\n${memberIndent}${componentName},` + out.slice(insertAt);
+
+  return out;
+}
+
 function printImportInstructions (filePath, importCheck) {
   console.log(log.yellow('\n⚠️  ACTION REQUIRED: Add DtText import and registration'));
   log.cyan(`   File: ${filePath}`);
@@ -1450,9 +1528,6 @@ async function processFile (filePath, options) {
 
   if (!shouldApply) return { changes: 0, needsImport: false };
 
-  await fs.writeFile(filePath, transformed, 'utf-8');
-  console.log(log.green('   ✓ Saved'));
-
   // Only warn about missing DtText import when we actually INSERTED new <dt-text> elements
   // — review-marker-only changes (eyebrow/d-code--sm/d-fs-* flags) don't require an import.
   // Use a count delta (not boolean presence) so partial migrations on a file that already
@@ -1460,14 +1535,34 @@ async function processFile (filePath, options) {
   const beforeCount = (content.match(/<dt-text\b/g) || []).length;
   const afterCount = (transformed.match(/<dt-text\b/g) || []).length;
   const addedDtText = afterCount > beforeCount;
-  const importCheck = detectMissingDtTextImport(transformed, addedDtText);
-  if (importCheck?.needsImport) printImportInstructions(filePath, importCheck);
+  // Auto-inject DtText import before writing; fall back to manual instructions if needed.
+  // Skipped entirely when --no-import is set (e.g. DtText is globally registered).
+  const importCheck = options.noImport ? null : detectMissingDtTextImport(transformed, addedDtText);
+
+  let finalContent = transformed;
+  if (importCheck?.needsImport) {
+    const injected = injectComponentImport(transformed, 'DtText', importCheck.suggestedPath);
+    if (injected) finalContent = injected;
+  }
+
+  await fs.writeFile(filePath, finalContent, 'utf-8');
+
+  if (importCheck?.needsImport) {
+    if (finalContent !== transformed) {
+      console.log(log.green('   ✓ Saved + added DtText import'));
+    } else {
+      console.log(log.green('   ✓ Saved'));
+      printImportInstructions(filePath, importCheck);
+    }
+  } else {
+    console.log(log.green('   ✓ Saved'));
+  }
 
   if (notes.length > 0) {
     for (const note of notes) log.gray(`   ℹ ${note}`);
   }
 
-  return { changes: 1, needsImport: !!importCheck?.needsImport };
+  return { changes: 1, needsImport: importCheck?.needsImport && finalContent === transformed };
 }
 
 //------------------------------------------------------------------------------
@@ -1484,6 +1579,7 @@ function parseArgs () {
     files: [],
     removeMarkers: false,
     validate: false,
+    noImport: false, // Skip import injection (for apps that globally register DtText)
   };
 
   for (let i = 0; i < args.length; i++) {
@@ -1503,6 +1599,7 @@ Options:
   --remove-markers    Strip all <!-- dt-text-migrate: review ... --> comments
   --validate          Read-only mode: scan existing <dt-text> for prop bugs
                       (object syntax, invalid values, mixed CSS classes)
+  --no-import         Skip import injection (use when DtText is globally registered)
   --help, -h          Show help
 
 Examples:
@@ -1512,7 +1609,7 @@ Examples:
   npx dialtone-migrate-typography --remove-markers --cwd ./src
 
 Post-Migration Steps:
-  1. Add DtText imports as instructed by the script
+  1. Add DtText imports as instructed by the script (skipped with --no-import)
   2. Review files marked with <!-- dt-text-migrate: review --> comments
   3. Run with --remove-markers to clean up all markers after manual review
 `);
@@ -1531,6 +1628,8 @@ Post-Migration Steps:
       options.removeMarkers = true;
     } else if (arg === '--validate') {
       options.validate = true;
+    } else if (arg === '--no-import') {
+      options.noImport = true;
     }
   }
 

package/lib/dist/js/dialtone_migrate_typography/test.mjs

@@ -12,6 +12,7 @@ import {
   detectImportPathFor,
   removeMarkersForTest,
   validateDtTextProps,
+  injectComponentImport,
 } from './index.mjs';
 
 function run (input) {
@@ -987,6 +988,26 @@ describe('wrapper safety — positive cases still convert (no false positives)',
   });
 });
 
+describe('dynamic :class flagging — multi-line element', () => {
+  it('marker goes before the opening < of a multi-line element, not between attributes', () => {
+    const input = [
+      '<div',
+      '  v-if="condition"',
+      '  :class="{ \'d-headline--md\': isHeading }"',
+      '>x</div>',
+    ].join('\n');
+    const out = run(input);
+    // Marker must appear on its own line before <div, never inside the tag
+    assert.ok(out.includes('<!-- dt-text-migrate: review dynamic class -->'), 'should emit marker');
+    const markerIdx = out.indexOf('<!-- dt-text-migrate: review dynamic class -->');
+    const divIdx = out.indexOf('<div');
+    assert.ok(markerIdx < divIdx, 'marker must precede the opening <div');
+    // The tag itself must remain structurally intact (comment not injected mid-tag)
+    assert.ok(out.includes('  :class='), ':class line must be unchanged');
+    assert.ok(out.includes('  v-if='), 'v-if line must be unchanged');
+  });
+});
+
 describe('wrapper safety — override path (d-fw-*, d-fc-*, etc.) with component children', () => {
   // Override path mirrors the composed-path safety: if the rewriteable tag
   // wraps a component/block child, skip auto-conversion. Behavior here is a
@@ -1018,3 +1039,152 @@ describe('wrapper safety — override path (d-fw-*, d-fc-*, etc.) with component
     );
   });
 });
+
+// ---------------------------------------------------------------------------
+// injectComponentImport — auto import insertion
+// ---------------------------------------------------------------------------
+
+describe('injectComponentImport — <script setup>', () => {
+  it('inserts import after the last existing import', () => {
+    const content = [
+      '<script setup>',
+      'import { DtStack } from \'@dialpad/dialtone-vue\';',
+      '</script>',
+      '<template><p>x</p></template>',
+    ].join('\n');
+    const out = injectComponentImport(content, 'DtText', '@dialpad/dialtone-vue');
+    assert.ok(out.includes('import { DtText } from \'@dialpad/dialtone-vue\';'), 'import inserted');
+    const stackIdx = out.indexOf('DtStack');
+    const textIdx = out.indexOf('DtText');
+    assert.ok(textIdx > stackIdx, 'DtText import comes after DtStack import');
+  });
+
+  it('inserts import when no existing imports present', () => {
+    const content = [
+      '<script setup>',
+      'const x = 1;',
+      '</script>',
+    ].join('\n');
+    const out = injectComponentImport(content, 'DtText', '@dialpad/dialtone-vue');
+    assert.ok(out.includes('import { DtText } from \'@dialpad/dialtone-vue\';'), 'import inserted');
+  });
+
+  it('returns null when component is already imported', () => {
+    const content = [
+      '<script setup>',
+      'import { DtText } from \'@dialpad/dialtone-vue\';',
+      '</script>',
+    ].join('\n');
+    assert.equal(injectComponentImport(content, 'DtText', '@dialpad/dialtone-vue'), null);
+  });
+
+  it('does not add to components object (not needed for script setup)', () => {
+    const content = [
+      '<script setup>',
+      'import { DtStack } from \'@dialpad/dialtone-vue\';',
+      '</script>',
+    ].join('\n');
+    const out = injectComponentImport(content, 'DtText', '@dialpad/dialtone-vue');
+    assert.ok(!out.includes('components:'), 'no components object added for script setup');
+  });
+
+  it('handles <script setup lang="ts">', () => {
+    const content = [
+      '<script setup lang="ts">',
+      'import { DtStack } from \'@dialpad/dialtone-vue\';',
+      '</script>',
+    ].join('\n');
+    const out = injectComponentImport(content, 'DtText', '@dialpad/dialtone-vue');
+    assert.ok(out !== null, 'should succeed');
+    assert.ok(out.includes('import { DtText } from \'@dialpad/dialtone-vue\';'));
+  });
+});
+
+describe('injectComponentImport — Options API', () => {
+  it('inserts import and adds to existing components object', () => {
+    const content = [
+      '<script>',
+      'import { DtStack } from \'@dialpad/dialtone-vue\';',
+      'export default {',
+      '  components: {',
+      '    DtStack,',
+      '  },',
+      '};',
+      '</script>',
+    ].join('\n');
+    const out = injectComponentImport(content, 'DtText', '@dialpad/dialtone-vue');
+    assert.ok(out.includes('import { DtText } from \'@dialpad/dialtone-vue\';'), 'import inserted');
+    assert.ok(out.includes('DtText,'), 'DtText added to components');
+    assert.ok(out.includes('DtStack,'), 'existing DtStack preserved');
+  });
+
+  it('returns null when no components object exists', () => {
+    const content = [
+      '<script>',
+      'export default {',
+      '  data () { return {}; },',
+      '};',
+      '</script>',
+    ].join('\n');
+    assert.equal(injectComponentImport(content, 'DtText', '@dialpad/dialtone-vue'), null);
+  });
+
+  it('returns null when no script block found', () => {
+    const content = '<template><p>x</p></template>';
+    assert.equal(injectComponentImport(content, 'DtText', '@dialpad/dialtone-vue'), null);
+  });
+
+  it('returns null when component is already imported', () => {
+    const content = [
+      '<script>',
+      'import { DtText } from \'@dialpad/dialtone-vue\';',
+      'export default { components: { DtText } };',
+      '</script>',
+    ].join('\n');
+    assert.equal(injectComponentImport(content, 'DtText', '@dialpad/dialtone-vue'), null);
+  });
+
+  it('does not corrupt a helper object with components: { before export default', () => {
+    const content = [
+      '<script>',
+      'import { DtStack } from \'@dialpad/dialtone-vue\';',
+      'const editorConfig = { components: { toolbar: true } };',
+      'export default {',
+      '  components: {',
+      '    DtStack,',
+      '  },',
+      '};',
+      '</script>',
+    ].join('\n');
+    const out = injectComponentImport(content, 'DtText', '@dialpad/dialtone-vue');
+    assert.ok(out, 'should return updated content');
+    assert.ok(out.includes('import { DtText } from \'@dialpad/dialtone-vue\';'), 'import inserted');
+    // DtText must be added to export default components, not to the editorConfig object
+    const editorConfigIdx = out.indexOf('editorConfig');
+    const dtTextIdx = out.indexOf('DtText,');
+    const exportDefaultIdx = out.indexOf('export default');
+    assert.ok(dtTextIdx > exportDefaultIdx, 'DtText registered after export default');
+    assert.ok(dtTextIdx > editorConfigIdx, 'DtText not inserted into editorConfig helper');
+    assert.ok(!out.slice(0, exportDefaultIdx).includes('DtText,'), 'DtText not in pre-export-default scope');
+  });
+
+  it('returns null when components: { appears only in a template binding, not in export default', () => {
+    // Simulate a file where the script has no components option but the template
+    // has a :config="{ components: { ... } }" binding — the template is masked
+    // during injectComponentImport (which operates on the full SFC), so the
+    // components: { in the template must not be matched.
+    const content = [
+      '<template>',
+      '  <some-editor :config="{ components: { toolbar: MyBar } }" />',
+      '</template>',
+      '<script>',
+      'import { DtStack } from \'@dialpad/dialtone-vue\';',
+      'export default {',
+      '  data () { return {}; },',
+      '};',
+      '</script>',
+    ].join('\n');
+    // No components: { in export default → should return null (can't auto-register)
+    assert.equal(injectComponentImport(content, 'DtText', '@dialpad/dialtone-vue'), null);
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dialpad/dialtone-css",
-  "version": "8.81.0-next.1",
+  "version": "8.81.0-next.2",
   "description": "Dialpad's design system",
   "keywords": [
     "Dialpad",
@@ -84,7 +84,7 @@
     "less": "^4.2.0",
     "oslllo-svg-fixer": "^2.2.0",
     "through2": "^4.0.2",
-    "@dialpad/dialtone-tokens": "1.48.0-next.19",
+    "@dialpad/dialtone-tokens": "1.48.0-next.20",
     "@dialpad/postcss-responsive-variations": "1.2.4-next.1"
   },
   "peerDependencies": {