formatting linting by khamer · Pull Request #25 · imarc/pronto

khamer · 2026-02-05T16:00:52Z

Make it so that config can be imported to get --variables but no styles
Add prettier config and make project pass
Add stylelint config and make project pass

netlify · 2026-02-05T16:00:59Z

👷 Deploy Preview for imarc-pronto processing.

Name	Link
🔨 Latest commit	`cecfd26`
🔍 Latest deploy log	https://app.netlify.com/projects/imarc-pronto/deploys/698a37fdbf934100083dd971

Copilot

Pull request overview

This PR performs formatting and linting updates across the Pronto codebase. It reorganizes the directory structure from imported/ to core/, adds a new @ alias for cleaner imports, and applies prettier and stylelint formatting throughout SCSS, HTML, and JavaScript files.

Changes:

Renamed resources/styles/imported/ to resources/styles/core/ and updated all import references
Added Vite alias @ pointing to resources/styles for cleaner imports
Applied prettier formatting (hex colors expanded to 6 digits, consistent quotes, spacing)
Added stylelint configuration and applied CSS/SCSS linting rules
Formatted HTML files with self-closing tags and consistent indentation

Reviewed changes

Copilot reviewed 143 out of 154 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
vite.config.js	Updated alias from `@imarc/pronto` to `@` for styles directory
stylelint.config.mjs	New stylelint configuration with SCSS rules
package.json	Added prettier, stylelint, postcss-scss dependencies
resources/styles/core/	Renamed from `imported/`, contains base styles and utilities
resources/styles/*/.scss	Applied formatting: 6-digit hex, single quotes, consistent spacing
resources/styles/*/.html	Applied formatting with self-closing tags and indentation
resources/js/	Applied prettier formatting to Vue and JS files

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-05T16:05:54Z

resources/styles/molecules/navigation/navigation.html

                          <li class="dropdown__item"><a href="" class="dropdown__link">Amet porro.</a></li>
-                          <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a><li>
+                          <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a></li>
+                          <li></li>


Empty list items (<li></li>) have been added throughout the navigation HTML. These appear to be leftover artifacts from the formatter that previously had closing tags on separate lines (e.g., <li>). Empty list items are invalid HTML and serve no purpose - they should be removed.

Copilot · 2026-02-05T16:05:55Z

resources/styles/molecules/navigation/navigation.html

                <li class="dropdown__item"><a href="" class="dropdown__link">Amet porro.</a></li>
-                <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a><li>
+                <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a></li>
+                <li></li>


Empty list items (<li></li>) have been added. These are invalid HTML artifacts from the formatter - remove them.

Copilot · 2026-02-05T16:05:55Z

resources/styles/molecules/navigation/navigation.html

@@ -88,7 +90,8 @@
              <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
              <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
              <li class="dropdown__item"><a href="" class="dropdown__link">Amet porro.</a></li>
-              <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a><li>
+              <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a></li>
+              <li></li>
            </ul>
          </div>
        </template>
@@ -101,38 +104,35 @@
            <div class="grid -columns-3">
              <div class="cell">
                <h3>Heading</h3>
-                <p>
-                  Adipisicing obcaecati tempora qui ullam voluptates beatae? Assumenda soluta quae
-                </p>
+                <p>Adipisicing obcaecati tempora qui ullam voluptates beatae? Assumenda soluta quae</p>
                <ul class="dropdown__list">
                  <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
                  <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
                  <li class="dropdown__item"><a href="" class="dropdown__link">Amet porro.</a></li>
-                  <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a><li>
+                  <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a></li>
+                  <li></li>
                </ul>
              </div>
              <div class="cell">
                <h3>Heading</h3>
-                <p>
-                  Adipisicing obcaecati tempora qui ullam voluptates beatae? Assumenda soluta quae
-                </p>
+                <p>Adipisicing obcaecati tempora qui ullam voluptates beatae? Assumenda soluta quae</p>
                <ul class="dropdown__list">
                  <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
                  <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
                  <li class="dropdown__item"><a href="" class="dropdown__link">Amet porro.</a></li>
-                  <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a><li>
+                  <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a></li>
+                  <li></li>
                </ul>
              </div>
              <div class="cell">
                <h3>Heading</h3>
-                <p>
-                  Adipisicing obcaecati tempora qui ullam voluptates beatae? Assumenda soluta quae
-                </p>
+                <p>Adipisicing obcaecati tempora qui ullam voluptates beatae? Assumenda soluta quae</p>
                <ul class="dropdown__list">
                  <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
                  <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
                  <li class="dropdown__item"><a href="" class="dropdown__link">Amet porro.</a></li>
-                  <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a><li>
+                  <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a></li>
+                  <li></li>
                </ul>
              </div>
            </div>
@@ -148,7 +148,8 @@ <h3>Heading</h3>
              <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
              <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
              <li class="dropdown__item"><a href="" class="dropdown__link">Amet porro.</a></li>
