fix: dynamic import prettier and fix deps vulnerable (#1492)

* fix: dynamic import prettier and fix deps vulnerable

* chore: add numbers to linked nodes in mermaid diagram

.changeset/tough-papayas-yell.md

@@ -0,0 +1,5 @@
+---
+'style-dictionary': patch
+---
+
+Dynamically import prettier and plugins so that they can be chunked separately by bundlers, and only imported on demand. This will significantly improve bundle size for users of Style Dictionary.

docs/src/content/docs/info/architecture.md

@@ -11,10 +11,10 @@ flowchart LR
     subgraph global
         direction TB
         Z[Config] -->|Parse config| X
-        X[Parsed Config] -->|Run| A
-        A[Token Files] -->|Parsers| B
-        B[JavaScript Objects] -->|Combine| C
-        C[Dictionary] -->|Preprocessors| C
+        X["Parsed Config (1)"] -->|Run| A
+        A["Token Files (2)"] -->|Parsers| B
+        B["JavaScript Objects (3)"] -->|Combine| C
+        C["Dictionary (4)"] -->|Preprocessors| C
         click X "#1-parse-the-config" "Explanation about parsing config"
         click A "#2-find-all-token-files" "Explanation about finding tokens files"
         click B "#3-parse-token-files" "Explanation about parsing tokens files"
@@ -23,10 +23,10 @@ flowchart LR
 
     subgraph platform
         direction TB
-        D[Dictionary] -->|Preprocessors| D
+        D["Dictionary (5)"] -->|Preprocessors| D
         D -->|Transforms| E
-        E[Transformed Dictionary] -->|Resolve references| F
-        F[Resolved Dictionary] -->|Transitive transforms| E
+        E["Transformed Dictionary (6)"] -->|Resolve references| F
+        F["Resolved Dictionary (7)"] -->|Transitive transforms| E
         click D "#5-run-preprocessors-over-the-dictionary" "Explanation about preprocessing the dictionary"
         click E "#6-transform-the-tokens" "Explanation about transforming tokens"
         click F "#7-resolve-aliases--references-to-other-values" "Explanation about token references resolution"
@@ -37,7 +37,7 @@ flowchart LR
         G[Resolved Dictionary] --> |Filters| H
         H[Filtered Dictionary] --> |Formats| I
         H[Filtered Dictionary] --> |File headers| I
-        I[Platform output] --> |Actions| J[Actions output]
+        I["Platform output (8)"] --> |Actions| J["Actions output (9)"]
         click I "#8-format-the-tokens-into-files" "Explanation about formatting tokens to output files"
         click J "#9-run-actions" "Explanation about running actions"
     end

docs/src/setup.ts

@@ -29,7 +29,7 @@ async function renderMermaid() {
   const direction = getViewportWidth() > VP_THRESHOLD ? 'LR' : 'TB';
   mermaid.initialize({
     startOnLoad: false,
-    theme,
+    theme: theme === 'light' ? 'base' : 'dark',
   });
   const elements = [...document.querySelectorAll('.mermaid')] as HTMLPreElement[];
   await Promise.all(

lib/common/formats.js

@@ -10,11 +10,6 @@
  * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions
  * and limitations under the License.
  */
-import * as prettier from 'prettier/standalone';
-import * as prettierPluginBabel from 'prettier/plugins/babel';
-import * as prettierPluginEstree from 'prettier/plugins/estree';
-import * as prettierPluginTypescript from 'prettier/plugins/typescript';
-
 import {
   fileHeader,
   formattedVariables,
@@ -159,6 +154,11 @@ function stripMetaProps(tokens, options) {
  * @param {boolean} [ts] whether or not to use typescript
  */
 async function formatJS(content, ts = false) {
+  const prettier = await import('prettier/standalone');
+  const prettierPluginBabel = await import('prettier/plugins/babel');
+  const prettierPluginEstree = await import('prettier/plugins/estree');
+  const prettierPluginTypescript = await import('prettier/plugins/typescript');
+
   return prettier.format(content, {
     parser: ts ? `typescript` : `babel`,
     plugins: [

package.json

@@ -163,7 +163,7 @@
     "lint-staged": "^12.3.1",
     "lit": "^3.1.2",
     "mdast": "^3.0.0",
-    "mermaid": "^10.9.1",
+    "mermaid": "^11.6.0",
     "mocha": "^10.2.0",
     "monaco-editor": "^0.47.0",
     "npm-run-all": "^4.1.5",