[3.0.0] migrate to Postcss 8 API

csstools · Oct 11, 2020 · 9efffe8 · 9efffe8
1 parent 3009368
commit 9efffe8
Show file tree

Hide file tree

Showing 8 changed files with 1,027 additions and 1,238 deletions.
diff --git a/.npmignore b/.npmignore
@@ -1,8 +1,11 @@
 .gitignore
 
 node_modules/
-
 test/
+.vscode/
+
 .travis.yml
+.editorconfig
+.eslintrc
+.prettierrc
 
-gulpfile.js
diff --git a/.travis.yml b/.travis.yml
@@ -1,4 +1,4 @@
 sudo: false
 language: node_js
 node_js:
-  - 8
+  - 10
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,12 @@
+## 3.0.0 (2020-10-03)
+
+Dropped support of Node.js 6.x, 8.x, 11.x, and 13.x
+
+Added: Migrate to Postcss 8 API
+Updated: dev dependecies
+Updated: package.json
+
+
 ## 2.3.1 (2019-11-13)
 
 Added: Support of Material Icons font
@@ -57,8 +66,11 @@ Changed: added option with custom path in the `hosted` method.
 ## 1.5.0 (2016-10-11)
 
 Added: `variants` method
+
 Added: support of 'font-display'
+
 Added: support of 'font-stretch'
+
 Added: support of 'unicode-range'
 
 ## 1.4.1 (2016-10-10)

diff --git a/README.md b/README.md
@@ -51,11 +51,11 @@ Need more? Request additional magic by [creating an issue].
 
 Add [Font Magician] to your build tool.
 ```sh
-npm install postcss-font-magician --save-dev
+npm install postcss postcss-font-magician --save-dev
 ```
 or
 ```sh
-yarn add postcss-font-magician --dev
+yarn add postcss postcss-font-magician --dev
 ```
 
 ### Node

diff --git a/index.js b/index.js
@@ -311,106 +311,110 @@ function plugin(initialOptions) {
     };
 
     // return the plugin
