diff --git a/integration-test/packages/atoms/all/atom.css.snap b/integration-test/packages/atoms/all/atom.css.snap
index 1c86262..abcc69a 100644
--- a/integration-test/packages/atoms/all/atom.css.snap
+++ b/integration-test/packages/atoms/all/atom.css.snap
@@ -70,6 +70,13 @@
 .sMmOaU .R2GDg- {
     color: green;
   }
+.EV62sS {
+	color: blue;
+}
+
+.JYUOso {
+	color: blue;
+}
 /* custom static css (e.g. normalize) can be added here */.YcXvtG {
     color: #1a1a1a
 }
diff --git a/integration-test/packages/atoms/all/atom.min.css.snap b/integration-test/packages/atoms/all/atom.min.css.snap
index 4721219..1996f81 100644
--- a/integration-test/packages/atoms/all/atom.min.css.snap
+++ b/integration-test/packages/atoms/all/atom.min.css.snap
@@ -1 +1 @@
-.YzVv9y{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Arial,Helvetica Neue,sans-serif}.V_ma2j{font-size:1em}.YfpiAb{color:red;font-size:1em}.o3-BnE{border:1px solid red;color:#00f;display:flex;width:100px}.dgII7d{font-weight:700}.hZEeRw{height:100%}.Gpf-P8{text-decoration:underline}._3XV0Ef{font-size:4em}._9M8f-j{color:red}.sMmOaU{color:#00f}.sMmOaU .R2GDg-{color:green}.l-ITF2{color:green}.l-ITF2:hover{color:red}.x7QluR{color:green}.x7QluR:focus{color:red}.gPy6Qt{background-color:#000}.gPy6Qt:disabled{background-color:grey}html{overflow-x:hidden;overflow-y:auto;overflow:hidden auto}h1,h2,h3,h4,h5,h6{margin-bottom:0;margin-top:0}.ZlgcWo.uvJREe,main.ZlgcWo{background-image:img/background.jpg}.ZlgcWo.uvJREe,main.ZlgcWo{background-image:-webkit-image-set(url("img/background.jpg") 1x,url("img/background-2x.jpg") 2x);background-image:image-set("img/background.jpg" 1x,"img/background-2x.jpg" 2x)}a{color:rgba(0,0,255,.9)}a:hover{color:#639}.mHJuMv{color:red}.mHJuMv .B_oqE3,.mHJuMv .qhqOPF{color:#00f}._9q-zqg{color:red}._9q-zqg .qhqOPF{color:#00f}._9q-zqg .qhqOPF .oLzZ_N{color:green}.nHROCZ{font-size:1em}.nHROCZ.YZP-Tu{font-size:2em}.HbTeo6{font-size:1em}.HbTeo6.YZP-Tu{color:red}.HbTeo6{display:flex}.HbTeo6 .qhqOPF{font-size:.5em}.HbTeo6 .qhqOPF._6cCOB0{color:#00f}.HbTeo6 .qhqOPF._6cCOB0 .vruPji{color:green}.XPMGYZ{color:red}.XPMGYZ:hover{color:#00f}.XPMGYZ:hover .QMsI4n{color:green}.XPMGYZ:hover .QMsI4n.fc23Jo{font-size:2em}.XPMGYZ:hover .QMsI4n.fc23Jo:after{content:"after";position:absolute}._1b2v1R{font-size:1em}.xXc9fo{font-size:1em}._6gjVlf{font-size:4em}@keyframes _4bsdl{0%,10%{opacity:0}15%{opacity:.4}to{opacity:1}}._4bsdl{animation-duration:.25s;animation-name:_4bsdl}.C0hAH1{animation-duration:.25s;animation-name:_4bsdl}.globalClass{width:100%}.globalClass .v5Vpzq{color:red}.globalClass.ado0HJ{color:#00f}.ZlJtcH{color:red}.ZXM7RA{color:#00f}.pUJQIY{color:red}.Z3doKH{color:#00f}.aGea0b{color:red}.t8cRql{color:#00f}.NRaoKv,.oPlD0W{font-size:1em}.oi5tdf,.W1CcjX{line-height:1em}.FCG5GQ,.H9WShg{font-size:2em}._7x3EPh,.WO37ya{line-height:2em}.d8yso7,.uGM3oi{font-size:3em}._3Ft6ps,.NbUW8z{line-height:3em}.Y9lrZy{font-size:10px}.Y9lrZy ._8Urr0R{width:1em}.Y9lrZy.e2agTq{border:1px solid red}.Y9lrZy ._5v4SSH{width:1em}.Y9lrZy.iS88X_{border-top:1px solid #00f}.Y9lrZy .vlAfUd{width:2em}.Y9lrZy.PgUB93{border:2px solid red}.Y9lrZy .KjddK4{width:2em}.Y9lrZy.GZomQK{border-top:2px solid #00f}.Y9lrZy .utNk9X{width:3em}.Y9lrZy.bwOLNP{border:3px solid red}.Y9lrZy ._5UlDUQ{width:3em}.Y9lrZy.vA0LhQ{border-top:3px solid #00f}.gPZ5T-{font-size:20px}.gPZ5T- .SnZr3u{width:1em}.gPZ5T-.tNdUvj{border:1px solid red}.gPZ5T- .RTwpt_{width:1em}.gPZ5T-.aiCnKv{border-top:1px solid #00f}.gPZ5T- .bUAlDZ{width:2em}.gPZ5T-.lpuLLH{border:2px solid red}.gPZ5T- .k5RQse{width:2em}.gPZ5T-.CmX6W8{border-top:2px solid #00f}.gPZ5T- .MdYjYw{width:3em}.gPZ5T-.YK_gQZ{border:3px solid red}.gPZ5T- ._2W8BKO{width:3em}.gPZ5T-.F3eX_U{border-top:3px solid #00f}._75_9PU{font-size:30px}._75_9PU .KCb6ES{width:1em}._75_9PU._2PGpjA{border:1px solid red}._75_9PU .Y66lQo{width:1em}._75_9PU.sHxrAr{border-top:1px solid #00f}._75_9PU ._4_kJbH{width:2em}._75_9PU.eCH6U5{border:2px solid red}._75_9PU .cx5ofG{width:2em}._75_9PU.iAQisI{border-top:2px solid #00f}._75_9PU .LSjKrm{width:3em}._75_9PU.RYF8kF{border:3px solid red}._75_9PU .XKZMXH{width:3em}._75_9PU.Btd_L7{border-top:3px solid #00f}.lQb_Er{color:#ff0}.EqdisS{color:transparent}.YcXvtG{color:#1a1a1a}.gnEOu0{color:#fafafa}.QFK-pd{background-color:transparent}.vLhOdO{background-color:#1a1a1a}.BB3914{background-color:#fafafa}.XMShGx:active{background-color:transparent}.pYWOaW:active{background-color:#1a1a1a}.YvQoMS:active{background-color:#fafafa}.ccA3wc{border-color:transparent}._9OMGCZ{border-color:#1a1a1a}.Y1sI0i{border-color:#fafafa}.WrGzoU:focus{border-color:transparent}.iSk3wh:focus{border-color:#1a1a1a}.DiF_NF:focus{border-color:#fafafa}.inverted .YcXvtG{color:#fafafa}.inverted .gnEOu0{color:#1a1a1a}.inverted .vLhOdO{background-color:#fafafa}.inverted .BB3914{background-color:#1a1a1a}.inverted .pYWOaW:active{background-color:#fafafa}.inverted .YvQoMS:active{background-color:#1a1a1a}.inverted ._9OMGCZ{border-color:#fafafa}.inverted .Y1sI0i{border-color:#1a1a1a}.inverted .iSk3wh:focus{border-color:#fafafa}.inverted .DiF_NF:focus{border-color:#1a1a1a}@media screen and (min-width:320px){.Rvp04b{color:transparent}.Lp5Coj{color:#1a1a1a}.HCs9Zk{color:#fafafa}.n9uP8O{background-color:transparent}.JGmk2f{background-color:#1a1a1a}.SrYDfc{background-color:#fafafa}._09Y3xY:active{background-color:transparent}._0yvfVT:active{background-color:#1a1a1a}.Nqx5Tu:active{background-color:#fafafa}.Z7zfNt{border-color:transparent}.l7cM29{border-color:#1a1a1a}.W9KYDX{border-color:#fafafa}.z2U-id:focus{border-color:transparent}._47a4aF:focus{border-color:#1a1a1a}.VDNH3K:focus{border-color:#fafafa}.inverted .Lp5Coj{color:#fafafa}.inverted .HCs9Zk{color:#1a1a1a}.inverted .JGmk2f{background-color:#fafafa}.inverted .SrYDfc{background-color:#1a1a1a}.inverted ._0yvfVT:active{background-color:#fafafa}.inverted .Nqx5Tu:active{background-color:#1a1a1a}.inverted .l7cM29{border-color:#fafafa}.inverted .W9KYDX{border-color:#1a1a1a}.inverted ._47a4aF:focus{border-color:#fafafa}.inverted .VDNH3K:focus{border-color:#1a1a1a}}@media (hover:hover) and (pointer:fine) and screen and (min-width:320px){.MpFFe4:hover{color:transparent}.sWWlLj:hover{color:#1a1a1a}.o6Le8p:hover{color:#fafafa}._3A_tYX:hover{background-color:transparent}.EWb8dI:hover{background-color:#1a1a1a}.ZNbZad:hover{background-color:#fafafa}.itJNZE:hover{border-color:transparent}.frDhwD:hover{border-color:#1a1a1a}._-3tIbX:hover{border-color:#fafafa}.inverted .sWWlLj:hover{color:#fafafa}.inverted .o6Le8p:hover{color:#1a1a1a}.inverted .EWb8dI:hover{background-color:#fafafa}.inverted .ZNbZad:hover{background-color:#1a1a1a}.inverted .frDhwD:hover{border-color:#fafafa}.inverted ._-3tIbX:hover{border-color:#1a1a1a}}@media screen and (min-width:480px){.ZG5UC9{color:transparent}._G9XCO{color:#1a1a1a}.qP7xSn{color:#fafafa}.cT83fW{background-color:transparent}.cTzk67{background-color:#1a1a1a}.d87drd{background-color:#fafafa}.b_MwVS:active{background-color:transparent}.PpdrMK:active{background-color:#1a1a1a}.zi47D5:active{background-color:#fafafa}.ZaHZcI{border-color:transparent}.WZPKju{border-color:#1a1a1a}.tFW0c4{border-color:#fafafa}.Yy_yhi:focus{border-color:transparent}.k2XnVf:focus{border-color:#1a1a1a}._2_NizD:focus{border-color:#fafafa}.inverted ._G9XCO{color:#fafafa}.inverted .qP7xSn{color:#1a1a1a}.inverted .cTzk67{background-color:#fafafa}.inverted .d87drd{background-color:#1a1a1a}.inverted .PpdrMK:active{background-color:#fafafa}.inverted .zi47D5:active{background-color:#1a1a1a}.inverted .WZPKju{border-color:#fafafa}.inverted .tFW0c4{border-color:#1a1a1a}.inverted .k2XnVf:focus{border-color:#fafafa}.inverted ._2_NizD:focus{border-color:#1a1a1a}}@media (hover:hover) and (pointer:fine) and screen and (min-width:480px){._17TE5:hover{color:transparent}.f_hjdE:hover{color:#1a1a1a}.egCwcL:hover{color:#fafafa}.aR3Ubx:hover{background-color:transparent}.OkiZx1:hover{background-color:#1a1a1a}.KNhFJA:hover{background-color:#fafafa}.JS26Ed:hover{border-color:transparent}.vjwfDZ:hover{border-color:#1a1a1a}.PIMcZH:hover{border-color:#fafafa}.inverted .f_hjdE:hover{color:#fafafa}.inverted .egCwcL:hover{color:#1a1a1a}.inverted .OkiZx1:hover{background-color:#fafafa}.inverted .KNhFJA:hover{background-color:#1a1a1a}.inverted .vjwfDZ:hover{border-color:#fafafa}.inverted .PIMcZH:hover{border-color:#1a1a1a}}@media screen and (min-width:768px){._1b2v1R{font-size:2em}.xXc9fo{font-size:2em}.Aw2D45{color:transparent}._4b92dm{color:#1a1a1a}.o8qdX5{color:#fafafa}._8eHx03{background-color:transparent}.ltaYW3{background-color:#1a1a1a}.BhFfzx{background-color:#fafafa}.HV1jTO:active{background-color:transparent}.x3vCBC:active{background-color:#1a1a1a}._8D7pd9:active{background-color:#fafafa}.mwSZUD{border-color:transparent}._-9Btvy{border-color:#1a1a1a}.yGe1Ir{border-color:#fafafa}._9q2qP5:focus{border-color:transparent}._11iKz3:focus{border-color:#1a1a1a}.HIkC1B:focus{border-color:#fafafa}.inverted ._4b92dm{color:#fafafa}.inverted .o8qdX5{color:#1a1a1a}.inverted .ltaYW3{background-color:#fafafa}.inverted .BhFfzx{background-color:#1a1a1a}.inverted .x3vCBC:active{background-color:#fafafa}.inverted ._8D7pd9:active{background-color:#1a1a1a}.inverted ._-9Btvy{border-color:#fafafa}.inverted .yGe1Ir{border-color:#1a1a1a}.inverted ._11iKz3:focus{border-color:#fafafa}.inverted .HIkC1B:focus{border-color:#1a1a1a}}@media (hover:hover) and (pointer:fine) and screen and (min-width:768px){.VmcM14:hover{color:transparent}._4pdGQt:hover{color:#1a1a1a}._8MyiUe:hover{color:#fafafa}.rlsckE:hover{background-color:transparent}.VtITcW:hover{background-color:#1a1a1a}.MVQf1m:hover{background-color:#fafafa}.fXkby9:hover{border-color:transparent}.gnRIud:hover{border-color:#1a1a1a}.fFoYjL:hover{border-color:#fafafa}.inverted ._4pdGQt:hover{color:#fafafa}.inverted ._8MyiUe:hover{color:#1a1a1a}.inverted .VtITcW:hover{background-color:#fafafa}.inverted .MVQf1m:hover{background-color:#1a1a1a}.inverted .gnRIud:hover{border-color:#fafafa}.inverted .fFoYjL:hover{border-color:#1a1a1a}}@media screen and (min-width:1024px){._1b2v1R{font-size:3em}.xXc9fo{font-size:3em}.PBhfKy{color:transparent}.CgYuy9{color:#1a1a1a}.HNuXy3{color:#fafafa}.jZWNUM{background-color:transparent}.Ya3qdL{background-color:#1a1a1a}.nnqEoI{background-color:#fafafa}.AoVx-4:active{background-color:transparent}.JFpWQB:active{background-color:#1a1a1a}.eWCHpU:active{background-color:#fafafa}._8z2-Ts{border-color:transparent}.p0zb6v{border-color:#1a1a1a}.CaVPgM{border-color:#fafafa}.MQxQG6:focus{border-color:transparent}.j1NZTt:focus{border-color:#1a1a1a}.qn6vfj:focus{border-color:#fafafa}.inverted .CgYuy9{color:#fafafa}.inverted .HNuXy3{color:#1a1a1a}.inverted .Ya3qdL{background-color:#fafafa}.inverted .nnqEoI{background-color:#1a1a1a}.inverted .JFpWQB:active{background-color:#fafafa}.inverted .eWCHpU:active{background-color:#1a1a1a}.inverted .p0zb6v{border-color:#fafafa}.inverted .CaVPgM{border-color:#1a1a1a}.inverted .j1NZTt:focus{border-color:#fafafa}.inverted .qn6vfj:focus{border-color:#1a1a1a}}@media (hover:hover) and (pointer:fine) and screen and (min-width:1024px){.XhfU7x:hover{color:transparent}.K7oBMw:hover{color:#1a1a1a}.WumQPC:hover{color:#fafafa}.ZyQBE3:hover{background-color:transparent}._3-idl1:hover{background-color:#1a1a1a}.uUQ62H:hover{background-color:#fafafa}.wz8Ybj:hover{border-color:transparent}.yFX9Bt:hover{border-color:#1a1a1a}.G_Ks9n:hover{border-color:#fafafa}.inverted .K7oBMw:hover{color:#fafafa}.inverted .WumQPC:hover{color:#1a1a1a}.inverted ._3-idl1:hover{background-color:#fafafa}.inverted .uUQ62H:hover{background-color:#1a1a1a}.inverted .yFX9Bt:hover{border-color:#fafafa}.inverted .G_Ks9n:hover{border-color:#1a1a1a}}@media screen and (min-width:1280px){.Y4hs5_{color:transparent}.BEwYdP{color:#1a1a1a}.oLHsDL{color:#fafafa}.gFn7y6{background-color:transparent}._5_fipl{background-color:#1a1a1a}.VBoBXH{background-color:#fafafa}.sp6-_K:active{background-color:transparent}.m1dGmX:active{background-color:#1a1a1a}.F8ABi0:active{background-color:#fafafa}.ycqC89{border-color:transparent}.zwPMh8{border-color:#1a1a1a}.nHkSni{border-color:#fafafa}.aqBpwF:focus{border-color:transparent}.u97qUL:focus{border-color:#1a1a1a}.zzHwgX:focus{border-color:#fafafa}.inverted .BEwYdP{color:#fafafa}.inverted .oLHsDL{color:#1a1a1a}.inverted ._5_fipl{background-color:#fafafa}.inverted .VBoBXH{background-color:#1a1a1a}.inverted .m1dGmX:active{background-color:#fafafa}.inverted .F8ABi0:active{background-color:#1a1a1a}.inverted .zwPMh8{border-color:#fafafa}.inverted .nHkSni{border-color:#1a1a1a}.inverted .u97qUL:focus{border-color:#fafafa}.inverted .zzHwgX:focus{border-color:#1a1a1a}}@media (hover:hover) and (pointer:fine) and screen and (min-width:1280px){.Tv9kwZ:hover{color:transparent}._3Yc9VP:hover{color:#1a1a1a}.QvUeTY:hover{color:#fafafa}.B2ZYP6:hover{background-color:transparent}.XSzgJm:hover{background-color:#1a1a1a}.GdsyI9:hover{background-color:#fafafa}.IJQNcS:hover{border-color:transparent}.vwenav:hover{border-color:#1a1a1a}.EDikIT:hover{border-color:#fafafa}.inverted ._3Yc9VP:hover{color:#fafafa}.inverted .QvUeTY:hover{color:#1a1a1a}.inverted .XSzgJm:hover{background-color:#fafafa}.inverted .GdsyI9:hover{background-color:#1a1a1a}.inverted .vwenav:hover{border-color:#fafafa}.inverted .EDikIT:hover{border-color:#1a1a1a}}@media (hover:hover) and (pointer:fine){._8o7AdB:hover{color:transparent}.DJ9tNH:hover{color:#1a1a1a}.pQ96hs:hover{color:#fafafa}.OW2t12:hover{background-color:transparent}.p0K3V_:hover{background-color:#1a1a1a}.u5CoHT:hover{background-color:#fafafa}.DdLERB:hover{border-color:transparent}.sSTi9U:hover{border-color:#1a1a1a}.SrlG4o:hover{border-color:#fafafa}.inverted .DJ9tNH:hover{color:#fafafa}.inverted .pQ96hs:hover{color:#1a1a1a}.inverted .p0K3V_:hover{background-color:#fafafa}.inverted .u5CoHT:hover{background-color:#1a1a1a}.inverted .sSTi9U:hover{border-color:#fafafa}.inverted .SrlG4o:hover{border-color:#1a1a1a}}@media (max-width:50rem){body{word-wrap:break-word;color:rgba(18,52,86,.47059);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;font-size:1rem;line-height:1.5rem;padding-left:calc(.5rem + 1px);padding-right:calc(.5rem + 1px)}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.ZlgcWo.uvJREe,main.ZlgcWo{background-image:img/background-2x.jpg}}
\ No newline at end of file
+.YzVv9y{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Arial,Helvetica Neue,sans-serif}.V_ma2j{font-size:1em}.YfpiAb{color:red;font-size:1em}.o3-BnE{border:1px solid red;color:#00f;display:flex;width:100px}.dgII7d{font-weight:700}.hZEeRw{height:100%}.Gpf-P8{text-decoration:underline}._3XV0Ef{font-size:4em}._9M8f-j{color:red}.sMmOaU{color:#00f}.sMmOaU .R2GDg-{color:green}.EV62sS{color:#00f}.JYUOso{color:#00f}.l-ITF2{color:green}.l-ITF2:hover{color:red}.x7QluR{color:green}.x7QluR:focus{color:red}.gPy6Qt{background-color:#000}.gPy6Qt:disabled{background-color:grey}html{overflow-x:hidden;overflow-y:auto;overflow:hidden auto}h1,h2,h3,h4,h5,h6{margin-bottom:0;margin-top:0}.ZlgcWo.uvJREe,main.ZlgcWo{background-image:img/background.jpg}.ZlgcWo.uvJREe,main.ZlgcWo{background-image:-webkit-image-set(url("img/background.jpg") 1x,url("img/background-2x.jpg") 2x);background-image:image-set("img/background.jpg" 1x,"img/background-2x.jpg" 2x)}a{color:rgba(0,0,255,.9)}a:hover{color:#639}.mHJuMv{color:red}.mHJuMv .B_oqE3,.mHJuMv .qhqOPF{color:#00f}._9q-zqg{color:red}._9q-zqg .qhqOPF{color:#00f}._9q-zqg .qhqOPF .oLzZ_N{color:green}.nHROCZ{font-size:1em}.nHROCZ.YZP-Tu{font-size:2em}.HbTeo6{font-size:1em}.HbTeo6.YZP-Tu{color:red}.HbTeo6{display:flex}.HbTeo6 .qhqOPF{font-size:.5em}.HbTeo6 .qhqOPF._6cCOB0{color:#00f}.HbTeo6 .qhqOPF._6cCOB0 .vruPji{color:green}.XPMGYZ{color:red}.XPMGYZ:hover{color:#00f}.XPMGYZ:hover .QMsI4n{color:green}.XPMGYZ:hover .QMsI4n.fc23Jo{font-size:2em}.XPMGYZ:hover .QMsI4n.fc23Jo:after{content:"after";position:absolute}._1b2v1R{font-size:1em}.xXc9fo{font-size:1em}._6gjVlf{font-size:4em}@keyframes _4bsdl{0%,10%{opacity:0}15%{opacity:.4}to{opacity:1}}._4bsdl{animation-duration:.25s;animation-name:_4bsdl}.C0hAH1{animation-duration:.25s;animation-name:_4bsdl}.globalClass{width:100%}.globalClass .v5Vpzq{color:red}.globalClass.ado0HJ{color:#00f}.ZlJtcH{color:red}.ZXM7RA{color:#00f}.pUJQIY{color:red}.Z3doKH{color:#00f}.aGea0b{color:red}.t8cRql{color:#00f}.NRaoKv,.oPlD0W{font-size:1em}.oi5tdf,.W1CcjX{line-height:1em}.FCG5GQ,.H9WShg{font-size:2em}._7x3EPh,.WO37ya{line-height:2em}.d8yso7,.uGM3oi{font-size:3em}._3Ft6ps,.NbUW8z{line-height:3em}.Y9lrZy{font-size:10px}.Y9lrZy ._8Urr0R{width:1em}.Y9lrZy.e2agTq{border:1px solid red}.Y9lrZy ._5v4SSH{width:1em}.Y9lrZy.iS88X_{border-top:1px solid #00f}.Y9lrZy .vlAfUd{width:2em}.Y9lrZy.PgUB93{border:2px solid red}.Y9lrZy .KjddK4{width:2em}.Y9lrZy.GZomQK{border-top:2px solid #00f}.Y9lrZy .utNk9X{width:3em}.Y9lrZy.bwOLNP{border:3px solid red}.Y9lrZy ._5UlDUQ{width:3em}.Y9lrZy.vA0LhQ{border-top:3px solid #00f}.gPZ5T-{font-size:20px}.gPZ5T- .SnZr3u{width:1em}.gPZ5T-.tNdUvj{border:1px solid red}.gPZ5T- .RTwpt_{width:1em}.gPZ5T-.aiCnKv{border-top:1px solid #00f}.gPZ5T- .bUAlDZ{width:2em}.gPZ5T-.lpuLLH{border:2px solid red}.gPZ5T- .k5RQse{width:2em}.gPZ5T-.CmX6W8{border-top:2px solid #00f}.gPZ5T- .MdYjYw{width:3em}.gPZ5T-.YK_gQZ{border:3px solid red}.gPZ5T- ._2W8BKO{width:3em}.gPZ5T-.F3eX_U{border-top:3px solid #00f}._75_9PU{font-size:30px}._75_9PU .KCb6ES{width:1em}._75_9PU._2PGpjA{border:1px solid red}._75_9PU .Y66lQo{width:1em}._75_9PU.sHxrAr{border-top:1px solid #00f}._75_9PU ._4_kJbH{width:2em}._75_9PU.eCH6U5{border:2px solid red}._75_9PU .cx5ofG{width:2em}._75_9PU.iAQisI{border-top:2px solid #00f}._75_9PU .LSjKrm{width:3em}._75_9PU.RYF8kF{border:3px solid red}._75_9PU .XKZMXH{width:3em}._75_9PU.Btd_L7{border-top:3px solid #00f}.lQb_Er{color:#ff0}.EqdisS{color:transparent}.YcXvtG{color:#1a1a1a}.gnEOu0{color:#fafafa}.QFK-pd{background-color:transparent}.vLhOdO{background-color:#1a1a1a}.BB3914{background-color:#fafafa}.XMShGx:active{background-color:transparent}.pYWOaW:active{background-color:#1a1a1a}.YvQoMS:active{background-color:#fafafa}.ccA3wc{border-color:transparent}._9OMGCZ{border-color:#1a1a1a}.Y1sI0i{border-color:#fafafa}.WrGzoU:focus{border-color:transparent}.iSk3wh:focus{border-color:#1a1a1a}.DiF_NF:focus{border-color:#fafafa}.inverted .YcXvtG{color:#fafafa}.inverted .gnEOu0{color:#1a1a1a}.inverted .vLhOdO{background-color:#fafafa}.inverted .BB3914{background-color:#1a1a1a}.inverted .pYWOaW:active{background-color:#fafafa}.inverted .YvQoMS:active{background-color:#1a1a1a}.inverted ._9OMGCZ{border-color:#fafafa}.inverted .Y1sI0i{border-color:#1a1a1a}.inverted .iSk3wh:focus{border-color:#fafafa}.inverted .DiF_NF:focus{border-color:#1a1a1a}@media screen and (min-width:320px){.Rvp04b{color:transparent}.Lp5Coj{color:#1a1a1a}.HCs9Zk{color:#fafafa}.n9uP8O{background-color:transparent}.JGmk2f{background-color:#1a1a1a}.SrYDfc{background-color:#fafafa}._09Y3xY:active{background-color:transparent}._0yvfVT:active{background-color:#1a1a1a}.Nqx5Tu:active{background-color:#fafafa}.Z7zfNt{border-color:transparent}.l7cM29{border-color:#1a1a1a}.W9KYDX{border-color:#fafafa}.z2U-id:focus{border-color:transparent}._47a4aF:focus{border-color:#1a1a1a}.VDNH3K:focus{border-color:#fafafa}.inverted .Lp5Coj{color:#fafafa}.inverted .HCs9Zk{color:#1a1a1a}.inverted .JGmk2f{background-color:#fafafa}.inverted .SrYDfc{background-color:#1a1a1a}.inverted ._0yvfVT:active{background-color:#fafafa}.inverted .Nqx5Tu:active{background-color:#1a1a1a}.inverted .l7cM29{border-color:#fafafa}.inverted .W9KYDX{border-color:#1a1a1a}.inverted ._47a4aF:focus{border-color:#fafafa}.inverted .VDNH3K:focus{border-color:#1a1a1a}}@media (hover:hover) and (pointer:fine) and screen and (min-width:320px){.MpFFe4:hover{color:transparent}.sWWlLj:hover{color:#1a1a1a}.o6Le8p:hover{color:#fafafa}._3A_tYX:hover{background-color:transparent}.EWb8dI:hover{background-color:#1a1a1a}.ZNbZad:hover{background-color:#fafafa}.itJNZE:hover{border-color:transparent}.frDhwD:hover{border-color:#1a1a1a}._-3tIbX:hover{border-color:#fafafa}.inverted .sWWlLj:hover{color:#fafafa}.inverted .o6Le8p:hover{color:#1a1a1a}.inverted .EWb8dI:hover{background-color:#fafafa}.inverted .ZNbZad:hover{background-color:#1a1a1a}.inverted .frDhwD:hover{border-color:#fafafa}.inverted ._-3tIbX:hover{border-color:#1a1a1a}}@media screen and (min-width:480px){.ZG5UC9{color:transparent}._G9XCO{color:#1a1a1a}.qP7xSn{color:#fafafa}.cT83fW{background-color:transparent}.cTzk67{background-color:#1a1a1a}.d87drd{background-color:#fafafa}.b_MwVS:active{background-color:transparent}.PpdrMK:active{background-color:#1a1a1a}.zi47D5:active{background-color:#fafafa}.ZaHZcI{border-color:transparent}.WZPKju{border-color:#1a1a1a}.tFW0c4{border-color:#fafafa}.Yy_yhi:focus{border-color:transparent}.k2XnVf:focus{border-color:#1a1a1a}._2_NizD:focus{border-color:#fafafa}.inverted ._G9XCO{color:#fafafa}.inverted .qP7xSn{color:#1a1a1a}.inverted .cTzk67{background-color:#fafafa}.inverted .d87drd{background-color:#1a1a1a}.inverted .PpdrMK:active{background-color:#fafafa}.inverted .zi47D5:active{background-color:#1a1a1a}.inverted .WZPKju{border-color:#fafafa}.inverted .tFW0c4{border-color:#1a1a1a}.inverted .k2XnVf:focus{border-color:#fafafa}.inverted ._2_NizD:focus{border-color:#1a1a1a}}@media (hover:hover) and (pointer:fine) and screen and (min-width:480px){._17TE5:hover{color:transparent}.f_hjdE:hover{color:#1a1a1a}.egCwcL:hover{color:#fafafa}.aR3Ubx:hover{background-color:transparent}.OkiZx1:hover{background-color:#1a1a1a}.KNhFJA:hover{background-color:#fafafa}.JS26Ed:hover{border-color:transparent}.vjwfDZ:hover{border-color:#1a1a1a}.PIMcZH:hover{border-color:#fafafa}.inverted .f_hjdE:hover{color:#fafafa}.inverted .egCwcL:hover{color:#1a1a1a}.inverted .OkiZx1:hover{background-color:#fafafa}.inverted .KNhFJA:hover{background-color:#1a1a1a}.inverted .vjwfDZ:hover{border-color:#fafafa}.inverted .PIMcZH:hover{border-color:#1a1a1a}}@media screen and (min-width:768px){._1b2v1R{font-size:2em}.xXc9fo{font-size:2em}.Aw2D45{color:transparent}._4b92dm{color:#1a1a1a}.o8qdX5{color:#fafafa}._8eHx03{background-color:transparent}.ltaYW3{background-color:#1a1a1a}.BhFfzx{background-color:#fafafa}.HV1jTO:active{background-color:transparent}.x3vCBC:active{background-color:#1a1a1a}._8D7pd9:active{background-color:#fafafa}.mwSZUD{border-color:transparent}._-9Btvy{border-color:#1a1a1a}.yGe1Ir{border-color:#fafafa}._9q2qP5:focus{border-color:transparent}._11iKz3:focus{border-color:#1a1a1a}.HIkC1B:focus{border-color:#fafafa}.inverted ._4b92dm{color:#fafafa}.inverted .o8qdX5{color:#1a1a1a}.inverted .ltaYW3{background-color:#fafafa}.inverted .BhFfzx{background-color:#1a1a1a}.inverted .x3vCBC:active{background-color:#fafafa}.inverted ._8D7pd9:active{background-color:#1a1a1a}.inverted ._-9Btvy{border-color:#fafafa}.inverted .yGe1Ir{border-color:#1a1a1a}.inverted ._11iKz3:focus{border-color:#fafafa}.inverted .HIkC1B:focus{border-color:#1a1a1a}}@media (hover:hover) and (pointer:fine) and screen and (min-width:768px){.VmcM14:hover{color:transparent}._4pdGQt:hover{color:#1a1a1a}._8MyiUe:hover{color:#fafafa}.rlsckE:hover{background-color:transparent}.VtITcW:hover{background-color:#1a1a1a}.MVQf1m:hover{background-color:#fafafa}.fXkby9:hover{border-color:transparent}.gnRIud:hover{border-color:#1a1a1a}.fFoYjL:hover{border-color:#fafafa}.inverted ._4pdGQt:hover{color:#fafafa}.inverted ._8MyiUe:hover{color:#1a1a1a}.inverted .VtITcW:hover{background-color:#fafafa}.inverted .MVQf1m:hover{background-color:#1a1a1a}.inverted .gnRIud:hover{border-color:#fafafa}.inverted .fFoYjL:hover{border-color:#1a1a1a}}@media screen and (min-width:1024px){._1b2v1R{font-size:3em}.xXc9fo{font-size:3em}.PBhfKy{color:transparent}.CgYuy9{color:#1a1a1a}.HNuXy3{color:#fafafa}.jZWNUM{background-color:transparent}.Ya3qdL{background-color:#1a1a1a}.nnqEoI{background-color:#fafafa}.AoVx-4:active{background-color:transparent}.JFpWQB:active{background-color:#1a1a1a}.eWCHpU:active{background-color:#fafafa}._8z2-Ts{border-color:transparent}.p0zb6v{border-color:#1a1a1a}.CaVPgM{border-color:#fafafa}.MQxQG6:focus{border-color:transparent}.j1NZTt:focus{border-color:#1a1a1a}.qn6vfj:focus{border-color:#fafafa}.inverted .CgYuy9{color:#fafafa}.inverted .HNuXy3{color:#1a1a1a}.inverted .Ya3qdL{background-color:#fafafa}.inverted .nnqEoI{background-color:#1a1a1a}.inverted .JFpWQB:active{background-color:#fafafa}.inverted .eWCHpU:active{background-color:#1a1a1a}.inverted .p0zb6v{border-color:#fafafa}.inverted .CaVPgM{border-color:#1a1a1a}.inverted .j1NZTt:focus{border-color:#fafafa}.inverted .qn6vfj:focus{border-color:#1a1a1a}}@media (hover:hover) and (pointer:fine) and screen and (min-width:1024px){.XhfU7x:hover{color:transparent}.K7oBMw:hover{color:#1a1a1a}.WumQPC:hover{color:#fafafa}.ZyQBE3:hover{background-color:transparent}._3-idl1:hover{background-color:#1a1a1a}.uUQ62H:hover{background-color:#fafafa}.wz8Ybj:hover{border-color:transparent}.yFX9Bt:hover{border-color:#1a1a1a}.G_Ks9n:hover{border-color:#fafafa}.inverted .K7oBMw:hover{color:#fafafa}.inverted .WumQPC:hover{color:#1a1a1a}.inverted ._3-idl1:hover{background-color:#fafafa}.inverted .uUQ62H:hover{background-color:#1a1a1a}.inverted .yFX9Bt:hover{border-color:#fafafa}.inverted .G_Ks9n:hover{border-color:#1a1a1a}}@media screen and (min-width:1280px){.Y4hs5_{color:transparent}.BEwYdP{color:#1a1a1a}.oLHsDL{color:#fafafa}.gFn7y6{background-color:transparent}._5_fipl{background-color:#1a1a1a}.VBoBXH{background-color:#fafafa}.sp6-_K:active{background-color:transparent}.m1dGmX:active{background-color:#1a1a1a}.F8ABi0:active{background-color:#fafafa}.ycqC89{border-color:transparent}.zwPMh8{border-color:#1a1a1a}.nHkSni{border-color:#fafafa}.aqBpwF:focus{border-color:transparent}.u97qUL:focus{border-color:#1a1a1a}.zzHwgX:focus{border-color:#fafafa}.inverted .BEwYdP{color:#fafafa}.inverted .oLHsDL{color:#1a1a1a}.inverted ._5_fipl{background-color:#fafafa}.inverted .VBoBXH{background-color:#1a1a1a}.inverted .m1dGmX:active{background-color:#fafafa}.inverted .F8ABi0:active{background-color:#1a1a1a}.inverted .zwPMh8{border-color:#fafafa}.inverted .nHkSni{border-color:#1a1a1a}.inverted .u97qUL:focus{border-color:#fafafa}.inverted .zzHwgX:focus{border-color:#1a1a1a}}@media (hover:hover) and (pointer:fine) and screen and (min-width:1280px){.Tv9kwZ:hover{color:transparent}._3Yc9VP:hover{color:#1a1a1a}.QvUeTY:hover{color:#fafafa}.B2ZYP6:hover{background-color:transparent}.XSzgJm:hover{background-color:#1a1a1a}.GdsyI9:hover{background-color:#fafafa}.IJQNcS:hover{border-color:transparent}.vwenav:hover{border-color:#1a1a1a}.EDikIT:hover{border-color:#fafafa}.inverted ._3Yc9VP:hover{color:#fafafa}.inverted .QvUeTY:hover{color:#1a1a1a}.inverted .XSzgJm:hover{background-color:#fafafa}.inverted .GdsyI9:hover{background-color:#1a1a1a}.inverted .vwenav:hover{border-color:#fafafa}.inverted .EDikIT:hover{border-color:#1a1a1a}}@media (hover:hover) and (pointer:fine){._8o7AdB:hover{color:transparent}.DJ9tNH:hover{color:#1a1a1a}.pQ96hs:hover{color:#fafafa}.OW2t12:hover{background-color:transparent}.p0K3V_:hover{background-color:#1a1a1a}.u5CoHT:hover{background-color:#fafafa}.DdLERB:hover{border-color:transparent}.sSTi9U:hover{border-color:#1a1a1a}.SrlG4o:hover{border-color:#fafafa}.inverted .DJ9tNH:hover{color:#fafafa}.inverted .pQ96hs:hover{color:#1a1a1a}.inverted .p0K3V_:hover{background-color:#fafafa}.inverted .u5CoHT:hover{background-color:#1a1a1a}.inverted .sSTi9U:hover{border-color:#fafafa}.inverted .SrlG4o:hover{border-color:#1a1a1a}}@media (max-width:50rem){body{word-wrap:break-word;color:rgba(18,52,86,.47059);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;font-size:1rem;line-height:1.5rem;padding-left:calc(.5rem + 1px);padding-right:calc(.5rem + 1px)}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.ZlgcWo.uvJREe,main.ZlgcWo{background-image:img/background-2x.jpg}}
\ No newline at end of file
diff --git a/integration-test/packages/atoms/same-content/.npmignore b/integration-test/packages/atoms/same-content/.npmignore
new file mode 100644
index 0000000..3f77cdc
--- /dev/null
+++ b/integration-test/packages/atoms/same-content/.npmignore
@@ -0,0 +1,3 @@
+**/*.tsx
+**/*.ts
+!**/*.d.ts
diff --git a/integration-test/packages/atoms/same-content/index.css b/integration-test/packages/atoms/same-content/index.css
new file mode 100644
index 0000000..1dd5334
--- /dev/null
+++ b/integration-test/packages/atoms/same-content/index.css
@@ -0,0 +1,7 @@
+.bar {
+	color: blue;
+}
+
+.foo_bar {
+	color: blue;
+}
diff --git a/integration-test/packages/atoms/same-content/index.d.ts.snap b/integration-test/packages/atoms/same-content/index.d.ts.snap
new file mode 100644
index 0000000..0f5826e
--- /dev/null
+++ b/integration-test/packages/atoms/same-content/index.d.ts.snap
@@ -0,0 +1,3 @@
+declare const bar: string;
+declare const foo_bar: string
+export { bar, foo_bar }
\ No newline at end of file
diff --git a/integration-test/packages/atoms/same-content/index.esm.js.snap b/integration-test/packages/atoms/same-content/index.esm.js.snap
new file mode 100644
index 0000000..ed477d3
--- /dev/null
+++ b/integration-test/packages/atoms/same-content/index.esm.js.snap
@@ -0,0 +1,2 @@
+export var bar = "EV62sS";
+export var foo_bar = "JYUOso"
\ No newline at end of file
diff --git a/integration-test/packages/atoms/same-content/index.js.snap b/integration-test/packages/atoms/same-content/index.js.snap
new file mode 100644
index 0000000..20845a5
--- /dev/null
+++ b/integration-test/packages/atoms/same-content/index.js.snap
@@ -0,0 +1,4 @@
+module.exports = {
+  bar: "EV62sS",
+  foo_bar: "JYUOso"
+};
\ No newline at end of file
diff --git a/integration-test/packages/atoms/same-content/module.css.json.snap b/integration-test/packages/atoms/same-content/module.css.json.snap
new file mode 100644
index 0000000..8cd2f28
--- /dev/null
+++ b/integration-test/packages/atoms/same-content/module.css.json.snap
@@ -0,0 +1 @@
+{"bar":"EV62sS","foo_bar":"JYUOso"}
\ No newline at end of file
diff --git a/integration-test/packages/atoms/same-content/module.css.snap b/integration-test/packages/atoms/same-content/module.css.snap
new file mode 100644
index 0000000..1dd5334
--- /dev/null
+++ b/integration-test/packages/atoms/same-content/module.css.snap
@@ -0,0 +1,7 @@
+.bar {
+	color: blue;
+}
+
+.foo_bar {
+	color: blue;
+}
diff --git a/integration-test/packages/atoms/same-content/package.json b/integration-test/packages/atoms/same-content/package.json
new file mode 100644
index 0000000..eef8b73
--- /dev/null
+++ b/integration-test/packages/atoms/same-content/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "@my-org/same-content",
+  "version": "0.0.1",
+  "main": "index.js",
+  "module": "index.esm.js",
+  "sideEffects": false
+}
diff --git a/integration-test/packages/atoms/same-content/result.css.snap b/integration-test/packages/atoms/same-content/result.css.snap
new file mode 100644
index 0000000..fe5482b
--- /dev/null
+++ b/integration-test/packages/atoms/same-content/result.css.snap
@@ -0,0 +1,7 @@
+.EV62sS {
+	color: blue;
+}
+
+.JYUOso {
+	color: blue;
+}
diff --git a/package.json b/package.json
index 6fdb99d..5c9b5d3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@utilitycss/atomic",
-  "version": "0.19.1",
+  "version": "0.20.0",
   "author": "Andrea Moretti (@axyz) <axyzxp@gmail.com>",
   "description": "Atomic CSS composition for yarn workspaces",
   "repository": "utilitycss/atomic",
diff --git a/src/postcss/atomic-css-modules/generateScopedName.ts b/src/postcss/atomic-css-modules/generateScopedName.ts
index 823dd81..cffa6a2 100644
--- a/src/postcss/atomic-css-modules/generateScopedName.ts
+++ b/src/postcss/atomic-css-modules/generateScopedName.ts
@@ -20,7 +20,7 @@ const generateScopedName: generateScopedName = ({
     let pkgName = "";
     const definitionsMap = new Map();
     const isElectron = importedElectronRE.test(filename);
-    root.walkRules(new RegExp(`(\.${name}|:import)`), (rule): any => {
+    root.walkRules(new RegExp(`(\\.${name}|:import)`), (rule): any => {
       if (isElectron) {
         // ensure that a rule that appear multiple times has the same hash
         // e.g. inside media queries or when ICSS imported in a different atom.
diff --git a/templates/package.json.hbs b/templates/package.json.hbs
index f378444..4103f31 100644
--- a/templates/package.json.hbs
+++ b/templates/package.json.hbs
@@ -7,7 +7,7 @@
     "start": "atomic start"
   },
   "devDependencies": {
-    "@utilitycss/atomic": "^0.19.0",
+    "@utilitycss/atomic": "^0.20.0",
     "lerna": "3.13.3"
   },
   "workspaces": {