refactor: migrate to beasties and beasties-webpack-plugin (#2)

LICENSE

@@ -188,6 +188,7 @@
       identification within third-party archives.
 
    Copyright 2018 Google Inc.
+   Copyright 2024 Daniel Roe
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
@@ -199,4 +200,4 @@
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
-   limitations under the License.
+   limitations under the License.

README.md

@@ -1 +1 @@
-packages/critters/README.md
+packages/beasties/README.md

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "critters-root",
+  "name": "beasties-root",
   "private": true,
   "description": "Inline critical CSS and lazy-load the rest.",
   "license": "Apache-2.0",
@@ -12,6 +12,11 @@
     {
       "name": "Janicklas Ralph",
       "email": "[email protected]"
+    },
+    {
+      "name": "Daniel Roe",
+      "email": "[email protected]",
+      "url": "https://roe.dev"
     }
   ],
   "workspaces": {
@@ -27,8 +32,8 @@
   },
   "scripts": {
     "build": "yarn workspaces run build",
-    "build:main": "yarn workspace critters run build",
-    "build:webpack": "yarn workspace critters-webpack-plugin run build",
+    "build:main": "yarn workspace beasties run build",
+    "build:webpack": "yarn workspace beasties-webpack-plugin run build",
     "docs": "yarn workspaces run docs",
     "release": "npm run build -s && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish",
     "test": "jest --coverage"
@@ -44,15 +49,15 @@
       "text"
     ],
     "moduleNameMapper": {
-      "^critters$": "<rootDir>/packages/critters/src/index.js",
+      "^beasties$": "<rootDir>/packages/beasties/src/index.js",
       "#(.*)": "<rootDir>/node_modules/$1"
     },
     "collectCoverageFrom": [
       "packages/*/src/**/*.js"
     ],
     "modulePaths": [
-      "<rootDir>/packages/critters-webpack-plugin/node_modules",
-      "<rootDir>/packages/critters/node_modules"
+      "<rootDir>/packages/beasties-webpack-plugin/node_modules",
+      "<rootDir>/packages/beasties/node_modules"
     ],
     "watchPathIgnorePatterns": [
       "node_modules",
@@ -99,5 +104,8 @@
     "jsdom": "^16.6.0",
     "microbundle": "^0.12.3",
     "prettier": "^2.3.0"
+  },
+  "resolutions": {
+    "beasties": "file:./packages/beasties"
   }
 }

packages/critters-webpack-plugin/README.md → packages/beasties-webpack-plugin/README.md

@@ -1,15 +1,15 @@
 <p align="center">
-  <img src="https://i.imgur.com/J0jv1Sz.png" width="240" height="240" alt="critters-webpack-plugin">
-  <h1 align="center">Critters Webpack plugin</h1>
+  <img src="https://i.imgur.com/J0jv1Sz.png" width="240" height="240" alt="beasties-webpack-plugin">
+  <h1 align="center">Beasties Webpack plugin</h1>
 </p>
 
-> critters-webpack-plugin inlines your app's [critical CSS] and lazy-loads the rest.
+> beasties-webpack-plugin inlines your app's [critical CSS] and lazy-loads the rest.
 
-## critters-webpack-plugin [![npm](https://img.shields.io/npm/v/critters-webpack-plugin.svg?style=flat)](https://www.npmjs.org/package/critters-webpack-plugin)
+## beasties-webpack-plugin [![npm](https://img.shields.io/npm/v/beasties-webpack-plugin.svg?style=flat)](https://www.npmjs.org/package/beasties-webpack-plugin)
 