-    return function(css) {
-        // set font families in use
-        let fontFamiliesDeclared = {};
-        let hostedOption = options.hosted;
-
-        // if hosted fonts are present and permitted
-        if (hostedOption.length) {
-            options.foundries = [
-                'hosted',
-                ...options.foundries.filter(f => f !== 'hosted')
-            ];
-
-            // get the relative font path specified by the user
-            if (typeof hostedOption === 'string') {
-                hostedOption = hostedOption.split();
-            }
-
-            const relativePath = removeTrailingSlash(hostedOption[0]);
+    return {
+        postcssPlugin: 'postcss-font-magician',
+        Once(root, { result }) {
+            // set font families in use
+            let fontFamiliesDeclared = {};
+            let hostedOption = options.hosted;
+
+            // if hosted fonts are present and permitted
+            if (hostedOption.length) {
+                options.foundries = [
+                    'hosted',
+                    ...options.foundries.filter(f => f !== 'hosted')
+                ];
+
+                // get the relative font path specified by the user
+                if (typeof hostedOption === 'string') {
+                    hostedOption = hostedOption.split();
+                }
 
-            // get the relative path to the font style file
-            const relativeFontPath = css.source.input.file
-                ? getRelativePath(css.source.input.file, relativePath.toString())
-                : null;
+                const relativePath = removeTrailingSlash(hostedOption[0]);
 
-            // use the custom font path specified by the user or the relative path
-            const customFontPath = hostedOption[1]
-                ? removeTrailingSlash(hostedOption[1])
-                : relativeFontPath;
+                // get the relative path to the font style file
+                const relativeFontPath = root.source.input.file
+                    ? getRelativePath(root.source.input.file, relativePath.toString())
+                    : null;
 
-            // set the hosted fonts by relative directory
-            foundries.hosted = getDirectoryFonts(relativePath, customFontPath, true);
-        } else {
-            // otherwise delete the hosted foundries
-            delete foundries.hosted;
-        }
+                // use the custom font path specified by the user or the relative path
+                const customFontPath = hostedOption[1]
+                    ? removeTrailingSlash(hostedOption[1])
+                    : relativeFontPath;
 
-        // for each font face rule
-        css.walkAtRules('font-face', rule => {
-            // for each font-family declaration
-            rule.walkDecls('font-family', decl => {
-                // set the font family
-                const family = getQuoteless(decl.value);
+                // set the hosted fonts by relative directory
+                foundries.hosted = getDirectoryFonts(relativePath, customFontPath, true);
+            } else {
+                // otherwise delete the hosted foundries
+                delete foundries.hosted;
+            }
 
-                // set the font family as declared
-                fontFamiliesDeclared[family] = true;
+            // for each font face rule
+            root.walkAtRules('font-face', rule => {
+                // for each font-family declaration
+                rule.walkDecls('font-family', decl => {
+                    // set the font family
+                    const family = getQuoteless(decl.value);
+
+                    // set the font family as declared
+                    fontFamiliesDeclared[family] = true;
+                });
             });
-        });
 
-        // for each font declaration
-        css.walkDecls(/^font(-family)?$/, decl => {
-            // set the font family as the first declared font family
-            const family = getFirstFontFamily(decl);
+            // for each font declaration
+            root.walkDecls(/^font(-family)?$/, decl => {
+                // set the font family as the first declared font family
+                const family = getFirstFontFamily(decl);
 
-            // if the font family is not declared
-            if (!fontFamiliesDeclared[family]) {
-                // set the font family as declared
-                fontFamiliesDeclared[family] = true;
+                // if the font family is not declared
+                if (!fontFamiliesDeclared[family]) {
+                    // set the font family as declared
+                    fontFamiliesDeclared[family] = true;
 
-                // set the font face rules
-                const fontFaceRules = getFontFaceRules(family, foundries, options);
+                    // set the font face rules
+                    const fontFaceRules = getFontFaceRules(family, foundries, options);
 
-                // if the font face rules array is filled
-                if (fontFaceRules.length) {
-                    // prepend the font face rules
-                    css.prepend(fontFaceRules);
+                    // if the font face rules array is filled
+                    if (fontFaceRules.length) {
+                        // prepend the font face rules
+                        root.prepend(fontFaceRules);
+                    }
                 }
-            }
-        });
+            });
 
-        if (options.async) {
-            let fontFaces = [];
+            if (options.async) {
+                let fontFaces = [];
 
-            // for each font face rule
-            css.walkAtRules('font-face', rule => {
-                rule.remove();
-
-                fontFaces.push({
-                    family: getValueByDeclaration(rule, 'font-family'),
-                    weight: getValueByDeclaration(rule, 'font-weight'),
-                    style: getValueByDeclaration(rule, 'font-style'),
-                    src: getValueByDeclaration(rule, 'src')
+                // for each font face rule
+                root.walkAtRules('font-face', rule => {
+                    rule.remove();
+
+                    fontFaces.push({
+                        family: getValueByDeclaration(rule, 'font-family'),
+                        weight: getValueByDeclaration(rule, 'font-weight'),
+                        style: getValueByDeclaration(rule, 'font-style'),
+                        src: getValueByDeclaration(rule, 'src')
+                    });
                 });
-            });
 
-            if (fontFaces) {
-                const asyncPath = getRelativePath(css.source.input.file, options.async);
+                if (fontFaces) {
+                    const asyncPath = getRelativePath(root.source.input.file, options.async);
 
-                const asyncJs =
-                    '(function(){' +
-                    fs.readFileSync('loader.min.js', 'utf8') +
-                    'loadFonts(' +
-                    JSON.stringify(fontFaces) +
-                    ')' +
-                    '})()';
+                    const asyncJs =
+                        '(function(){' +
+                        fs.readFileSync('loader.min.js', 'utf8') +
+                        'loadFonts(' +
+                        JSON.stringify(fontFaces) +
+                        ')' +
+                        '})()';
 
-                fs.writeFileSync(asyncPath, asyncJs);
+                    fs.writeFileSync(asyncPath, asyncJs);
+                }
             }
         }
     };
 }
 
 // set plugin
-module.exports = postcss.plugin('postcss-font-magician', plugin);
+module.exports.postcss = true;
+module.exports = plugin;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "postcss-font-magician",
-  "version": "2.3.1",
+  "version": "3.0.0",
   "description": "PostCSS plugin that magically generates all the @font-face rules",
   "author": "Jonathan Neal <[email protected]>",
   "contributors": [
@@ -18,28 +18,30 @@
     "lint": "./node_modules/.bin/eslint index.js"
   },
   "engines": {
-    "node": ">=8"
+    "node": "^10 || ^12 || >=14"
   },
   "lint-staged": {
     "*.js": [
-      "npm run test --",
-      "git add"
+      "npm run test --"
     ]
   },
   "dependencies": {
     "bootstrap-fonts-complete": "^1.0.0",
     "directory-fonts-complete": "^1.2.0",
-    "google-fonts-complete": "^2.1.0",
-    "postcss": "^7.0.21"
+    "google-fonts-complete": "^2.1.1"
   },
   "devDependencies": {
     "chai": "^4.2.0",
-    "eslint": "^6.6.0",
-    "eslint-config-prettier": "^6.5.0",
-    "eslint-plugin-prettier": "^3.1.1",
-    "husky": "^3.0.9",
-    "lint-staged": "^9.4.2",
-    "mocha": "^6.2.2"
+    "eslint": "^7.11.0",
+    "eslint-config-prettier": "^6.12.0",
+    "eslint-plugin-prettier": "^3.1.4",
+    "husky": "^4.3.0",
+    "lint-staged": "^10.4.0",
+    "mocha": "^8.1.3",
+    "postcss": "^8.1.1"
+  },
+  "peerDependencies": {
+    "postcss": "^8.0.0"
   },
   "keywords": [
     "postcss",