postcss-modules-values - npm Package Compare versions

Comparing version 3.0.0 to 4.0.0-rc.0

package.json

 {
   "name": "postcss-modules-values",
-  "version": "3.0.0",
+  "version": "4.0.0-rc.0",
   "description": "PostCSS plugin for CSS Modules to pass arbitrary values between your module files",
@@ -9,4 +9,9 @@ "main": "src/index.js",
   ],
+  "engines": {
+    "node": ">= 10.13.0 || >= 12.13.0 || >= 14"
+  },
   "scripts": {
-    "lint": "eslint src test",
+    "prettier": "prettier -l --ignore-path .gitignore .",
+    "eslint": "eslint --ignore-path .gitignore .",
+    "lint": "yarn eslint && yarn prettier",
     "pretest": "yarn lint",
@@ -16,3 +21,3 @@ "test": "mocha",
     "cover": "nyc mocha",
-    "travis": "yarn lint && yarn cover",
+    "ci": "yarn pretest && yarn cover",
     "prepublishOnly": "yarn test"
@@ -36,13 +41,17 @@ },
   "devDependencies": {
-    "chokidar-cli": "^1.0.1",
-    "codecov.io": "^0.1.2",
-    "coveralls": "^3.0.2",
-    "eslint": "^5.9.0",
-    "mocha": "^6.1.4",
-    "nyc": "^14.1.0"
+    "chokidar-cli": "^2.1.0",
+    "codecov.io": "^0.1.6",
+    "coveralls": "^3.1.0",
+    "eslint": "^7.9.0",
+    "mocha": "^8.1.3",
+    "nyc": "^15.1.0",
+    "postcss": "^8.0.3",
+    "prettier": "^2.1.2"
   },
   "dependencies": {
-    "icss-utils": "^4.0.0",
-    "postcss": "^7.0.6"
+    "icss-utils": "^4.1.1"
+  },
+  "peerDependencies": {
+    "postcss": "^8.0.3"
   }
 }

src/index.js

@@ -1,5 +0,5 @@
-'use strict';
+"use strict";
 
-const postcss = require('postcss');
-const ICSSUtils = require('icss-utils');
+const postcss = require("postcss");
+const ICSSUtils = require("icss-utils");
 
@@ -15,105 +15,122 @@ const matchImports = /^(.+?|\([\s\S]+?\))\s+from\s+("[^"]*"|'[^']*'|[\w-]+)$/;
   ((importName /*, path*/) =>
-    `i__const_${importName.replace(/\W/g, '_')}_${importIndex++}`);
+    `i__const_${importName.replace(/\W/g, "_")}_${importIndex++}`);
 
