Skip to content

Commit

Permalink
Preserve layer in ignored import statements (#511)
Browse files Browse the repository at this point in the history 
Fixes #510
  • Loading branch information
@romainmenke
romainmenke committed Dec 1, 2022
1 parent 13376a6 commit 2780457
Show file tree
Hide file tree
Showing 7 changed files with 138 additions and 41 deletions.
47 changes: 30 additions & 17 deletions index.js
View file
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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,
})

Expand Down Expand Up @@ -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,
})

Expand All @@ -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,
})

Expand Down Expand Up @@ -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
Expand Down
17 changes: 17 additions & 0 deletions lib/assign-layer-names.js
View file
@@ -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`
)
}
}
})
}
4 changes: 4 additions & 0 deletions test/fixtures/ignore.css
View file
Expand Up @@ -12,5 +12,9 @@
@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;

content{}
4 changes: 4 additions & 0 deletions test/fixtures/ignore.expected.css
View file
Expand Up @@ -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{}
}
Expand Down
2 changes: 2 additions & 0 deletions test/fixtures/imports/layer-level-2-anonymous.css
View file
@@ -1,3 +1,5 @@
@import "http://css" layer;
@import "http://css-bar" layer(bar);
@import url("layer-level-3.css") layer (min-width: 320px);

@layer Y {
Expand Down
4 changes: 4 additions & 0 deletions test/fixtures/layer-import-atrules-anonymous.css
View file
@@ -1,3 +1,7 @@
@import url("layer-anonymous.css") layer screen;

@import url("layer-anonymous.css") layer;

@import url("layer-anonymous.css") layer(named-layer-1);

@import "http://css-top-level" layer;
101 changes: 77 additions & 24 deletions test/fixtures/layer-import-atrules-anonymous.expected.css
View file
@@ -1,15 +1,21 @@
@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-8) screen;
@import "http://css-bar" 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-9);
@import "http://css-bar" layer(import-anon-layer-3.import-anon-layer-4.bar);
@import "http://css" layer(named-layer-1.import-anon-layer-6.import-anon-layer-10);
@import "http://css-bar" layer(named-layer-1.import-anon-layer-6.bar);
@import "http://css-top-level" layer;
@media screen and (min-width: 320px){
@layer import-anon-layer-0.import-anon-layer-1.import-anon-layer-2{
@layer Z {
body {
color: cyan;
}
}
}
}

@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 {
Expand All @@ -18,18 +24,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 {
Expand All @@ -38,9 +42,8 @@ body {
}
}
}

@media screen {
@layer import-anon-layer-0 {
@media screen{
@layer import-anon-layer-0{

@keyframes RED_TO_BLUE {
0% {
Expand All @@ -65,43 +68,93 @@ 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;
}
}
}
}

@layer import-anon-layer-3.import-anon-layer-4 {
@layer import-anon-layer-3.import-anon-layer-4{

@layer Y {
body {
color: purple;
}
}
}

@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 {
order: 2;
}
}
}
@layer import-anon-layer-3{

@keyframes RED_TO_BLUE {
0% {
background-color: red;
}
100% {
background-color: blue;
}
}

@supports (display: grid) {
body {
display: grid;
order: 3;
}
}

@layer A {
body {
order: 4;
}
}
}
@media (min-width: 320px){
@layer named-layer-1.import-anon-layer-6.import-anon-layer-7{
@layer Z {
body {
color: cyan;
}
}
}
}
@layer named-layer-1.import-anon-layer-6{

@layer Y {
body {
color: purple;
}
}
}
@layer named-layer-1{

body {
order: 1;
}
}
@layer named-layer-1{

@layer import-anon-layer-3 {
@media (min-width: 50rem) {
body {
order: 2;
}
}
}
@layer named-layer-1{

@keyframes RED_TO_BLUE {
0% {
Expand Down

0 comments on commit 2780457

Please sign in to comment.