postcss-important-startstop - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0

index.js

 const postcss = require('postcss');
+const _ = require('lodash');
 
-function isStartTag(node) {
-    if (node.type !== 'comment') {
-        return false;
-    }
-    return node.toString().includes('@important(start)');
-}
-
-function isStopTag(node) {
-    if (node.type !== 'comment') {
-        return false;
-    }
-    return node.toString().includes('@important(stop)');
-}
-
 module.exports = postcss.plugin('postcss-important-startstop', function () {
+    return function (root) {
+        root.walkAtRules('important', atRule => {
+            atRule.walkDecls(decl => {
+                decl.important = true;
+            });
 
-    // Work with options here
-    return function (root, result) {
-        let amountOfStartTags = 0;
-        let amountOfStopTags = 0;
+            let clonedNodes = _.map(atRule.nodes, node => node.clone());
 
-        root.walk(node => {
-            if (isStartTag(node)) {
-                amountOfStartTags += 1;
-            }
-
-            if (isStopTag(node)) {
-                amountOfStopTags += 1;
-            }
-
-            if (amountOfStartTags > amountOfStopTags && node.type === 'decl') {
-                // important should be added to this declaration
-                node.important = true;
-            }
+            atRule.before(clonedNodes);
+            atRule.remove();
         });
-
-        if (amountOfStartTags !== amountOfStopTags) {
-            result.warn(
-                '@important(start) must be closed with a @important(stop).' +
-                'The amount of start and stop tags must be the same.' +
-                'Given @important(start) tags: ' + amountOfStartTags +
-                'Given @important(stop) tags: ' + amountOfStopTags
-            );
-        }
     };
 });

package.json

 {
   "name": "postcss-important-startstop",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "PostCSS plugin which adds !important based on simple start/stop annotations",
@@ -19,2 +19,3 @@ "keywords": [
   "dependencies": {
+    "lodash": "^4.17.4",
     "postcss": "^6.0.1"
@@ -21,0 +22,0 @@ },

README.md

@@ -7,18 +7,4 @@ # postcss-important-startstop [![Build Status][ci-img]][ci]
 
-[PostCSS] plugin which adds !important based on simple start/stop annotations.
-The scope of this plugin is very limited. It does only add ```!important``` to everty declaration between to annotations.
+[PostCSS] plugin which adds !important based on an atRule
 
-Nothing more.
-
-## What it *not* does for you
-
-It does not check **not** check if important is allowed for that particular declaration.
-- Maybe use https://github.com/crimx/postcss-safe-important
-
-It does **not** allow adding ```!important``` to just some declarations
-- Maybe use https://yarnpkg.com/en/package/postcss-important
-
-It does **not** remove the comments you had to add
-- Use an other plugin for that
-
 ## Why should I use Important?
@@ -38,32 +24,16 @@
 
-### Plain
-
-#### Input
+Input
 ```css
-/* @important(start) */
-.john { display: block; }
-/* @important(stop) */
-```
+.a { color: red; }
 
-#### Result
-```css
-.john { display: block !important; }
-```
+@important {
+    .b { color: red; }
+}
 
-### With import
-
-**highly recommended for Utilities**
-
-```css
-/* @important(start) */
-@import "myutilities.css";
-/* @important(stop) */
-```
-
-## Usage
-
-```js
-postcss([ require('postcss-important-startstop') ])
-```
-
-See [PostCSS] docs for examples for your environment.
+.c {
+    @important {
+      color: red;
+    }
+    background-color: green;
+}
+```

No alert changes

Worsened metrics

Total package byte prevSize

25519

decreased by-2.47%

Dependency count

2

increased by100%

Lines of code

48

decreased by-35.14%

Number of lines in readme file

37

decreased by-45.59%

Dependency changes

• + Addedlodash@^4.17.4

• + Addedlodash@4.17.21(transitive)