@jsenv/ast 6.10.3 → 6.10.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/ast",
-  "version": "6.10.3",
+  "version": "6.10.5",
   "type": "module",
   "description": "Parse and transform HTML, CSS and JS",
   "repository": {
@@ -29,14 +29,14 @@
     "@babel/core": "8.0.1",
     "@babel/helper-module-imports": "8.0.0",
     "@babel/parser": "8.0.4",
-    "@jsenv/humanize": "1.8.1",
-    "@jsenv/urls": "2.9.12",
+    "@jsenv/humanize": "1.8.2",
+    "@jsenv/urls": "2.9.13",
     "@jsenv/utils": "2.3.1",
     "acorn": "8.18.0",
     "acorn-import-attributes": "1.9.5",
     "acorn-walk": "8.3.5",
     "parse5": "8.0.1",
-    "postcss": "8.5.27",
+    "postcss": "8.5.28",
     "postcss-value-parser": "4.2.0"
   },
   "devDependencies": {

package/src/js/js_static_analysis/css_template_substitutions.js

@@ -10,11 +10,21 @@
 
 const PLACEHOLDER = (index) => `var(--jsenv-css-substitution-${index})`;
 
+// A css comment an author writes in a template that cannot be made readable,
+// to say so and stop being told. Kept as plain css: it costs nothing when the
+// template does become readable, the css pipeline strips it like any comment.
+const OPAQUE_DIRECTIVE = "jsenv-css-opaque";
+
+export const hasCssOpaqueDirective = (templateSource) => {
+  return templateSource.includes(OPAQUE_DIRECTIVE);
+};
+
 /**
  * @param {Object} templateLiteralNode a TemplateLiteral acorn node
  * @param {string} js the source the node comes from
- * @returns {{ content: string, substitutions: Array<{placeholder: string, expression: string}> }|null}
- *          null when at least one expression is not in a css value position
+ * @returns {{ content: string, substitutions: Array<{placeholder: string, expression: string}> }
+ *          | { opaque: { reason: string } }}
+ *          "opaque" when the css cannot be read: the template is left alone
  */
 export const buildCssTemplateSubstitutions = (templateLiteralNode, js) => {
   const { quasis, expressions } = templateLiteralNode;
@@ -22,8 +32,12 @@ export const buildCssTemplateSubstitutions = (templateLiteralNode, js) => {
   for (const quasi of quasis) {
     const { cooked } = quasi.value;
     if (cooked === undefined) {
-      // an escape sequence acorn could not cook: what the css is cannot be told
-      return null;
+      return {
+        opaque: {
+          reason:
+            "an escape sequence cannot be cooked into the css it stands for",
+        },
+      };
     }
     parts.push(cooked);
   }
@@ -39,9 +53,14 @@ export const buildCssTemplateSubstitutions = (templateLiteralNode, js) => {
     });
     content += placeholder + parts[i + 1];
   }
-  for (const position of positions) {
-    if (!isCssValuePosition(content, position)) {
-      return null;
+  for (let i = 0; i < positions.length; i++) {
+    const nonValuePosition = readNonValuePosition(content, positions[i]);
+    if (nonValuePosition) {
+      return {
+        opaque: {
+          reason: `"\${${substitutions[i].expression}}" stands in ${nonValuePosition}`,
+        },
+      };
     }
   }
   return { content, substitutions };
@@ -49,7 +68,8 @@ export const buildCssTemplateSubstitutions = (templateLiteralNode, js) => {
 
 // Reads the css from its start up to "position", keeping just enough state to
 // tell what the placeholder sitting there would be part of.
-const isCssValuePosition = (css, position) => {
+// Returns what it is part of when that is not a value, null when it is one.
+const readNonValuePosition = (css, position) => {
   let braceDepth = 0;
   let stringQuote = null;
   let inComment = false;
@@ -130,29 +150,32 @@ const isCssValuePosition = (css, position) => {
     }
     i++;
   }
-  if (inComment || stringQuote) {
-    return false;
+  if (inComment) {
+    return "a comment";
+  }
+  if (stringQuote) {
+    return "a string";
   }
   if (braceDepth === 0) {
-    // outside any rule: a selector, or an at-rule prelude
-    return false;
+    return "a selector, or an at-rule prelude";
   }
   if (!colonSeen) {
-    // a property name, or a nested selector
-    return false;
+    return "a property name, or a nested selector";
   }
   if (css.slice(statementStart, position).trimStart().startsWith("@")) {
-    // an at-rule prelude nested in a rule, "@media (min-width: ...)"
-    return false;
+    return "a nested at-rule prelude";
   }
   if (functionStack[functionStack.length - 1] === "url") {
     // url() takes an url, and an url built at runtime is not one the build
     // can follow to a file
-    return false;
+    return "url()";
   }
   // A ":" also opens a pseudo class, so what looks like a value here can still
   // be the end of a nested selector; that is settled by what closes it.
-  return closedByDeclarationEnd(css, position);
+  if (!closedByDeclarationEnd(css, position)) {
+    return "a nested selector";
+  }
+  return null;
 };
 
 const readFunctionNameBefore = (css, parenthesisIndex) => {

package/src/js/js_static_analysis/import_meta_css.js

@@ -12,7 +12,7 @@ export const isImportMetaCssAssignment = (node) => {
 
 export const analyzeImportMetaCssAssignment = (
   node,
-  { js, ast, ancestors, onInlineContent },
+  { js, ast, ancestors, onInlineContent, onOpaqueContent },
 ) => {
   // "import.meta.css = [css, url]": the array form a pre-built file ships
   // (see jsenv:import_meta_css); the css is the first element.
@@ -21,6 +21,9 @@ export const analyzeImportMetaCssAssignment = (
   if (!assignedNode) {
     return;
   }
+  // a pre-built package ships "[css, url]": its css was written in a source
+  // this build does not have, so this build is not where it can be fixed
+  const alreadyBuilt = node.right.type === "ArrayExpression";
   // "const css = `...`; import.meta.css = css;" — the css is where the constant
   // is declared, and that is where it is read and rewritten.
   const nodeHoldingContent =
@@ -58,7 +61,16 @@ export const analyzeImportMetaCssAssignment = (
     nodeHoldingContent,
     js,
   );
-  if (!substitutionInfo) {
+  if (substitutionInfo.opaque) {
+    onOpaqueContent({
+      ...position,
+      ...substitutionInfo.opaque,
+      alreadyBuilt,
+      templateSource: js.slice(
+        nodeHoldingContent.start,
+        nodeHoldingContent.end,
+      ),
+    });
     return;
   }
   onInlineContent({
@@ -69,6 +81,7 @@ export const analyzeImportMetaCssAssignment = (
     quote: "`",
     content: substitutionInfo.content,
     substitutions: substitutionInfo.substitutions,
+    alreadyBuilt,
     astInfo: { node: nodeHoldingContent },
   });
 };

package/src/js/parse_js_urls.js

@@ -78,6 +78,13 @@ export const parseJsUrls = ({
       ...inlineContentInfo,
     });
   };
+  // css the build cannot read: no url info comes out of it, only a way to tell
+  const onOpaqueContent = (opaqueContentInfo) => {
+    jsUrls.push({
+      isOpaqueCss: true,
+      ...opaqueContentInfo,
+    });
+  };
 
   const getCommentBeforeClosingParenthesis = (
     // either new InlineContent() or JSON.parse() for instance
@@ -141,6 +148,7 @@ export const parseJsUrls = ({
           ast,
           ancestors,
           onInlineContent,
+          onOpaqueContent,
         });
       }
     },

package/src/main.js

@@ -59,6 +59,9 @@ export { visitJsAstUntil } from "./js/visit_js_ast_until.js";
 export { visitJsAst } from "./js/visit_js_ast.js";
 export { getImportMetaPropertyName } from "./js/import_meta.js";
 export { getUrlForContentInsideJs } from "./js/js_inline_content_url.js";
-export { renderCssTemplateLiteral } from "./js/js_static_analysis/css_template_substitutions.js";
+export {
+  hasCssOpaqueDirective,
+  renderCssTemplateLiteral,
+} from "./js/js_static_analysis/css_template_substitutions.js";
 
 export { generateUrlForInlineContent } from "./inline_content_url.js";