-              <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a><li>
+              <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a></li>
+              <li></li>


Empty list items (<li></li>) throughout this file are invalid HTML and should be removed.

Copilot · 2026-02-05T16:05:55Z

resources/styles/molecules/navigation/navigation-hoverable.html

@@ -17,14 +26,23 @@
    <li class="navigation__item" v-directionals>
      <p-openable class="navigation__button" label="Centered Dropdown" :close-on-blur="false" :hover-or-click="true">
        <template #default>
-        <div class="navigation__dropdown -center">
-          <ul>
-            <li><a href=""><span>Consectetur asperiores</span></a></li>
-            <li><a href=""><span>Consectetur asperiores</span></a></li>
-            <li><a href=""><span>Amet porro.</span></a></li>
-            <li><a href=""><span>Ipsum dolorem</span></a><li>
-          </ul>
-        </div>
+          <div class="navigation__dropdown -center">
+            <ul>
+              <li>
+                <a href=""><span>Consectetur asperiores</span></a>
+              </li>
+              <li>
+                <a href=""><span>Consectetur asperiores</span></a>
+              </li>
+              <li>
+                <a href=""><span>Amet porro.</span></a>
+              </li>
+              <li>
+                <a href=""><span>Ipsum dolorem</span></a>
+              </li>
+              <li></li>
+            </ul>
+          </div>
        </template>
      </p-openable>
    </li>
@@ -34,38 +52,59 @@
          <div class="navigation__dropdown grid -columns-3">
            <div class="cell">
              <h3>Heading</h3>
-              <p>
-                Adipisicing obcaecati tempora qui ullam voluptates beatae? Assumenda soluta quae
-              </p>
+              <p>Adipisicing obcaecati tempora qui ullam voluptates beatae? Assumenda soluta quae</p>
              <ul>
-                <li><a href=""><span>Consectetur asperiores</span></a></li>
-                <li><a href=""><span>Consectetur asperiores</span></a></li>
-                <li><a href=""><span>Amet porro.</span></a></li>
-                <li><a href=""><span>Ipsum dolorem</span></a><li>
+                <li>
+                  <a href=""><span>Consectetur asperiores</span></a>
+                </li>
+                <li>
+                  <a href=""><span>Consectetur asperiores</span></a>
+                </li>
+                <li>
+                  <a href=""><span>Amet porro.</span></a>
+                </li>
+                <li>
+                  <a href=""><span>Ipsum dolorem</span></a>
+                </li>
+                <li></li>
              </ul>
            </div>
            <div class="cell">
              <h3>Heading</h3>
-              <p>
-                Adipisicing obcaecati tempora qui ullam voluptates beatae? Assumenda soluta quae
-              </p>
+              <p>Adipisicing obcaecati tempora qui ullam voluptates beatae? Assumenda soluta quae</p>
              <ul>
-                <li><a href=""><span>Consectetur asperiores</span></a></li>
-                <li><a href=""><span>Consectetur asperiores</span></a></li>
-                <li><a href=""><span>Amet porro.</span></a></li>
-                <li><a href=""><span>Ipsum dolorem</span></a><li>
+                <li>
+                  <a href=""><span>Consectetur asperiores</span></a>
+                </li>
+                <li>
+                  <a href=""><span>Consectetur asperiores</span></a>
+                </li>
+                <li>
+                  <a href=""><span>Amet porro.</span></a>
+                </li>
+                <li>
+                  <a href=""><span>Ipsum dolorem</span></a>
+                </li>
+                <li></li>
              </ul>
            </div>
            <div class="cell">
              <h3>Heading</h3>
-              <p>
-                Adipisicing obcaecati tempora qui ullam voluptates beatae? Assumenda soluta quae
-              </p>
+              <p>Adipisicing obcaecati tempora qui ullam voluptates beatae? Assumenda soluta quae</p>
              <ul>
-                <li><a href=""><span>Consectetur asperiores</span></a></li>
-                <li><a href=""><span>Consectetur asperiores</span></a></li>
-                <li><a href=""><span>Amet porro.</span></a></li>
-                <li><a href=""><span>Ipsum dolorem</span></a><li>
+                <li>
+                  <a href=""><span>Consectetur asperiores</span></a>
+                </li>
+                <li>
+                  <a href=""><span>Consectetur asperiores</span></a>
+                </li>
+                <li>
+                  <a href=""><span>Amet porro.</span></a>
+                </li>
+                <li>
+                  <a href=""><span>Ipsum dolorem</span></a>
+                </li>
+                <li></li>
              </ul>
            </div>
          </div>
@@ -77,10 +116,19 @@ <h3>Heading</h3>
        <template #default>
          <div class="navigation__dropdown -rightAligned">
            <ul>
