How to support multi-level code blocks?

[dmoosocool]

Steps to reproduce

// source:
const layout = styled.div`
  & {
    footer {
      height: 80px;
      background: green;
    }

    header {
      height: 45px;
      background: yellow;
    }
  }
` 
// compiled: 
.hSBoqc header {
    height: 1.2rem;
    background: yellow;
}

.hSBoqc footer {
    height: 80px;
    background: green;
}

What is expected?
all code blocks are compiled.

What is actually happening?
only the last code block is compiled.

[dmoosocool]

and i try it again..

test1:

const layout = styled.div`
  & {
    position: relative;
  }

  & {
    footer {
      height: 80px;
      background: green;
    }

    header {
      height: 45px;
      background: yellow;
    }
  }
`

comiled:

.gLLKjx {
    position: relative;
}

.gLLKjx header {
    height: 1.2rem;
    background: yellow;
}

.gLLKjx footer {
    height: 80px;
    background: green;
}

test2:

const layout = styled.div`
  & {
    position: relative;
  }

  & footer {
    height: 80px;
    background: green;
  }

  & header {
    height: 45px;
    background: yellow;
  }
`

comiled:

.eTubJc {
    position: relative;
}

.eTubJc header {
    height: 1.2rem;
    background: yellow;
}

.eTubJc footer {
    height: 2.13333rem;
    background: green;
}

test3:

const layout = styled.div`
  & footer {
    height: 80px;
    background: green;
  }

  & header {
    height: 45px;
    background: yellow;
  }
`

compiled:

.grceDw header {
    height: 1.2rem;
    background: yellow;
}
.grceDw footer {
    height: 80px;
    background: green;
}

[xuyuanxiang]

and i try it again..

test1:

const layout = styled.div`
  & {
    position: relative;
  }

  & {
    footer {
      height: 80px;
      background: green;
    }

    header {
      height: 45px;
      background: yellow;
    }
  }
`

comiled:

.gLLKjx {
    position: relative;
}

.gLLKjx header {
    height: 1.2rem;
    background: yellow;
}

.gLLKjx footer {
    height: 80px;
    background: green;
}

test2:

const layout = styled.div`
  & {
    position: relative;
  }

  & footer {
    height: 80px;
    background: green;
  }

  & header {
    height: 45px;
    background: yellow;
  }
`

comiled:

.eTubJc {
    position: relative;
}

.eTubJc header {
    height: 1.2rem;
    background: yellow;
}

.eTubJc footer {
    height: 2.13333rem;
    background: green;
}

test3:

const layout = styled.div`
  & footer {
    height: 80px;
    background: green;
  }

  & header {
    height: 45px;
    background: yellow;
  }
`

compiled:

.grceDw header {
    height: 1.2rem;
    background: yellow;
}
.grceDw footer {
    height: 80px;
    background: green;
}

I've written a few test cases, but none of them replicate..

• src/tests/issue3.txt
• src/tests/issue3.spec.ts
• src/tests/snapshots/issue3.spec.ts.snap

I still cannot reproduce it in the example:

• example/src/tests/issue3.spec.js
• example/src/tests/snapshots/issue3.spec.js.snap

The compiled code in the snapshot works as expected.

[xuyuanxiang]

But these test cases use babel-plugin-styled-components-px2rem independently. This issue may arise in collaboration with other plugins.

[theshying]

and i try it again..
test1:

const layout = styled.div`
  & {
    position: relative;
  }

  & {
    footer {
      height: 80px;
      background: green;
    }

    header {
      height: 45px;
      background: yellow;
    }
  }
`

comiled:

.gLLKjx {
    position: relative;
}

.gLLKjx header {
    height: 1.2rem;
    background: yellow;
}

.gLLKjx footer {
    height: 80px;
    background: green;
}

test2:

const layout = styled.div`
  & {
    position: relative;
  }

  & footer {
    height: 80px;
    background: green;
  }

  & header {
    height: 45px;
    background: yellow;
  }
`

comiled:

.eTubJc {
    position: relative;
}

.eTubJc header {
    height: 1.2rem;
    background: yellow;
}

.eTubJc footer {
    height: 2.13333rem;
    background: green;
}

test3:

const layout = styled.div`
  & footer {
    height: 80px;
    background: green;
  }

  & header {
    height: 45px;
    background: yellow;
  }
`

compiled:

.grceDw header {
    height: 1.2rem;
    background: yellow;
}
.grceDw footer {
    height: 80px;
    background: green;
}

I've written a few test cases, but none of them replicate..

• src/tests/issue3.txt
• src/tests/issue3.spec.ts
• src/tests/snapshots/issue3.spec.ts.snap

I still cannot reproduce it in the example:

• example/src/tests/issue3.spec.js
• example/src/tests/snapshots/issue3.spec.js.snap

The compiled code in the snapshot works as expected.

and i try it again..
test1:

const layout = styled.div`
  & {
    position: relative;
  }

  & {
    footer {
      height: 80px;
      background: green;
    }

    header {
      height: 45px;
      background: yellow;
    }
  }
`

comiled:

.gLLKjx {
    position: relative;
}

.gLLKjx header {
    height: 1.2rem;
    background: yellow;
}

.gLLKjx footer {
    height: 80px;
    background: green;
}

test2:

const layout = styled.div`
  & {
    position: relative;
  }

  & footer {
    height: 80px;
    background: green;
  }

  & header {
    height: 45px;
    background: yellow;
  }
`

comiled:

.eTubJc {
    position: relative;
}

.eTubJc header {
    height: 1.2rem;
    background: yellow;
}

.eTubJc footer {
    height: 2.13333rem;
    background: green;
}

test3:

const layout = styled.div`
  & footer {
    height: 80px;
    background: green;
  }

  & header {
    height: 45px;
    background: yellow;
  }
`

compiled:

.grceDw header {
    height: 1.2rem;
    background: yellow;
}
.grceDw footer {
    height: 80px;
    background: green;
}

I've written a few test cases, but none of them replicate..

• src/tests/issue3.txt
• src/tests/issue3.spec.ts
• src/tests/snapshots/issue3.spec.ts.snap

I still cannot reproduce it in the example:

• example/src/tests/issue3.spec.js
• example/src/tests/snapshots/issue3.spec.js.snap

The compiled code in the snapshot works as expected.

in the test1 case , Why is it still 80px after compilation？？？？ Isn't this a bug?

[hsuna]

I fixed it!!!~
I fixed it!!!~
I fixed it!!!~

Error Code

return cssText
        .split(';')
        .map(token => replaceWithRetry(token, retry - 1))
        .join(';');

fixed

return cssText.replace(new RegExp(PAIR_REG, 'g'), token => replaceWithRetry(token, retry - 1));

u can install npm @hsuna/babel-plugin-styled-components-px2rem@1.5.6
or go to https://github.com/hsuna/babel-plugin-styled-components-px2rem