fix(styles): fix CSS injector

package.json

@@ -46,6 +46,7 @@
     "@rollup/plugin-commonjs": "^11",
     "@rollup/plugin-json": "^4",
     "@rollup/plugin-node-resolve": "^7",
+    "@rollup/plugin-replace": "^2",
     "@types/cssnano": "^4",
     "@types/fs-extra": "^8",
     "@types/icss-utils": "^4",
@@ -80,7 +81,7 @@
     "rimraf": "^3",
     "rollup": "^2",
     "rollup-plugin-auto-external": "^2",
-    "rollup-plugin-terser": "^5",
+    "rollup-plugin-copy": "^3",
     "sass": "^1",
     "stylus": "^0.54",
     "sugarss": "^2",

rollup.config.js

@@ -1,10 +1,13 @@
 import json from "@rollup/plugin-json";
+import replace from "@rollup/plugin-replace";
 import resolve from "@rollup/plugin-node-resolve";
 import commonjs from "@rollup/plugin-commonjs";
 import autoExternal from "rollup-plugin-auto-external";
+import copy from "rollup-plugin-copy";
 import ts from "@wessberg/rollup-plugin-ts";
 import pkg from "./package.json";
 
+import { dirname } from "path";
 export default {
   external: ["postcss"],
   input: "src/index.ts",
@@ -14,12 +17,14 @@ export default {
   ],
   plugins: [
     json(),
+    replace({ "process.env.ROLLUP_POSTCSS_TEST": false }),
     resolve({
       preferBuiltins: true,
       extensions: [".ts", ".mjs", ".js", ".json"],
     }),
     commonjs(),
     autoExternal(),
+    copy({ targets: [{ src: "runtime", dest: dirname(pkg.main) }] }),
     ts({ transpiler: "babel" }),
   ],
 };

runtime/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  env: { node: false, browser: true },
+  rules: { "prefer-const": "error" },
+};

src/runtime/inject-css.js → runtime/inject-css.js

@@ -13,6 +13,9 @@ const styleTags = [];
  */
 export default (css, options = {}) => {
   if (!css || typeof document === "undefined") return;
+  const singleTag = typeof options.singeTag !== "undefined" ? options.singleTag : false;
+  const container = typeof options.container !== "undefined" ? options.container : document.head;
+  const position = options.prepend === true ? "prepend" : "append";
 
   const createStyleTag = () => {
     const styleTag = document.createElement("style");
@@ -25,10 +28,6 @@ export default (css, options = {}) => {
     return styleTag;
   };
 
-  const singleTag = typeof options.singeTag !== "undefined" ? options.singleTag : false;
-  const container = typeof options.container !== "undefined" ? options.container : document.head;
-  const position = options.prepend === true ? "prepend" : "append";
-
   /** @type {HTMLStyleElement} */
   let styleTag;
 

src/loaders/postcss/index.ts

@@ -195,7 +195,9 @@ const loader: Loader<PostCSSLoaderOptions> = {
         const injectorName = safeId("injector");
         const injectorPath = normalizePath(
           await resolveAsync("./inject-css", {
-            basedir: path.join(__dirname, "..", "..", "runtime"),
+            basedir: process.env.ROLLUP_POSTCSS_TEST
+              ? path.join(process.cwd(), "runtime")
+              : path.join(__dirname, "runtime"),
           }),
         );
         const injectorData =