-              <li><a href=""><span>Consectetur asperiores</span></a></li>
-              <li><a href=""><span>Consectetur asperiores</span></a></li>
-              <li><a href=""><span>Amet porro.</span></a></li>
-              <li><a href=""><span>Ipsum dolorem</span></a><li>
+              <li>
+                <a href=""><span>Consectetur asperiores</span></a>
+              </li>
+              <li>
+                <a href=""><span>Consectetur asperiores</span></a>
+              </li>
+              <li>
+                <a href=""><span>Amet porro.</span></a>
+              </li>
+              <li>
+                <a href=""><span>Ipsum dolorem</span></a>
+              </li>
+              <li></li>


Empty list items (<li></li>) throughout this file are invalid HTML and should be removed.

Copilot · 2026-02-05T16:05:56Z

resources/styles/molecules/card/card--condensed.html

+        <use href="/main-icons-sprite.svg#clock" /></svg
+      >15 Minute Read


The SVG closing tag has been incorrectly split, breaking HTML syntax. Should be: <svg class="card__metaIcon"><use href="/main-icons-sprite.svg#clock" /></svg>15 Minute Read

Copilot · 2026-02-05T16:05:56Z

resources/styles/atoms/link/link.html

+<a class="link" href=""
+  >Praesentium ex architecto <svg viewBox="0 0 18 12"><use href="/main-icons-sprite.svg#arrow-right" /></svg
+></a>


The closing > for the <a> tag has been incorrectly placed on a separate line, breaking HTML syntax. Should be: <a class="link" href="">Praesentium ex architecto <svg>...</svg></a>

Copilot · 2026-02-05T16:05:56Z

resources/_preview.html

+      style="
+        $ {
+          component.url?.match(/atoms|molecules/)?'padding: 2rem': '';
+        }
+      "


Template literal syntax in the style attribute is incorrect. Should be plain HTML without $ or template literal syntax: style="padding: 2rem" or similar.

Suggested change

style="

$ {

component.url?.match(/atoms|molecules/)?'padding: 2rem': '';

}

"

style="padding: 2rem"

Copilot · 2026-02-05T16:05:57Z

resources/styles/atoms/dropdown/dropdown.html

+        <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
+        <li class="dropdown__item"><a href="" class="dropdown__link">Amet porro.</a></li>
+        <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a></li>
+        <li></li>


Empty list item (<li></li>) is invalid HTML and should be removed.

Suggested change

<li></li>

Copilot · 2026-02-05T16:05:57Z

resources/styles/organisms/richText/richText.html

+    main = putStrLn "Hello World!"</pre
+  >


The <pre> closing tag has been incorrectly split across two lines. This breaks the HTML syntax and should be on the same line: main = putStrLn "Hello World!"</pre>

Copilot · 2026-02-05T16:05:57Z

resources/styles/molecules/card/card--flipped.html

+        <use href="/main-icons-sprite.svg#clock" /></svg
+      >Posted Aug 12, 2023 by <a href="#" class="card__metaLink">Daphne Writesposts</a>


The SVG closing tag has been incorrectly split across two lines, breaking HTML syntax. Should be: <svg class="card__metaIcon"><use href="/main-icons-sprite.svg#clock" /></svg>Posted Aug...

Copilot

Pull request overview

Copilot reviewed 148 out of 158 changed files in this pull request and generated 1 comment.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

resources/_preview.html

khamer added 3 commits February 4, 2026 16:27

prettier formatting

5ca5b4a

stylelint

c636d97

pass prettier

76d5370

khamer requested a review from Copilot February 5, 2026 16:02

Copilot started reviewing on behalf of khamer February 5, 2026 16:03 View session

Copilot AI reviewed Feb 5, 2026

View reviewed changes

khamer added 2 commits February 5, 2026 12:53

prettier, eslint, stylelint

73a57b7

add lint and lint:fix to npm run

fa4b240

khamer requested a review from Copilot February 5, 2026 18:28

Copilot started reviewing on behalf of khamer February 5, 2026 18:29 View session

remove empty <li>s

bb2b9b2

Copilot AI reviewed Feb 5, 2026

View reviewed changes

resources/_preview.html Outdated Show resolved Hide resolved

khamer added 6 commits February 5, 2026 16:28

fix formatting of style attribute

71689cf

update doc

bdc9ffb

Merge branch 'main' into formatting-linting

392e75f

fix linting

de3a72a

set minimum node version = 24

3bddc25

2.1.0-beta.0

cecfd26

		<use href="/main-icons-sprite.svg#clock" /></svg
		>15 Minute Read

		<use href="/main-icons-sprite.svg#clock" /></svg
		>Posted Aug 12, 2023 by <a href="#" class="card__metaLink">Daphne Writesposts</a>

Conversation

khamer commented Feb 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

netlify bot commented Feb 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

👷 Deploy Preview for imarc-pronto processing.

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

khamer commented Feb 5, 2026 •

edited

Loading

netlify bot commented Feb 5, 2026 •

edited

Loading