diff --git a/index.js b/index.js index 8c881703..d14873d9 100755 --- a/index.js +++ b/index.js @@ -9,6 +9,7 @@ const resolveId = require("./lib/resolve-id") const loadContent = require("./lib/load-content") const processContent = require("./lib/process-content") const parseStatements = require("./lib/parse-statements") +const assignLayerNames = require("./lib/assign-layer-names") function AtImport(options) { options = { @@ -86,13 +87,36 @@ function AtImport(options) { return } + if (stmt.layer.length > 1) { + assignLayerNames(stmt.layer, stmt.node, state, options) + } + if (stmt.type === "import") { - stmt.node.params = `${stmt.fullUri} ${stmt.media.join(", ")}` + const parts = [stmt.fullUri] + + const media = stmt.media.join(", ") + + if (stmt.layer.length) { + const layerName = stmt.layer.join(".") + + let layerParams = "layer" + if (layerName) { + layerParams = `layer(${layerName})` + } + + parts.push(layerParams) + } + + if (media) { + parts.push(media) + } + + stmt.node.params = parts.join(" ") } else if (stmt.type === "media") { if (stmt.layer.length) { const layerNode = atRule({ name: "layer", - params: stmt.layer.filter(layer => layer !== "").join("."), + params: stmt.layer.join("."), source: stmt.node.source, }) @@ -128,7 +152,7 @@ function AtImport(options) { const layerNode = atRule({ name: "layer", - params: stmt.layer.filter(layer => layer !== "").join("."), + params: stmt.layer.join("."), source: parent.source, }) @@ -147,7 +171,7 @@ function AtImport(options) { } else if (stmt.layer.length) { const layerNode = atRule({ name: "layer", - params: stmt.layer.filter(layer => layer !== "").join("."), + params: stmt.layer.join("."), source: parent.source, }) @@ -315,19 +339,8 @@ function AtImport(options) { function loadImportContent(result, stmt, filename, options, state) { const atRule = stmt.node const { media, layer } = stmt - layer.forEach((layerPart, i) => { - if (layerPart === "") { - if (options.nameLayer) { - layer[i] = options - .nameLayer(state.anonymousLayerCounter++, state.rootFilename) - .toString() - } else { - throw atRule.error( - `When using anonymous layers in @import you must also set the "nameLayer" plugin option` - ) - } - } - }) + + assignLayerNames(layer, atRule, state, options) if (options.skipDuplicates) { // skip files already imported at the same scope diff --git a/lib/assign-layer-names.js b/lib/assign-layer-names.js new file mode 100644 index 00000000..18cfcc71 --- /dev/null +++ b/lib/assign-layer-names.js @@ -0,0 +1,17 @@ +"use strict" + +module.exports = function (layer, node, state, options) { + layer.forEach((layerPart, i) => { + if (layerPart.trim() === "") { + if (options.nameLayer) { + layer[i] = options + .nameLayer(state.anonymousLayerCounter++, state.rootFilename) + .toString() + } else { + throw node.error( + `When using anonymous layers in @import you must also set the "nameLayer" plugin option` + ) + } + } + }) +} diff --git a/test/fixtures/ignore.css b/test/fixtures/ignore.css index 71a7951e..0f1fcc77 100644 --- a/test/fixtures/ignore.css +++ b/test/fixtures/ignore.css @@ -1,4 +1,5 @@ -@import "ignore.css" (min-width: 25em); +@import "http://css" (min-width: 25em); +@import "http://css-screen" (min-width: 25em) and screen; @import "http://css"; @import "https://css"; @import 'http://css'; @@ -12,5 +13,11 @@ @import url("//css"); @import url('//css'); @import url(//css); - +@import "http://css" layer; +@import "http://css" layer(bar); +@import "http://css" layer screen and (min-width: 25em), print; +@import "http://css" layer(bar) screen and (min-width: 25em), print; +@media (min-width: 25em){ +ignore{} +} content{} diff --git a/test/fixtures/ignore.expected.css b/test/fixtures/ignore.expected.css index 527c13e0..0f1fcc77 100644 --- a/test/fixtures/ignore.expected.css +++ b/test/fixtures/ignore.expected.css @@ -13,6 +13,10 @@ @import url("//css"); @import url('//css'); @import url(//css); +@import "http://css" layer; +@import "http://css" layer(bar); +@import "http://css" layer screen and (min-width: 25em), print; +@import "http://css" layer(bar) screen and (min-width: 25em), print; @media (min-width: 25em){ ignore{} } diff --git a/test/fixtures/imports/layer-level-2-anonymous.css b/test/fixtures/imports/layer-level-2-anonymous.css index 36d69c28..23722e73 100644 --- a/test/fixtures/imports/layer-level-2-anonymous.css +++ b/test/fixtures/imports/layer-level-2-anonymous.css @@ -1,3 +1,5 @@ +@import "http://css" layer; +@import "http://css" layer(bar); @import url("layer-level-3.css") layer (min-width: 320px); @layer Y { diff --git a/test/fixtures/layer-import-atrules-anonymous.expected.css b/test/fixtures/layer-import-atrules-anonymous.expected.css index be1df273..c156e3f5 100644 --- a/test/fixtures/layer-import-atrules-anonymous.expected.css +++ b/test/fixtures/layer-import-atrules-anonymous.expected.css @@ -1,5 +1,9 @@ -@media screen and (min-width: 320px) { -@layer import-anon-layer-0.import-anon-layer-1.import-anon-layer-2 { +@import "http://css" layer(import-anon-layer-0.import-anon-layer-1.import-anon-layer-6) screen; +@import "http://css" layer(import-anon-layer-0.import-anon-layer-1.bar) screen; +@import "http://css" layer(import-anon-layer-3.import-anon-layer-4.import-anon-layer-7); +@import "http://css" layer(import-anon-layer-3.import-anon-layer-4.bar); +@media screen and (min-width: 320px){ +@layer import-anon-layer-0.import-anon-layer-1.import-anon-layer-2{ @layer Z { body { color: cyan; @@ -7,9 +11,8 @@ } } } - -@media screen { -@layer import-anon-layer-0.import-anon-layer-1 { +@media screen{ +@layer import-anon-layer-0.import-anon-layer-1{ @layer Y { body { @@ -18,18 +21,16 @@ } } } - -@media screen { -@layer import-anon-layer-0 { +@media screen{ +@layer import-anon-layer-0{ body { order: 1; } } } - -@media screen { -@layer import-anon-layer-0 { +@media screen{ +@layer import-anon-layer-0{ @media (min-width: 50rem) { body { @@ -38,9 +39,8 @@ body { } } } - -@media screen { -@layer import-anon-layer-0 { +@media screen{ +@layer import-anon-layer-0{ @keyframes RED_TO_BLUE { 0% { @@ -65,9 +65,8 @@ body { } } } - -@media (min-width: 320px) { -@layer import-anon-layer-3.import-anon-layer-4.import-anon-layer-5 { +@media (min-width: 320px){ +@layer import-anon-layer-3.import-anon-layer-4.import-anon-layer-5{ @layer Z { body { color: cyan; @@ -75,8 +74,7 @@ body { } } } - -@layer import-anon-layer-3.import-anon-layer-4 { +@layer import-anon-layer-3.import-anon-layer-4{ @layer Y { body { @@ -84,15 +82,13 @@ body { } } } - -@layer import-anon-layer-3 { +@layer import-anon-layer-3{ body { order: 1; } } - -@layer import-anon-layer-3 { +@layer import-anon-layer-3{ @media (min-width: 50rem) { body { @@ -100,8 +96,7 @@ body { } } } - -@layer import-anon-layer-3 { +@layer import-anon-layer-3{ @keyframes RED_TO_BLUE { 0% {