postcss-prefixer - npm Package Compare versions

Comparing version 2.1.2 to 2.1.3

.eslintrc.js

 module.exports = {
+  "parserOptions": {
+    "ecmaVersion": 5
+  },
   "extends": [
@@ -7,12 +10,14 @@ "airbnb-base",
   "plugins": [
+    "jest",
     "import",
-    "jest"
   ],
   "env": {
-    "jest/globals": true
+    "node": true,
+    "jest": true
   },
   "rules": {
     "jest/no-identical-title": "error",
-    "jest/valid-expect": "error"
+    "jest/valid-expect": "error",
+    "prefer-object-spread": 0,
   }
 };

lib/prefixer.js

@@ -6,3 +6,3 @@ const postcss = require('postcss');
   attrStringify,
-  itMatchsOne,
+  itMatchesOne,
 } = require('./utils');
@@ -28,3 +28,3 @@
         head,
-        classes: classes.map(cls => `${prefix}${cls}`),
+        classes: classes.map((cls) => `${prefix}${cls}`),
         foot,
@@ -44,3 +44,3 @@ }),
 
-    if (itMatchsOne(options.ignore, Tokenizer.stringify(node))) return node;
+    if (itMatchesOne(options.ignore, Tokenizer.stringify(node))) return node;
 
@@ -52,3 +52,3 @@ return prefixNode(node, options.prefix);
 