-module.exports = postcss.plugin(
-  'postcss-modules-values',
-  () => (css, result) => {
-    const importAliases = [];
-    const definitions = {};
+module.exports = () => {
+  return {
+    postcssPlugin: "postcss-modules-values",
+    prepare(result) {
+      const importAliases = [];
+      const definitions = {};
+      const addDefinition = (atRule) => {
+        let matches;
 
-    const addDefinition = atRule => {
-      let matches;
-      while ((matches = matchValueDefinition.exec(atRule.params))) {
-        let [, /*match*/ key, value] = matches;
-        // Add to the definitions, knowing that values can refer to each other
-        definitions[key] = ICSSUtils.replaceValueSymbols(value, definitions);
-        atRule.remove();
-      }
-    };
+        while ((matches = matchValueDefinition.exec(atRule.params))) {
+          let [, /*match*/ key, value] = matches;
 
-    const addImport = atRule => {
-      const matches = matchImports.exec(atRule.params);
-      if (matches) {
-        let [, /*match*/ aliases, path] = matches;
-        // We can use constants for path names
-        if (definitions[path]) {
-          path = definitions[path];
+          // Add to the definitions, knowing that values can refer to each other
+          definitions[key] = ICSSUtils.replaceValueSymbols(value, definitions);
+          atRule.remove();
         }
-        const imports = aliases
-          .replace(/^\(\s*([\s\S]+)\s*\)$/, '$1')
-          .split(/\s*,\s*/)
-          .map(alias => {
-            const tokens = matchImport.exec(alias);
-            if (tokens) {
-              const [, /*match*/ theirName, myName = theirName] = tokens;
-              const importedName = createImportedName(myName);
-              definitions[myName] = importedName;
-              return { theirName, importedName };
+      };
+      const addImport = (atRule) => {
+        const matches = matchImports.exec(atRule.params);
+
+        if (matches) {
+          let [, /*match*/ aliases, path] = matches;
+
+          // We can use constants for path names
+          if (definitions[path]) {
+            path = definitions[path];
+          }
+
+          const imports = aliases
+            .replace(/^\(\s*([\s\S]+)\s*\)$/, "$1")
+            .split(/\s*,\s*/)
+            .map((alias) => {
+              const tokens = matchImport.exec(alias);
+
+              if (tokens) {
+                const [, /*match*/ theirName, myName = theirName] = tokens;
+                const importedName = createImportedName(myName);
+                definitions[myName] = importedName;
+                return { theirName, importedName };
+              } else {
+                throw new Error(`@import statement "${alias}" is invalid!`);
+              }
+            });
+
+          importAliases.push({ path, imports });
+
+          atRule.remove();
+        }
+      };
+
+      return {
+        /* Look at all the @value statements and treat them as locals or as imports */
+        AtRule: {
+          value(atRule) {
+            if (matchImports.exec(atRule.params)) {
+              addImport(atRule);
             } else {
-              throw new Error(`@import statement "${alias}" is invalid!`);
+              if (atRule.params.indexOf("@value") !== -1) {
+                result.warn("Invalid value definition: " + atRule.params);
+              }
+
+              addDefinition(atRule);
             }
-          });
-        importAliases.push({ path, imports });
-        atRule.remove();
-      }
-    };
+          },
+        },
+        RootExit(root) {
+          /* We want to export anything defined by now, but don't add it to the CSS yet or it well get picked up by the replacement stuff */
+          const exportDeclarations = Object.keys(definitions).map((key) =>
+            postcss.decl({
+              value: definitions[key],
+              prop: key,
+              raws: { before: "\n  " },
+            })
+          );
 
-    /* Look at all the @value statements and treat them as locals or as imports */
-    css.walkAtRules('value', atRule => {
-      if (matchImports.exec(atRule.params)) {
-        addImport(atRule);
-      } else {
-        if (atRule.params.indexOf('@value') !== -1) {
-          result.warn('Invalid value definition: ' + atRule.params);
-        }
+          /* If we have no definitions, don't continue */
+          if (!Object.keys(definitions).length) {
+            return;
+          }
 
-        addDefinition(atRule);
-      }
-    });
+          /* Perform replacements */
+          ICSSUtils.replaceSymbols(root, definitions);
 
-    /* We want to export anything defined by now, but don't add it to the CSS yet or
-   it well get picked up by the replacement stuff */
-    const exportDeclarations = Object.keys(definitions).map(key =>
-      postcss.decl({
-        value: definitions[key],
-        prop: key,
-        raws: { before: '\n  ' }
-      })
-    );
+          /* Add export rules if any */
+          if (exportDeclarations.length > 0) {
+            const exportRule = postcss.rule({
+              selector: ":export",
+              raws: { after: "\n" },
+            });
 
-    /* If we have no definitions, don't continue */
-    if (!Object.keys(definitions).length) {
-      return;
-    }
+            exportRule.append(exportDeclarations);
 
-    /* Perform replacements */
-    ICSSUtils.replaceSymbols(css, definitions);
+            root.prepend(exportRule);
+          }
 
-    /* Add export rules if any */
-    if (exportDeclarations.length > 0) {
-      const exportRule = postcss.rule({
-        selector: ':export',
-        raws: { after: '\n' }
-      });
-      exportRule.append(exportDeclarations);
-      css.prepend(exportRule);
-    }
+          /* Add import rules */
+          importAliases.reverse().forEach(({ path, imports }) => {
+            const importRule = postcss.rule({
+              selector: `:import(${path})`,
+              raws: { after: "\n" },
+            });
 
-    /* Add import rules */
-    importAliases.reverse().forEach(({ path, imports }) => {
-      const importRule = postcss.rule({
-        selector: `:import(${path})`,
-        raws: { after: '\n' }
-      });
-      imports.forEach(({ theirName, importedName }) => {
-        importRule.append({
-          value: theirName,
-          prop: importedName,
-          raws: { before: '\n  ' }
-        });
-      });
+            imports.forEach(({ theirName, importedName }) => {
+              importRule.append({
+                value: theirName,
+                prop: importedName,
+                raws: { before: "\n  " },
+              });
+            });
 
-      css.prepend(importRule);
-    });
-  }
-);
+            root.prepend(importRule);
+          });
+        },
+      };
+    },
+  };
+};
+
+module.exports.postcss = true;

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

7834

increased by11.07%

Lines of code

112

increased by7.69%

Worsened metrics

Dev dependency count

8

increased by33.33%

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Addednanoid@3.3.7(transitive)

• + Addedpicocolors@1.0.0(transitive)

• + Addedpostcss@8.4.38(transitive)

• + Addedsource-map-js@1.2.0(transitive)

• - Removedpostcss@^7.0.6

• Updatedicss-utils@^4.1.1