Fix resolution of @csstools/normalize.css path when using ESM

src/lib/cssMap.js

@@ -1,12 +1,9 @@
 import { create } from './util'
-import Module from 'module'
+import { createRequire}  from 'node:module'
 import path from 'path'
-import { URL } from 'url'
 
-// get esm-compatible script metadata
-const currentURL = import.meta.url
-const currentFilename = new URL(currentURL).pathname
-const currentDirname = path.dirname(currentFilename)
+// create package path resolver in an esm-compatible fashion
+const {resolve: requireResolve} = createRequire(import.meta.url) 
 
 // get resolved filenames for normalize.css
 const normalizeCSS = resolve('@csstools/normalize.css')
@@ -54,9 +51,5 @@ export const resolvedFilenamesById = create({
 
 // get the resolved filename of a package/module
 function resolve (id) {
-	return resolve[id] = resolve[id] || Module._resolveFilename(id, {
-		id: currentFilename,
-		filename: currentFilename,
-		paths: Module._nodeModulePaths(currentDirname)
-	})
+	return resolve[id] = resolve[id] || requireResolve(id)
 }

test/basic-normalize.expect.css

@@ -3,14 +3,10 @@
 
 /**
  * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in
- *    IE on Windows Phone and in iOS.
  */
 
-html {
+:where(html) {
   line-height: 1.15; /* 1 */
-  -ms-text-size-adjust: 100%; /* 2 */
-  -webkit-text-size-adjust: 100%; /* 2 */
 }
 
 /* Sections
@@ -21,64 +17,41 @@ html {
  * `article` contexts in Chrome, Edge, Firefox, and Safari.
  */
 
-h1 {
+:where(h1) {
   font-size: 2em;
-  margin: 0.67em 0;
+  margin-block-end: 0.67em;
+  margin-block-start: 0.67em;
 }
 
 /* Grouping content
  * ========================================================================== */
 
 /**
- * Remove the margin on nested lists in Chrome, Edge, IE, and Safari.
+ * Remove the margin on nested lists in Chrome, Edge, and Safari.
  */
 
-dl dl,
-dl ol,
-dl ul,
-ol dl,
-ul dl {
-  margin: 0;
-}
-
-/**
- * Remove the margin on nested lists in Edge 18- and IE.
- */
-
-ol ol,
-ol ul,
-ul ol,
-ul ul {
-  margin: 0;
+:where(dl, ol, ul) :where(dl, ol, ul) {
+  margin-block-end: 0;
+  margin-block-start: 0;
 }
 
 /**
  * 1. Add the correct box sizing in Firefox.
  * 2. Correct the inheritance of border color in Firefox.
- * 3. Show the overflow in Edge 18- and IE.
  */
 
-hr {
+:where(hr) {
   box-sizing: content-box; /* 1 */
   color: inherit; /* 2 */
   height: 0; /* 1 */
-  overflow: visible; /* 3 */
-}
-
-/**
- * Add the correct display in IE.
- */
-
-main {
-  display: block;
 }
 
 /**
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  */
 
-pre {
+:where(pre) {
   font-family: monospace, monospace; /* 1 */
   font-size: 1em; /* 2 */
 }
@@ -87,10 +60,10 @@ pre {
  * ========================================================================== */
 
 /**
- * Add the correct text decoration in Edge 18-, IE, and Safari.
+ * Add the correct text decoration in Safari.
  */
 
-abbr[title] {
+:where(abbr[title]) {
   text-decoration: underline;
   text-decoration: underline dotted;
 }
@@ -99,8 +72,7 @@ abbr[title] {
  * Add the correct font weight in Chrome, Edge, and Safari.
  */
 
-b,
-strong {
+:where(b, strong) {
   font-weight: bolder;
 }
 
@@ -109,9 +81,7 @@ strong {
  * 2. Correct the odd `em` font sizing in all browsers.
  */
 
-code,
-kbd,
-samp {
+:where(code, kbd, samp) {
   font-family: monospace, monospace; /* 1 */
   font-size: 1em; /* 2 */
 }
@@ -120,31 +90,20 @@ samp {
  * Add the correct font size in all browsers.
  */
 
-small {
+:where(small) {
   font-size: 80%;
 }
 
-/* Embedded content
- * ========================================================================== */
-
-/**
- * Hide the overflow in IE.
- */
-
-svg:not(:root) {
-  overflow: hidden;
-}
-
 /* Tabular data
  * ========================================================================== */
 
 /**
- * 1. Correct table border color inheritance in all Chrome, Edge, and Safari.
+ * 1. Correct table border color in Chrome, Edge, and Safari.
  * 2. Remove text indentation from table contents in Chrome, Edge, and Safari.
  */
 
-table {
-  border-color: inherit; /* 1 */
+:where(table) {
+  border-color: currentColor; /* 1 */
   text-indent: 0; /* 2 */
 }
 
@@ -155,96 +114,56 @@ table {
  * Remove the margin on controls in Safari.
  */
 
-button,
-input,
-select {
+:where(button, input, select) {
   margin: 0;
 }
 
 /**
- * 1. Show the overflow in IE.
- * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE.
+ * Remove the inheritance of text transform in Firefox.
  */
 
-button {
-  overflow: visible; /* 1 */
-  text-transform: none; /* 2 */
+:where(button) {
+  text-transform: none;
 }
 
 /**
  * Correct the inability to style buttons in iOS and Safari.
  */
 
-button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
+:where(button, input:is([type="button" i], [type="reset" i], [type="submit" i])) {
   -webkit-appearance: button;
 }
 
 /**
- * Correct the padding in Firefox.
+ * Add the correct vertical alignment in Chrome, Edge, and Firefox.
  */
 
-fieldset {
-  padding: 0.35em 0.75em 0.625em;
-}
-
-/**
- * Show the overflow in Edge 18- and IE.
- */
-
-input {
-  overflow: visible;
-}
-
-/**
- * 1. Correct the text wrapping in Edge 18- and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- */
-
-legend {
-  box-sizing: border-box; /* 1 */
-  color: inherit; /* 2 */
-  display: table; /* 1 */
-  max-width: 100%; /* 1 */
-  white-space: normal; /* 1 */
-}
-
-/**
- * 1. Add the correct display in Edge 18- and IE.
- * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox.
- */
-
-progress {
-  display: inline-block; /* 1 */
-  vertical-align: baseline; /* 2 */
+:where(progress) {
+  vertical-align: baseline;
 }
 
 /**
  * Remove the inheritance of text transform in Firefox.
  */
 
-select {
+:where(select) {
   text-transform: none;
 }
 
 /**
- * 1. Remove the margin in Firefox and Safari.
- * 2. Remove the default vertical scrollbar in IE.
+ * Remove the margin in Firefox and Safari.
  */
 
-textarea {
-  margin: 0; /* 1 */
-  overflow: auto; /* 2 */
+:where(textarea) {
+  margin: 0;
 }
 
 /**
  * 1. Correct the odd appearance in Chrome, Edge, and Safari.
  * 2. Correct the outline style in Safari.
  */
 
-[type="search"] {
+:where(input[type="search" i]) {
   -webkit-appearance: textfield; /* 1 */
   outline-offset: -2px; /* 2 */
 }
@@ -289,7 +208,7 @@ textarea {
  * Remove the inner border and padding of focus outlines in Firefox.
  */
 
-::-moz-focus-inner {
+:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
@@ -298,77 +217,52 @@ textarea {
  * Restore the focus outline styles unset by the previous rule in Firefox.
  */
 
-:-moz-focusring {
+:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focusring {
   outline: 1px dotted ButtonText;
 }
 
 /**
  * Remove the additional :invalid styles in Firefox.
  */
 
-:-moz-ui-invalid {
+:where(:-moz-ui-invalid) {
   box-shadow: none;
 }
 
 /* Interactive
  * ========================================================================== */
 
 /*
- * Add the correct display in Edge 18- and IE.
- */
-
-details {
-  display: block;
-}
-
-/*
- * Add the correct styles in Edge 18-, IE, and Safari.
+ * Add the correct styles in Safari.
  */
 
-dialog {
+:where(dialog) {
   background-color: white;
   border: solid;
   color: black;
-  display: block;
   height: -moz-fit-content;
-  height: -webkit-fit-content;
   height: fit-content;
   left: 0;
   margin: auto;
   padding: 1em;
   position: absolute;
   right: 0;
   width: -moz-fit-content;
-  width: -webkit-fit-content;
   width: fit-content;
 }
 
-dialog:not([open]) {
+:where(dialog:not([open])) {
   display: none;
 }
 
 /*
  * Add the correct display in all browsers.
  */
 
-summary {
+:where(summary) {
   display: list-item;
 }
 
-/* Scripting
- * ========================================================================== */
-
-/**
- * Add the correct display in IE.
- */
-
-template {
-  display: none;
-}
-
-/* User interaction
- * ========================================================================== */
-
 body {
 	font-family: sans-serif;
 }