postcss-import - npm Package Compare versions

Comparing version 14.0.2 to 14.1.0

index.js

@@ -7,2 +7,3 @@ "use strict"
 const joinMedia = require("./lib/join-media")
+const joinLayer = require("./lib/join-layer")
 const resolveId = require("./lib/resolve-id")
@@ -50,7 +51,9 @@ const loadContent = require("./lib/load-content")
 
-      return parseStyles(result, styles, options, state, []).then(bundle => {
-        applyRaws(bundle)
-        applyMedia(bundle)
-        applyStyles(bundle, styles)
-      })
+      return parseStyles(result, styles, options, state, [], []).then(
+        bundle => {
+          applyRaws(bundle)
+          applyMedia(bundle)
+          applyStyles(bundle, styles)
+        }
+      )
 
@@ -73,18 +76,57 @@ function applyRaws(bundle) {
         bundle.forEach(stmt => {
-          if (!stmt.media.length || stmt.type === "charset") return
+          if (
+            (!stmt.media.length && !stmt.layer.length) ||
+            stmt.type === "charset"
+          ) {
+            return
+          }
+
           if (stmt.type === "import") {
             stmt.node.params = `${stmt.fullUri} ${stmt.media.join(", ")}`
-          } else if (stmt.type === "media")
+          } else if (stmt.type === "media") {
             stmt.node.params = stmt.media.join(", ")
-          else {
+          } else {
             const { nodes } = stmt
             const { parent } = nodes[0]
-            const mediaNode = atRule({
-              name: "media",
-              params: stmt.media.join(", "),
-              source: parent.source,
-            })
 
-            parent.insertBefore(nodes[0], mediaNode)
+            let outerAtRule
+            let innerAtRule
+            if (stmt.media.length && stmt.layer.length) {
+              const mediaNode = atRule({
+                name: "media",
+                params: stmt.media.join(", "),
+                source: parent.source,
+              })
 
+              const layerNode = atRule({
+                name: "layer",
+                params: stmt.layer.filter(layer => layer !== "").join("."),
+                source: parent.source,
+              })
+
+              mediaNode.append(layerNode)
+              innerAtRule = layerNode
+              outerAtRule = mediaNode
+            } else if (stmt.media.length) {
+              const mediaNode = atRule({
+                name: "media",
+                params: stmt.media.join(", "),
+                source: parent.source,
+              })
+
+              innerAtRule = mediaNode
+              outerAtRule = mediaNode
+            } else if (stmt.layer.length) {
+              const layerNode = atRule({
+                name: "layer",
+                params: stmt.layer.filter(layer => layer !== "").join("."),
+                source: parent.source,
+              })
+
+              innerAtRule = layerNode
+              outerAtRule = layerNode
+            }
+
+            parent.insertBefore(nodes[0], outerAtRule)
+
             // remove nodes
@@ -98,7 +140,7 @@ nodes.forEach(node => {
 
-            // wrap new rules with media query
-            mediaNode.append(nodes)
+            // wrap new rules with media query and/or layer at rule
+            innerAtRule.append(nodes)
 
             stmt.type = "media"
-            stmt.node = mediaNode
+            stmt.node = outerAtRule
             delete stmt.nodes
@@ -126,3 +168,3 @@ }
 
-      function parseStyles(result, styles, options, state, media) {
+      function parseStyles(result, styles, options, state, media, layer) {
         const statements = parseStatements(result, styles)
@@ -136,2 +178,3 @@
                 stmt.media = joinMedia(media, stmt.media || [])
+                stmt.layer = joinLayer(layer, stmt.layer || [])
 
@@ -248,3 +291,3 @@ // skip protocol base uri (protocol://url) or protocol-relative
         const atRule = stmt.node
-        const { media } = stmt
+        const { media, layer } = stmt
         if (options.skipDuplicates) {
@@ -297,3 +340,3 @@ // skip files already imported at the same scope
               // recursion: import @import from imported file
-              return parseStyles(result, styles, options, state, media)
+              return parseStyles(result, styles, options, state, media, layer)
             })
@@ -300,0 +343,0 @@ }

lib/parse-statements.js

@@ -41,2 +41,3 @@ "use strict"
           media: [],
+          layer: [],
         })
@@ -54,2 +55,3 @@ nodes = []
       media: [],
+      layer: [],
     })
@@ -67,2 +69,3 @@ }
     media: split(params, 0),
+    layer: [],
   }
@@ -81,2 +84,3 @@ }
     media: [],
+    layer: [],
   }
@@ -92,6 +96,8 @@ }
         (prev.type !== "atrule" ||
-          (prev.name !== "import" && prev.name !== "charset"))
+          (prev.name !== "import" &&
+            prev.name !== "charset" &&
+            !(prev.name === "layer" && !prev.nodes)))
       ) {
         return result.warn(
-          "@import must precede all other statements (besides @charset)",
+          "@import must precede all other statements (besides @charset or empty @layer)",
           { node: atRule }
@@ -117,2 +123,3 @@ )
     media: [],
+    layer: [],
   }
@@ -143,7 +150,27 @@
 
-  if (params.length > 2) {
-    if (params[1].type !== "space") {
+  let remainder = params
+  if (remainder.length > 2) {
+    if (
+      (remainder[2].type === "word" || remainder[2].type === "function") &&
+      remainder[2].value === "layer"
+    ) {
+      if (remainder[1].type !== "space") {
+        return result.warn("Invalid import layer statement", { node: atRule })
+      }
+
+      if (remainder[2].nodes) {
+        stmt.layer = [stringify(remainder[2].nodes)]
+      } else {
+        stmt.layer = [""]
+      }
+      remainder = remainder.slice(2)
+    }
+  }
+
+  if (remainder.length > 2) {
+    if (remainder[1].type !== "space") {
       return result.warn("Invalid import media statement", { node: atRule })
     }
-    stmt.media = split(params, 2)
+
+    stmt.media = split(remainder, 2)
   }
@@ -150,0 +177,0 @@

package.json

 {
   "name": "postcss-import",
-  "version": "14.0.2",
+  "version": "14.1.0",
   "description": "PostCSS plugin to import CSS files",
@@ -32,7 +32,7 @@ "keywords": [
     "eslint-config-problems": "^5.0.0",
-    "eslint-plugin-prettier": "^3.0.0",
+    "eslint-plugin-prettier": "^4.0.0",
     "postcss": "^8.0.0",
-    "postcss-scss": "^3.0.0",
-    "prettier": "~2.3.0",
-    "sugarss": "^3.0.0"
+    "postcss-scss": "^4.0.0",
+    "prettier": "~2.6.0",
+    "sugarss": "^4.0.0"
   },
@@ -39,0 +39,0 @@ "peerDependencies": {

README.md

@@ -32,6 +32,3 @@ # postcss-import
 If this behavior is not what you want, look at `skipDuplicates` option
-- **If you are looking for glob, or sass like imports (prefixed partials)**,
-please look at
-[postcss-easy-import](https://github.com/trysound/postcss-easy-import)
-(which use this plugin under the hood).
+- If you are looking for **Glob Imports**, you can use [postcss-import-ext-glob](https://github.com/dimitrinicolas/postcss-import-ext-glob) to extend postcss-import.
 - Imports which are not modified (by `options.filter` or because they are remote
@@ -45,3 +42,3 @@ imports) are moved to the top of the output.
 ```console
-$ npm install postcss-import
+$ npm install -D postcss-import
 ```
@@ -48,0 +45,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

558

increased by13.88%

Worsened metrics

Total package byte prevSize

27007

decreased by-28.3%

Number of lines in readme file

228

decreased by-1.3%

No dependency changes