-const prefixer = options => (css) => {
+const prefixer = (options) => (css) => {
   const { prefix, ignore } = Object.assign({}, {
@@ -71,9 +71,7 @@ prefix: '',
   css.walkRules((rule) => {
-    const { selector } = rule;
+    const parsed = Tokenizer.parse(rule.selector);
+    const selector = interateSelectorNodes(parsed, { prefix, ignore });
 
     /* eslint no-param-reassign: "off" */
-    rule.selector = Tokenizer.stringify(interateSelectorNodes(
-      Tokenizer.parse(selector),
-      { prefix, ignore },
-    ));
+    rule.selector = Tokenizer.stringify(selector);
   });
@@ -80,0 +78,0 @@ };

lib/utils.js

 module.exports = {
 
-  itMatchsOne(arr, term) {
-    return arr.some(i => term.search(i) >= 0);
+  itMatchesOne(arr, term) {
+    return arr.some((i) => term.search(i) >= 0);
   },
@@ -13,3 +13,3 @@
       .split(regex)
-      .filter(part => part);
+      .filter((part) => part);
 
@@ -20,3 +20,3 @@ return {
       head,
-      classes: classes ? classes.split(' ').map(c => c.replace(/"|'/g, '')) : [],
+      classes: classes ? classes.split(' ').map((c) => c.replace(/"|'/g, '')) : [],
       foot,
@@ -29,5 +29,5 @@ };
   }) {
-    return `${type}${operator}${head}${classes.join(' ')}${foot}`;
+    return `${type}${operator || ''}${head || ''}${classes.join(' ')}${foot || ''}`;
   },
 
 };

package.json

 {
   "name": "postcss-prefixer",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "postcss plugin to prefix all css selector classes and ids",
@@ -10,4 +10,4 @@ "main": "lib/prefixer.js",
   "dependencies": {
-    "css-selector-tokenizer": "^0.7.1",
-    "postcss": "^7.0.14"
+    "css-selector-tokenizer": "^0.7.2",
+    "postcss": "^5.2.18"
   },
@@ -19,7 +19,7 @@ "peerDependencies": {
     "eslint": "^5.16.0",
-    "eslint-config-airbnb-base": "^13.1.0",
-    "eslint-plugin-import": "^2.16.0",
-    "eslint-plugin-jest": "^22.4.1",
-    "husky": "^1.3.1",
-    "jest": "^24.7.1"
+    "eslint-config-airbnb-base": "^14.1.0",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-jest": "^23.8.2",
+    "husky": "^4.2.3",
+    "jest": "^24.9.0"
   },
@@ -26,0 +26,0 @@ "scripts": {

README.md

@@ -5,42 +5,48 @@ # postcss-prefixer
 
-PostCSS plugin to add a prefix to all css selectors classes and ids.
+[PostCSS]: https://github.com/postcss/postcss
+[PostCSS Usage]: https://github.com/postcss/postcss#usage
 
-## Usage
-#### With [PostCSS cli](https://github.com/postcss/postcss-cli):
+A [PostCSS] plugin to prefix css selectors.
 
-Install `postcss-cli` and `postcss-prefixer` on your project directory:
+````css
+/* source css file */
 
-```
-npm install postcss-cli postcss-prefixer --save-dev
-```
+#selector { /* content */ }
 
-and at your package.json
+.selector { /* content */ }
 
-```json
-"scripts": {
-    "postcss": "postcss input.css -u postcss-prefixer -o output.css"
-}
-```
+.selector:hover { /* content */ }
 
-#### Others
-```js
-postcss([ require('postcss-prefixer')({ /* options */ }) ])
-```
+.selector__element { /* content */ }
+````
 
-### Options
-##### prefix
-Type: `string`<br>
-Default: none
+````css
+/* output css file prefixed with "prfx__" */
 
-String to be used as prefix
-##### ignore
-Type: `array`<br>
-Default: `[]`
+#prfx__selector { /* content */ }
 
-Array of selectors to be ignored by the plugin, accepts string and regex.
+.prfx__selector { /* content */ }
 
-## Example
-Example of usage with results generated by the plugin.
-#### Code
+.prfx__selector:hover { /* content */ }
+
+.prfx__selector__element { /* content */ }
+````
+
+## Usage
+
+`npm i -D postcss-prefixer` or `yarn add -D postcss-prefixer`
+
+create a `postcss.config.js` with:
 ```js
+module.exports = {
+  plugins: [
+    require('postcss-prefixer')({ /* options */ })
+  ]
+}
+```
+
+> Refer to [PostCSS Usage] on how to use it with your preferred build tool.
+
+#### Example
+```js
 const postcss = require('postcss');
@@ -53,51 +59,17 @@ const prefixer = require('postcss-prefixer');
   prefixer({
-        prefix: 'prefix-'
+        prefix: 'prefix-',
         ignore: [ /selector-/, '.ignore', '#ignore' ]
     })
 ]).process(input);
-
 ```
 
-#### Input:
-```css
-#selector-one .example {
-  /* content */
-}
+#### Options
+| Name           | Description                                |
+|------------------|--------------------------------------------|
+|`prefix` (string) | prefix value to be used                    |
+|`ignore` (array)  | list of selectors to ignore, accepts regex |
 
-.selector-two .example2 {
-  /* content */
-}
 
-#ignore .ignore {
-  /* content */
-}
-
-#ignore .other {
-  /* content */
-}
-```
-
-#### Output:
-
-```css
-#selector-one .prefix-example {
-  /* content */
-}
-
-.selector-two .prefix-example2 {
-  /* content */
-}
-
-#ignore .ignore {
-  /* content */
-}
-
-#ignore .prefix-other {
-  /* content */
-}
-```
-
-
 ## Credits
 
  Plugin based on [postcss-class-prefix](https://github.com/thompsongl/postcss-class-prefix) create by [thompsongl](https://github.com/thompsongl).

test/utils.test.js

 const utils = require('../lib/utils');
 
 
-describe('utls.itMatchsOne()', () => {
+describe('utils.itMatchesOne()', () => {
   test('should fail with non string search term', () => {
     expect(() => {
-      utils.itMatchsOne(['1', '2'], 2);
+      utils.itMatchesOne(['1', '2'], 2);
     }).toThrow();
@@ -12,3 +12,3 @@ });
   test('search term should match one of the array entries', () => {
-    const result = utils.itMatchsOne(['lorem', 'ipsum'], 'ipsum');
+    const result = utils.itMatchesOne(['lorem', 'ipsum'], 'ipsum');
     expect(result).toBe(true);
@@ -18,3 +18,3 @@ });
   test('search term should NOT match one of the array entries', () => {
-    const result = utils.itMatchsOne(['lorem', 'ipsum'], 'dolor');
+    const result = utils.itMatchesOne(['lorem', 'ipsum'], 'dolor');
     expect(result).toBe(false);
@@ -25,3 +25,3 @@ });
 
-describe('utls.parseAttrSelector()', () => {
+describe('utils.parseAttrSelector()', () => {
   test('should fail if node content is undefined', () => {
@@ -42,3 +42,3 @@ expect(() => utils.parseAttrSelector({ type: 'class' })).toThrow();
 
-describe('utls.attrStringify()', () => {
+describe('utils.attrStringify()', () => {
   test('should return stringified attribute', () => {
@@ -50,2 +50,9 @@ const attr = utils.parseAttrSelector({ content: 'class^="col-"' });
   });
+
+  test('should handle plain class', () => {
+    const attr = utils.parseAttrSelector({ type: 'attribute', content: 'class' });
+    const result = utils.attrStringify(attr);
+
+    expect(result).toEqual('class');
+  });
 });

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

16122

-94.25%

Number of package files

15

-11.76%

Lines of code

449

-93.22%

Number of lines in readme file

74

-27.45%

Dependency changes

• + Added

  ansi-regex@2.1.1
  (transitive)

• + Added

  ansi-styles@2.2.1
  (transitive)

• + Added

  chalk@1.1.3
  (transitive)

• + Added

  escape-string-regexp@1.0.5
  (transitive)

• + Added

  has-ansi@2.0.0
  (transitive)

• + Added

  has-flag@1.0.0
  (transitive)

• + Added

  js-base64@2.6.4
  (transitive)

• + Added

  postcss@5.2.18
  (transitive)

• + Added

  source-map@0.5.7
  (transitive)

• + Added

  strip-ansi@3.0.1
  (transitive)

• + Added

  supports-color@2.0.03.2.3
  (transitive)

• - Removed

  picocolors@0.2.1
  (transitive)

• - Removed

  postcss@7.0.39
  (transitive)

• - Removed

  source-map@0.6.1
  (transitive)

• Updated

  css-selector-tokenizer@^0.7.2

• Updated

  postcss@^5.2.18