Enable directly-loc-start-end in language-css (#9591)

.eslintrc.yml

@@ -105,6 +105,8 @@ overrides:
   - files: src/**/*.js
     rules:
       prettier-internal-rules/prefer-fast-path-each: error
-  - files: src/language-js/**/*.js
+  - files:
+      - src/language-js/**/*.js
+      - src/language-css/**/*.js
     rules:
       prettier-internal-rules/directly-loc-start-end: error

scripts/tools/eslint-plugin-prettier-internal-rules/directly-loc-start-end.js

@@ -18,7 +18,7 @@ module.exports = {
     },
     messages: {
       [MESSAGE_ID]:
-        "Call `{{function}}` directly from `src/language-js/loc.js`.",
+        "Please import `{{function}}` function and use it directly.",
     },
     fixable: "code",
   },

src/language-css/loc.js

@@ -216,7 +216,17 @@ function replaceQuotesInInlineComments(text) {
   return text;
 }
 
+function locStart(node) {
+  return node.source.startOffset;
+}
+
+function locEnd(node) {
+  return node.source.endOffset;
+}
+
 module.exports = {
+  locStart,
+  locEnd,
   calculateLoc,
   replaceQuotesInInlineComments,
 };

src/language-css/parser-postcss.js

@@ -12,6 +12,7 @@ const {
   isSCSSVariable,
   stringifyNode,
 } = require("./utils");
+const { locStart, locEnd } = require("./loc");
 const { calculateLoc, replaceQuotesInInlineComments } = require("./loc");
 
 const getHighestAncestor = (node) => {
@@ -605,6 +606,10 @@ function parseWithParser(parse, text, options) {
   calculateLoc(result, text);
 
   if (frontMatter) {
+    frontMatter.source = {
+      startOffset: 0,
+      endOffset: frontMatter.raw.length,
+    };
     result.nodes.unshift(frontMatter);
   }
 
@@ -652,19 +657,8 @@ function parseScss(text, parsers, options) {
 const postCssParser = {
   astFormat: "postcss",
   hasPragma,
-  locStart(node) {
-    if (node.source) {
-      return node.source.startOffset;
-    }
-    /* istanbul ignore next */
-    return null;
-  },
-  locEnd(node) {
-    if (node.source) {
-      return node.source.endOffset;
-    }
-    return null;
-  },
+  locStart,
+  locEnd,
 };
 
 // Export as a plugin so we can reuse the same bundle for UMD loading

src/language-css/printer-postcss.js

@@ -74,6 +74,7 @@ const {
   lastLineHasInlineComment,
   isAtWordPlaceholderNode,
 } = require("./utils");
+const { locStart, locEnd } = require("./loc");
 
 function shouldPrintComma(options) {
   return options.trailingComma === "es5" || options.trailingComma === "all";
@@ -106,10 +107,8 @@ function genericPrint(path, options, print) {
     }
     case "css-comment": {
       const isInlineComment = node.inline || node.raws.inline;
-      const text = options.originalText.slice(
-        options.locStart(node),
-        options.locEnd(node)
-      );
+
+      const text = options.originalText.slice(locStart(node), locEnd(node));
 
       return isInlineComment ? text.trimEnd() : text;
     }
@@ -188,7 +187,7 @@ function genericPrint(path, options, print) {
             ])
           : isTemplatePropNode(node) &&
             !parentNode.raws.semicolon &&
-            options.originalText[options.locEnd(node) - 1] !== ";"
+            options.originalText[locEnd(node) - 1] !== ";"
           ? ""
           : options.__isHTMLStyleAttribute && isLastNode(path, node)
           ? ifBreak(";", "")
@@ -200,7 +199,7 @@ function genericPrint(path, options, print) {
       const isTemplatePlaceholderNodeWithoutSemiColon =
         isTemplatePlaceholderNode(node) &&
         !parentNode.raws.semicolon &&
-        options.originalText[options.locEnd(node) - 1] !== ";";
+        options.originalText[locEnd(node) - 1] !== ";";
 
       if (isLessParser(options)) {
         if (node.mixin) {
@@ -492,7 +491,7 @@ function genericPrint(path, options, print) {
       // originalText has to be used for Less, see replaceQuotesInInlineComments in loc.js
       const parentNode = path.getParentNode();
       if (parentNode.raws && parentNode.raws.selector) {
-        const start = options.locStart(parentNode);
+        const start = locStart(parentNode);
         const end = start + parentNode.raws.selector.length;
         return options.originalText.slice(start, end).trim();
       }
@@ -505,8 +504,8 @@ function genericPrint(path, options, print) {
         grandParent.type === "value-func" &&
         grandParent.value === "selector"
       ) {
-        const start = options.locStart(parentNode.open) + 1;
-        const end = options.locEnd(parentNode.close) - 1;
+        const start = locStart(parentNode.open) + 1;
+        const end = locEnd(parentNode.close) - 1;
         const selector = options.originalText.slice(start, end).trim();
 
         return lastLineHasInlineComment(selector)
@@ -522,10 +521,7 @@ function genericPrint(path, options, print) {
       return path.call(print, "group");
     }
     case "value-comment": {
-      return options.originalText.slice(
-        options.locStart(node),
-        options.locEnd(node)
-      );
+      return options.originalText.slice(locStart(node), locEnd(node));
     }
     case "value-comma_group": {
       const parentNode = path.getParentNode();
@@ -796,7 +792,7 @@ function genericPrint(path, options, print) {
         if (
           isAtWordPlaceholderNode(iNode) &&
           isAtWordPlaceholderNode(iNextNode) &&
-          options.locEnd(iNode) === options.locStart(iNextNode)
+          locEnd(iNode) === locStart(iNextNode)
         ) {
           continue;
         }
@@ -987,10 +983,7 @@ function printNodeSequence(path, options, print) {
     ) {
       const childNode = pathChild.getValue();
       parts.push(
-        options.originalText.slice(
-          options.locStart(childNode),
-          options.locEnd(childNode)
-        )
+        options.originalText.slice(locStart(childNode), locEnd(childNode))
       );
     } else {
       parts.push(pathChild.call(print));
@@ -999,11 +992,9 @@ function printNodeSequence(path, options, print) {
     if (i !== node.nodes.length - 1) {
       if (
         (node.nodes[i + 1].type === "css-comment" &&
-          !hasNewline(
-            options.originalText,
-            options.locStart(node.nodes[i + 1]),
-            { backwards: true }
-          ) &&
+          !hasNewline(options.originalText, locStart(node.nodes[i + 1]), {
+            backwards: true,
+          }) &&
           !isFrontMatterNode(node.nodes[i])) ||
         (node.nodes[i + 1].type === "css-atrule" &&
           node.nodes[i + 1].name === "else" &&
@@ -1013,11 +1004,7 @@ function printNodeSequence(path, options, print) {
       } else {
         parts.push(options.__isHTMLStyleAttribute ? line : hardline);
         if (
-          isNextLineEmpty(
-            options.originalText,
-            pathChild.getValue(),
-            options.locEnd
-          ) &&
+          isNextLineEmpty(options.originalText, pathChild.getValue(), locEnd) &&
           !isFrontMatterNode(node.nodes[i])
         ) {
           parts.push(hardline);