-It's a little different from [other options](#similar-libraries), because it **doesn't use a headless browser** to render content. This tradeoff allows Critters to be very **fast and lightweight**. It also means Critters inlines all CSS rules used by your document, rather than only those needed for above-the-fold content. For alternatives, see [Similar Libraries](#similar-libraries).
+It's a little different from [other options](#similar-libraries), because it **doesn't use a headless browser** to render content. This tradeoff allows Beasties to be very **fast and lightweight**. It also means Beasties inlines all CSS rules used by your document, rather than only those needed for above-the-fold content. For alternatives, see [Similar Libraries](#similar-libraries).
 
-Critters' design makes it a good fit when inlining critical CSS for prerendered/SSR'd Single Page Applications. It was developed to be an excellent compliment to [prerender-loader](https://github.com/GoogleChromeLabs/prerender-loader), combining to dramatically improve first paint time for most Single Page Applications.
+Beasties' design makes it a good fit when inlining critical CSS for prerendered/SSR'd Single Page Applications. It was developed to be an excellent compliment to [prerender-loader](https://github.com/GoogleChromeLabs/prerender-loader), combining to dramatically improve first paint time for most Single Page Applications.
 
 ## Features
 
@@ -22,21 +22,21 @@ Critters' design makes it a good fit when inlining critical CSS for prerendered/
 
 ## Installation
 
-First, install Critters as a development dependency:
+First, install Beasties as a development dependency:
 
 ```sh
-npm i -D critters-webpack-plugin
+npm i -D beasties-webpack-plugin
 ```
 
-Then, import Critters into your Webpack configuration and add it to your list of plugins:
+Then, import Beasties into your Webpack configuration and add it to your list of plugins:
 
 ```diff
 // webpack.config.js
-+const Critters = require('critters-webpack-plugin');
++const Beasties = require('beasties-webpack-plugin');
 
 module.exports = {
   plugins: [
-+    new Critters({
++    new Beasties({
 +      // optional configuration (see below)
 +    })
   ]
@@ -49,23 +49,23 @@ That's it! Now when you run Webpack, the CSS used by your HTML will be inlined a
 
 <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
 
-### CrittersWebpackPlugin
+### BeastiesWebpackPlugin
 
-**Extends Critters**
+**Extends Beasties**
 
-Create a Critters plugin instance with the given options.
+Create a Beasties plugin instance with the given options.
 
 #### Parameters
 
-*   `options` **Options** Options to control how Critters inlines CSS. See <https://github.com/GoogleChromeLabs/critters#usage>
+*   `options` **Options** Options to control how Beasties inlines CSS. See <https://github.com/danielroe/beasties#usage>
 
 #### Examples
 
 ```javascript
 // webpack.config.js
 module.exports = {
   plugins: [
-    new Critters({
+    new Beasties({
       // Outputs: <link rel="preload" onload="this.rel='stylesheet'">
       preload: 'swap',
 

packages/critters-webpack-plugin/package.json → packages/beasties-webpack-plugin/package.json

@@ -1,14 +1,14 @@
 {
-  "name": "critters-webpack-plugin",
+  "name": "beasties-webpack-plugin",
   "version": "3.0.2",
   "description": "Webpack plugin to inline critical CSS and lazy-load the rest.",
-  "main": "dist/critters-webpack-plugin.js",
-  "module": "dist/critters-webpack-plugin.mjs",
+  "main": "dist/beasties-webpack-plugin.js",
+  "module": "dist/beasties-webpack-plugin.mjs",
   "source": "src/index.js",
   "exports": {
-    "import": "./dist/critters-webpack-plugin.mjs",
-    "require": "./dist/critters-webpack-plugin.js",
-    "default": "./dist/critters-webpack-plugin.mjs"
+    "import": "./dist/beasties-webpack-plugin.mjs",
+    "require": "./dist/beasties-webpack-plugin.js",
+    "default": "./dist/beasties-webpack-plugin.mjs"
   },
   "files": [
     "src",
@@ -24,20 +24,25 @@
     {
       "name": "Janicklas Ralph",
       "email": "[email protected]"
+    },
+    {
+      "name": "Daniel Roe",
+      "email": "[email protected]",
+      "url": "https://roe.dev"
     }
   ],
   "keywords": [
     "critical css",
     "inline css",
     "critical",
-    "critters",
+    "beasties",
     "webpack plugin",
     "performance"
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/GoogleChromeLabs/critters",
-    "directory": "packages/critters-webpack-plugin"
+    "url": "https://github.com/danielroe/beasties",
+    "directory": "packages/beasties-webpack-plugin"
   },
   "scripts": {
     "build": "microbundle --target node --no-sourcemap -f cjs,esm",
@@ -54,7 +59,7 @@
     "webpack": "^4.46.0"
   },
   "dependencies": {
-    "critters": "^0.0.16",
+    "beasties": "^0.0.16",
     "minimatch": "^3.0.4",
     "webpack-log": "^3.0.1",
     "webpack-sources": "^1.3.0"

packages/critters-webpack-plugin/src/index.js → packages/beasties-webpack-plugin/src/index.js

@@ -19,7 +19,7 @@ import { createRequire } from 'module';
 import minimatch from 'minimatch';
 import sources from 'webpack-sources';
 import log from 'webpack-log';
-import Critters from 'critters';
+import Beasties from 'beasties';
 import { tap } from './util';
 
 const $require =
@@ -28,19 +28,19 @@ const $require =
     : createRequire(eval('import.meta.url'));
 
 // Used to annotate this plugin's hooks in Tappable invocations
-const PLUGIN_NAME = 'critters-webpack-plugin';
+const PLUGIN_NAME = 'beasties-webpack-plugin';
 
-/** @typedef {import('critters').Options} Options */
+/** @typedef {import('beasties').Options} Options */
 
 /**
- * Create a Critters plugin instance with the given options.
+ * Create a Beasties plugin instance with the given options.
  * @public
- * @param {Options} options Options to control how Critters inlines CSS. See https://github.com/GoogleChromeLabs/critters#usage
+ * @param {Options} options Options to control how Beasties inlines CSS. See https://github.com/danielroe/beasties#usage
  * @example
  * // webpack.config.js
  * module.exports = {
  *   plugins: [
- *     new Critters({
+ *     new Beasties({
  *       // Outputs: <link rel="preload" onload="this.rel='stylesheet'">
  *       preload: 'swap',
  *
@@ -50,13 +50,13 @@ const PLUGIN_NAME = 'critters-webpack-plugin';
  *   ]
  * }
  */
-export default class CrittersWebpackPlugin extends Critters {
+export default class BeastiesWebpackPlugin extends Beasties {
   constructor(options) {
     super(options);
 
     // TODO: Remove webpack-log
     this.logger = log({
-      name: 'Critters',
+      name: 'Beasties',
       unique: true,
       level: this.options.logLevel
     });

packages/critters-webpack-plugin/test/__snapshots__/index.test.js.snap → packages/beasties-webpack-plugin/test/__snapshots__/index.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`External CSS should match snapshot 1`] = `
 "<!DOCTYPE html>
-<html data-critters-container>
+<html data-beasties-container>
   <head>
     <title>External CSS Demo</title>
   <style>:root {
@@ -90,7 +90,7 @@ exports[`Inline <style> pruning should remove entire unused stylesheets 1`] = `
 
 exports[`Inline <style> pruning should remove unused rules 1`] = `
 "<!DOCTYPE html>
-<html data-critters-container>
+<html data-beasties-container>
   <head>
     <title>Basic Demo</title>
     <style>
@@ -167,7 +167,7 @@ exports[`Inline <style> pruning should remove unused rules 1`] = `
 
 exports[`options { additionalStylesheets:["*.css"] } should match snapshot 1`] = `
 "<!DOCTYPE html>
-<html data-critters-container>
+<html data-beasties-container>
   <head>
     <title>Additional Stylesheet CSS Demo</title>
   <style>html {
@@ -202,7 +202,7 @@ html {
 
 exports[`options { async:true } should match snapshot 1`] = `
 "<!DOCTYPE html>
-<html data-critters-container>
+<html data-beasties-container>
   <head>
     <title>External CSS Demo</title>
   <style>:root {
@@ -273,7 +273,7 @@ footer {
 
 exports[`publicPath should match snapshot 1`] = `
 "<!DOCTYPE html>
-<html data-critters-container>
+<html data-beasties-container>
   <head>
     <title>External CSS Demo</title>
   <style>:root {

packages/critters-webpack-plugin/test/__snapshots__/standalone.test.js.snap → packages/beasties-webpack-plugin/test/__snapshots__/standalone.test.js.snap

@@ -10,7 +10,7 @@ exports[`Usage without html-webpack-plugin should process the first html asset 1
 
 exports[`Usage without html-webpack-plugin should process the first html asset 2`] = `
 "<!DOCTYPE html>
-<html data-critters-container>
+<html data-beasties-container>
   <head>
     <title>Basic Demo</title>
     

packages/critters-webpack-plugin/test/_helpers.js → packages/beasties-webpack-plugin/test/_helpers.js

@@ -19,7 +19,7 @@ import fs from 'fs';
 import path from 'path';
 import webpack from 'webpack';
 import { JSDOM } from 'jsdom';
-import CrittersWebpackPlugin from '../src/index.js';
+import BeastiesWebpackPlugin from '../src/index.js';
 
 const { window } = new JSDOM();
 
@@ -70,20 +70,20 @@ export function compile(entry, configDecorator) {
   });
 }
 
-// invoke webpack via compile(), applying Critters to inline CSS and injecting `html` and `document` properties into the webpack build info.
+// invoke webpack via compile(), applying Beasties to inline CSS and injecting `html` and `document` properties into the webpack build info.
 export async function compileToHtml(
   fixture,
   configDecorator,
-  crittersOptions = {}
+  beastiesOptions = {}
 ) {
   const info = await compile(`fixtures/${fixture}/index.js`, (config) => {
     config = configDecorator(config) || config;
     config.plugins.push(
-      new CrittersWebpackPlugin({
+      new BeastiesWebpackPlugin({
         pruneSource: true,
         compress: false,
         logLevel: 'silent',
-        ...crittersOptions
+        ...beastiesOptions
       })
     );
   });