[ { "path": ".all-contributorsrc", "content": "{\n \"projectName\": \"linaria\",\n \"projectOwner\": \"callstack\",\n \"files\": [\n \"README.md\"\n ],\n \"imageSize\": 100,\n \"commit\": false,\n \"contributors\": [\n {\n \"login\": \"zamotany\",\n \"name\": \"Paweł Trysła\",\n \"avatar_url\": \"https://avatars2.githubusercontent.com/u/17573635?v=4\",\n \"profile\": \"https://twitter.com/_zamotany\",\n \"contributions\": [\n \"code\",\n \"doc\",\n \"ideas\"\n ]\n },\n {\n \"login\": \"satya164\",\n \"name\": \"Satyajit Sahoo\",\n \"avatar_url\": \"https://avatars2.githubusercontent.com/u/1174278?v=4\",\n \"profile\": \"https://medium.com/@satya164\",\n \"contributions\": [\n \"code\",\n \"doc\",\n \"ideas\"\n ]\n },\n {\n \"login\": \"thymikee\",\n \"name\": \"Michał Pierzchała\",\n \"avatar_url\": \"https://avatars2.githubusercontent.com/u/5106466?v=4\",\n \"profile\": \"https://github.com/thymikee\",\n \"contributions\": [\n \"code\",\n \"doc\",\n \"ideas\"\n ]\n },\n {\n \"login\": \"AgtLucas\",\n \"name\": \"Lucas\",\n \"avatar_url\": \"https://avatars1.githubusercontent.com/u/1909761?v=4\",\n \"profile\": \"https://lcs.sh\",\n \"contributions\": [\n \"doc\"\n ]\n },\n {\n \"login\": \"pronevich\",\n \"name\": \"Alexey Pronevich\",\n \"avatar_url\": \"https://avatars0.githubusercontent.com/u/680439?v=4\",\n \"profile\": \"https://github.com/pronevich\",\n \"contributions\": [\n \"doc\"\n ]\n },\n {\n \"login\": \"wojteg1337\",\n \"name\": \"Wojtek Szafraniec\",\n \"avatar_url\": \"https://avatars3.githubusercontent.com/u/18573330?v=4\",\n \"profile\": \"https://github.com/wojteg1337\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"Anber\",\n \"name\": \"Anton Evzhakov\",\n \"avatar_url\": \"https://avatars3.githubusercontent.com/u/148258?v=4\",\n \"profile\": \"http://twitter.com/anber_dev\",\n \"contributions\": [\n \"code\",\n \"ideas\",\n \"doc\"\n ]\n },\n {\n \"login\": \"Tushkiz\",\n \"name\": \"Tushar Sonawane\",\n \"avatar_url\": \"https://avatars1.githubusercontent.com/u/1854763?v=4\",\n \"profile\": \"https://twitter.com/tushkiz\",\n \"contributions\": [\n \"doc\",\n \"example\"\n ]\n },\n {\n \"login\": \"ferrannp\",\n \"name\": \"Ferran Negre\",\n \"avatar_url\": \"https://avatars2.githubusercontent.com/u/774577?v=4\",\n \"profile\": \"http://twitter.com/ferrannp\",\n \"contributions\": [\n \"doc\"\n ]\n },\n {\n \"login\": \"jukben\",\n \"name\": \"Jakub Beneš\",\n \"avatar_url\": \"https://avatars3.githubusercontent.com/u/8135252?v=4\",\n \"profile\": \"https://jukben.cz\",\n \"contributions\": [\n \"code\",\n \"doc\"\n ]\n },\n {\n \"login\": \"oBusk\",\n \"name\": \"Oscar Busk\",\n \"avatar_url\": \"https://avatars2.githubusercontent.com/u/13413409?v=4\",\n \"profile\": \"https://github.com/oBusk\",\n \"contributions\": [\n \"bug\",\n \"code\"\n ]\n },\n {\n \"login\": \"Trancever\",\n \"name\": \"Dawid\",\n \"avatar_url\": \"https://avatars3.githubusercontent.com/u/18584155?v=4\",\n \"profile\": \"https://github.com/Trancever\",\n \"contributions\": [\n \"code\",\n \"doc\"\n ]\n },\n {\n \"login\": \"Esemesek\",\n \"name\": \"Kacper Wiszczuk\",\n \"avatar_url\": \"https://avatars2.githubusercontent.com/u/9092510?v=4\",\n \"profile\": \"https://twitter.com/esemesek\",\n \"contributions\": [\n \"code\",\n \"doc\"\n ]\n },\n {\n \"login\": \"que-etc\",\n \"name\": \"Denis Rul\",\n \"avatar_url\": \"https://avatars3.githubusercontent.com/u/2401842?v=4\",\n \"profile\": \"https://github.com/que-etc\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"johanholmerin\",\n \"name\": \"Johan Holmerin\",\n \"avatar_url\": \"https://avatars0.githubusercontent.com/u/7433263?v=4\",\n \"profile\": \"https://github.com/johanholmerin\",\n \"contributions\": [\n \"code\",\n \"doc\"\n ]\n },\n {\n \"login\": \"pgilad\",\n \"name\": \"Gilad Peleg\",\n \"avatar_url\": \"https://avatars0.githubusercontent.com/u/4533329?v=4\",\n \"profile\": \"https://www.giladpeleg.com/\",\n \"contributions\": [\n \"doc\"\n ]\n },\n {\n \"login\": \"giuseppeg\",\n \"name\": \"Giuseppe\",\n \"avatar_url\": \"https://avatars3.githubusercontent.com/u/711311?v=4\",\n \"profile\": \"http://giuseppe.pizza\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"silvenon\",\n \"name\": \"Matija Marohnić\",\n \"avatar_url\": \"https://avatars2.githubusercontent.com/u/471278?v=4\",\n \"profile\": \"https://silvenon.com\",\n \"contributions\": [\n \"code\",\n \"doc\"\n ]\n },\n {\n \"login\": \"Schubidu\",\n \"name\": \"Stefan Schult\",\n \"avatar_url\": \"https://avatars2.githubusercontent.com/u/120432?v=4\",\n \"profile\": \"http://schultstefan.de\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"wardpeet\",\n \"name\": \"Ward Peeters\",\n \"avatar_url\": \"https://avatars3.githubusercontent.com/u/1120926?v=4\",\n \"profile\": \"http://www.coding-tech.be\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"radoslaw-medryk\",\n \"name\": \"radoslaw-medryk\",\n \"avatar_url\": \"https://avatars0.githubusercontent.com/u/43260833?v=4\",\n \"profile\": \"https://github.com/radoslaw-medryk\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"dr2009\",\n \"name\": \"杨兴洲\",\n \"avatar_url\": \"https://avatars1.githubusercontent.com/u/8262650?v=4\",\n \"profile\": \"http://dr2009.com\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"hinok\",\n \"name\": \"Dawid Karabin\",\n \"avatar_url\": \"https://avatars2.githubusercontent.com/u/1313605?v=4\",\n \"profile\": \"https://github.com/hinok\",\n \"contributions\": [\n \"doc\"\n ]\n },\n {\n \"login\": \"chrisabrams\",\n \"name\": \"Chris Abrams\",\n \"avatar_url\": \"https://avatars1.githubusercontent.com/u/527740?s=460&v=4\",\n \"profile\": \"https://github.com/chrisabrams\",\n \"contributions\": [\n \"code\",\n \"doc\",\n \"ideas\"\n ]\n },\n {\n \"login\": \"Jayphen\",\n \"name\": \"Jayphen\",\n \"avatar_url\": \"https://avatars0.githubusercontent.com/u/329184?v=4\",\n \"profile\": \"http://hyperlab.se\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"bolasblack\",\n \"name\": \"c4605\",\n \"avatar_url\": \"https://avatars0.githubusercontent.com/u/382011?v=4\",\n \"profile\": \"https://github.com/bolasblack\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"koba04\",\n \"name\": \"Toru Kobayashi\",\n \"avatar_url\": \"https://avatars2.githubusercontent.com/u/250407?v=4\",\n \"profile\": \"https://koba04.com/\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"jayu\",\n \"name\": \"Jakub Mazurek\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/11561585?v=4\",\n \"profile\": \"https://github.com/jayu\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"jpnelson\",\n \"name\": \"Joshua Nelson\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/1518604?v=4\",\n \"profile\": \"http://subsecond.dev/\",\n \"contributions\": [\n \"code\",\n \"ideas\",\n \"doc\"\n ]\n },\n {\n \"login\": \"TMaszko\",\n \"name\": \"Tomasz Krzyżowski\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/16257732?v=4\",\n \"profile\": \"https://twitter.com/TMaszko\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"dfrkp\",\n \"name\": \"Martin Schulze\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/1476435?v=4\",\n \"profile\": \"https://www.slash-m.com/\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"wmzy\",\n \"name\": \"wmzy\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/5526525?v=4\",\n \"profile\": \"https://github.com/wmzy\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"cometkim\",\n \"name\": \"Hyeseong Kim\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/9696352?v=4\",\n \"profile\": \"https://blog.cometkim.kr/\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"Hotell\",\n \"name\": \"Martin Hochel\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/1223799?v=4\",\n \"profile\": \"https://github.com/Hotell\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"Daniel15\",\n \"name\": \"Daniel Lo Nigro\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/91933?v=4\",\n \"profile\": \"https://d.sb/\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"0xflotus\",\n \"name\": \"0xflotus\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/26602940?v=4\",\n \"profile\": \"https://github.com/0xflotus\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"afzalsayed96\",\n \"name\": \"Afzal Sayed\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/14029371?v=4\",\n \"profile\": \"https://github.com/afzalsayed96\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"aiji42\",\n \"name\": \"AijiUejima\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/6711766?v=4\",\n \"profile\": \"https://github.com/aiji42\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"le0pard\",\n \"name\": \"Oleksii Vasyliev\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/98444?v=4\",\n \"profile\": \"https://leopard.in.ua/\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"alicanerdogan\",\n \"name\": \"Alican Erdoğan\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/1814803?v=4\",\n \"profile\": \"https://github.com/alicanerdogan\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"amankkg\",\n \"name\": \"Aman Kubanychbek\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/3933028?v=4\",\n \"profile\": \"https://amank.me/\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"kinetifex\",\n \"name\": \"Andrew Gerard\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/82775?v=4\",\n \"profile\": \"http://kinetifex.com/\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"frolovdev\",\n \"name\": \"Andrey Frolov\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/30667180?v=4\",\n \"profile\": \"https://www.linkedin.com/in/andrey-frolov-3b8579155/\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"soluml\",\n \"name\": \"Benjamin Solum\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/589571?v=4\",\n \"profile\": \"https://github.com/soluml\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"billykwok\",\n \"name\": \"Billy Kwok\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/8078716?v=4\",\n \"profile\": \"https://billykwok.me/\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"chrstntdd\",\n \"name\": \"Christian Todd\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/17863654?v=4\",\n \"profile\": \"https://github.com/chrstntdd\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"dpeek\",\n \"name\": \"David Peek\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/128329?v=4\",\n \"profile\": \"https://estii.com/\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"dskiba\",\n \"name\": \"Denis Skiba\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/28356785?v=4\",\n \"profile\": \"https://github.com/dskiba\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"geakstr\",\n \"name\": \"Dima Kharitonov\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/1496368?v=4\",\n \"profile\": \"https://github.com/geakstr\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"GabbeV\",\n \"name\": \"Gabriel Valfridsson\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/13839236?v=4\",\n \"profile\": \"https://github.com/GabbeV\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"GitaiQAQ\",\n \"name\": \"Gitai\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/5354788?v=4\",\n \"profile\": \"http://t.cn/EvDFUFF\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"hampuskraft\",\n \"name\": \"Hampus Kraft\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/24176136?v=4\",\n \"profile\": \"https://hampuskraft.com/\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"isumix\",\n \"name\": \"Igor Sukharev\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/16747416?v=4\",\n \"profile\": \"https://github.com/isumix\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"eltociear\",\n \"name\": \"Ikko Ashimine\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/22633385?v=4\",\n \"profile\": \"https://bandism.net/\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"ImanMh\",\n \"name\": \"Iman Mohamadi\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/4482199?v=4\",\n \"profile\": \"http://jsdecorator.com/\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"codecorsair\",\n \"name\": \"JB \",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/9878445?v=4\",\n \"profile\": \"https://github.com/codecorsair\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"Jack-Works\",\n \"name\": \"Jack Works\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/5390719?v=4\",\n \"profile\": \"https://jack-works.github.io/\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"jamesgeorge007\",\n \"name\": \"James George\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/25279263?v=4\",\n \"profile\": \"https://ghuser.io/jamesgeorge007\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"jedmao\",\n \"name\": \"Jed Mao\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/1058243?v=4\",\n \"profile\": \"https://appleid.apple.com/\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"lencioni\",\n \"name\": \"Joe Lencioni\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/195534?v=4\",\n \"profile\": \"https://github.com/lencioni\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"joeycozza\",\n \"name\": \"Joey Cozza\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/3885959?v=4\",\n \"profile\": \"https://github.com/joeycozza\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"juanferreras\",\n \"name\": \"Juan Ferreras\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/8507996?v=4\",\n \"profile\": \"https://github.com/juanferreras\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"kazuma1989\",\n \"name\": \"Kazuma Ebina\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/15844862?v=4\",\n \"profile\": \"https://www.linkedin.com/in/kazuma1989/\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"webpro\",\n \"name\": \"Lars Kappert\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/456426?v=4\",\n \"profile\": \"https://webpro.nl/\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"lmammino\",\n \"name\": \"Luciano Mammino\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/205629?v=4\",\n \"profile\": \"https://loige.co/\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"madhavarshney\",\n \"name\": \"Madhav Varshney\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/40002855?v=4\",\n \"profile\": \"https://github.com/madhavarshney\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"malash\",\n \"name\": \"Malash\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/1812118?v=4\",\n \"profile\": \"https://malash.me/\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"Swaagie\",\n \"name\": \"Martijn Swaagman\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/670951?v=4\",\n \"profile\": \"https://github.com/Swaagie\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"moitias\",\n \"name\": \"Matias Lahti\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/1009280?v=4\",\n \"profile\": \"https://github.com/moitias\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"majames\",\n \"name\": \"Michael James\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/7553458?v=4\",\n \"profile\": \"https://github.com/majames\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"kryops\",\n \"name\": \"Michael Strobel\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/1042594?v=4\",\n \"profile\": \"https://github.com/kryops\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"michalchudziak\",\n \"name\": \"Michał Chudziak\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/7837457?v=4\",\n \"profile\": \"https://twitter.com/michalchudziak\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"mkanyar\",\n \"name\": \"Mike \",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/33469024?v=4\",\n \"profile\": \"https://github.com/mkanyar\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"mikestopcontinues\",\n \"name\": \"Mike Stop Continues\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/150434?v=4\",\n \"profile\": \"https://www.mikestopcontinues.com/\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"Mokshit06\",\n \"name\": \"Mokshit Jain\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/50412128?v=4\",\n \"profile\": \"https://github.com/Mokshit06\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"layershifter\",\n \"name\": \"Oleksandr Fediashov\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/14183168?v=4\",\n \"profile\": \"https://www.linkedin.com/in/layershifter/\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"paddyobrien\",\n \"name\": \"Paddy O'Brien\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/846372?v=4\",\n \"profile\": \"https://github.com/paddyobrien\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"SogoCZE\",\n \"name\": \"Patrik Smělý\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/8431593?v=4\",\n \"profile\": \"https://sogocze.cz/\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"Nedgeva\",\n \"name\": \"Pavel Udaloff\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/19298874?v=4\",\n \"profile\": \"https://github.com/Nedgeva\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"pbitkowski\",\n \"name\": \"Przemysław Bitkowski\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/22204594?v=4\",\n \"profile\": \"https://github.com/pbitkowski\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"ri7nz\",\n \"name\": \"RiN\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/16365952?v=4\",\n \"profile\": \"https://rin.rocks/\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"pustomytnyk\",\n \"name\": \"Roman Sokhan\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/9644824?v=4\",\n \"profile\": \"https://github.com/pustomytnyk\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"SeokminHong\",\n \"name\": \"Seokmin Hong (Ray)\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/11614766?v=4\",\n \"profile\": \"https://github.com/SeokminHong\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"lebedev\",\n \"name\": \"Serge K Lebedev\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/5000549?v=4\",\n \"profile\": \"https://github.com/lebedev\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"funsis\",\n \"name\": \"Sergey Korovin\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/28862758?v=4\",\n \"profile\": \"https://github.com/funsis\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"shreyas44\",\n \"name\": \"Shreyas Sreenivas\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/46835608?v=4\",\n \"profile\": \"https://github.com/shreyas44\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"skywickenden\",\n \"name\": \"Sky Wickenden\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/4930551?v=4\",\n \"profile\": \"https://github.com/skywickenden\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"s-panferov\",\n \"name\": \"Stanislav Panferov\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/198327?v=4\",\n \"profile\": \"https://www.linkedin.com/in/stanislavpanferov\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"jsbalrog\",\n \"name\": \"Ted Jenkins\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/2457489?v=4\",\n \"profile\": \"https://github.com/jsbalrog\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"trongthanh\",\n \"name\": \"Thanh Tran\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/234226?v=4\",\n \"profile\": \"https://int3ractive.com/\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"tamorim\",\n \"name\": \"Thor Amorim\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/5040487?v=4\",\n \"profile\": \"https://github.com/tamorim\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"tobenna\",\n \"name\": \"tobenna\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/12450941?v=4\",\n \"profile\": \"https://github.com/tobenna\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"wereHamster\",\n \"name\": \"Tomas Carnecky\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/34538?v=4\",\n \"profile\": \"https://caurea.org/\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"Tsubasa1218\",\n \"name\": \"Tsubasa1218\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/20498480?v=4\",\n \"profile\": \"https://github.com/Tsubasa1218\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"turadg\",\n \"name\": \"Turadg Aleahmad\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/21505?v=4\",\n \"profile\": \"http://turadg.aleahmad.net/\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"buzinas\",\n \"name\": \"Vitor Buzinaro\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/7298695?v=4\",\n \"profile\": \"https://github.com/buzinas\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"Mistereo\",\n \"name\": \"Mistereo\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/1505518?v=4\",\n \"profile\": \"https://github.com/Mistereo\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"5angel\",\n \"name\": \"Vladislav Kozulya\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/351676?v=4\",\n \"profile\": \"https://ru.linkedin.com/in/govnokoder\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"yuheiy\",\n \"name\": \"Yuhei Yasuda\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/11547305?v=4\",\n \"profile\": \"https://yuheiy.com/\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"dkamyshov\",\n \"name\": \"Danil Kamyshov\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/26835323?v=4\",\n \"profile\": \"https://github.com/dkamyshov\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"dword-design\",\n \"name\": \"Sebastian Landwehr\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/13484795?v=4\",\n \"profile\": \"https://sebastianlandwehr.com/\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"everdimension\",\n \"name\": \"everdimension\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/5347023?v=4\",\n \"profile\": \"https://github.com/everdimension\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"ptol\",\n \"name\": \"ptol\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/17497724?v=4\",\n \"profile\": \"https://github.com/ptol\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"roottool\",\n \"name\": \"roottool\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/11808736?v=4\",\n \"profile\": \"https://roottool.vercel.app/\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"ryamaguchi0220\",\n \"name\": \"ryamaguchi0220\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/14275842?v=4\",\n \"profile\": \"https://github.com/ryamaguchi0220\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"simka\",\n \"name\": \"simka\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/16965735?v=4\",\n \"profile\": \"https://www.simka.dev/\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"SoYoung210\",\n \"name\": \"soso\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/18658235?v=4\",\n \"profile\": \"https://so-so.dev/\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"ChALkeR\",\n \"name\": \"Nikita Skovoroda\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/291301?v=4\",\n \"profile\": \"https://twitter.com/skovorodan\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"huang-xiao-jian\",\n \"name\": \"黄小健\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/4002210?v=4\",\n \"profile\": \"https://github.com/huang-xiao-jian\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"iMoses\",\n \"name\": \"iMoses\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/1083065?v=4\",\n \"profile\": \"https://github.com/iMoses\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"jneander\",\n \"name\": \"Jeremy Neander\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/880186?v=4\",\n \"profile\": \"http://jneander.com\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"andparsons\",\n \"name\": \"Andy Parsons\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/1213447?v=4\",\n \"profile\": \"https://evensix.com\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"Platane\",\n \"name\": \"Platane\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/1659820?v=4\",\n \"profile\": \"http://platane.github.io\",\n \"contributions\": [\n \"doc\"\n ]\n },\n {\n \"login\": \"kutnickclose\",\n \"name\": \"Tim Kutnick\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/6117662?v=4\",\n \"profile\": \"https://github.com/kutnickclose\",\n \"contributions\": [\n \"doc\"\n ]\n },\n {\n \"login\": \"aspirisen\",\n \"name\": \"Dmitrii Pikulin\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/3620639?v=4\",\n \"profile\": \"https://github.com/aspirisen\",\n \"contributions\": [\n \"code\"\n ]\n }\n ],\n \"repoType\": \"github\",\n \"contributorsPerLine\": 7,\n \"commitConvention\": \"none\"\n}\n" }, { "path": ".changeset/README.md", "content": "# Changesets\n\nHello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works\nwith multi-package repos, or single-package repos to help you version and publish your code. You can\nfind the full documentation for it [in our repository](https://github.com/changesets/changesets)\n\nWe have a quick list of common questions to get you started engaging with this project in\n[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)\n" }, { "path": ".changeset/config.json", "content": "{\n \"$schema\": \"https://unpkg.com/@changesets/config@2.0.0/schema.json\",\n \"changelog\": \"@changesets/cli/changelog\",\n \"commit\": false,\n \"fixed\": [],\n \"linked\": [],\n \"access\": \"restricted\",\n \"baseBranch\": \"master\",\n \"updateInternalDependencies\": \"patch\",\n \"ignore\": []\n}\n" }, { "path": ".codecov.yml", "content": "coverage:\n precision: 2\n round: down\n range: 70...100\n\n status:\n project: true\n patch: true\n changes: false\n\ncomment: false\n" }, { "path": ".editorconfig", "content": "# EditorConfig helps developers define and maintain consistent\n# coding styles between different editors and IDEs\n# editorconfig.org\n\nroot = true\n\n\n[*]\n\n# change these settings to your own preference\nindent_style = space\nindent_size = 2\n\n# we recommend you to keep these unchanged\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ninsert_final_newline = true\n\n[*.md]\ntrim_trailing_whitespace = false\n" }, { "path": ".eslintignore", "content": "__fixtures__/\ncoverage/\nlib/\nesm/\npackages/*/bin/\npackages/*/types/\ndist/\nbuild/\nnode_modules/\nvendor/\nexamples/\n" }, { "path": ".eslintrc.js", "content": "const noRestrictedSyntax =\n // eslint-disable-next-line import/no-extraneous-dependencies\n require('eslint-config-airbnb-base/rules/style').rules[\n 'no-restricted-syntax'\n ].filter(\n (rule) => typeof rule === 'string' || rule.selector !== 'ForOfStatement'\n );\n\n// Workaround for https://github.com/import-js/eslint-plugin-import/issues/1810\nconst noUnresolved = ['error', { ignore: ['@linaria/*'] }];\n\nconst memberOrder = [\n 'warn',\n {\n default: {\n memberTypes: [\n // Index signature\n 'signature',\n 'call-signature',\n\n // Fields\n 'public-static-field',\n 'protected-static-field',\n 'private-static-field',\n '#private-static-field',\n\n 'public-decorated-field',\n 'protected-decorated-field',\n 'private-decorated-field',\n\n 'public-instance-field',\n 'protected-instance-field',\n 'private-instance-field',\n '#private-instance-field',\n\n 'public-abstract-field',\n 'protected-abstract-field',\n\n 'public-field',\n 'protected-field',\n 'private-field',\n '#private-field',\n\n 'static-field',\n 'instance-field',\n 'abstract-field',\n\n 'decorated-field',\n\n 'field',\n\n // Static initialization\n 'static-initialization',\n\n // Constructors\n 'public-constructor',\n 'protected-constructor',\n 'private-constructor',\n\n 'constructor',\n\n // Getters & Setters\n ['public-static-get', 'public-static-set'],\n ['protected-static-get', 'protected-static-set'],\n ['private-static-get', 'private-static-set'],\n ['#private-static-get', '#private-static-set'],\n\n ['public-decorated-get', 'public-decorated-set'],\n ['protected-decorated-get', 'protected-decorated-set'],\n ['private-decorated-get', 'private-decorated-set'],\n\n ['public-instance-get', 'public-instance-set'],\n ['protected-instance-get', 'protected-instance-set'],\n ['private-instance-get', 'private-instance-set'],\n ['#private-instance-get', '#private-instance-set'],\n\n ['public-abstract-get', 'public-abstract-set'],\n ['protected-abstract-get', 'protected-abstract-set'],\n\n ['public-get', 'public-set'],\n ['protected-get', 'protected-set'],\n ['private-get', 'private-set'],\n ['#private-get', '#private-set'],\n\n ['static-get', 'static-set'],\n ['instance-get', 'instance-set'],\n ['abstract-get', 'abstract-set'],\n\n ['decorated-get', 'decorated-set'],\n\n ['get', 'set'],\n\n // Methods\n 'public-static-method',\n 'protected-static-method',\n 'private-static-method',\n '#private-static-method',\n\n 'public-decorated-method',\n 'protected-decorated-method',\n 'private-decorated-method',\n\n 'public-instance-method',\n 'protected-instance-method',\n 'private-instance-method',\n '#private-instance-method',\n\n 'public-abstract-method',\n 'protected-abstract-method',\n\n 'public-method',\n 'protected-method',\n 'private-method',\n '#private-method',\n\n 'static-method',\n 'instance-method',\n 'abstract-method',\n\n 'decorated-method',\n\n 'method',\n ],\n order: 'alphabetically',\n },\n },\n];\n\nconst importOrder = [\n 'warn',\n {\n 'newlines-between': 'always',\n alphabetize: {\n order: 'asc',\n },\n groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],\n pathGroups: [\n {\n pattern: '@linaria/**',\n group: 'internal',\n position: 'before',\n },\n ],\n pathGroupsExcludedImportTypes: [],\n },\n];\n\nmodule.exports = {\n plugins: ['prettier', 'import'],\n rules: {\n 'import/no-extraneous-dependencies': [\n 'error',\n {\n devDependencies: [\n '**/*.test.{js,ts,jsx,tsx}',\n 'src/{babel,server}/**/*.{js,ts,jsx,tsx}',\n ],\n },\n ],\n 'import/no-unresolved': noUnresolved,\n 'max-len': [\n 'error',\n 150,\n 2,\n {\n ignoreComments: true,\n ignoreStrings: true,\n ignoreTemplateLiterals: true,\n ignoreUrls: true,\n },\n ],\n 'prettier/prettier': 'error',\n },\n globals: {\n JSX: 'readonly',\n },\n settings: {\n 'import/resolver': {\n node: {\n extensions: ['.js', '.jsx', '.ts', '.tsx'],\n },\n },\n },\n overrides: [\n {\n files: ['*.ts', '*.tsx'],\n extends: [\n 'airbnb-base',\n 'airbnb-typescript/base',\n 'plugin:@typescript-eslint/recommended',\n 'prettier',\n 'plugin:prettier/recommended',\n 'plugin:import/recommended',\n 'plugin:import/typescript',\n ],\n parserOptions: {\n project: './tsconfig.eslint.json',\n },\n rules: {\n 'import/extensions': 0,\n 'import/no-unresolved': noUnresolved,\n 'import/order': importOrder,\n 'import/prefer-default-export': 0,\n 'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],\n '@typescript-eslint/consistent-type-imports': [\n 'error',\n { prefer: 'type-imports' },\n ],\n '@typescript-eslint/member-ordering': memberOrder,\n\n // TODO\n '@typescript-eslint/ban-ts-comment': 0,\n '@typescript-eslint/comma-dangle': 0,\n '@typescript-eslint/no-non-null-assertion': 0,\n '@typescript-eslint/no-var-requires': 0,\n 'global-require': 0,\n 'import/no-dynamic-require': 0,\n 'no-underscore-dangle': 0,\n 'no-restricted-syntax': noRestrictedSyntax,\n },\n },\n {\n files: ['**/processors/**/*.ts'],\n rules: {},\n },\n {\n files: ['*.js', '*.jsx'],\n extends: [\n 'airbnb-base',\n 'plugin:prettier/recommended',\n 'plugin:import/recommended',\n ],\n parser: '@babel/eslint-parser',\n parserOptions: {\n requireConfigFile: false,\n },\n rules: {\n 'import/no-unresolved': noUnresolved,\n },\n },\n {\n files: [\n 'packages/testkit/**/*.test.ts',\n '**/__tests__/**/*.test.ts',\n '**/__tests__/**/*.test.tsx',\n '**/__utils__/**/*.ts',\n ],\n rules: {\n '@typescript-eslint/naming-convention': [\n 'error',\n {\n selector: 'variable',\n format: ['camelCase', 'PascalCase', 'UPPER_CASE'],\n },\n {\n selector: 'function',\n leadingUnderscore: 'allow',\n format: ['camelCase', 'PascalCase'],\n },\n {\n selector: 'typeLike',\n format: ['PascalCase'],\n },\n ],\n '@typescript-eslint/no-explicit-any': 0,\n '@typescript-eslint/no-non-null-assertion': 0,\n '@typescript-eslint/no-var-requires': 0,\n 'global-require': 0,\n 'no-template-curly-in-string': 0,\n },\n },\n {\n files: ['**/__dtslint__/**/*.ts'],\n rules: {\n '@typescript-eslint/ban-types': 0,\n '@typescript-eslint/no-explicit-any': 0,\n '@typescript-eslint/no-non-null-assertion': 0,\n '@typescript-eslint/no-unused-expressions': 0,\n },\n },\n {\n files: ['website/**/*.jsx'],\n extends: [\n 'airbnb',\n 'plugin:prettier/recommended',\n 'plugin:import/recommended',\n ],\n parser: '@babel/eslint-parser',\n settings: {\n react: {\n version: 'detect',\n },\n },\n parserOptions: {\n requireConfigFile: false,\n babelOptions: {\n presets: ['@babel/preset-react'],\n },\n },\n rules: {\n 'import/no-unresolved': noUnresolved,\n 'global-require': 0,\n },\n },\n ],\n};\n" }, { "path": ".git-blame-ignore-revs", "content": "" }, { "path": ".github/ISSUE_TEMPLATE/bug_report.md", "content": "---\nname: '🐛 Report a bug'\nabout: 'Report a reproducible bug or reproducible regression.'\nlabels: 'bug report 🦗, needs: triage 🏷, needs: complete repro 🖥️'\n\n---\n\n## Environment\n\n\n\n\n\n- Linaria version:\n- Bundler (+ version):\n- Node.js version:\n- OS:\n\n## Description\n\n\n\n## Reproducible Demo\n\n\n" }, { "path": ".github/ISSUE_TEMPLATE/config.yml", "content": "blank_issues_enabled: false\ncontact_links:\n - name: 🤔 Questions and Help\n url: https://discord.gg/fAbHe67\n about: Reach the community on discord if you need help or have a question.\n" }, { "path": ".github/ISSUE_TEMPLATE/enhancement_request.md", "content": "---\nname: '💬 Enhancement proposal'\nabout: Suggest an possible improvement of existing features.\nlabels: 'enhancement: proposal 💬'\n---\n\n## Describe the enhancement\n\n\n\n## Motivation\n\n\n\n## Possible implementations\n\n\n\n## Related Issues\n\n\n" }, { "path": ".github/ISSUE_TEMPLATE/feature_request.md", "content": "---\nname: '💬 Feature proposal'\nabout: Suggest introduction of a new feature.\nlabels: 'feature: proposal 💬'\n---\n\n## Describe the feature\n\n\n\n## Motivation\n\n\n\n## Possible implementations\n\n\n\n## Related Issues\n\n\n" }, { "path": ".github/PULL_REQUEST_TEMPLATE.md", "content": "\n\n## Motivation\n\n\n\n## Summary\n\n\n\n## Test plan\n\n\n" }, { "path": ".github/labels.json", "content": "{\n \"labels\": {\n \"babel-plugin\": {\n \"name\": \"babel-plugin\",\n \"description\": \"\",\n \"colour\": \"006b75\"\n },\n \"bug-report\": {\n \"name\": \"bug report 🦗\",\n \"description\": \"Issue is probably a bug, but it needs to be checked\",\n \"colour\": \"f8c4c4\"\n },\n \"bug\": {\n \"name\": \"bug 🐛\",\n \"description\": \"Issue is a confirmed bug\",\n \"colour\": \"ee0701\"\n },\n \"bundler-parcel\": {\n \"name\": \"bundler: parcel 🎁\",\n \"description\": \"Issue is related to parcel bundler\",\n \"colour\": \"e5e5e5\"\n },\n \"bundler-rollup\": {\n \"name\": \"bundler: rollup 🗞️\",\n \"description\": \"Issue is related to rollup bundler\",\n \"colour\": \"e5e5e5\"\n },\n \"bundler-webpack\": {\n \"name\": \"bundler: webpack 📦\",\n \"description\": \"Issue is related to webpack bundler\",\n \"colour\": \"e5e5e5\"\n },\n \"cat-documentation\": {\n \"name\": \"cat: documentation 📖\",\n \"description\": \"Work focused on writing documentation\",\n \"colour\": \"f9acca\"\n },\n \"cat-extend-support\": {\n \"name\": \"cat: extend support 🤝\",\n \"description\": \"Support for a new bundler/platform\",\n \"colour\": \"f9acca\"\n },\n \"cat-extend-syntax\": {\n \"name\": \"cat: extend syntax ✍\",\n \"description\": \"Support for a new syntax\",\n \"colour\": \"f9acca\"\n },\n \"cat-improve-publishing\": {\n \"name\": \"cat: improve publishing 🚢\",\n \"description\": \"Issues about improvement of publishing libs with Linaria\",\n \"colour\": \"f9acca\"\n },\n \"cat-modules-aliasing\": {\n \"name\": \"cat: modules aliasing 🔗\",\n \"description\": \"Issue related to modules aliasing\",\n \"colour\": \"f9acca\"\n },\n \"cat-monorepo\": {\n \"name\": \"cat: monorepo 🔱\",\n \"description\": \"Issues related to usage of linaria in monorepo\",\n \"colour\": \"f9acca\"\n },\n \"cat-performance\": {\n \"name\": \"cat: performance 🚀\",\n \"description\": \"Issue is related to performance\",\n \"colour\": \"f9acca\"\n },\n \"cat-testing\": {\n \"name\": \"cat: testing 🛡\",\n \"description\": \"Issue related to testing components\",\n \"colour\": \"f9acca\"\n },\n \"cat-typings\": {\n \"name\": \"cat: typings 👮\",\n \"description\": \"Typescript types related issues\",\n \"colour\": \"f9acca\"\n },\n \"core-team\": {\n \"name\": \"core team 🧬\",\n \"description\": \"Issues reserved for the core team\",\n \"colour\": \"fef2c0\"\n },\n \"duplicate\": {\n \"name\": \"duplicate\",\n \"description\": \"Issue is a duplicate of another issue\",\n \"colour\": \"cccccc\"\n },\n \"enhancement-approved\": {\n \"name\": \"enhancement: approved ✅\",\n \"description\": \"Improvement of the current behaviour that has been approved\",\n \"colour\": \"1d76db\"\n },\n \"enhancement-proposal\": {\n \"name\": \"enhancement: proposal 💬\",\n \"description\": \"Improvement of current behaviour that needs to be discussed\",\n \"colour\": \"1d76db\"\n },\n \"enhancement-rejected\": {\n \"name\": \"enhancement: rejected ❌\",\n \"description\": \"Improvement of the current behaviour that has been rejected\",\n \"colour\": \"1d76db\"\n },\n \"feature-approved\": {\n \"name\": \"feature: approved ✅\",\n \"description\": \"New feature that has been approved\",\n \"colour\": \"1d3082\"\n },\n \"feature-proposal\": {\n \"name\": \"feature: proposal 💬\",\n \"description\": \"New feature proposal that needs to be discussed\",\n \"colour\": \"1d3082\"\n },\n \"feature-rejected\": {\n \"name\": \"feature: rejected ❌\",\n \"description\": \"New feature that has been rejected\",\n \"colour\": \"1d3082\"\n },\n \"good-first-issue\": {\n \"name\": \"good first issue 😊\",\n \"description\": \"It is a good issue for new comers\",\n \"colour\": \"5319e7\"\n },\n \"greenkeeper\": {\n \"name\": \"greenkeeper\",\n \"description\": \"\",\n \"colour\": \"00c775\"\n },\n \"hacktoberfest\": {\n \"name\": \"hacktoberfest 🍺\",\n \"description\": \"https://hacktoberfest.digitalocean.com/\",\n \"colour\": \"FF8C00\"\n },\n \"needs-complete-repro\": {\n \"name\": \"needs: complete repro 🖥️\",\n \"description\": \"Issue need to have complete repro provided\",\n \"colour\": \"b2ffbb\"\n },\n \"needs-help\": {\n \"name\": \"needs: help 🆘\",\n \"description\": \"Help is needed\",\n \"colour\": \"b2ffbb\"\n },\n \"needs-investigation\": {\n \"name\": \"needs: investigation 🔎\",\n \"description\": \"Issue has to be investigated for reason or solution\",\n \"colour\": \"b2ffbb\"\n },\n \"needs-more-info\": {\n \"name\": \"needs: more info ℹ\",\n \"description\": \"Not enough information was provided to work on issue\",\n \"colour\": \"b2ffbb\"\n },\n \"needs-response\": {\n \"name\": \"needs: response 📩\",\n \"description\": \"Response from author/commenters is requested\",\n \"colour\": \"b2ffbb\"\n },\n \"needs-to-be-grouped\": {\n \"name\": \"needs: to be grouped\",\n \"description\": \"Issue needs to be grouped with other similar issues\",\n \"colour\": \"b2ffbb\"\n },\n \"needs-triage\": {\n \"name\": \"needs: triage 🏷\",\n \"description\": \"Issue needs to be checked and prioritized\",\n \"colour\": \"b2ffbb\"\n },\n \"platform-electron\": {\n \"name\": \"platform: electron 🛠️\",\n \"description\": \"Issue related to electron platform\",\n \"colour\": \"00e5e5\"\n },\n \"platform-next.js\": {\n \"name\": \"platform: next.js 🛠️\",\n \"description\": \"Issue related to next.js\",\n \"colour\": \"00e5e5\"\n },\n \"platform-react\": {\n \"name\": \"platform: react 🛠️\",\n \"description\": \"Issue related to react\",\n \"colour\": \"00e5e5\"\n },\n \"platform-ssr\": {\n \"name\": \"platform: ssr 🛠️\",\n \"description\": \"Issue related to SSR\",\n \"colour\": \"00e5e5\"\n },\n \"platform-vanilla\": {\n \"name\": \"platform: vanilla 🛠️\",\n \"description\": \"Issue related to vanilla css tags\",\n \"colour\": \"00e5e5\"\n },\n \"platform-svelte\": {\n \"name\": \"platform: svelte 🛠️\",\n \"description\": \"Issue related to svelte\",\n \"colour\": \"00e5e5\"\n },\n \"priority-critical\": {\n \"name\": \"priority: critical ☢️\",\n \"description\": \"Issue is a critical bug that affects most of the users\",\n \"colour\": \"000000\"\n },\n \"priority-high\": {\n \"name\": \"priority: high ⚠️\",\n \"description\": \"Issue is important and should be prioritized among others\",\n \"colour\": \"e093f7\"\n },\n \"priority-low\": {\n \"name\": \"priority: low 📉\",\n \"description\": \"Something nice to have\",\n \"colour\": \"ebebeb\"\n },\n \"priority-medium\": {\n \"name\": \"priority: medium 💻\",\n \"description\": \"Issue is important but not the most important\",\n \"colour\": \"ffb732\"\n },\n \"question\": {\n \"name\": \"question ❔\",\n \"description\": \"Question related to the library\",\n \"colour\": \"f9acca\"\n },\n \"status-has-PR\": {\n \"name\": \"status: has PR 😍\",\n \"description\": \"Issue has opened PR\",\n \"colour\": \"feffa5\"\n },\n \"status-in-progress\": {\n \"name\": \"status: in progress 🚧\",\n \"description\": \"Someone is working on the issue\",\n \"colour\": \"feffa5\"\n },\n \"status-merged\": {\n \"name\": \"status: merged 🎉\",\n \"description\": \"Solution was merged\",\n \"colour\": \"feffa5\"\n },\n \"status-up-for-grabs\": {\n \"name\": \"status: up for grabs 🙏\",\n \"description\": \"research is done and issue is ready to be grabbed\",\n \"colour\": \"feffa5\"\n },\n \"status-wontfix\": {\n \"name\": \"status: wontfix ⚰\",\n \"description\": \"Issue will not be fixed\",\n \"colour\": \"feffa5\"\n },\n \"workaround-exist\": {\n \"name\": \"workaround exist\",\n \"description\": \"Workaround for the issue exist\",\n \"colour\": \"70f488\"\n },\n \"skip-labeling\": {\n \"name\": \"skip autolabeling\",\n \"description\": \"Use it to disable auto laberer bot for an issue/pr\",\n \"colour\": \"D9BBF9\"\n }\n },\n \"issue\": {\n \"bundler-rollup\": {\n \"requires\": 1,\n \"conditions\": [\n {\n \"type\": \"titleMatches\",\n \"pattern\": \"/rollup/i\"\n },\n {\n \"type\": \"descriptionMatches\",\n \"pattern\": \"/rollup/i\"\n }\n ]\n },\n \"bundler-webpack\": {\n \"requires\": 1,\n \"conditions\": [\n {\n \"type\": \"titleMatches\",\n \"pattern\": \"/webpack/i\"\n },\n {\n \"type\": \"descriptionMatches\",\n \"pattern\": \"/webpack/i\"\n }\n ]\n },\n \"bundler-parcel\": {\n \"requires\": 1,\n \"conditions\": [\n {\n \"type\": \"titleMatches\",\n \"pattern\": \"/parcel/i\"\n },\n {\n \"type\": \"descriptionMatches\",\n \"pattern\": \"/parcel/i\"\n }\n ]\n },\n \"platform-svelte\": {\n \"requires\": 1,\n \"conditions\": [\n {\n \"type\": \"titleMatches\",\n \"pattern\": \"/svelte/i\"\n },\n {\n \"type\": \"descriptionMatches\",\n \"pattern\": \"/svelte/i\"\n }\n ]\n },\n \"platform-next.js\": {\n \"requires\": 1,\n \"conditions\": [\n {\n \"type\": \"titleMatches\",\n \"pattern\": \"/next(\\\\.){0,1}js/i\"\n },\n {\n \"type\": \"descriptionMatches\",\n \"pattern\": \"/next(\\\\.){0,1}js/i\"\n }\n ]\n },\n \"platform-ssr\": {\n \"requires\": 1,\n \"conditions\": [\n {\n \"type\": \"titleMatches\",\n \"pattern\": \"/(ssr)|(server)/i\"\n },\n {\n \"type\": \"descriptionMatches\",\n \"pattern\": \"/(ssr)|(server)/i\"\n }\n ]\n },\n \"platform-electron\": {\n \"requires\": 1,\n \"conditions\": [\n {\n \"type\": \"titleMatches\",\n \"pattern\": \"/electron/i\"\n },\n {\n \"type\": \"descriptionMatches\",\n \"pattern\": \"/electron/i\"\n }\n ]\n },\n \"cat-performance\": {\n \"requires\": 1,\n \"conditions\": [\n {\n \"type\": \"titleMatches\",\n \"pattern\": \"/(slow)|(build[\\\\s\\\\S]*time)|(time[\\\\s\\\\S]*build)(performance)/i\"\n },\n {\n \"type\": \"descriptionMatches\",\n \"pattern\": \"/(slow)|(build[\\\\s\\\\S]*time)|(time[\\\\s\\\\S]*build)(performance)/i\"\n }\n ]\n },\n \"cat-testing\": {\n \"requires\": 1,\n \"conditions\": [\n {\n \"type\": \"titleMatches\",\n \"pattern\": \"/(test)|(jest)/i\"\n }\n ]\n },\n \"cat-monorepo\": {\n \"requires\": 1,\n \"conditions\": [\n {\n \"type\": \"titleMatches\",\n \"pattern\": \"/(monorepo)|(workspace)|(lerna)/i\"\n },\n {\n \"type\": \"descriptionMatches\",\n \"pattern\": \"/(monorepo)|(workspace)|(lerna)/i\"\n }\n ]\n },\n \"cat-modules-aliasing\": {\n \"requires\": 1,\n \"conditions\": [\n {\n \"type\": \"titleMatches\",\n \"pattern\": \"/(alias)|(namemapper)/i\"\n },\n {\n \"type\": \"descriptionMatches\",\n \"pattern\": \"/(alias)|(namemapper)/i\"\n }\n ]\n },\n \"cat-typings\": {\n \"requires\": 1,\n \"conditions\": [\n {\n \"type\": \"titleMatches\",\n \"pattern\": \"/typescript/i\"\n },\n {\n \"type\": \"titleMatches\",\n \"pattern\": \"/TS/\"\n }\n ]\n }\n },\n \"issue_fallback\": {\n \"fallbackActivationValue\": 2,\n \"labels\": [\n \"needs-triage\"\n ]\n },\n \"pr\": {},\n \"skip_labeling\": \"skip-labeling\"\n}" }, { "path": ".github/workflows/check.yml", "content": "name: Node.js CI\n\non:\n push:\n branches: [ master ]\n pull_request:\n branches: [ master ]\n\njobs:\n build:\n\n runs-on: ${{ matrix.os }}\n\n env:\n TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}\n TURBO_TEAM: ${{ secrets.TURBO_TEAM }}\n\n strategy:\n fail-fast: false\n matrix:\n os: [ubuntu-latest]\n node-version: [20.x, 22.x]\n include:\n - os: windows-latest\n node-version: 20.x\n\n steps:\n - uses: actions/checkout@v4\n\n - uses: pnpm/action-setup@v3\n with:\n version: 9\n run_install: false\n\n - name: Get pnpm store directory\n id: pnpm-cache\n shell: bash\n run: |\n echo \"STORE_PATH=$(pnpm store path)\" >> $GITHUB_OUTPUT\n\n - name: Setup pnpm cache\n uses: actions/cache@v4\n with:\n path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}\n key: ${{ runner.os }}-pnpm-store-${{ hashFiles('./pnpm-lock.yaml') }}\n restore-keys: |\n ${{ runner.os }}-pnpm-store-\n\n - name: Use Node.js ${{ matrix.node-version }}\n uses: actions/setup-node@v4\n with:\n node-version: ${{ matrix.node-version }}\n\n - name: Install and prepare\n run: pnpm install --frozen-lockfile --strict-peer-dependencies\n - name: ESLint\n if: matrix.os == 'ubuntu-latest' && matrix.node-version == '20.x'\n run: pnpm lint\n - name: TSLint\n if: matrix.os == 'ubuntu-latest' && matrix.node-version == '20.x'\n run: pnpm turbo run test:dts\n - name: Tests\n run: pnpm turbo run test\n" }, { "path": ".github/workflows/main.yml", "content": "name: labeler\non:\n issues:\n types: [opened, edited, reopened]\n pull_request:\n types: [opened, edited, reopened, ready_for_review, synchronize]\n\njobs:\n labeler:\n runs-on: ubuntu-latest\n name: label issues and pull requests\n steps:\n - name: check-out-repository\n uses: actions/checkout@v4\n\n - name: labeler\n uses: jayu/super-labeler-action@develop\n env:\n ACTIONS_STEP_DEBUG: ${{ secrets.ACTIONS_STEP_DEBUG }}\n with:\n github-token: ${{ secrets.GITHUB_TOKEN }}\n" }, { "path": ".github/workflows/release.yml", "content": "name: Release\n\non:\n push:\n branches:\n - master\n\nconcurrency: ${{ github.workflow }}-${{ github.ref }}\n\npermissions:\n contents: write\n pull-requests: write\n id-token: write\n\njobs:\n release:\n name: Release\n runs-on: ubuntu-latest\n\n env:\n TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}\n TURBO_TEAM: ${{ secrets.TURBO_TEAM }}\n\n steps:\n - name: Checkout Repo\n uses: actions/checkout@v4\n\n - uses: pnpm/action-setup@v3\n with:\n version: 9\n run_install: false\n\n - name: Get pnpm store directory\n id: pnpm-cache\n shell: bash\n run: |\n echo \"STORE_PATH=$(pnpm store path)\" >> $GITHUB_OUTPUT\n\n - name: Setup pnpm cache\n uses: actions/cache@v4\n with:\n path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}\n key: ${{ runner.os }}-pnpm-store-${{ hashFiles('./pnpm-lock.yaml') }}\n restore-keys: |\n ${{ runner.os }}-pnpm-store-\n\n - name: Setup Node.js 20.x\n uses: actions/setup-node@v4\n with:\n node-version: 20.x\n registry-url: 'https://registry.npmjs.org'\n\n - name: Upgrade npm for trusted publishing (OIDC)\n run: npm i -g npm@11.5.1\n\n - name: Install and prepare\n run: pnpm install --frozen-lockfile --strict-peer-dependencies\n\n - name: Create Release Pull Request or Publish to npm\n id: changesets\n uses: changesets/action@v1\n with:\n publish: pnpm run release\n env:\n GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n" }, { "path": ".github/workflows/site-deploy.yml", "content": "name: Build and Deploy\non:\n push:\n branches:\n - master\njobs:\n build-and-deploy:\n runs-on: ubuntu-latest\n\n env:\n TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}\n TURBO_TEAM: ${{ secrets.TURBO_TEAM }}\n\n steps:\n - uses: actions/checkout@v4\n\n - uses: pnpm/action-setup@v3\n with:\n version: 9\n run_install: false\n\n - name: Get pnpm store directory\n id: pnpm-cache\n shell: bash\n run: |\n echo \"STORE_PATH=$(pnpm store path)\" >> $GITHUB_OUTPUT\n\n - name: Setup pnpm cache\n uses: actions/cache@v4\n with:\n path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}\n key: ${{ runner.os }}-pnpm-store-${{ hashFiles('./pnpm-lock.yaml') }}\n restore-keys: |\n ${{ runner.os }}-pnpm-store-\n\n - name: Use Node.js 20.x\n uses: actions/setup-node@v4\n with:\n node-version: 20.x\n\n - name: Install and prepare\n run: pnpm install --frozen-lockfile --strict-peer-dependencies\n\n - name: Deploy 🚀\n uses: JamesIves/github-pages-deploy-action@3.7.1\n with:\n GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n BRANCH: gh-pages\n FOLDER: website\n CLEAN: true\n" }, { "path": ".gitignore", "content": "### OS Junk ###\n.DS_Store\n*~\n.history\n\n### Node ###\n# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Runtime data\npids\n*.pid\n*.seed\n*.pid.lock\n\n# Directory for instrumented libs generated by jscoverage/JSCover\nlib-cov\n\n# Coverage directory used by tools like istanbul\ncoverage\n\n# nyc test coverage\n.nyc_output\n\n# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)\n.grunt\n\n# Bower dependency directory (https://bower.io/)\nbower_components\n\n# node-waf configuration\n.lock-wscript\n\n# Compiled binary addons (http://nodejs.org/api/addons.html)\nbuild/Release\n\n# Dependency directories\nnode_modules/\njspm_packages/\n\n# Optional npm cache directory\n.npm\n\n# Turborepo cache directory\n.turbo\n\n# Optional eslint cache\n.eslintcache\n\n# Optional REPL history\n.node_repl_history\n\n# Output of 'npm pack'\n*.tgz\n\n# Yarn Integrity file\n.yarn-integrity\n\n# dotenv environment variables file\n.env\n\n# generated files\nlib/\nesm/\ntypes/\ndist/\nbuild/\ntsconfig.tsbuildinfo\n\n.linaria-cache\n.wyw-cache\n\n# debug\n*.debug.ts\n**/linaria-debug\n**/wyw-debug\n" }, { "path": ".npmrc", "content": "lockfile = true\n" }, { "path": ".prettierrc", "content": "{\n \"endOfLine\": \"auto\",\n \"trailingComma\": \"es5\",\n \"singleQuote\": true\n}\n" }, { "path": ".syncpackrc.js", "content": "module.exports = {\n dependencyTypes: ['dev', 'overrides', 'pnpmOverrides', 'prod', 'resolutions'],\n filter: '.',\n indent: ' ',\n semverGroups: [],\n semverRange: '',\n sortAz: [\n 'contributors',\n 'dependencies',\n 'devDependencies',\n 'keywords',\n 'peerDependencies',\n 'resolutions',\n 'scripts',\n ],\n // https://github.com/keithamus/sort-package-json/blob/master/defaultRules.md\n sortFirst: [\n '$schema',\n 'name',\n 'displayName',\n 'version',\n 'private',\n 'description',\n 'categories',\n 'keywords',\n 'homepage',\n 'bugs',\n 'repository',\n 'funding',\n 'license',\n 'qna',\n 'author',\n 'maintainers',\n 'contributors',\n 'publisher',\n 'sideEffects',\n 'type',\n 'imports',\n 'exports',\n 'main',\n 'svelte',\n 'umd:main',\n 'jsdelivr',\n 'unpkg',\n 'module',\n 'source',\n 'jsnext:main',\n 'browser',\n 'react-native',\n 'types',\n 'typesVersions',\n 'typings',\n 'style',\n 'example',\n 'examplestyle',\n 'assets',\n 'bin',\n 'man',\n 'directories',\n 'files',\n 'workspaces',\n 'binary',\n\n 'wyw-in-js',\n\n 'scripts',\n 'betterScripts',\n 'contributes',\n 'activationEvents',\n 'husky',\n 'simple-git-hooks',\n 'pre-commit',\n 'commitlint',\n 'lint-staged',\n 'config',\n 'nodemonConfig',\n 'browserify',\n 'babel',\n 'browserslist',\n 'xo',\n 'prettier',\n 'eslintConfig',\n 'eslintIgnore',\n 'npmpackagejsonlint',\n 'release',\n 'remarkConfig',\n 'stylelint',\n 'ava',\n 'jest',\n 'mocha',\n 'nyc',\n 'tap',\n 'resolutions',\n 'dependencies',\n 'devDependencies',\n 'dependenciesMeta',\n 'peerDependencies',\n 'peerDependenciesMeta',\n 'optionalDependencies',\n 'bundledDependencies',\n 'bundleDependencies',\n 'extensionPack',\n 'extensionDependencies',\n 'flat',\n 'packageManager',\n 'engines',\n 'engineStrict',\n 'volta',\n 'languageName',\n 'os',\n 'cpu',\n 'preferGlobal',\n 'publishConfig',\n 'icon',\n 'badges',\n 'galleryBanner',\n 'preview',\n 'markdown',\n\n 'tsup',\n ],\n source: [],\n versionGroups: [\n {\n dependencies: [\n '@types/enhanced-resolve',\n 'css-loader',\n 'enhanced-resolve',\n 'mini-css-extract-plugin',\n 'webpack',\n ],\n packages: ['@linaria/webpack4-loader', 'webpack4-example'],\n },\n ],\n workspace: true,\n};\n" }, { "path": ".vscode/settings.json", "content": "{\n \"typescript.tsdk\": \"website/node_modules/typescript/lib\"\n}\n" }, { "path": "CODE_OF_CONDUCT.md", "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as\ncontributors and maintainers pledge to making participation in our project and\nour community a harassment-free experience for everyone, regardless of age, body\nsize, disability, ethnicity, gender identity and expression, level of experience,\nnationality, personal appearance, race, religion, or sexual identity and\norientation.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment\ninclude:\n\n* Using welcoming and inclusive language\n* Being respectful of differing viewpoints and experiences\n* Gracefully accepting constructive criticism\n* Focusing on what is best for the community\n* Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n* The use of sexualized language or imagery and unwelcome sexual attention or\n advances\n* Trolling, insulting/derogatory comments, and personal or political attacks\n* Public or private harassment\n* Publishing others' private information, such as a physical or electronic\n address, without explicit permission\n* Other conduct which could reasonably be considered inappropriate in a\n professional setting\n\n## Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable\nbehavior and are expected to take appropriate and fair corrective action in\nresponse to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or\nreject comments, commits, code, wiki edits, issues, and other contributions\nthat are not aligned to this Code of Conduct, or to ban temporarily or\npermanently any contributor for other behaviors that they deem inappropriate,\nthreatening, offensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies both within project spaces and in public spaces\nwhen an individual is representing the project or its community. Examples of\nrepresenting a project or community include using an official project e-mail\naddress, posting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event. Representation of a project may be\nfurther defined and clarified by project maintainers.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported by contacting the project team at [oss@callstack.io](mailto:oss@callstack.io). All\ncomplaints will be reviewed and investigated and will result in a response that\nis deemed necessary and appropriate to the circumstances. The project team is\nobligated to maintain confidentiality with regard to the reporter of an incident.\nFurther details of specific enforcement policies may be posted separately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good\nfaith may face temporary or permanent repercussions as determined by other\nmembers of the project's leadership.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,\navailable at https://www.contributor-covenant.org/version/1/4/code-of-conduct/\n\n[homepage]: https://www.contributor-covenant.org\n" }, { "path": "CONTRIBUTING.md", "content": "# Contributing to Linaria\n\n## [Code of Conduct](/CODE_OF_CONDUCT.md)\n\nWe want this community to be friendly and respectful to each other. Please read [the full text](/CODE_OF_CONDUCT.md) so that you can understand what actions will and will not be tolerated.\n\n## Our Development Process\n\nThe core team works directly on GitHub and all work is public.\n\n### Development workflow\n\n> **Working on your first pull request?** You can learn how from this *free* series: [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github).\n\n1. Fork the repo and create your branch from `master` (a guide on [how to fork a repository](https://help.github.com/articles/fork-a-repo/)).\n\n1. Linaria uses [Pnpm](https://pnpm.io) for running development scripts. If you haven't already done so, please [install Pnpm](https://pnpm.io/installation).\n\n1. Run `pnpm bootstrap` to setup the development environment.\n\n1. When working on the code, you can use the watch mode to watch and compiles changed files:\n\n ```sh\n pnpm watch\n ```\n\n1. If you've added code that should be tested, add tests.\n\n1. You can test the changes you are making in our website located under the `website/` folder in the repo.\n\n1. If you've changed APIs, remember to update the documentation under `docs/`.\n\n### Working on the website\n\nIf you are making changes to the website, test the website folder and run the server to check if your changes are being displayed accurately. To run the development server with live reloading, run:\n\n```sh\npnpm website start\n```\n\n### Commit message convention\n\nWe follow the [conventional commits specification](https://www.conventionalcommits.org/en) for our commit messages:\n\n* `fix`: bug fixes, e.g. fix wrong classname generated by babel plugin.\n* `feat`: new features, e.g. add support for a config file.\n* `refactor`: code refactor, e.g. split the babel plugin into multiple visitors.\n* `docs`: changes into documentation, e.g. add usage example for styled tag.\n* `test`: adding or updating tests, eg unit, snapshot testing.\n* `chore`: tooling changes, e.g. change the eslint config.\n* `BREAKING CHANGE`: for changes that break existing usage, e.g. change the API or behaviour.\n\nOur pre-commit hooks verify that your commit message matches this format when committing. If you are working on some in progress commits and don't care about the pre-commit hook, pass the `--no-verify` (`-n`) flag to git when committing (e.g. `git commit -n -m \"wip\"`).\n\n### Linting and tests\n\nWe use `eslint` with `prettier` for linting and formatting the code, and `jest` for testing. Our pre-commit hooks verify that the linter and tests pass when commiting. You can also run the following commands manually:\n\n* `pnpm typecheck`: run tests for typescript definitions.\n* `pnpm lint`: lint files with eslint and prettier.\n* `pnpm test`: run unit tests with jest.\n\n### Sending a pull request\n\nWhen you're sending a pull request:\n\n* Prefer small pull requests focused on one change.\n* Verify that `eslint` and all tests are passing.\n* Run `pnpm changeset` to generate a changeset.\n* Preview the documentation to make sure it looks good.\n* Follow the pull request template when opening a pull request.\n\n## How to try a development build of Linaria in a project\n\nTo link `linaria` on the command line to local copy in a development build:\n\n```sh\ncd /path/to/your/linaria_clone/\nyarn\nyarn link\ncd /path/to/test_project/\nyarn link linaria\n```\n\nTo unlink it:\n\n```sh\nyarn unlink linaria\n```\n\n### Debugging and deep dive into babel plugin\n\nTo understand what is actually going in under the hood of Linaria we recommend to first read the top-level [How it works](/docs/HOW_IT_WORKS.md).\nThen you can run Linaria in debug mode for a specific file from you project and see step-by-step logs informing what is happening.\n\n```sh\nDEBUG=linaria* LINARIA_LOG=debug npx babel -d dist PATH_TO_COMPONENT\n```\n\n> In example we use `npx` to run babel, but you can also put this script into package.json with removed `npx` to run it.\n\nYou will see how the babel part of Linaria work, result JS file will be stored in `dist` directory. You will not see the resulting CSS file, because this is the role of next layer - bundlers (CSS content is stored in babel metadata to be consumed by bundler).\n\n### Publishing a release\n\nWe use [release-it](https://github.com/webpro/release-it) to automate our release. If you have publish access to the NPM package, run the following from the master branch to publish a new release:\n\n```sh\nyarn release\n```\n\nNOTE: You must have a `GITHUB_TOKEN` environment variable available. You can create a GitHub access token with the \"repo\" access [here](https://github.com/settings/tokens).\n\n## Reporting New Issues\n\nThe best way to get your bug fixed is to provide a reduced test case. Please provide a public repository with a runnable example.\n\n## How to Get in Touch\n\n* Callstack Open Source Discord - [#linaria](https://discord.gg/zwR2Cdh).\n\n## Code Conventions\n\nWe use Prettier with ESLint integration for linting and formatting. To fix any auto-fixable lint or matting errors, run:\n\n```sh\npnpm lint -- --fix\n```\n\n## License\n\nBy contributing to Linaria, you agree that your contributions will be licensed under its MIT license.\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2017 Callstack\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "\n \"Linaria\"\n\n\n

\nZero-runtime CSS in JS library.\n

\n\n---\n\n[![Build Status][build-badge]][build]\n[![Code Coverage][coverage-badge]][coverage]\n[![Version][version-badge]][package]\n[![MIT License][license-badge]][license]\n\n[![All Contributors][all-contributors-badge]](#contributors)\n[![PRs Welcome][prs-welcome-badge]][prs-welcome]\n[![Chat][chat-badge]][chat]\n[![Code of Conduct][coc-badge]][coc]\n[![Greenkeeper][greenkeeper-badge]][greenkeeper]\n[![Sponsored by Callstack][callstack-badge]][callstack]\n\n[![tweet][tweet-badge]][tweet]\n\n## Features\n\n- Write CSS in JS, but with **zero runtime**, CSS is extracted to CSS files during build\n- Familiar **CSS syntax** with Sass like nesting\n- Use **dynamic prop based styles** with the React bindings, uses CSS variables behind the scenes\n- Easily find where the style was defined with **CSS sourcemaps**\n- **Lint your CSS** in JS with [stylelint](https://github.com/stylelint/stylelint)\n- Use **JavaScript for logic**, no CSS preprocessor needed\n- Optionally use any **CSS preprocessor** such as Sass or PostCSS\n- Supports **atomic styles** with `@linaria/atomic`\n\n**[Why use Linaria](/docs/BENEFITS.md)**\n\n**[Learn how Airbnb improved both developer experience and web performance with Linaria](https://medium.com/airbnb-engineering/airbnbs-trip-to-linaria-dc169230bd12)**\n\n## Installation\n\n```sh\nnpm install @linaria/core @linaria/react @wyw-in-js/babel-preset\n```\n\nor\n\n```sh\nyarn add @linaria/core @linaria/react @wyw-in-js/babel-preset\n```\n\n## Setup\n\nLinaria is now built on top of [wyw-in-js.dev](https://wyw-in-js.dev/). It supports various bundlers to extract the CSS at build time. To configure your bundler, check the following guides on the wyw-in-js.dev site:\n\n- [webpack](https://wyw-in-js.dev/bundlers/webpack)\n- [esbuild](https://wyw-in-js.dev/bundlers/esbuild)\n- [Rollup](https://wyw-in-js.dev/bundlers/rollup)\n- [Vite](https://wyw-in-js.dev/bundlers/vite)\n- [Svelte](https://wyw-in-js.dev/bundlers/svelte)\n\nSee [Configuration](https://wyw-in-js.dev/configuration) to customize how Linaria processes your files.\n\n## Stability\n\nLinaria relies on WyW (`@wyw-in-js/*`) to evaluate your modules at build time and extract CSS. If you hit issues like slow builds, invalidation storms, or unexpected code being executed during the build, it’s usually related to the WyW evaluation model and how your modules are structured.\n\nLinaria 7 requires Node.js `>=20` (WyW 1.x enforces this via `engines`).\n\nSee https://wyw-in-js.dev/stability for practical guidance and common pitfalls.\n\n## Syntax\n\nLinaria can be used with any framework, with additional helpers for React. The basic syntax looks like this:\n\n```js\nimport { css } from '@linaria/core';\nimport { modularScale, hiDPI } from 'polished';\nimport fonts from './fonts';\n\n// Write your styles in `css` tag\nconst header = css`\n text-transform: uppercase;\n font-family: ${fonts.heading};\n font-size: ${modularScale(2)};\n\n ${hiDPI(1.5)} {\n font-size: ${modularScale(2.5)};\n }\n`;\n\n// Then use it as a class name\n

Hello world

;\n```\n\nYou can use imported variables and functions for logic inside the CSS code. They will be evaluated at build time.\n\nIf you're using [React](https://reactjs.org/), you can use the `styled` helper, which makes it easy to write React components with dynamic styles with a styled-component like syntax:\n\n```js\nimport { styled } from '@linaria/react';\nimport { families, sizes } from './fonts';\n\n// Write your styles in `styled` tag\nconst Title = styled.h1`\n font-family: ${families.serif};\n`;\n\nconst Container = styled.div`\n font-size: ${sizes.medium}px;\n color: ${props => props.color};\n border: 1px solid red;\n\n &:hover {\n border-color: blue;\n }\n\n ${Title} {\n margin-bottom: 24px;\n }\n`;\n\n// Then use the resulting component\n\n Hello world\n;\n```\n\nDynamic styles will be applied using CSS custom properties (aka CSS variables) and don't require any runtime.\n\nSee [Basics](/docs/BASICS.md) for a detailed information about the syntax.\n\n## Demo\n\n[![Edit Linaria Demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/linaria-react-vite-ts-qyj5xd)\n\n## Documentation\n\n- [Basics](/docs/BASICS.md)\n- [API and usage](/docs/API.md)\n - [Client APIs](/docs/API.md#client-apis)\n - [Server APIs](/docs/API.md#server-apis)\n- [Configuration](/docs/CONFIGURATION.md)\n- [Dynamic styles with `css` tag](/docs/DYNAMIC_STYLES.md)\n- [Theming](/docs/THEMING.md)\n- [Critical CSS extraction](/docs/CRITICAL_CSS.md)\n- [Bundlers integration](/docs/BUNDLERS_INTEGRATION.md)\n - [webpack](/docs/BUNDLERS_INTEGRATION.md#webpack)\n - [Rollup](/docs/BUNDLERS_INTEGRATION.md#rollup)\n- [CLI](/docs/CLI.md)\n- [Linting](/docs/LINTING.md)\n- [How it works](/docs/HOW_IT_WORKS.md)\n- [Example](/website)\n\n## Contributing\n\nWe appreciate any support in library development!\n\nTake a look on [Contributing](CONTRIBUTING.md) docs to check how you can run Linaria in development mode.\n\n## Trade-offs\n\n- No IE11 support when using dynamic styles in components with `styled`, since it uses CSS custom properties\n- Dynamic styles are not supported with `css` tag. See [Dynamic styles with `css` tag](/docs/DYNAMIC_STYLES.md) for alternative approaches.\n- Modules used in the CSS rules cannot have side-effects.\n For example:\n\n ```js\n import { css } from '@linaria/core';\n import colors from './colors';\n\n const title = css`\n color: ${colors.text};\n `;\n ```\n\n Here, there should be no side-effects in the `colors.js` file, or any file it imports. We recommend to move helpers and shared configuration to files without any side-effects.\n\n## Interoperability with other CSS-in-JS libraries\n\nLinaria can work together with other CSS-in-JS libraries out-of-the-box. However, if you want to use styled components from Linaria as selectors in `styled-components`/`emotion`, you need to use [@linaria/interop](/packages/interop/README.md) \n\n## Editor Plugins\n\n### VSCode\n\n- Syntax Highlighting - [language-babel](https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel)\n- Autocompletion - [vscode-styled-components](https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components)\n- Linting - [stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)\n\n### Atom\n\n- Syntax Highlighting and Autocompletion - [language-babel](https://atom.io/packages/language-babel)\n\n### Webstorm\n\n- Syntax Highlighting & Autocompletion - [webstorm-styled-components](https://github.com/styled-components/webstorm-styled-components)\n\n### Sublime Text\n\n- Syntax Highlighting & Autocompletion - [Naomi](https://packagecontrol.io/packages/Naomi), [JSCustom](https://packagecontrol.io/packages/JSCustom) (refer to document on how to turn on Styled Component syntax)\n- Linting - [SublimeLinter-stylelint](https://packagecontrol.io/packages/SublimeLinter-stylelint), [LSP Stylelint](https://packagecontrol.io/packages/LSP-stylelint)\n\n## Recommended Libraries\n\n- [gatsby-plugin-linaria](https://github.com/cometkim/gatsby-plugin-linaria) – Gatsby plugin that sets up Babel and webpack configuration for Linaria.\n- [polished.js](https://polished.js.org/) - A lightweight toolset for writing styles in JavaScript.\n- [craco-linaria](https://github.com/jedmao/craco-linaria) - A [Craco](https://www.npmjs.com/package/@craco/craco) plugin that allows you to use Linaria [without ejecting](https://create-react-app.dev/docs/alternatives-to-ejecting) from a [CRA](https://create-react-app.dev/).\n\n## Inspiration\n\n- [glam](https://github.com/threepointone/glam)\n- [styled-components](https://github.com/styled-components/styled-components)\n- [css-literal-loader](https://github.com/4Catalyzer/css-literal-loader)\n\n## Acknowledgements\n\nThis project wouldn't have been possible without the following libraries or the people behind them.\n\n- [babel](https://babeljs.io/)\n- [stylis.js](https://github.com/thysultan/stylis.js)\n\nSpecial thanks to [@kentcdodds](https://github.com/kentcdodds) for his babel plugin and [@threepointone](https://github.com/threepointone) for his suggestions and encouragement.\n\n## Made with ❤️ at Callstack\n\nLinaria is an open source project and will always remain free to use. If you think it's cool, please star it 🌟. [Callstack](https://callstack.com) is a group of React and React Native geeks, contact us at [hello@callstack.com](mailto:hello@callstack.com) if you need any help with these or just want to say hi!\n\nLike the project? ⚛️ [Join the team](https://callstack.com/careers/?utm_campaign=Senior_RN&utm_source=github&utm_medium=readme) who does amazing stuff for clients and drives React Native Open Source! 🔥\n\n## Sponsors\n\n

\n \"{callstack}\"\n

\n

\n \"Servers.com\"\n

\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):\n\n\n\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\"Paweł
Paweł Trysła
💻 📖 🤔		\"Satyajit
Satyajit Sahoo
💻 📖 🤔		\"Michał
Michał Pierzchała
💻 📖 🤔		\"Lucas\"/
Lucas
📖		\"Alexey
Alexey Pronevich
📖		\"Wojtek
Wojtek Szafraniec
💻		\"Anton
Anton Evzhakov
💻 🤔 📖
\"Tushar
Tushar Sonawane
📖 💡		\"Ferran
Ferran Negre
📖		\"Jakub
Jakub Beneš
💻 📖		\"Oscar
Oscar Busk
🐛 💻		\"Dawid\"/
Dawid
💻 📖		\"Kacper
Kacper Wiszczuk
💻 📖		\"Denis
Denis Rul
💻
\"Johan
Johan Holmerin
💻 📖		\"Gilad
Gilad Peleg
📖		\"Giuseppe\"/
Giuseppe
💻		\"Matija
Matija Marohnić
💻 📖		\"Stefan
Stefan Schult
💻		\"Ward
Ward Peeters
💻		\"radoslaw-medryk\"/
radoslaw-medryk
💻
\"杨兴洲\"/
杨兴洲
💻		\"Dawid
Dawid Karabin
📖		\"Chris
Chris Abrams
💻 📖 🤔		\"Jayphen\"/
Jayphen
💻		\"c4605\"/
c4605
💻		\"Toru
Toru Kobayashi
💻		\"Jakub
Jakub Mazurek
💻
\"Joshua
Joshua Nelson
💻 🤔 📖		\"Tomasz
Tomasz Krzyżowski
💻		\"Martin
Martin Schulze
💻		\"wmzy\"/
wmzy
💻		\"Hyeseong
Hyeseong Kim
💻		\"Martin
Martin Hochel
💻		\"Daniel
Daniel Lo Nigro
💻
\"0xflotus\"/
0xflotus
💻		\"Afzal
Afzal Sayed
💻		\"AijiUejima\"/
AijiUejima
💻		\"Oleksii
Oleksii Vasyliev
💻		\"Alican
Alican Erdoğan
💻		\"Aman
Aman Kubanychbek
💻		\"Andrew
Andrew Gerard
💻
\"Andrey
Andrey Frolov
💻		\"Benjamin
Benjamin Solum
💻		\"Billy
Billy Kwok
💻		\"Christian
Christian Todd
💻		\"David
David Peek
💻		\"Denis
Denis Skiba
💻		\"Dima
Dima Kharitonov
💻
\"Gabriel
Gabriel Valfridsson
💻		\"Gitai\"/
Gitai
💻		\"Hampus
Hampus Kraft
💻		\"Igor
Igor Sukharev
💻		\"Ikko
Ikko Ashimine
💻		\"Iman
Iman Mohamadi
💻		\"JB\"/>
JB
💻
\"Jack
Jack Works
💻		\"James
James George
💻		\"Jed
Jed Mao
💻		\"Joe
Joe Lencioni
💻		\"Joey
Joey Cozza
💻		\"Juan
Juan Ferreras
💻		\"Kazuma
Kazuma Ebina
💻
\"Lars
Lars Kappert
💻		\"Luciano
Luciano Mammino
💻		\"Madhav
Madhav Varshney
💻		\"Malash\"/
Malash
💻		\"Martijn
Martijn Swaagman
💻		\"Matias
Matias Lahti
💻		\"Michael
Michael James
💻
\"Michael
Michael Strobel
💻		\"Michał
Michał Chudziak
💻		\"Mike
Mike
💻		\"Mike
Mike Stop Continues
💻		\"Mokshit
Mokshit Jain
💻		\"Oleksandr
Oleksandr Fediashov
💻		\"Paddy
Paddy O'Brien
💻
\"Patrik
Patrik Smělý
💻		\"Pavel
Pavel Udaloff
💻		\"Przemysław
Przemysław Bitkowski
💻		\"RiN\"/
RiN
💻		\"Roman
Roman Sokhan
💻		\"Seokmin
Seokmin Hong (Ray)
💻		\"Serge
Serge K Lebedev
💻
\"Sergey
Sergey Korovin
💻		\"Shreyas
Shreyas Sreenivas
💻		\"Sky
Sky Wickenden
💻		\"Stanislav
Stanislav Panferov
💻		\"Ted
Ted Jenkins
💻		\"Thanh
Thanh Tran
💻		\"Thor
Thor Amorim
💻
\"tobenna\"/
tobenna
💻		\"Tomas
Tomas Carnecky
💻		\"Tsubasa1218\"/
Tsubasa1218
💻		\"Turadg
Turadg Aleahmad
💻		\"Vitor
Vitor Buzinaro
💻		\"Mistereo\"/
Mistereo
💻		\"Vladislav
Vladislav Kozulya
💻
\"Yuhei
Yuhei Yasuda
💻		\"Danil
Danil Kamyshov
💻		\"Sebastian
Sebastian Landwehr
💻		\"everdimension\"/
everdimension
💻		\"ptol\"/
ptol
💻		\"roottool\"/
roottool
💻		\"ryamaguchi0220\"/
ryamaguchi0220
💻
\"simka\"/
simka
💻		\"soso\"/
soso
💻		\"Nikita
Nikita Skovoroda
💻		\"黄小健\"/
黄小健
💻		\"iMoses\"/
iMoses
💻		\"Jeremy
Jeremy Neander
💻		\"Andy
Andy Parsons
💻
\"Platane\"/
Platane
📖		\"Tim
Tim Kutnick
📖		\"Dmitrii
Dmitrii Pikulin
💻
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!\n\n\n\n[build-badge]: https://img.shields.io/circleci/project/github/callstack/linaria/master.svg?style=flat-square\n[build]: https://circleci.com/gh/callstack/linaria\n[coverage-badge]: https://img.shields.io/codecov/c/github/callstack/linaria.svg?style=flat-square\n[coverage]: https://codecov.io/github/callstack/linaria\n[version-badge]: https://img.shields.io/npm/v/linaria.svg?style=flat-square\n[package]: https://www.npmjs.com/package/linaria\n[license-badge]: https://img.shields.io/npm/l/linaria.svg?style=flat-square\n[license]: https://opensource.org/licenses/MIT\n[prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\n[prs-welcome]: https://github.com/callstack/linaria/blob/master/CONTRIBUTING.md\n[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square\n[coc]: https://github.com/callstack/linaria/blob/master/CODE_OF_CONDUCT.md\n[all-contributors-badge]: https://img.shields.io/badge/all_contributors-23-orange.svg?style=flat-square\n[chat-badge]: https://img.shields.io/discord/426714625279524876.svg?style=flat-square&colorB=758ED3\n[chat]: https://discord.gg/zwR2Cdh\n[tweet-badge]: https://img.shields.io/badge/tweet-%23linaria-blue.svg?style=flat-square&colorB=1DA1F2&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAUCAYAAACXtf2DAAAAAXNSR0IArs4c6QAAAaRJREFUOBGtlM8rBGEYx3cWtRHJRaKcuMtBSitxkCQ3LtzkP9iUUu5ODspRHLhRLtq0FxeicEBC2cOivcge%2FMgan3fNM8bbzL4zm6c%2BPT%2Fe7%2FO8887svrFYBWbbtgWzsAt3sAcpqJFxxF1QV8oJFqFPFst5dLWQAT87oTgPB7DtziFRT1EA4yZolsFkhwjGYFRO8Op0KD8HVe7unoB6PRTBZG8IctAmG1xrHcfkQ2B55sfI%2ByGMXSBqV71xZ8CWdxBxN6ThFuECDEAL%2Bc9HIzDYumVZ966GZnX0SzCZvEqTbkaGywkyFE6hKAsBPhFQ18uPUqh2ggJ%2BUor%2F4M%2F%2FzOC8g6YzR1i%2F8g4vvSI%2ByD7FFNjexQrjHd8%2BnjABI3AU4Wl16TuF1qANGll81jsi5qu%2Bw6XIsCn4ijhU5FmCJpkV6BGNw410hfSf6JKBQ%2FUFxHGYBnWnmOwDwYQ%2BwzdHqO75HtiAMJfaC7ph32FSRJCENUhDHsLaJkL%2FX4wMF4%2BwA5bgAcrZE4sr0Cu9Jq9fxyrvBHWbNkMD5CEHWTjjT2m6r5D92jfmbbKJEWuMMAAAAABJRU5ErkJggg%3D%3D\n[tweet]: https://twitter.com/intent/tweet?text=Check%20out%20linaria!%20https://github.com/callstack/linaria%20%F0%9F%91%8D\n[greenkeeper-badge]: https://badges.greenkeeper.io/callstack/linaria.svg\n[greenkeeper]: https://greenkeeper.io/\n[callstack-badge]: https://callstack.com/images/callstack-badge.svg\n[callstack]: https://callstack.com/open-source/?utm_source=github.com&utm_medium=referral&utm_campaign=linaria&utm_term=readme\n" }, { "path": "babel.config.js", "content": "/*\n * The following environments are supported:\n *\n * (unspecified): Produces ES module output, no language features\n * (except non-standard ones) are transpiled.\n * \"legacy\": Produces CommonJS output, uses @babel/preset-env to target\n * Node.js 12 and specific browsers.\n * \"test\": Used by Jest, produces CommonJS output, targetting\n * the same version as legacy.\n */\n\n/*\n * Configuration for the legacy build\n */\n\nconst commonJSTargets = {\n browsers: '> 0.25% and supports array-includes',\n // browsers: 'chrome > 90',\n node: '12',\n};\n\nmodule.exports = {\n presets: ['@babel/preset-typescript'],\n plugins: ['@babel/plugin-proposal-explicit-resource-management'],\n env: {\n legacy: {\n presets: [\n [\n '@babel/preset-env',\n {\n targets: {\n node: commonJSTargets.node,\n },\n },\n ],\n ],\n },\n test: {\n presets: [\n [\n '@babel/preset-env',\n {\n targets: {\n node: commonJSTargets.node,\n },\n },\n ],\n '@babel/preset-typescript',\n ],\n },\n },\n overrides: [\n {\n /**\n * only react and core packages are targeted to be run in the browser\n */\n test: /[\\\\/]packages[\\\\/](?:atomic|core|react)[\\\\/](?!src[\\\\/]processors[\\\\/])/,\n presets: ['@babel/preset-react'],\n env: {\n legacy: {\n presets: [\n [\n '@babel/preset-env',\n {\n targets: commonJSTargets.browsers,\n loose: true,\n // our styled component should not need to use any polyfill. We do not include core-js in dependencies. However, we leave this to detect if future changes would not introduce any need for polyfill\n useBuiltIns: 'usage',\n // Even core-js doesn't remember IE11\n exclude: ['es.array.includes', 'web.dom-collections.iterator'],\n corejs: 3,\n // this is used to test if we do not introduced core-js polyfill\n debug: process.env.DEBUG_CORE_JS === 'true',\n },\n ],\n ],\n },\n },\n },\n {\n /**\n * we have to transpile JSX in tests\n */\n test: /[\\\\/](__tests__|__fixtures__|packages[\\\\/]teskit[\\\\/]src)[\\\\/]/,\n presets: ['@babel/preset-react'],\n },\n ],\n};\n" }, { "path": "commitlint.config.js", "content": "module.exports = {\n extends: ['@commitlint/config-conventional'],\n};\n" }, { "path": "docs/API.md", "content": "# API\n\nLinaria exposes a core `css` method alongside with small, but just enough amount of helpers. Inside `@linaria/core` module you can find following methods:\n\n## Client APIs\n\n### `css`\n\nString tag for tagged template literals consisting CSS code. The tagged template literal is evaluated to a unique class name by the Babel plugin:\n\n```js\nimport { css } from '@linaria/core';\n\nconst flower = css`\n display: inline;\n color: violet;\n`;\n\n// flower === flower__9o5awv –> with babel plugin\n```\n\nAll rules inside the template literal are scoped to the class name, including media queries and animations. For example, we can declare CSS animation like so:\n\n```js\nimport { css } from '@linaria/core';\n\nconst box = css`\n animation: rotate 1s linear infinite;\n\n @keyframes rotate {\n {\n from: 0deg;\n }\n {\n to: 360deg;\n }\n }\n`;\n```\n\n### `cx(...classNames: Array) => string`\n\nTakes a list of class names and returns a concatenated string with the class names. Falsy values are ignored.\n\n```js\nimport { css, cx } from '@linaria/core';\n\nconst cat = css`\n font-weight: bold;\n`;\n\nconst yarn = css`\n color: violet;\n`;\n\nconst fun = css`\n display: flex;\n`;\n\nfunction App({ isPlaying }) {\n return ;\n}\n```\n\nUnlike the [`classnames`](https://www.npmjs.com/package/classnames) library, this doesn't handle objects. If you want or need the features of the `classnames` library, you can use it instead.\n\n### `styled`\n\nHelper to build React components. It allows you to write your components in a similar syntax as [`styled-components`](https://www.styled-components.com/):\n\nThe syntax is similar to the `css` tag. Additionally, you can use function interpolations that receive the component's props:\n\n```js\nimport { styled } from '@linaria/react';\nimport colors from './colors.json';\n\nconst Container = styled.div`\n background-color: ${colors.background};\n color: ${(props) => props.color};\n width: ${100 / 3}%;\n border: 1px solid red;\n\n &:hover {\n border-color: blue;\n }\n`;\n```\n\nAll rules inside the template literal are scoped to the component, similar to the `css` tag.\n\nDynamic function interpolations are replaced with CSS custom properties. A dynamic function interpolation will receive the `props` of the component as it's arguments and the returned result will be used as the value for the variable. When using this, a tiny helper is imported so that we don't duplicate the code for creating the component in all files.\n\nYou can also interpolate a component to refer to it:\n\n```js\nconst Title = styled.h1`\n font-size: 36px;\n`;\n\nconst Article = styled.article`\n font-size: 16px;\n\n /* this will evaluate to the selector that refers to `Title` */\n ${Title} {\n margin-bottom: 24px;\n }\n`;\n```\n\nIf you want to swap out the tag that's rendered, you can use the `as` prop:\n\n```js\n// Here `Button` is defined as a `button` tag\nconst Button = styled.button`\n background-color: rebeccapurple;\n`;\n\n// You can switch it to use an `a` tag with the `as` prop\n;\n```\n\nYou can also decorate another styled component with `styled`:\n\n```js\nconst Button = styled.button`\n background-color: rebeccapurple;\n`;\n\n// The background-color in FancyButton will take precedence\nconst FancyButton = styled(Button)`\n background-color: black;\n`;\n```\n\n### Atomic `css`\n\nIn addition to `css` from `@linaria/core`, the `@linaria/atomic` package exports its own `css` template literal which produces _atomic_ styles. See [the atomic css documentation](./ATOMIC_CSS.md) on this for more information.\n\n## Server APIs (`@linaria/server`)\n\n### `collect(html: string, css: string) => string`\n\nTakes HTML and CSS strings and returns the critical CSS used in the page by analyzing the class names. It can be used to determine critical CSS for server side rendering.\n\n```js\nimport { collect } from '@linaria/server';\n\nconst css = fs.readFileSync('./dist/styles.css', 'utf8');\nconst html = ReactDOMServer.renderToString();\nconst { critical, other } = collect(html, css);\n\n// critical – returns critical CSS for given html\n// other – returns the rest of styles\n```\n\nThis will only detect critical CSS based on class names, so if you have any other type of selectors, they'll get added to the critical CSS.\n\nAlso note that extracting critical CSS this way will change the order of class names. It's not a problem if you're primarily using Linaria for styling. However if you're using a third party framework which imports its own CSS, then it's not recommended to use this helper on the extracted CSS.\n" }, { "path": "docs/ATOMIC_CSS.md", "content": "# Atomic CSS\n\n## What is Atomic CSS?\n\nAtomic CSS is an approach to styling that reduces payload sizes for style delivery, and allows style composition and reuse easily. This document describes the concept of Atomic CSS, its advantage and use cases.\n\nAtomic CSS is a way of writing CSS such that each CSS rule has exactly one declaration (an \"atom\"). For example,\n\n```css\n/** A normal class */\n.myClass {\n background: red;\n width: 100%;\n height: 100%;\n}\n\n/** Can be written atomically as: */\n.a {\n background: red;\n}\n.b {\n width: 100%;\n}\n.c {\n height: 100%;\n}\n```\n\n## Usage in Linaria\n\nAtomic styles can be enabled in the linaria config by providing an `atomizer` function (see [configuration](./CONFIGURATION.md) for details).\n\nOnce enabled, it is possible to write atomic styles by importing the `css` template literal from `@linaria/atomic`:\n\n```tsx\nimport { cx } from '@linaria/core';\nimport { css } from '@linaria/atomic';\n\nconst atomicCss = css`\n background: red;\n width: 100%;\n height: 100%;\n border: 1px solid black;\n`;\n\nconst blueBackground = css`\n background: blue;\n border: 1px solid black;\n`;\n\n// In React:\n
;\n\n// In vanilla JS:\nconst div = document.createElement('div');\ndiv.setAttribute('class', cx(atomicCss, blueBackground));\ndocument.body.appendChild(div);\n```\n\nWhich at build time, is transformed into:\n\n```ts\nimport { cx } from '@linaria/core';\nimport { css } from '@linaria/atomic';\n\nconst atomicCss =\n 'atm_background_abcd atm_width_efgh atm_height_ijkl atm_border_mnop';\n\nconst blueBackground = 'atm_background_qrst atm_border_mnop';\n\n// In React:\n
; //
\n\n// In vanilla JS:\nconst div = document.createElement('div');\ndiv.setAttribute('class', cx(atomicCss, blueBackground)); // same as React example\ndocument.body.appendChild(div);\n```\n\n(Note: in the example above, the slugs in the atoms are lengthened for readability)\n\nThe format of these atoms is `atm_${propertySlug}_${valueSlug}` which lets us deduplicate based on the `propertySlug` part of the atom.\n\nAs you can see in the above example, `atm_border_mnop` can be removed as it duplicated, and we see two atoms with the `background` property slug, and can remove one of them.\n\n### at-rules, pseudo classes and keyframes\n\nLinaria's atomic css also supports creating (nested) at-rules, pseudo classes and keyframes:\n\n```ts\nimport { css } from '@linaria/atomic';\n\n// Note: animation name namespacing does not happen automatically with @linaria/atomic. Keyframe animations are pulled out to the top level and not atomized.\nexport const animation = css`\n @keyframes my-animation {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n animation: my-animation 1s infinite;\n`;\n\nexport const pseudoClass = css`\n &:hover {\n color: pink;\n }\n`;\n\nexport const mediaQuery = css`\n @media (max-width: 400px) {\n background: orange;\n }\n`;\n```\n\nThese can also be combined for further nesting.\n\n### Property priorities\n\nUsing atomic CSS, longhand properties such as `padding-top` have a _higher_ priority than their shorthand equivalents like `padding`. For example:\n\n```ts\nimport { css } from '@linaria/atomic';\n\nconst noPadding = css`\n padding: 0;\n`;\n\nconst paddingTop = css`\n padding-top: 5px:\n`;\n\n// In react:\n
...
;\n```\n\nThe result will be that the div has `padding-top: 5px;`, as that is higher priority than `padding: 0`.\n\nThe way linaria achieves this is through property priorities. See [this blog post](https://weser.io/blog/the-shorthand-longhand-problem-in-atomic-css) for more details on the concept, and the problems it solves. The method used in linaria is to increase the specificity of the rules: see `@linaria/atomic`'s `propertyPriority` function for a list of longhand and shorthand properties supported by this. The basic rules are:\n\n- Longhand properties have higher priority than shorthand properties\n- Declarations in @media rules (and any @-rule, such as @supports) have higher priority than those outside of them\n\n## Use cases\n\n### Reducing number of rules\n\nOne advantage of writing styles in this way is that we can reuse CSS more effectively. In many cases, declarations are repeated in CSS, and atomic CSS allows heavy reuse of these classes. For example if we have the classes,\n\n```html\n\n //here I use it\n \n);\n\nexport default Header;\n```\n\n> You can also use the `styled` variant, importing from `@linaria/react`.\n\nIf you run `npm run dev`, you should be able to see a button next to the nav title, with red bold text.\n\nYou can take a look at this example [here](../examples/Preact)\n\n## Gatsby\n\nIf you wish you use Gatsby, we recommend you to use the `gatsby-cli` and start from there. The following configuration assumes you are using the default template provided by gatsby-cli. Start by creating your project using:\n\n```\nnpx gatsby new my-project\n```\n\nNow, you have two options. You can use `gatsby-plugin-linaria` or create a custom config.\n\n### gatsby-plugin-linaria\n\nThis is an easier and more straightforward way of integrating Linaria with Gatsby. Check [plugin docs](https://github.com/cometkim/gatsby-plugin-linaria) for instructions.\n\nYou can also take a look at the example [here](../examples/gatsby/plugin)\n\n### Custom config\n\nThis is a bit more advanced way of integrating Linaria into your Gatsby project.\n\nFirst, you will need to install `@linaria/babel-preset` and `babel-preset-gatsby`. Then, create `babel.config.js` in the root of your project with the following contents:\n\n```js\nmodule.exports = {\n presets: [\n 'babel-preset-gatsby',\n [\n '@linaria',\n {\n evaluate: true,\n displayName: process.env.NODE_ENV !== 'production',\n },\n ],\n ],\n};\n```\n\nYou can read more about configuring Babel in Gatsby projects in [their docs](https://www.gatsbyjs.org/docs/babel/).\n\nBesides that, you will need to alter Gatsby's Webpack config to modify the Babel loader. This can be done in `gatsby-node.js` file. Consider the following snippet:\n\n```js\nexports.onCreateWebpackConfig = ({ actions, loaders, getConfig, stage }) => {\n const config = getConfig();\n\n config.module.rules = [\n ...config.module.rules.filter(\n (rule) => String(rule.test) !== String(/\\.js?$/)\n ),\n\n {\n ...loaders.js(),\n\n test: /\\.js?$/,\n loader: '@linaria/webpack-loader',\n options: {\n sourceMap: stage.includes('develop'),\n displayName: stage.includes('develop'),\n babelOptions: {\n presets: ['babel-preset-gatsby'],\n },\n },\n exclude: /node_modules/,\n },\n ];\n\n actions.replaceWebpackConfig(config);\n};\n```\n\nIf you want to know more about extending Webpack config in Gatsby projects, check out [relevant Gatsby docs](https://www.gatsbyjs.org/docs/add-custom-webpack-config/).\n\nWith that done, you should be all set! You can take a look at the minimal example using the above configuration [here](../examples/gatsby/custom-config).\n" }, { "path": "docs/CRITICAL_CSS.md", "content": "# Critical CSS extraction\n\nSince Linaria extracts the CSS statically at build time, you don't need to setup a server rendering. Usually, critical CSS extraction will be automatic if you are code splitting your code and using something like [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) for webpack to generate your CSS files.\n\nIf you're not code splitting, or the initial CSS chunk is not representative of initially rendered content, you might want to extract critical CSS using the `collect` helper we provide to ship the minimal amount of CSS used in the page to the browser. To be able to use the `collect` helper, you need to provide the initial HTML, which usually means that you need to have SSR setup for your web app.\n\nThe `collect` method takes some HTML and CSS and gives you the critical CSS:\n\n```js\nimport { collect } from '@linaria/server';\n\nconst { critical, other } = collect(html, css);\n```\n\nFor example, in an express app with React, you could do something like the following:\n\n```js\nimport fs from 'fs';\nimport express from 'express';\nimport crypto from 'crypto';\nimport React from 'react';\nimport ReactDOMServer from 'react-dom/server';\nimport { collect } from '@linaria/server';\nimport App from './App';\n\nconst cache = {};\nconst css = fs.readFileSync('./dist/styles.css', 'utf8');\nconst app = express();\n\napp.get('/', (req, res) => {\n const html = ReactDOMServer.renderToString();\n const { critical, other } = collect(html, css);\n const slug = crypto.createHash('md5').update(other).digest('hex');\n\n cache[slug] = other;\n\n res.end(`\n \n \n App\n \n \n \n
\n ${html}\n
\n \n \n \n `);\n});\n\napp.get('/styles/:slug', (req, res) => {\n res.type('text/css');\n res.end(cache[req.params.slug])\n});\n\napp.listen(3242);\n```\n\nBy placing the non-critical CSS at the end of `body`, you can make sure that page rendering is not blocked until the CSS is loaded. You can also load the non-critical CSS lazily with JavaScript once the page has loaded for a more efficient strategy. However, it's highly recommended that you take advantage of code splitting in webpack which gives you automatic CSS chunks in addition to critical CSS.\n" }, { "path": "docs/DYNAMIC_STYLES.md", "content": "# Dynamic styles with `css` tag\n\nSometimes we have some styles based on component's props or state, or dynamic in some way. If you use the `styled` helper with React, this is automatically handled using CSS custom properties. But we cannot do the same for `css` tags since they aren't linked to any component, and so we don't have access to state and props. However, there are some approaches to tackle this, each with their own limitations.\n\n## Inline styles\n\nInline styles are the most straightforward way to use dynamic styles. Pass a `style` object with the dynamic styles, and you're done.\n\n```js\nimport React from 'react';\n\nexport function Pager({ index, children }) {\n return (\n
\n {children}\n
\n );\n}\n```\n\nHowever, it's not possible to use inline styles with pseudo-selectors or media queries.\n\n## CSS custom properties\n\n[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) can be used to expose dynamic properties to the CSS.\n\n```js\nimport React from 'react';\nimport { css } from '@linaria/core';\n\nconst box = css`\n height: var(--box-size);\n width: var(--box-size);\n`;\n\nexport function Box({ size }) {\n return (\n \n );\n}\n```\n\nThe [browser support for CSS custom properties](http://caniuse.com/#feat=css-variables) is limited, and it's not polyfilled. Therefore it's not a viable approach if you need to support older browsers. Worth noting that custom properties cascade, so if you don't override the value for the current element, and a custom property with the same name exists for a parent element, it'll be used instead.\n\n## Data attributes\n\nIn cases where you know the values ahead of time, you can use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) to dynamically switch the styles that are applied.\n\n```js\nimport React from 'react';\nimport { css } from '@linaria/core';\n\nconst box = css`\n &[data-valid] {\n color: yellow;\n }\n &[data-valid=\"invalid\"] {\n color: red;\n }\n &[data-valid=\"valid\"] {\n color: green;\n }\n`\n\nexport function Box({ color, valid }) {\n return (\n \n );\n}\n```\n\n## `currentColor`\n\nFor color values, browsers support a `currentColor` property which points to the text color of the element. It is well supported in all browsers.\n\n```js\nimport React from 'react';\nimport { css } from '@linaria/core';\n\nconst box = css`\n background-color: currentColor;\n`;\n\nconst content = css`\n color: white;\n`;\n\nexport function Box({ color }) {\n return (\n \n \n ¯\\_(ツ)_/¯\n \n
\n );\n}\n```\n\nYou cannot use this approach if the dynamic value is not a color, or the element contains some text which needs to be styled with a different color. If the element has children, you will need to reset the `color` property for the text.\n" }, { "path": "docs/FEATURE_FLAGS.md", "content": "# Feature Flags\n\nFeature flags are used to enable or disable specific features provided. The `features` option in the configuration allows you to control the availability of these features.\n\n## Syntax for Specifying Flags\n\n- `true`: Enables the feature for all files.\n- `false`: Disables the feature for all files.\n- `\"glob\"`: Enables the feature only for files that match the specified glob pattern.\n- `[\"glob1\", \"glob2\"]`: Enables the feature for files matching any of the specified glob patterns.\n- `[\"glob1\", \"!glob2\"]`: Enables the feature for files matching `glob1` but excludes files that match `glob2`.\n\n\n# `dangerousCodeRemover` Feature\n\nThe `dangerousCodeRemover` is a flag that is enabled by default. It is designed to enhance the static evaluation of values that are interpolated in styles and to optimize the processing of styled-wrapped components during the build stage. This optimization is crucial for maintaining a stable and fast build process. It is important to note that the `dangerousCodeRemover` does not impact the runtime code; it solely focuses on the code used during the build.\n\n## How It Works\n\nDuring the build process, Linaria statically analyzes the CSS-in-JS codebase and evaluates the styles and values that are being interpolated. The `dangerousCodeRemover` steps in at this stage to remove potentially unsafe code, which includes code that might interact with browser-specific APIs, make HTTP requests, or perform other runtime-specific operations. By removing such code, the evaluation becomes more reliable, predictable, and efficient.\n\n## Benefits\n\nEnabling the `dangerousCodeRemover` feature provides several benefits:\n\n1. **Stability**: The removal of potentially unsafe code ensures that the build process remains stable. It minimizes the chances of encountering build-time errors caused by unsupported browser APIs or non-static operations.\n\n2. **Performance**: Removing unnecessary code results in faster build times. The build tool can efficiently process and evaluate the styles and components without unnecessary overhead, leading to quicker development cycles.\n\n## Fine-Tuning the Removal\n\nWhile the `dangerousCodeRemover` is highly effective at optimizing the build process, there may be cases where it becomes overly aggressive and removes code that is actually required for your specific use case. In such situations, you have the flexibility to fine-tune the behavior of the remover.\n\nBy leveraging the `features` option in the configuration, you can selectively disable the `dangerousCodeRemover` for specific files. This allows you to preserve valuable code that may not be safely evaluated during the build process.\n\n### Example\n\nSuppose you have a file named `specialComponent.js` that contains code that should not be deleted. By adding the following entry to your `features` configuration:\n\n```js\n{\n features: {\n dangerousCodeRemover: [\"**/*\", \"!**/specialComponent.js\"],\n },\n}\n```\n\nYou are instructing Linaria to exclude the `specialComponent.js` file from the removal process. As a result, any code within this file that would have been removed by the `dangerousCodeRemover` will be retained in the build output.\n\n\n# `globalCache` Feature\n\nThe `globalCache` is enabled by default. Linaria uses two levels of caching to improve the performance of the build process. The first level is used to cache transformation and evaluation results for each `transform` call, usually a single call of Webpack's loader or Vite's transform hook. The second level is used to cache the results of the entire build process. The `globalCache` feature controls the second level of caching. Turning off this feature will result in a slower build process but decreased memory usage.\n\n\n# `happyDOM` Feature\n\nThe `happyDOM` is enabled by default. This feature enables usage of https://github.com/capricorn86/happy-dom to emulate a browser environment during the build process. Typically, the `dangerousCodeRemover` feature should remove all browser-related code. However, some libraries may still contain browser-specific code that cannot be statically evaluated. In such cases, the `happyDOM` feature can be used to emulate a browser environment during the build process. This allows Linaria to evaluate the code without encountering errors caused by missing browser APIs.\n\n\n# `softErrors` Feature\n\nThe `softErrors` is disabled by default. It is designed to provide a more lenient evaluation of styles and values that are interpolated in styles. This flag is useful for debugging and prevents the build from failing even if some files cannot be processed with Linaria.\n\n\n# 'useBabelConfigs' Feature\n\nThe `useBabelConfigs` feature is enabled by default. If it is enabled, Linaria will try to resolve the `.babelrc` file for each processed file. Otherwise, it will use the default Babel configuration from `babelOptions` in the configuration.\n\nPlease note that the default value of `useBabelConfigs` will be changed to `false` in the next major release.\n" }, { "path": "docs/HOW_IT_WORKS.md", "content": "# How it works\n\nLinaria consists of 2 parts:\n\n1. Babel plugin\n2. Bundler integration\n\n## Babel plugin\n\nThe Babel plugin will look for `css` and `styled` tags in your code, extract the CSS out and return it in the file's metadata. It will also generate unique class names based on the hash of the filename.\n\n> To get a deep dive into Linaria babel plugin internals, check [debugging section of Contributing docs](../CONTRIBUTING.md#debugging-and-deep-dive-into-babel-plugin)\n\nWhen using the `styled` tag, dynamic interpolations will be replaced with CSS custom properties. References to constants in the scope will also be inlined. If the same expression is used multiple times, the plugin will create a single CSS custom property for those.\n\nThe interpolations used for the CSS custom properties are left in the file, and are passed to the helper which creates the React components. Function interpolations receive the component's props and their return value will be used as the value for the CSS custom property. For other expressions, their result is used as is. If the resulting values aren't strings, they'll be converted to a string before setting the property. Inline styles are used to set the custom properties.\n\nFor example, the plugin will transpile this:\n\n```js\nimport { styled } from '@linaria/react';\nimport { families, sizes } from './fonts';\n\nconst background = 'yellow';\n\nconst Title = styled.h1`\n font-family: ${families.serif};\n`;\n\nconst Container = styled.div`\n font-size: ${sizes.medium}px;\n background-color: ${background};\n color: ${props => props.color};\n width: ${100 / 3}%;\n border: 1px solid red;\n\n &:hover {\n border-color: blue;\n }\n`;\n```\n\nTo this:\n\n```js\nimport { styled } from '@linaria/react';\nimport { families, sizes } from './fonts';\n\nconst background = 'yellow';\n\nconst Title = styled('h1')({\n name: 'Title',\n class: 'Title_t1ugh8t',\n vars: {\n 't1ugh8t9-0': [families.serif],\n },\n});\n\nconst Container = styled('div')({\n name: 'Container',\n class: 'Container_c1ugh8t',\n vars: {\n 'c1ugh8t9-0': [sizes.medium, 'px'],\n 'c1ugh8t9-2': [props => props.color],\n },\n});\n```\n\nThe extracted CSS will look something like this:\n\n```css\n.Title_t1ugh8t9 {\n font-family: var(--t1ugh8t-0);\n}\n\n.Container_c1ugh8t9 {\n font-size: var(--c1ugh8t-0);\n background-color: yellow;\n color: var(--c1ugh8t-2);\n width: 33.333333333333336%;\n border: 1px solid red;\n}\n\n.Container_c1ugh8t9:hover {\n border-color: blue;\n}\n```\n\nIf we encounter a valid unit directly after the interpolation, it'll be passed to the helper so that the correct unit is used when setting the property. This allows you to write this:\n\n```js\nconst Title = styled.h1`\n font-size: ${large}px;\n`;\n```\n\nInstead of having to write this:\n\n```js\nconst Title = styled.h1`\n font-size: ${large + 'px'};\n`;\n```\n\nIt's necessary since if we just replaced the interpolation as is, it wouldn't be a valid syntax:\n\n```css\n.Title_t1ugh8t9 {\n font-size: var(--t1ugh8t9-0-0)px; /* you can't have 'px' after the `var(..)` */\n}\n```\n\nIf we encounter a JS object when inlining, the JS object is assumed to be a style rule and converted to a CSS string before inlining it. For example, if you write this:\n\n```js\nconst absoluteFill = {\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n};\n\nconst Container = styled.h1`\n background-color: papayawhip;\n\n ${Box} {\n ${absoluteFill}\n }\n`;\n```\n\nIt is equivalent to writing this:\n\n```js\nconst Container = styled.h1`\n background-color: papayawhip;\n\n ${Box} {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n }\n`;\n```\n\nWe support this usage because it allows you to use a library such as [polished.js](https://polished.js.org) which outputs object based styles along with Linaria.\n\nIf you've configured the plugin to evaluate expressions with `evaluate: true` (default), any dynamic expressions we encounter will be evaluated during the build-time in a sandbox, and the result will be included in the CSS. Since these expressions are evaluated at build time in Node, you cannot use any browser specific APIs or any API which is only available in runtime. Access to Node native modules such as `fs` is also not allowed inside the sandbox to prevent malicious scripts. In addition, to achieve consistent build output, you should also avoid doing any side effects in these expressions and keep them pure.\n\nYou might want to skip evaluating a certain interpolation if you're using a browser API, a global variable which is only available at runtime, or a module which breaks when evaluating in the sandbox for some reason. To skip evaluating an interpolation, you can always wrap it in a function, like so:\n\n```js\nconst Box = styled.h1`\n height: ${() => window.innerHeight * 2};\n`;\n```\n\nBut keep in mind that if you're doing SSR for your app, this won't work with SSR. In this particular case, better option will be to use the `calc` function along with the `vh` unit for the viewport height (e.g. `calc(100vh * 2)`).\n\n### Evaluators\n\nLinaria can use different strategies for evaluating the interpolated values.\nCurrently, we have two built-in strategies:\n\n- `extractor` was the default strategy in `1.x` version. It takes an interpolated expression, finds all the referenced identifiers, gets all its declarations, repeats cycle for all identifiers in found declarations, and then constructs a new tree of statements from all found declarations. It's a pretty simple strategy, but it significantly changes an evaluated code and doesn't work for non-primitive js-constructions.\n- `shaker` was introduced as an option in `1.4` and became the default in `2.0` version. In contrast to `extractor`, `shaker` tries to find all irrelevant code and cuts it out of the file. As a result, interpolated values can be defined without any restrictions.\n\nIf an interpolated value or one of its dependencies is imported from another module, that module will be also processed with an evaluator (the implementation of evaluator will be chosen by matching `rules` from [the Linaria config](./CONFIGURATION.md#options)).\n\nSometimes it can be useful to implement your own strategy (it can be just a mocked version of some heavy or browser-only library). You can do it by implementing `Evaluator` function:\n\n```typescript\ntype Evaluator = (\n filename: string, // the name of processed file\n options: StrictOptions, // Linaria config\n text: string, // source code\n only: string[] | null // list of exported values or `null` for everything\n) => [string, Map | null];\n```\n\nThe function should return an array with two elements: source code prepared for evaluation and `Map` with imported files in keys and list of the identifiers in values.\n\n## Bundler integration\n\nPlugins for bundlers such as webpack and Rollup use the Babel plugin internally and write the CSS text along with the sourcemap to a CSS file. The CSS file is then picked up and processed by the bundler (e.g. - `css-loader` in case of webpack) to generate the final CSS.\n" }, { "path": "docs/LINTING.md", "content": "# Linting\n\nThere are separate installations based on whether you use stylelint v13 or stylelint v14\n\n## Stylelint 13\n\nFor linting styles with [stylelint 13](https://stylelint.io/), use `@linaria/stylelint`.\n\n### Installation\n\nInstall `stylelint` and optionally your favorite config (such as `stylelint-config-recommended`) in your project:\n\n```bash\nyarn add --dev stylelint stylelint-config-recommended @linaria/stylelint\n```\n\n### Configuring stylelint\n\nAll you need to do is to set your config to extend from `@linaria/stylelint`.\n\nHere's the example `.stylelintrc` configuration file:\n\n```json\n{\n \"extends\": [\n \"stylelint-config-recommended\",\n \"@linaria/stylelint\"\n ]\n}\n```\n\nPlease refer to the [official stylelint documentation](https://stylelint.io/user-guide/configuration/) for more info about configuration.\n\nThe preprocessor will use the [options from the configuration file](/docs/CONFIGURATION.md) for processing your files.\n\n## Stylelint 14\n\nFor linting styles with [stylelint 14](https://stylelint.io/), use `@linaria/stylelint-config-standard-linaria`.\n\n### Installation\n\nInstall `stylelint` and `@linaria/stylelint-config-standard-linaria`\n\n```bash\nyarn add --dev stylelint @linaria/stylelint-config-standard-linaria\n```\n\n### Configuring stylelint\n\nFor the standard configuration you can extend from `@linaria/stylelint-config-standard-linaria`.\n\nHere's an example `.stylelintrc` configuration file:\n\n```json\n{\n \"extends\": [\n \"@linaria/stylelint-config-standard-linaria\"\n ]\n}\n```\n\n`@linaria/stylelint-config-standard-linaria` extends `stylelint-config-standard` which extends `stylelint-config-recommended` so you do NOT need to add those separately. It also sets the customSyntax as `@linaria/postcss-linaria` and adds a few rules.\n\nAlternatively, to just use the custom syntax you can add `@linaria/postcss-linaria`\nHere's an example `.stylelintrc` configuration file:\n\n```json\n{\n \"customSyntax\": \"@linaria/postcss-linaria\"\n}\n```\n\nPlease refer to the [official stylelint documentation](https://stylelint.io/user-guide/configuration/) for more info about configuration.\n\n### Why did the configuration change between Stylelint v13 and v14?\n\nStylelint 14 encourages the use of a [custom syntax](https://stylelint.io/developer-guide/syntaxes/) instead of a processor. `@linaria/stylelint-config-standard-linaria` sets the custom syntax to `@linaria/postcss-linaria`, a custom syntax for linaria, whereas @linaria/stylelint uses a processor. The custom syntax has the benefit of being able to support `stylelint --fix` whereas the processor cannot.\n\n## Usage\n\n### Linting your files\n\nAdd the following to your `package.json` scripts:\n\n```json\n\"lint:css\": \"stylelint src/**/*.js\"\n```\n\nNow, you can run `yarn lint:css` to lint the CSS in your JS files with stylelint.\n\nFor more information refer to [stylelint documentation](https://stylelint.io/user-guide/cli/).\n\n## Editor Setup\n\nIn order to make the\n[vscode-stylelint](https://github.com/stylelint/vscode-stylelint)\nextension work with this syntax correctly, you must configure it\nto validate the files you use linaria in by specifying an array of [language \nidentifiers](https://code.visualstudio.com/docs/languages/overview#_changing-the-language-for-the-selected-file).\n\nYou can do this by following these\n[instructions](https://github.com/stylelint/vscode-stylelint#stylelintvalidate).\n\nFor example:\n\n```json\n{\n \"stylelint.validate\": [\"typescriptreact\"]\n}\n```\n\n" }, { "path": "docs/MIGRATION_GUIDE.md", "content": "# Migration Guide\n\n# 7.x from 6.x\n\n## For Users\n\nLinaria 7 updates the WyW toolchain (`@wyw-in-js/*`) to `^1.0.0` (stable). This affects build-time evaluation (CSS extraction) and can surface previously hidden issues in evaluated modules.\n\n- Review https://wyw-in-js.dev/stability for the evaluation model, common pitfalls, and performance guidance.\n- Linaria 7 requires Node.js 20+ (aligned with WyW 1.x).\n- If you rely on WyW cache internals, note that WyW 1.x can promote fully-statically-evaluatable modules to `only: ['*']` and may re-evaluate modules when cached exports are incomplete.\n- If you import JSON from code that is evaluated by WyW, add `.json` to `extensions` and ensure `.json` is ignored by evaluation rules (so it's parsed as JSON, not by Babel).\n- Rollup users on WyW 1.0.6: WyW serializes `transform()` by default; if you hit Rollup \"Unexpected early exit\" (unresolved plugin promises), try `serializeTransform: false` in the WyW Rollup plugin config.\n\n# 6.x from 5.x, 4.x, 3.x\n\n## For Users\n\nThe main breaking change is that all tooling has been moved from the `@linaria` scope to the `@wyw-in-js` scope. This means that you will need to update your dependencies as follows:\n\n| Old | New\n| --- | ---\n|@linaria/babel-preset | @wyw-in-js/babel-preset\n|@linaria/cli | @wyw-in-js/cli\n|@linaria/esbuild | @wyw-in-js/esbuild\n|@linaria/rollup | @wyw-in-js/rollup\n|@linaria/shaker | discontinued\n|@linaria/vite | @wyw-in-js/vite\n|@linaria/webpack4-loader | discontinued\n|@linaria/webpack5-loader | @wyw-in-js/webpack-loader\n\nThere is no longer a need to install `@linaria/shaker` as it is now part of `@wyw-in-js/transform`, which will be installed automatically with the bundler plugins.\n\nThe configuration file has been renamed from `linaria.config.js` (`linariarc`) to `wyw-in-js.config.js` (`.wyw-in-jsrc`).\n\n## For Custom Processor Developers\n\nBase classes for processors and most helpers have been moved to `@wyw-in-js/processor-utils`.\n\nAll APIs that had `linaria` in their names have been renamed:\n\n- The field that stores meta information in runtime has been renamed from `__linaria` to `__wyw_meta`\n- The export with all interpolated values has been renamed from `__linariaPreval` to `__wywPreval`\n- The caller name in Babel has been renamed from `linaria` to `wyw-in-js`\n\nFor additional information, please visit the [wyw-in-js.dev](https://wyw-in-js.dev).\n\n# 4.x, 3.x from 2.x\n\nThis release was mostly a refactor to [split into more packages](https://github.com/callstack/linaria/pull/687/).\n\n## Breaking changes\n\nAll these package imports in code need to be updated:\n\n| Old | New\n| --- | ---\n|linaria | @linaria/core\n|linaria/loader | @linaria/webpack4-loader, @linaria/webpack5-loader\n|linaria/react | @linaria/react\n|linaria/rollup | @linaria/rollup\n|linaria/server | @linaria/server\n|linaria/stylelint-config | @linaria/stylelint\n\n\nThe `shaker` evaluator has moved from `linaria/evaluators` into its own package. You'll need to add `@linaria/shaker` to your package.json even if you never import it.\n\nThe Babel preset moved from `linaria/babel` to `@linaria/babel-preset` but has to be referenced as `@linaria` in a Babel config. See https://github.com/callstack/linaria/issues/704\n\n\nIn package.json import all the new packages you use.\n\n# 2.x from 1.x\n\n## Breaking changes\n\n### `Core-js` dependency removal and _theoretical_ drop compatibility for `node` below `10`\n\nIn [#569](https://github.com/callstack/linaria/pull/569) We removed `core-js` dependency.\n\nIt should not effectively affect your users or build pipelines. But it was technically a breaking change.\n\nWe set babel preset that makes all non-browser dependencies compatible with `node` from version `10`. But previous setup was using `browser` env so If you was able to build Linaria with previous versions of node, it should work also now. Support for browsers environment didn't change.\n\nAfter that you should be able to solve issues with `core-js` dependency in your project, because it will no longer collide with version used by Linaria.\n\n### The default [evaluation strategy](./HOW_IT_WORKS.md#evaluators) has been changed to `shaker` \n\nIt should not affect existed code since the new strategy is more powerful, but you can always switch to the old one by adding the next `rules` section to your Linaria-config:\n```js\n [\n {\n action: require('linaria/evaluators').extractor,\n },\n {\n test: /\\/node_modules\\//,\n action: 'ignore',\n },\n ]\n``` \n" }, { "path": "docs/THEMING.md", "content": "# Theming\n\nThere are several approaches you can use for theming. Depending on the browser support and requirements, you can pick the approach that suits you the best.\n\n## CSS custom properties\n\nCSS custom properties aka CSS variables are one of the best ways to apply a theme to your web app. The basic concept is that we add a class name to represent the theme to our root element, and use different values for our CSS variables based on the theme:\n\n```js\n// Create class names for different themes\nconst a = css`\n --color-primary: #6200ee;\n --color-accent: #03dac4;\n`;\n\nconst b = css`\n --color-primary: #03a9f4;\n --color-accent: #e91e63;\n`;\n\n// Apply a theme to the root element\n;\n```\n\nNow, we can use these variables in any of the child elements:\n\n```js\nconst Button = styled.button`\n background-color: var(--color-accent);\n`;\n```\n\nCSS custom properties are [not supported in some browsers such as IE](http://caniuse.com/#feat=css-variables), so if you need to support those browsers, this is not a viable approach.\n\n## Class names\n\nAnother approach is to add a class name representing the theme (e.g. - `theme-dark`) in the root element, and take advantage of CSS child selectors to theme the elements based on this parent class name.\n\nFor example, let's add the theme to the root component:\n\n```js\n\n```\n\nNow, we can conditionally style any child element according to the theme:\n\n```js\nconst Header = styled.h1`\n text-transform: uppercase;\n\n .theme-dark & {\n color: white;\n }\n\n .theme-light & {\n color: black;\n }\n`;\n```\n\nYou could even make some helpers to make writing this easier:\n\n```js\n// Put your colors in an object grouped by the theme names\nconst colors = {\n light: {\n text: 'black',\n },\n dark: {\n text: 'white',\n },\n};\n\n// Create a small helper function to loop over the themes and create CSS rule sets\nconst theming = cb =>\n Object.keys(colors).reduce((acc, name) => Object.assign(acc, {\n [`.theme-${name} &`]: cb(colors[name]),\n }), {});\n\n// Use the helper in your styles\nconst Header = styled.h1`\n text-transform: uppercase;\n\n ${theming(c => ({\n color: c.text,\n }))};\n`;\n```\n\nThis approach works in all browsers, and is the best approach if you want to support older browsers without support for CSS custom properties.\n\n## React Context\n\nAnother approach is to use React Context to pass down colors, and then use function interpolations with the `styled` tag to use the colors in your component. You could use something like [`@callstack/react-theme-provider`](https://github.com/callstack/react-theme-provider) or write your own HOC. Then use it like:\n\n```js\nconst Button = withTheme(styled.button`\n background-color: ${props => props.theme.accent};\n`);\n```\n\nNote that this approach also uses CSS custom properties under the hood since function interpolations compile down to CSS custom properties. So the browser support is limited.\n" }, { "path": "examples/astro-solid/astro.config.js", "content": "import { defineConfig } from 'astro/config';\nimport astro_solid from '@astrojs/solid-js';\nimport vite_wyw from '@wyw-in-js/vite';\nimport vite_inspect from 'vite-plugin-inspect';\n\nexport default defineConfig({\n output: 'static',\n srcDir: '.',\n root: '.',\n integrations: [astro_solid()],\n server: {\n host: '0.0.0.0',\n port: 3000,\n },\n build: {\n format: 'file',\n },\n vite: {\n plugins: [\n vite_wyw({\n displayName: true,\n classNameSlug: (hash, title, args) => `${args.dir}_${title}_${hash}`,\n babelOptions: {\n presets: ['solid'],\n },\n }),\n vite_inspect(),\n ],\n css: {\n modules: false,\n },\n },\n});\n" }, { "path": "examples/astro-solid/package.json", "content": "{\n \"name\": \"astro-solid-example\",\n \"version\": \"0.0.1\",\n \"license\": \"MIT\",\n \"main\": \"index.js\",\n \"type\": \"module\",\n \"devDependencies\": {\n \"@astrojs/solid-js\": \"^1.2.3\",\n \"@babel/core\": \"^7.23.5\",\n \"@linaria/core\": \"workspace:^\",\n \"@wyw-in-js/vite\": \"^1.0.6\",\n \"astro\": \"^1.6.10\",\n \"solid-js\": \"^1.6.2\",\n \"vite\": \"^3\",\n \"vite-plugin-inspect\": \"^0.7.33\"\n },\n \"scripts\": {\n \"dev\": \"astro dev --force\",\n \"build\": \"astro build\"\n },\n \"author\": \"Dmitriy Nikiforov\"\n}\n" }, { "path": "examples/astro-solid/pages/csr.tsx", "content": "import { css } from '@linaria/core';\nimport { CSRChild, cssVariableFromModule } from './csr_child';\nimport { astroTextColor } from './external';\n\n// Try to change some variables white in dev mode\nconst GLOBAL_VARS = {\n color_header: 'red',\n} as const;\n\nexport default function CSRComponent() {\n const LOCAL_VARS = {\n description_font_style: 'bold',\n } as const;\n return (\n
\n

\n Hello! This is{' '}\n \n Solid\n {' '}\n app built with{' '}\n \n Linaria\n {' '}\n powered by\n
\n \n Astro\n \n

\n \n This component was rendered on client.\n
\n \n
\n );\n}\n" }, { "path": "examples/astro-solid/pages/csr_child.tsx", "content": "import { css } from '@linaria/core';\nimport { astroTextColor } from './external';\n\nexport function CSRChild() {\n return (\n \n I am child module!\n
\n );\n}\n// Try to change some variables white in dev mode\nexport const cssVariableFromModule = '64px';\n" }, { "path": "examples/astro-solid/pages/external.ts", "content": "export const astroTextColor = 'orange';\n" }, { "path": "examples/astro-solid/pages/index.astro", "content": "---\nimport CSRComponent from './csr';\n---\n\n\n \n \n Linaria – zero-runtime CSS in JS library\n\n\n\n" }, { "path": "examples/astro-solid/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"baseUrl\": \".\",\n \"module\": \"ESNext\",\n \"target\": \"ESNext\",\n \"jsx\": \"preserve\",\n \"jsxImportSource\": \"solid-js\",\n \"moduleResolution\": \"Node\"\n },\n \"exclude\": [\"node_modules\"]\n}\n" }, { "path": "examples/esbuild/.gitignore", "content": "/build\n" }, { "path": "examples/esbuild/app.js", "content": "import 'linaria-website';\n" }, { "path": "examples/esbuild/build.js", "content": "const wyw = require('@wyw-in-js/esbuild').default;\n\nconst prod = process.env.NODE_ENV === 'production';\n\nrequire('esbuild')\n .build({\n bundle: true,\n entryPoints: ['app.js'],\n loader: {\n '.svg': 'file',\n '.png': 'file',\n },\n minify: prod,\n outfile: 'build/out.js',\n plugins: [\n wyw({\n sourceMap: prod,\n }),\n ],\n })\n .catch(() => process.exit(1));\n" }, { "path": "examples/esbuild/package.json", "content": "{\n \"private\": true,\n \"name\": \"esbuild-example\",\n \"version\": \"0.0.0\",\n \"license\": \"MIT\",\n \"dependencies\": {\n \"linaria-website\": \"workspace:^\"\n },\n \"devDependencies\": {\n \"@wyw-in-js/esbuild\": \"^1.0.6\",\n \"esbuild\": \"^0.15.16\"\n },\n \"scripts\": {\n \"build\": \"node build.js\"\n },\n \"author\": \"Anton Evzhakov\"\n}\n" }, { "path": "examples/rollup/.gitignore", "content": "/build\n" }, { "path": "examples/rollup/app.js", "content": "import 'linaria-website';\n" }, { "path": "examples/rollup/babel.config.js", "content": "module.exports = {\n presets: ['@babel/preset-react'],\n};\n" }, { "path": "examples/rollup/package.json", "content": "{\n \"private\": true,\n \"name\": \"rollup-example\",\n \"version\": \"0.0.0\",\n \"license\": \"MIT\",\n \"dependencies\": {\n \"linaria-website\": \"workspace:^\"\n },\n \"devDependencies\": {\n \"@babel/core\": \"^7.23.5\",\n \"@babel/preset-react\": \"^7.23.3\",\n \"@rollup/plugin-babel\": \"^6.0.3\",\n \"@rollup/plugin-commonjs\": \"^25.0.4\",\n \"@rollup/plugin-image\": \"^3.0.2\",\n \"@rollup/plugin-node-resolve\": \"^15.2.1\",\n \"@wyw-in-js/rollup\": \"^1.0.6\",\n \"rollup\": \"^4.0.0\",\n \"rollup-plugin-css-only\": \"^4.3.0\"\n },\n \"scripts\": {\n \"build\": \"rollup -c\"\n },\n \"author\": \"Anton Evzhakov\"\n}\n" }, { "path": "examples/rollup/rollup.config.mjs", "content": "import wyw from '@wyw-in-js/rollup';\nimport { babel } from '@rollup/plugin-babel';\nimport commonjs from '@rollup/plugin-commonjs';\nimport image from '@rollup/plugin-image';\nimport { nodeResolve } from '@rollup/plugin-node-resolve';\nimport css from 'rollup-plugin-css-only';\n\nexport default {\n input: 'app.js',\n output: {\n dir: 'build',\n format: 'cjs',\n },\n plugins: [\n image(),\n wyw({\n sourceMap: process.env.NODE_ENV !== 'production',\n // Rollup can deadlock when WyW resolves imports during transform.\n serializeTransform: false,\n }),\n css({\n output: 'styles.css',\n }),\n nodeResolve({\n extensions: ['.jsx', '.js'],\n }),\n commonjs(),\n babel({ babelHelpers: 'bundled' }),\n ],\n};\n" }, { "path": "examples/vite/.linariarc.mjs", "content": "module.exports = {\n rules: [\n {\n action: require.resolve('@linaria/shaker'),\n },\n {\n test: /\\/node_modules\\//,\n action: 'ignore',\n },\n {\n test: (filename, code) => {\n if (!/\\/node_modules\\//.test(filename)) {\n return false;\n }\n\n return /(?:^|\\*\\/|;|})\\s*(?:export|import)\\s/m.test(code);\n },\n action: require.resolve('@linaria/shaker'),\n },\n ],\n};\n" }, { "path": "examples/vite/app.js", "content": "import 'linaria-website';\n" }, { "path": "examples/vite/index.html", "content": "\n\n\n\n \n \n\n Linaria – zero-runtime CSS in JS library\n\n\n\n
\n\n \n\n\n\n" }, { "path": "examples/vite/package.json", "content": "{\n \"private\": true,\n \"name\": \"vite-example\",\n \"version\": \"0.0.0\",\n \"license\": \"MIT\",\n \"main\": \"index.js\",\n \"type\": \"module\",\n \"dependencies\": {\n \"linaria-website\": \"workspace:^\"\n },\n \"devDependencies\": {\n \"@rollup/plugin-node-resolve\": \"^15.2.1\",\n \"@vitejs/plugin-react\": \"^2.1.0\",\n \"@wyw-in-js/vite\": \"^1.0.6\",\n \"vite\": \"^3.2.10\"\n },\n \"scripts\": {\n \"build\": \"vite build\"\n },\n \"author\": \"Anton Evzhakov\"\n}\n" }, { "path": "examples/vite/vite.config.js", "content": "import wyw from '@wyw-in-js/vite';\nimport { nodeResolve } from '@rollup/plugin-node-resolve';\nimport react from '@vitejs/plugin-react';\nimport { defineConfig } from 'vite';\n\n// https://vitejs.dev/config/\nexport default defineConfig(({ command }) => ({\n plugins: [\n nodeResolve({\n extensions: ['.jsx', '.js'],\n }),\n wyw({\n include: ['**/*.{js,jsx}'],\n babelOptions: {\n presets: ['@babel/preset-react'],\n },\n }),\n react({\n jsxRuntime: 'classic',\n }),\n ],\n build: {\n target: command === 'serve' ? 'modules' : 'es2015',\n },\n}));\n" }, { "path": "examples/vpssr-linaria-solid/package.json", "content": "{\n \"name\": \"vpssr-linaria-solid-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"node ./server\",\n \"build\": \"vite build\",\n \"preview\": \"vite build && NODE_ENV=production node ./server\"\n },\n \"author\": \"mrfoxpro\",\n \"license\": \"ISC\",\n \"dependencies\": {\n \"@linaria/core\": \"workspace:^\",\n \"@wyw-in-js/vite\": \"^1.0.6\",\n \"babel-preset-solid\": \"^1.6.2\",\n \"compression\": \"^1.7.4\",\n \"express\": \"^4.20.0\",\n \"sirv\": \"^2.0.2\",\n \"solid-js\": \"^1.6.2\",\n \"vite\": \"^3.2.10\",\n \"vite-plugin-solid\": \"^2.4.0\",\n \"vite-plugin-ssr\": \"^0.4.54\"\n }\n}\n" }, { "path": "examples/vpssr-linaria-solid/pages/html-js/_default.page.client.js", "content": "// We could also define `handleCounter()` in `index.page.client.js` instead of `_default.page.client.js`.\n// We define `_default.page.client.js` to showcase how to define the browser-side JavaScript for multiple pages.\n\nhandleCounter()\n\nfunction handleCounter() {\n\tconst counterEl = document.querySelector('button')\n\tlet countState = 0\n\tconst txt = () => `Counter ${countState} (Vanilla JS)`\n\tcounterEl.textContent = txt()\n\tcounterEl.onclick = () => {\n\t\tcountState++\n\t\tcounterEl.textContent = txt()\n\t}\n}\n" }, { "path": "examples/vpssr-linaria-solid/pages/html-js/index.page.server.tsx", "content": "import { css } from '@linaria/core'\n\nexport function Page() {\n\treturn (\n\t\t<>\n\t\t\t

HTML + JS

\n\t\t\t

This page is rendered to HTML and has only few lines of browser-side JavaScript.

\n\t\t\t

\n\t\t\t\t\n\t\t\t

\n\t\t\t

\n\t\t\t\tHMR works for CSS: modify pages/html-js/index.css to change the color of this{' '}\n\t\t\t\t\n\t\t\t\t\tred text\n\t\t\t\t\n\t\t\t\t.\n\t\t\t

\n\t\t\n\t)\n }\n" }, { "path": "examples/vpssr-linaria-solid/pages/html-only/index.page.server.tsx", "content": "import { css } from '@linaria/core'\n\nexport function Page() {\n\treturn (\n\t\t<>\n\t\t\t

HTML-only

\n\t\t\t

\n\t\t\t\tThe React component Page of this page is rendererd to HTML only.\n\t\t\t

\n\t\t\t

This page has zero browser-side JavaScript. (In development, Vite's HMR client is loaded.)

\n\t\t\t

\n\t\t\t\tAs shown by this{' '}\n\t\t\t\t\n\t\t\t\t\torange text\n\t\t\t\t\n\t\t\t\t, CSS can be loaded in .page.server.js files.\n\t\t\t

\n\t\t\t

\n\t\t\t\tIf needed, we can add a little bit of browser-side JavaScipt to implement bits of interactivity,\n\t\t\t\tsee HTML + JS.\n\t\t\t

\n\t\t\n\t)\n}\n" }, { "path": "examples/vpssr-linaria-solid/pages/index.page.server.tsx", "content": "export function Page() {\n\treturn (\n\t\t<>\n\t\t\t

Render Modes

\n\t\t\t
    \n\t\t\t\t
  • \n\t\t\t\t\tHTML only. Rendered to HTML, zero browser-side JavaScript.\n\t\t\t\t
    • \n\t\t\t\t
  • \n\t\t\t\t\tSPA. Rendered to the browser's DOM (not rendered to HTML).\n\t\t\t\t
    • \n\t\t\t\t
  • \n\t\t\t\t\tHTML + JS. Rendered to HTML, some browser-side JavaScript.\n\t\t\t\t
    • \n\t\t\t\t
  • \n\t\t\t\t\tSSR. Rendered to HTML and hydrated in the browser.\n\t\t\t\t
    • \n\t\t\t
\n\t\t\n\t)\n}\n" }, { "path": "examples/vpssr-linaria-solid/pages/spa/index.page.client.tsx", "content": "import { Counter } from '../ssr/Counter'\nimport { css } from '@linaria/core'\n\nexport function Page() {\n\treturn (\n\t\t<>\n\t\t\t

SPA

\n\t\t\t

This page is:

\n\t\t\t
    \n\t\t\t\t
  • Rendered only to the browser's DOM. (Not rendered to HTML.)
    • \n\t\t\t\t
  • \n\t\t\t\t\tInteractive. \n\t\t\t\t
    • \n\t\t\t
\n\t\t\t\n\t\t\t\tGreen text.\n\t\t\t

\n\t\t\n\t)\n}\n" }, { "path": "examples/vpssr-linaria-solid/pages/ssr/Counter.tsx", "content": "import { createSignal } from 'solid-js'\n\nexport function Counter() {\n\tconst [count, setCount] = createSignal(0)\n\treturn (\n\t\t\n\t)\n}\n" }, { "path": "examples/vpssr-linaria-solid/pages/ssr/index.page.tsx", "content": "import { Counter } from './Counter'\nimport { css } from '@linaria/core'\n\nexport function Page() {\n\treturn (\n\t\t<>\n\t\t\t

SSR

\n\t\t\t

This page is:

\n\t\t\t
    \n\t\t\t\t
  • Rendered to HTML and hydrated in the browser.
    • \n\t\t\t\t
  • \n\t\t\t\t\tInteractive. \n\t\t\t\t
    • \n\t\t\t
\n\t\t\t\n\t\t\t\tBlue text.\n\t\t\t

\n\t\t\n\t)\n}\n\nexport const hydrate = true\n" }, { "path": "examples/vpssr-linaria-solid/renderer/_default.page.client.tsx", "content": "import { render as solidRender, hydrate as solidHydrate } from 'solid-js/web'\nimport type { PageContextBuiltInClient } from 'vite-plugin-ssr/client' // When using Client Routing\nexport async function render(pageContext: PageContextBuiltInClient) {\n\tconst { Page, exports, isHydration } = pageContext\n\tif ('hydrate' in exports && isHydration) {\n\t\tconsole.log('hydrating')\n\t\tsolidHydrate(() => , document.body)\n\t\treturn\n\t}\n\tsolidRender(() => , document.body)\n}\nexport const clientRouting = true\n" }, { "path": "examples/vpssr-linaria-solid/renderer/_default.page.server.tsx", "content": "import { generateHydrationScript, renderToStream } from 'solid-js/web'\nimport { escapeInject, stampPipe, dangerouslySkipEscape } from 'vite-plugin-ssr'\nimport type { PageContextBuiltInClient } from 'vite-plugin-ssr/client' // When using Client Routing\n\nexport function render(pageContext: PageContextBuiltInClient) {\n\tif (pageContext.Page) {\n\t\tconst { Page } = pageContext\n\t\tconst { pipe } = renderToStream(() => )\n\n\t\tstampPipe(pipe, 'node-stream')\n\n return escapeInject`\n \n \n \n \n ${dangerouslySkipEscape(generateHydrationScript())}\n \n ${pipe}\n `\n\t}\n\n return escapeInject`\n \n \n \n \n \n \n `\n}\n" }, { "path": "examples/vpssr-linaria-solid/server.js", "content": "const express = require(\"express\");\nconst compression = require(\"compression\");\nconst { renderPage } = require(\"vite-plugin-ssr\");\n\nconst isProduction = process.env.NODE_ENV === \"production\";\n\nconst app = express();\napp.use(compression());\n\nasync function main () {\n if (isProduction) {\n const sirv = require(\"sirv\")\n app.use(sirv(`${__dirname}/dist/client`));\n } else {\n const vite = require(\"vite\");\n const server = await vite.createServer({\n root: __dirname,\n configFile: './vite.config.js',\n server: { middlewareMode: true },\n })\n app.use(server.middlewares);\n }\n\n app.get(\"*\", async (req, res, next) => {\n const pageContextInit = {\n urlOriginal: req.originalUrl,\n };\n const pageContext = await renderPage(pageContextInit);\n const { httpResponse } = pageContext;\n if (!httpResponse) return next();\n const { statusCode, contentType, earlyHints } = httpResponse;\n if (res.writeEarlyHints)\n res.writeEarlyHints({ link: earlyHints.map((e) => e.earlyHintLink) });\n res.status(statusCode).type(contentType);\n httpResponse.pipe(res);\n });\n\n const port = process.env.PORT || 3000;\n app.listen(port);\n console.log(`Server running at http://localhost:${port}`);\n}\nmain()\n" }, { "path": "examples/vpssr-linaria-solid/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"baseUrl\": \".\",\n \"target\": \"ESNext\",\n \"module\": \"ESNext\",\n \"jsx\": \"preserve\",\n \"noEmit\": true,\n \"allowSyntheticDefaultImports\": true,\n \"moduleResolution\": \"node\",\n // Misc\n \"esModuleInterop\": true,\n \"types\": [\n \"vite/client\"\n ],\n \"skipDefaultLibCheck\": true,\n \"skipLibCheck\": true,\n },\n \"exclude\": [\"node_modules\"]\n }\n" }, { "path": "examples/vpssr-linaria-solid/vite.config.js", "content": "import vite_ssr from 'vite-plugin-ssr/plugin';\nimport vite_wyw from '@wyw-in-js/vite';\nimport vite_solid from 'vite-plugin-solid';\n\nexport default (/** @type import('vite').ConfigEnv */ { mode }) => {\n const dev = mode === 'development';\n /** @type import('vite').UserConfig */\n const config = {\n plugins: [\n {\n ...vite_wyw({\n babelOptions: {\n presets: [\n 'solid',\n [\n '@babel/preset-typescript',\n {\n isTSX: true,\n allExtensions: true,\n },\n ],\n ],\n },\n }),\n enforce: 'pre',\n },\n vite_solid({\n dev: dev,\n hot: dev,\n ssr: true,\n }),\n vite_ssr({\n includeAssetsImportedByServer: true,\n prerender: {\n partial: true,\n noExtraDir: true,\n },\n }),\n ],\n };\n return config;\n};\n" }, { "path": "examples/webpack5/app.js", "content": "import 'linaria-website';\n" }, { "path": "examples/webpack5/babel.config.js", "content": "module.exports = {\n presets: ['@babel/preset-react'],\n};\n" }, { "path": "examples/webpack5/package.json", "content": "{\n \"private\": true,\n \"name\": \"webpack5-example\",\n \"version\": \"0.0.0\",\n \"license\": \"MIT\",\n \"main\": \"index.js\",\n \"dependencies\": {\n \"linaria-website\": \"workspace:^\"\n },\n \"devDependencies\": {\n \"@babel/core\": \"^7.23.5\",\n \"@wyw-in-js/webpack-loader\": \"^1.0.6\",\n \"babel-loader\": \"^9.1.0\",\n \"cross-env\": \"^7.0.3\",\n \"css-hot-loader\": \"^1.4.4\",\n \"css-loader\": \"^6.7.2\",\n \"file-loader\": \"^6.2.0\",\n \"mini-css-extract-plugin\": \"^2.7.0\",\n \"webpack\": \"^5.94.0\",\n \"webpack-cli\": \"^5.0.0\"\n },\n \"scripts\": {\n \"build\": \"cross-env NODE_ENV=production webpack\",\n \"preview\": \"pnpm build && pnpm dlx http-server .\"\n },\n \"author\": \"Anton Evzhakov\"\n}\n" }, { "path": "examples/webpack5/webpack.config.js", "content": "const path = require('path');\nconst webpack = require('webpack');\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\n\nconst dev = process.env.NODE_ENV !== 'production';\n\nmodule.exports = {\n mode: dev ? 'development' : 'production',\n devtool: 'source-map',\n entry: {\n app: './app',\n },\n output: {\n path: path.resolve('./dist'),\n filename: 'app.bundle.js',\n },\n optimization: {\n noEmitOnErrors: true,\n },\n plugins: [\n new webpack.DefinePlugin({\n 'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV) },\n }),\n new MiniCssExtractPlugin({ filename: 'styles.css' }),\n ],\n resolve: {\n extensions: ['.js', '.jsx', '.mjs'],\n },\n module: {\n rules: [\n {\n test: /\\.mjs$/,\n type: 'javascript/auto',\n },\n {\n test: /\\.jsx?$/,\n exclude: /node_modules/,\n use: [\n { loader: 'babel-loader' },\n {\n loader: '@wyw-in-js/webpack-loader',\n options: { sourceMap: dev },\n },\n ],\n },\n {\n test: /\\.css$/,\n use: [\n 'css-hot-loader',\n MiniCssExtractPlugin.loader,\n {\n loader: 'css-loader',\n options: { sourceMap: dev },\n },\n ],\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n use: [\n {\n loader: 'file-loader',\n options: {\n esModule: false,\n },\n },\n ],\n },\n ],\n },\n};\n" }, { "path": "greenkeeper.json", "content": "{\n \"groups\": {\n \"default\": {\n \"packages\": [\n \"package.json\",\n \"website/package.json\"\n ]\n }\n }\n}\n" }, { "path": "jest.config.js", "content": "module.exports = {\n testEnvironment: 'node',\n collectCoverageFrom: ['src/*.ts'],\n transformIgnorePatterns: ['node_modules/(?!@linaria)'],\n testPathIgnorePatterns: ['/__utils__/'],\n};\n" }, { "path": "link-wyw.sh", "content": "#!/bin/bash\n\n# Find package.json files in the current folder (excluding node_modules)\npackage_json_files=$(find . -name \"package.json\" ! -path \"*/node_modules/*\")\n\n# Loop through each package.json file found\nfor package_json_file in $package_json_files; do\n # Get the directory path of the package.json file\n package_dir=$(dirname \"$package_json_file\")\n\n # Get all @linaria/* dependencies\n linaria_dependencies=$(cat \"$package_json_file\" | jq -r '(.dependencies + .devDependencies) | with_entries(select(.key | startswith(\"@wyw-in-js\"))) | keys[]' 2>/dev/null)\n\n # Link @linaria dependencies\n if [[ $linaria_dependencies != \"null\" ]]; then\n for dep in $linaria_dependencies; do\n echo \"Running pnpm link --global $dep in $package_dir\"\n (cd \"$package_dir\" && pnpm link --global $dep)\n done\n fi\ndone\n" }, { "path": "package.json", "content": "{\n \"name\": \"umbrella\",\n \"version\": \"3.0.0-beta.19\",\n \"private\": true,\n \"homepage\": \"https://github.com/callstack/linaria#readme\",\n \"bugs\": \"https://github.com/callstack/linaria/issues\",\n \"repository\": \"git@github.com:callstack/linaria.git\",\n \"license\": \"MIT\",\n \"workspaces\": [\n \"./packages/*\",\n \"./website\"\n ],\n \"scripts\": {\n \"add-contributor\": \"all-contributors add\",\n \"bootstrap\": \"pnpm install\",\n \"check:all\": \"turbo run check:all --output-logs=new-only && pnpm lint && pnpm sp:check\",\n \"clean\": \"del 'packages/*/{coverage,dist,esm,lib,types,tsconfig.tsbuildinfo}'\",\n \"lint\": \"eslint --ext .js,.ts,.tsx .\",\n \"prepare\": \"turbo run build --output-logs=new-only\",\n \"release\": \"pnpm run prepare && pnpm changeset publish\",\n \"sp:check\": \"syncpack\",\n \"sp:fix\": \"syncpack format && syncpack fix-mismatches\",\n \"sp:format\": \"syncpack format\",\n \"sp:list\": \"syncpack list-mismatches\",\n \"test\": \"turbo run test\",\n \"test:coverage\": \"turbo run test -- -- --coverage\",\n \"test:dts\": \"turbo run test:dts\",\n \"typecheck\": \"turbo run typecheck\",\n \"website\": \"pnpm --filter=linaria-website\"\n },\n \"husky\": {\n \"hooks\": {\n \"commit-msg\": \"commitlint -E HUSKY_GIT_PARAMS\",\n \"pre-commit\": \"pnpm check:all\"\n }\n },\n \"resolutions\": {\n \"@typescript-eslint/experimental-utils\": \"^4.28.0\",\n \"git-raw-commits\": \"^2.0.3\"\n },\n \"dependencies\": {},\n \"devDependencies\": {\n \"@babel/cli\": \"^7.23.4\",\n \"@babel/core\": \"^7.23.5\",\n \"@babel/eslint-parser\": \"^7.23.3\",\n \"@babel/plugin-proposal-explicit-resource-management\": \"^7.23.3\",\n \"@babel/plugin-syntax-jsx\": \"^7.23.3\",\n \"@babel/preset-env\": \"^7.23.5\",\n \"@babel/preset-react\": \"^7.23.3\",\n \"@babel/preset-typescript\": \"^7.23.3\",\n \"@changesets/cli\": \"^2.22.0\",\n \"@commitlint/config-conventional\": \"^8.3.4\",\n \"@definitelytyped/dtslint\": \"^0.0.176\",\n \"@types/jest\": \"^28.1.0\",\n \"@types/node\": \"^17.0.39\",\n \"@types/resolve\": \"^1.20.6\",\n \"@typescript-eslint/eslint-plugin\": \"^6.6.0\",\n \"@typescript-eslint/parser\": \"^6.6.0\",\n \"all-contributors-cli\": \"^6.20.0\",\n \"babel-jest\": \"^29.6.2\",\n \"codecov\": \"^3.2.0\",\n \"commitlint\": \"^8.3.5\",\n \"cross-env\": \"^7.0.3\",\n \"del-cli\": \"^1.1.0\",\n \"eslint\": \"^8.48.0\",\n \"eslint-config-airbnb\": \"^19.0.4\",\n \"eslint-config-airbnb-typescript\": \"^17.1.0\",\n \"eslint-config-prettier\": \"^9.0.0\",\n \"eslint-plugin-import\": \"^2.28.1\",\n \"eslint-plugin-jsx-a11y\": \"^6.7.1\",\n \"eslint-plugin-prettier\": \"^5.0.0\",\n \"eslint-plugin-react\": \"^7.33.2\",\n \"eslint-plugin-react-hooks\": \"^4.6.0\",\n \"git-raw-commits\": \"^2.0.3\",\n \"husky\": \"^1.3.1\",\n \"jest\": \"^29.6.2\",\n \"prettier\": \"^3.0.3\",\n \"react\": \"^16.14.0\",\n \"syncpack\": \"^11.2.1\",\n \"tsup\": \"^7.2.0\",\n \"turbo\": \"^1.10.13\",\n \"typescript\": \"^5.2.2\"\n },\n \"engines\": {\n \"node\": \">=20.0.0\",\n \"pnpm\": \"^9.0.0\"\n },\n \"packageManager\": \"pnpm@9.15.9+sha256.cf86a7ad764406395d4286a6d09d730711720acc6d93e9dce9ac7ac4dc4a28a7\"\n}\n" }, { "path": "packages/atomic/CHANGELOG.md", "content": "# Change Log\n\n## 7.0.1\n\n### Patch Changes\n\n- Updated dependencies [b3331e45]\n - @linaria/react@7.0.1\n\n## 7.0.0\n\n### Major Changes\n\n- ab11ebb7: BREAKING: bump `@wyw-in-js/*` dependencies to `^1.0.0` (stable).\n\n This release updates Linaria's build-time evaluation engine (WyW). See https://wyw-in-js.dev/stability for practical guidance and common pitfalls.\n\n Notes:\n\n - Linaria 7 requires Node.js 20+ (aligned with WyW 1.x).\n - If you import JSON from code that is evaluated by WyW, add `.json` to `extensions` and ensure `.json` is ignored by evaluation rules (so it's parsed as JSON, not by Babel).\n - Rollup users: WyW 1.x serializes `transform()` by default (`serializeTransform: true`). If you hit Rollup \"Unexpected early exit\" (unresolved plugin promises / deadlock during resolve), set `serializeTransform: false` (see `examples/rollup/rollup.config.mjs`).\n - WyW 1.x promotes fully-statically-evaluatable modules to `only: ['*']` and can re-evaluate modules when cached exports are incomplete (cached export values might not be reused).\n\n### Patch Changes\n\n- Updated dependencies [ab11ebb7]\n- Updated dependencies [654d8590]\n - @linaria/core@7.0.0\n - @linaria/react@7.0.0\n\n## 6.3.0\n\n### Minor Changes\n\n- 281ca4f5: The new version of wyw-in-js, with the support of a configurable code remover, can help prevent compilation errors and improve build time.\n\n### Patch Changes\n\n- Updated dependencies [bd8d45fd]\n- Updated dependencies [281ca4f5]\n - @linaria/react@6.3.0\n - @linaria/core@6.3.0\n\n## 6.2.0\n\n### Minor Changes\n\n- a3dcee2e: Update wyw-in-js to 0.5.3\n\n### Patch Changes\n\n- Updated dependencies [a3dcee2e]\n - @linaria/core@6.2.0\n - @linaria/react@6.2.1\n\n## 6.1.1\n\n### Patch Changes\n\n- Updated dependencies [fd60b5de]\n - @linaria/react@6.2.0\n\n## 6.1.0\n\n### Minor Changes\n\n- 8ba655d3: Bump wyw-in-js to 0.4.0. The full list of changes https://github.com/Anber/wyw-in-js/compare/%40wyw-in-js/transform%400.2.3...%40wyw-in-js/transform%400.4.0\n\n### Patch Changes\n\n- 8d4ebd33: chore: bump @wyw-in-js/\\* packages\n- Updated dependencies [8d4ebd33]\n- Updated dependencies [8ba655d3]\n - @linaria/core@6.1.0\n - @linaria/react@6.1.0\n\n## 6.0.0\n\n### Major Changes\n\n- 60e6b7e2: Stylis has been upgraded from v3 to v4.\n- 2ac94b99: BREAKING CHANGE: Linaria has been migrated to wyw-in-js.\n\n # Migration Guide\n\n ## For Users\n\n The main breaking change is that all tooling has been moved from the `@linaria` scope to the `@wyw-in-js` scope. This means that you will need to update your dependencies as follows:\n\n | Old | New |\n | ------------------------ | ------------------------- |\n | @linaria/babel-preset | @wyw-in-js/babel-preset |\n | @linaria/cli | @wyw-in-js/cli |\n | @linaria/esbuild | @wyw-in-js/esbuild |\n | @linaria/rollup | @wyw-in-js/rollup |\n | @linaria/shaker | discontinued |\n | @linaria/vite | @wyw-in-js/vite |\n | @linaria/webpack4-loader | discontinued |\n | @linaria/webpack5-loader | @wyw-in-js/webpack-loader |\n\n There is no longer a need to install `@linaria/shaker` as it is now part of `@wyw-in-js/transform`, which will be installed automatically with the bundler plugins.\n\n The configuration file has been renamed from `linaria.config.js` (`linariarc`) to `wyw-in-js.config.js` (`.wyw-in-jsrc`).\n\n ## For Custom Processor Developers\n\n Base classes for processors and most helpers have been moved to `@wyw-in-js/processor-utils`.\n\n All APIs that had `linaria` in their names have been renamed:\n\n - The field that stores meta information in runtime has been renamed from `__linaria` to `__wyw_meta`\n - The export with all interpolated values has been renamed from `__linariaPreval` to `__wywPreval`\n - The caller name in Babel has been renamed from `linaria` to `wyw-in-js`\n\n For additional information, please visit the [wyw-in-js.dev](https://wyw-in-js.dev).\n\n### Patch Changes\n\n- Updated dependencies [2ac94b99]\n - @linaria/core@6.0.0\n - @linaria/react@6.0.0\n\n## 5.0.3\n\n### Patch Changes\n\n- Updated dependencies [4b083b7c]\n - @linaria/react@5.0.3\n\n## 5.0.2\n\n### Patch Changes\n\n- Updated dependencies [1e889937]\n- Updated dependencies [4992c14d]\n- Updated dependencies [70000ec8]\n- Updated dependencies [1e889937]\n- Updated dependencies [5a32f4fd]\n- Updated dependencies [727dc2bd]\n- Updated dependencies [25ba1344]\n- Updated dependencies [5a32f4fd]\n - @linaria/react@5.0.2\n - @linaria/utils@5.0.2\n - @linaria/tags@5.0.2\n - @linaria/core@5.0.2\n\n## 5.0.1\n\n### Patch Changes\n\n- Updated dependencies [6fb6eb69]\n - @linaria/utils@5.0.1\n - @linaria/core@5.0.1\n - @linaria/react@5.0.1\n - @linaria/tags@5.0.1\n\n## 5.0.0\n\n### Major Changes\n\n- 88e07613: Rewritten dependecny tree processing with support for wildcard re-exports.\n- cb853e14: All processing stages were merged into one generators-based processor. It allows the implementation of more complex workflows to support features like dynamic imports and re-exports.\n\n### Minor Changes\n\n- 9cb4143d: Refactoring of the 1st stage of transformation. It opens the road to processing wildcard reexports.\n\n### Patch Changes\n\n- 2a1e24a0: Upgrade TypeScript to 5.2\n- Updated dependencies [9cb4143d]\n- Updated dependencies [ae162f46]\n- Updated dependencies [88e07613]\n- Updated dependencies [b3ef8c1f]\n- Updated dependencies [f8b9bff5]\n- Updated dependencies [63902332]\n- Updated dependencies [aa100453]\n- Updated dependencies [9bb782d0]\n- Updated dependencies [2a1e24a0]\n- Updated dependencies [16320d71]\n- Updated dependencies [cb853e14]\n - @linaria/core@5.0.0\n - @linaria/logger@5.0.0\n - @linaria/react@5.0.0\n - @linaria/tags@5.0.0\n - @linaria/utils@5.0.0\n\n## 4.5.4\n\n### Patch Changes\n\n- Updated dependencies [10bcd241]\n - @linaria/utils@4.5.3\n - @linaria/core@4.5.4\n - @linaria/react@4.5.4\n - @linaria/tags@4.5.4\n\n## 4.5.3\n\n### Patch Changes\n\n- 79557248: Nothing has changed. Just moved some utils and types from babel to utils package.\n- e59bf809: Shaker mistakenly counts references in types as valuable and keeps referenced variables alive.\n- Updated dependencies [79557248]\n- Updated dependencies [b191f543]\n- Updated dependencies [e59bf809]\n- Updated dependencies [520ba8da]\n- Updated dependencies [ae3727f9]\n- Updated dependencies [dca076ef]\n - @linaria/core@4.5.3\n - @linaria/react@4.5.3\n - @linaria/tags@4.5.3\n - @linaria/utils@4.5.2\n\n## 4.5.2\n\n### Patch Changes\n\n- Updated dependencies [85e74df6]\n- Updated dependencies [1bf5c5b8]\n - @linaria/utils@4.5.1\n - @linaria/core@4.5.2\n - @linaria/react@4.5.2\n - @linaria/tags@4.5.2\n\n## 4.5.1\n\n### Patch Changes\n\n- Updated dependencies [ceca1611]\n- Updated dependencies [13258306]\n - @linaria/react@4.5.1\n - @linaria/tags@4.5.1\n - @linaria/core@4.5.1\n\n## 4.5.0\n\n### Minor Changes\n\n- 16c057df: Breaking Change: Performance Optimization for `styled`\n\n When a component is wrapped in `styled`, Linaria needs to determine if that component is already a styled component. To accomplish this, the wrapped component is included in the list of variables for evaluation, along with the interpolated values used in styles. The issue arises when a wrapped component, even if it is not styled, brings along a substantial dependency tree. This situation is particularly evident when using `styled` to style components from third-party UI libraries.\n\n To address this problem, Linaria will now examine the import location of the component and check if there is an annotation in the `package.json` file of the package containing the components. This annotation indicates whether the package includes other Linaria components. If there is no such annotation, Linaria will refrain from evaluating the component.\n\n Please note that this Breaking Change solely affects developers of component libraries. In order for users to style components from your library, you must include the `linaria.components` property in the library's `package.json` file. This property should have a mask that covers all imported files with components. Here's an example of how to specify it:\n\n ```json\n \"linaria\": {\n \"components\": \"**/*\"\n }\n ```\n\n### Patch Changes\n\n- af5bb92d: The end of support for Node.js 14. Migration to pnpm 8.\n- Updated dependencies [890b4aca]\n- Updated dependencies [05ad266c]\n- Updated dependencies [16c057df]\n- Updated dependencies [af5bb92d]\n- Updated dependencies [10859924]\n - @linaria/utils@4.5.0\n - @linaria/react@4.5.0\n - @linaria/tags@4.5.0\n - @linaria/core@4.5.0\n - @linaria/logger@4.5.0\n\n## 4.2.10\n\n### Patch Changes\n\n- Updated dependencies [54ab61b2]\n - @linaria/react@4.3.8\n - @linaria/tags@4.3.5\n - @linaria/utils@4.3.4\n - @linaria/core@4.2.10\n\n## 4.2.9\n\n### Patch Changes\n\n- 34029088: Usages of `styled` and `css` in Jest no longer trigger the \"Using the … tag in runtime is not supported\" exception.\n- Updated dependencies [2e966f23]\n- Updated dependencies [1c3f309d]\n- Updated dependencies [dbe250b5]\n- Updated dependencies [34029088]\n - @linaria/tags@4.3.4\n - @linaria/react@4.3.7\n - @linaria/utils@4.3.3\n - @linaria/core@4.2.9\n\n## 4.2.8\n\n### Patch Changes\n\n- Updated dependencies [a3ad617f]\n - @linaria/react@4.3.6\n - @linaria/tags@4.3.3\n - @linaria/core@4.2.8\n\n## 4.2.7\n\n### Patch Changes\n\n- a2b618bc: add react as an optional peerDependency due to dependency on @atomic/react\n- Updated dependencies [f9df4ed8]\n - @linaria/utils@4.3.2\n - @linaria/core@4.2.7\n - @linaria/react@4.3.5\n - @linaria/tags@4.3.2\n\n## 4.2.6\n\n### Patch Changes\n\n- Updated dependencies [28f3f93d]\n- Updated dependencies [71a5b351]\n- Updated dependencies [61d49a39]\n - @linaria/tags@4.3.1\n - @linaria/utils@4.3.1\n - @linaria/core@4.2.6\n - @linaria/react@4.3.4\n\n## 4.2.5\n\n### Patch Changes\n\n- 61fe2560: Do not crash when no styles are extracted.\n- Updated dependencies [3ce985e0]\n- Updated dependencies [d11174d0]\n - @linaria/tags@4.3.0\n - @linaria/utils@4.3.0\n - @linaria/core@4.2.5\n - @linaria/react@4.3.3\n\n## 4.2.4\n\n### Patch Changes\n\n- Updated dependencies [315f0366]\n - @linaria/utils@4.2.6\n - @linaria/core@4.2.4\n - @linaria/react@4.3.2\n - @linaria/tags@4.2.2\n\n## 4.2.3\n\n### Patch Changes\n\n- 5edde648: Upgrade Babel to support TypeScript 4.9. Fixes #1133.\n- Updated dependencies [922f20d6]\n- Updated dependencies [5edde648]\n- Updated dependencies [b9e49b74]\n - @linaria/react@4.3.1\n - @linaria/core@4.2.3\n - @linaria/tags@4.2.1\n - @linaria/utils@4.2.5\n\n## 4.2.2\n\n### Patch Changes\n\n- Updated dependencies [63f56d47]\n- Updated dependencies [963508a2]\n- Updated dependencies [c26d4667]\n - @linaria/react@4.3.0\n - @linaria/tags@4.2.0\n - @linaria/utils@4.2.4\n - @linaria/core@4.2.2\n\n## 4.2.1\n\n### Patch Changes\n\n- Updated dependencies [cc2f87a8]\n- Updated dependencies [6de22792]\n - @linaria/utils@4.2.3\n - @linaria/react@4.2.1\n - @linaria/core@4.2.1\n - @linaria/tags@4.1.5\n\n## 4.2.0\n\n### Minor Changes\n\n- 1e88e95d: Support for ECMAScript modules. Fixes #904 and #1043.\n\n### Patch Changes\n\n- Updated dependencies [1e88e95d]\n - @linaria/core@4.2.0\n - @linaria/react@4.2.0\n\n## 4.1.5\n\n### Patch Changes\n\n- 87ffe61c: The new `variableNameSlug` option that allows to customize css variable names (closes #1053).\n- Updated dependencies [8a8be242]\n- Updated dependencies [8a8be242]\n- Updated dependencies [08304e09]\n- Updated dependencies [87ffe61c]\n - @linaria/utils@4.2.2\n - @linaria/core@4.1.4\n - @linaria/react@4.1.5\n - @linaria/tags@4.1.4\n\n## 4.1.4\n\n### Patch Changes\n\n- Updated dependencies [24b4a4bd]\n - @linaria/utils@4.2.1\n - @linaria/core@4.1.3\n - @linaria/tags@4.1.3\n - @linaria/react@4.1.4\n\n## 4.1.3\n\n### Patch Changes\n\n- Updated dependencies [8590e134]\n- Updated dependencies [f7351b09]\n- Updated dependencies [c0bd271a]\n- Updated dependencies [8f90fa75]\n- Updated dependencies [ac0991a6]\n - @linaria/utils@4.2.0\n - @linaria/react@4.1.3\n - @linaria/tags@4.1.2\n - @linaria/core@4.1.2\n\n## 4.1.2\n\n### Patch Changes\n\n- Updated dependencies [50bc0c79]\n - @linaria/utils@4.1.1\n - @linaria/core@4.1.1\n - @linaria/tags@4.1.1\n - @linaria/react@4.1.2\n\n## 4.1.1\n\n### Patch Changes\n\n- Updated dependencies [2abc55b3]\n - @linaria/react@4.1.1\n\n## 4.1.0\n\n### Patch Changes\n\n- Updated dependencies [92f6d871]\n - @linaria/utils@4.1.0\n - @linaria/core@4.1.0\n - @linaria/tags@4.1.0\n - @linaria/react@4.1.0\n\n## 4.0.0\n\n### Major Changes\n\n- bc0cbeea: A completely new async mode with native support for Vite, Rollup, esbuild and Webpack resolvers.\n\n BREAKING CHANGES: Despite the fact, that it should be fully compatible with 3.0 and 2.0 branches, the new version of styles evaluator can have some serious bugs which can make your project unbuildable (however, since there is no runtime, if the build is finished successfully, everything will continue work as it was on 2.0 and 3.0). If you face some problems please let us know and we will fix it as soon as possible.\n\n### Patch Changes\n\n- 8be5650d: The repo has been migrated to PNPM and Turborepo\n- ea41d440: New package @linaria/tags that contains all abstract logic for tags processors.\n- 9a50c1c1: Linaria now removes all unused css-related code from the runtime.\n- 12d35cb9: `processors` aliases have been lost during publishing. (fixes #984)\n- 17c83e34: Aliases for environments without the support of `exports` in package.json.\n- Updated dependencies [f0cddda4]\n - @linaria/core@4.0.0\n - @linaria/logger@4.0.0\n - @linaria/react@4.0.0\n - @linaria/utils@4.0.0\n - @linaria/tags@4.0.0\n\n## 3.0.0-beta.21\n\n### Patch Changes\n\n- 17c83e34: Aliases for environments without the support of `exports` in package.json.\n- Updated dependencies [17c83e34]\n - @linaria/react@3.0.0-beta.21\n - @linaria/core@3.0.0-beta.21\n\n## 3.0.0-beta.20\n\n### Patch Changes\n\n- 8be5650d: The repo has been migrated to PNPM and Turborepo\n- Updated dependencies\n - @linaria/core@3.0.0-beta.20\n - @linaria/logger@3.0.0-beta.20\n - @linaria/react@3.0.0-beta.20\n - @linaria/utils@3.0.0-beta.20\n\n# [3.0.0-beta.19](https://github.com/callstack/linaria/compare/v3.0.0-beta.18...v3.0.0-beta.19) (2022-06-03)\n\n### Features\n\n- **atomic:** add support for atomic using styled API ([#966](https://github.com/callstack/linaria/issues/966)) ([f59860b](https://github.com/callstack/linaria/commit/f59860b09c5f91b0423dbf188e5f8aaaef38a6b5))\n- **babel:** api for custom tags ([#976](https://github.com/callstack/linaria/issues/976)) ([3285ccc](https://github.com/callstack/linaria/commit/3285ccc1d00449b78b3fc74087528cd38cbdd116))\n- **babel:** new way for detecting tag imports ([#974](https://github.com/callstack/linaria/issues/974)) ([3305cfb](https://github.com/callstack/linaria/commit/3305cfb0c0f65abdacceeb7e6bad118c59f7d551))\n\n# [3.0.0-beta.18](https://github.com/callstack/linaria/compare/v3.0.0-beta.17...v3.0.0-beta.18) (2022-04-01)\n\n### Features\n\n- **atomic:** add property priorities ([#950](https://github.com/callstack/linaria/issues/950)) ([c44becb](https://github.com/callstack/linaria/commit/c44becb11b2eec795b68c2b3d0715672ba4b3888))\n- **atomic:** add support for at-rules, keyframes and pseudo classes ([#913](https://github.com/callstack/linaria/issues/913)) ([dee7fa1](https://github.com/callstack/linaria/commit/dee7fa14ea912224cac9f0673be7464e93571a73))\n- **atomic:** string serialization of atoms ([#934](https://github.com/callstack/linaria/issues/934)) ([ef19ccb](https://github.com/callstack/linaria/commit/ef19ccb384cb7dbee561e789f637b0289d4d224c))\n\n# [3.0.0-beta.15](https://github.com/callstack/linaria/compare/v3.0.0-beta.14...v3.0.0-beta.15) (2021-11-29)\n\n### Features\n\n- **atomic:** create an atomic package for the css API ([#867](https://github.com/callstack/linaria/issues/867)) ([4773bcf](https://github.com/callstack/linaria/commit/4773bcf4b14f08cdc4d2b612654b962cdfc97eaa))\n" }, { "path": "packages/atomic/README.md", "content": "

\n \"Linaria\"\n

\n\n

\nZero-runtime CSS in JS library.\n

\n\n---\n\n### 📖 Please refer to the [GitHub](https://github.com/callstack/linaria#readme) for full documentation.\n\n## Features\n\n- Write CSS in JS, but with **zero runtime**, CSS is extracted to CSS files during build\n- Familiar **CSS syntax** with Sass like nesting\n- Use **dynamic prop based styles** with the React bindings, uses CSS variables behind the scenes\n- Easily find where the style was defined with **CSS sourcemaps**\n- **Lint your CSS** in JS with [stylelint](https://github.com/stylelint/stylelint)\n- Use **JavaScript for logic**, no CSS preprocessor needed\n- Optionally use any **CSS preprocessor** such as Sass or PostCSS\n\n**[Why use Linaria](../../docs/BENEFITS.md)**\n\n## Installation\n\n```sh\nnpm install @linaria/core @linaria/react @linaria/babel-preset\n```\n\nor\n\n```sh\nyarn add @linaria/core @linaria/react @linaria/babel-preset\n```\n" }, { "path": "packages/atomic/babel.config.js", "content": "const config = require('../../babel.config');\n\nmodule.exports = config;\n" }, { "path": "packages/atomic/package.json", "content": "{\n \"name\": \"@linaria/atomic\",\n \"version\": \"7.0.1\",\n \"description\": \"Blazing fast zero-runtime CSS in JS library\",\n \"keywords\": [\n \"css\",\n \"css-in-js\",\n \"linaria\",\n \"react\",\n \"styled-components\"\n ],\n \"homepage\": \"https://github.com/callstack/linaria#readme\",\n \"bugs\": \"https://github.com/callstack/linaria/issues\",\n \"repository\": \"git@github.com:callstack/linaria.git\",\n \"license\": \"MIT\",\n \"sideEffects\": false,\n \"exports\": {\n \"./package.json\": \"./package.json\",\n \".\": {\n \"types\": \"./types/index.d.ts\",\n \"import\": \"./dist/index.mjs\",\n \"default\": \"./dist/index.js\"\n },\n \"./*\": {\n \"types\": \"./types/*.d.ts\",\n \"import\": \"./dist/*.mjs\",\n \"default\": \"./dist/*.js\"\n }\n },\n \"main\": \"dist/index.js\",\n \"module\": \"dist/index.mjs\",\n \"types\": \"types/index.d.ts\",\n \"files\": [\n \"dist/\",\n \"processors/\",\n \"types/\"\n ],\n \"wyw-in-js\": {\n \"tags\": {\n \"css\": \"./dist/processors/css.js\",\n \"styled\": \"./dist/processors/styled.js\"\n }\n },\n \"scripts\": {\n \"build\": \"pnpm build:dist && pnpm build:declarations\",\n \"build:declarations\": \"tsc --emitDeclarationOnly --outDir types\",\n \"build:dist\": \"tsup --format cjs,esm\",\n \"typecheck\": \"tsc --noEmit --composite false\",\n \"watch\": \"pnpm build:dist --watch & pnpm build:declarations --watch\"\n },\n \"dependencies\": {\n \"@linaria/core\": \"workspace:^\",\n \"@linaria/react\": \"workspace:^\",\n \"@wyw-in-js/processor-utils\": \"^1.0.4\",\n \"@wyw-in-js/shared\": \"^1.0.4\",\n \"known-css-properties\": \"^0.24.0\",\n \"postcss\": \"^8.4.31\",\n \"stylis\": \"^4.3.0\",\n \"ts-invariant\": \"^0.10.3\"\n },\n \"devDependencies\": {\n \"@babel/types\": \"^7.23.5\",\n \"@types/node\": \"^17.0.39\",\n \"@types/stylis\": \"^4.2.1\"\n },\n \"peerDependencies\": {\n \"react\": \">=16\"\n },\n \"peerDependenciesMeta\": {\n \"react\": {\n \"optional\": true\n }\n },\n \"engines\": {\n \"node\": \">=20.0.0\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"tsup\": {\n \"entry\": [\n \"src/index.ts\",\n \"src/processors/css.ts\",\n \"src/processors/styled.ts\"\n ],\n \"splitting\": false,\n \"sourcemap\": true,\n \"clean\": true\n }\n}\n" }, { "path": "packages/atomic/processors/css.js", "content": "Object.defineProperty(exports, '__esModule', {\n value: true,\n});\n\nexports.default = require('../dist/processors/css').default;\n" }, { "path": "packages/atomic/processors/styled.js", "content": "Object.defineProperty(exports, '__esModule', {\n value: true,\n});\n\nexports.default = require('../dist/processors/styled').default;\n" }, { "path": "packages/atomic/src/CSSProperties.ts", "content": "export type CSSProperties = {\n [key: string]: string | number | CSSProperties;\n};\n" }, { "path": "packages/atomic/src/css.ts", "content": "import type { LinariaClassName } from '@linaria/core';\n\nimport type { CSSProperties } from './CSSProperties';\n\ntype CSS = (\n strings: TemplateStringsArray,\n ...exprs: Array\n) => LinariaClassName;\n\nlet idx = 0;\n\nexport const css: CSS = () => {\n if (process.env.NODE_ENV === 'test') {\n // eslint-disable-next-line no-plusplus\n return `mocked-atomic-css-${idx++}` as LinariaClassName;\n }\n\n throw new Error(\n 'Using the \"css\" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly.'\n );\n};\n\nexport default css;\n" }, { "path": "packages/atomic/src/index.ts", "content": "export { default as css } from './css';\nexport { styled } from '@linaria/react';\nexport { cx } from '@linaria/core';\n\nexport type { CSSProperties } from './CSSProperties';\n" }, { "path": "packages/atomic/src/processors/css.ts", "content": "import type { SourceLocation } from '@babel/types';\nimport type { Rules, ValueCache } from '@wyw-in-js/processor-utils';\nimport { logger } from '@wyw-in-js/shared';\n\nimport CssProcessor from '@linaria/core/processors/css';\n\nimport atomize from './helpers/atomize';\n\nconst debug = logger.extend('AtomicCssProcessor');\n\nexport default class AtomicCssProcessor extends CssProcessor {\n #classes: string | undefined;\n\n private get classes(): string {\n if (typeof this.#classes !== 'undefined') {\n return this.#classes;\n }\n\n throw new Error('Styles are not extracted yet. Please call `build` first.');\n }\n\n public override doRuntimeReplacement(): void {\n this.replacer(this.astService.stringLiteral(this.classes), false);\n }\n\n public override extractRules(\n valueCache: ValueCache,\n cssText: string,\n loc?: SourceLocation | null\n ): Rules {\n const rules: Rules = {};\n\n const atomicRules = atomize(cssText, false);\n atomicRules.forEach((rule) => {\n // eslint-disable-next-line no-param-reassign\n rules[rule.cssText] = {\n cssText: rule.cssText,\n start: loc?.start ?? null,\n className: this.className!,\n displayName: this.displayName!,\n atom: true,\n };\n\n debug('extracted-atomic-rule:\\n%s', rule.cssText);\n });\n\n this.#classes = atomicRules\n // Some atomic rules produced (eg. keyframes) don't have class names, and they also don't need to appear in the object\n .filter((rule) => !!rule.className)\n .map((rule) => rule.className!)\n .join(' ');\n\n return rules;\n }\n}\n" }, { "path": "packages/atomic/src/processors/helpers/atomize.ts", "content": "import { slugify } from '@wyw-in-js/shared';\nimport { all as knownProperties } from 'known-css-properties';\nimport type { Document, AtRule, Container, Rule } from 'postcss';\nimport postcss from 'postcss';\nimport { compile, serialize, stringify } from 'stylis';\n\nimport { getPropertyPriority } from './propertyPriority';\n\nconst knownPropertiesMap = knownProperties.reduce(\n (acc: { [property: string]: number }, property, i) => {\n acc[property] = i;\n return acc;\n },\n {}\n);\n\nfunction hashProperty(property: string) {\n const index = knownPropertiesMap[property];\n // If it's a known property, let's use the index to cut down the length of the hash.\n // otherwise, slugify\n if (index !== undefined) {\n return index.toString(36); // base 36 so that we get a-z,0-9\n }\n return slugify(property);\n}\n\nconst parseCss = (cssText: string) => {\n try {\n return postcss.parse(cssText);\n } catch (e) {\n if (e instanceof Error) {\n throw new Error(`Error parsing CSS: ${e.message}\\nCSS:\\n${cssText}`);\n }\n\n throw new Error(`Unknown error parsing CSS.\\nCSS:\\n${cssText}`);\n }\n};\n\nexport default function atomize(cssText: string, hasPriority = false) {\n const atomicRules: {\n className?: string;\n cssText: string;\n property: string;\n }[] = [];\n\n const stylesheet = parseCss(cssText);\n\n // We want to extract all keyframes and leave them as-is.\n // This isn't scoped locally yet\n stylesheet.walkAtRules('keyframes', (atRule) => {\n atRule.remove();\n atomicRules.push({\n property: atRule.name,\n cssText: atRule.toString(),\n });\n });\n\n stylesheet.walkDecls((decl) => {\n let thisParent: Document | Container | undefined = decl.parent;\n const parents: (Document | Container)[] = [];\n const atomicProperty = [decl.prop];\n let hasAtRule = false;\n\n // Traverse the declarations parents, and collect them all.\n while (thisParent && thisParent !== stylesheet) {\n parents.unshift(thisParent);\n if (thisParent.type === 'atrule') {\n hasAtRule = true;\n // @media queries, @supports etc.\n atomicProperty.push(\n (thisParent as AtRule).name,\n (thisParent as AtRule).params\n );\n } else if (thisParent.type === 'rule') {\n // pseudo classes etc.\n atomicProperty.push((thisParent as Rule).selector);\n }\n\n thisParent = thisParent.parent;\n }\n\n // Create a new stylesheet that contains *just* the extracted atomic rule and wrapping selectors, eg.\n // `@media (max-width: 400px) { background: red; }`, or\n // `&:hover { background: red; }`, or\n // `background: red;`\n // We do this so we can run it through stylis, to produce a full atom, eg.\n // `@media (max-width: 400px) { .atm_foo { background: red; } }`\n const root = postcss.root();\n let container: Document | Container = root;\n parents.forEach((parent) => {\n const newNode = parent.clone();\n newNode.removeAll();\n container.append(newNode);\n container = newNode;\n });\n container.append(decl.clone());\n\n const css = root.toString();\n const propertySlug = hashProperty([...atomicProperty].join(';'));\n const valueSlug = slugify(decl.value);\n const className = `atm_${propertySlug}_${valueSlug}`;\n\n const propertyPriority =\n getPropertyPriority(decl.prop) +\n (hasAtRule ? 1 : 0) +\n (hasPriority ? 1 : 0);\n const selector = `.${className}`.repeat(propertyPriority);\n const processedCss = serialize(compile(`${selector} {${css}}`), stringify);\n\n atomicRules.push({\n property: atomicProperty.join(' '),\n className,\n cssText: processedCss,\n });\n });\n\n return atomicRules;\n}\n" }, { "path": "packages/atomic/src/processors/helpers/propertyPriority.ts", "content": "const shorthandProperties = {\n // The `all` property resets everything, and should effectively have priority zero.\n // In practice, this can be achieved by using: div { all: ... } to have even less specificity, but to avoid duplicating all selectors, we just let it be\n // 'all': []\n animation: [\n 'animation-name',\n 'animation-duration',\n 'animation-timing-function',\n 'animation-delay',\n 'animation-iteration-count',\n 'animation-direction',\n 'animation-fill-mode',\n 'animation-play-state',\n ],\n background: [\n 'background-attachment',\n 'background-clip',\n 'background-color',\n 'background-image',\n 'background-origin',\n 'background-position',\n 'background-repeat',\n 'background-size',\n ],\n border: ['border-color', 'border-style', 'border-width'],\n 'border-block-end': [\n 'border-block-end-color',\n 'border-block-end-style',\n 'border-block-end-width',\n ],\n 'border-block-start': [\n 'border-block-start-color',\n 'border-block-start-style',\n 'border-block-start-width',\n ],\n 'border-bottom': [\n 'border-bottom-color',\n 'border-bottom-style',\n 'border-bottom-width',\n ],\n 'border-color': [\n 'border-bottom-color',\n 'border-left-color',\n 'border-right-color',\n 'border-top-color',\n ],\n 'border-image': [\n 'border-image-outset',\n 'border-image-repeat',\n 'border-image-slice',\n 'border-image-source',\n 'border-image-width',\n ],\n 'border-inline-end': [\n 'border-inline-end-color',\n 'border-inline-end-style',\n 'border-inline-end-width',\n ],\n 'border-inline-start': [\n 'border-inline-start-color',\n 'border-inline-start-style',\n 'border-inline-start-width',\n ],\n 'border-left': [\n 'border-left-color',\n 'border-left-style',\n 'border-left-width',\n ],\n 'border-radius': [\n 'border-top-left-radius',\n 'border-top-right-radius',\n 'border-bottom-right-radius',\n 'border-bottom-left-radius',\n ],\n 'border-right': [\n 'border-right-color',\n 'border-right-style',\n 'border-right-width',\n ],\n 'border-style': [\n 'border-bottom-style',\n 'border-left-style',\n 'border-right-style',\n 'border-top-style',\n ],\n 'border-top': ['border-top-color', 'border-top-style', 'border-top-width'],\n 'border-width': [\n 'border-bottom-width',\n 'border-left-width',\n 'border-right-width',\n 'border-top-width',\n ],\n 'column-rule': [\n 'column-rule-width',\n 'column-rule-style',\n 'column-rule-color',\n ],\n columns: ['column-count', 'column-width'],\n flex: ['flex-grow', 'flex-shrink', 'flex-basis'],\n 'flex-flow': ['flex-direction', 'flex-wrap'],\n font: [\n 'font-family',\n 'font-size',\n 'font-stretch',\n 'font-style',\n 'font-variant',\n 'font-weight',\n 'line-height',\n ],\n gap: ['row-gap', 'column-gap'],\n grid: [\n 'grid-auto-columns',\n 'grid-auto-flow',\n 'grid-auto-rows',\n 'grid-template-areas',\n 'grid-template-columns',\n 'grid-template-rows',\n ],\n 'grid-area': [\n 'grid-row-start',\n 'grid-column-start',\n 'grid-row-end',\n 'grid-column-end',\n ],\n 'grid-column': ['grid-column-end', 'grid-column-start'],\n 'grid-row': ['grid-row-end', 'grid-row-start'],\n 'grid-template': [\n 'grid-template-areas',\n 'grid-template-columns',\n 'grid-template-rows',\n ],\n 'list-style': ['list-style-image', 'list-style-position', 'list-style-type'],\n margin: ['margin-bottom', 'margin-left', 'margin-right', 'margin-top'],\n mask: [\n 'mask-clip',\n 'mask-composite',\n 'mask-image',\n 'mask-mode',\n 'mask-origin',\n 'mask-position',\n 'mask-repeat',\n 'mask-size',\n ],\n offset: [\n 'offset-anchor',\n 'offset-distance',\n 'offset-path',\n 'offset-position',\n 'offset-rotate',\n ],\n outline: ['outline-color', 'outline-style', 'outline-width'],\n overflow: ['overflow-x', 'overflow-y'],\n padding: ['padding-bottom', 'padding-left', 'padding-right', 'padding-top'],\n 'place-content': ['align-content', 'justify-content'],\n 'place-items': ['align-items', 'justify-items'],\n 'place-self': ['align-self', 'justify-self'],\n 'scroll-margin': [\n 'scroll-margin-bottom',\n 'scroll-margin-left',\n 'scroll-margin-right',\n 'scroll-margin-top',\n ],\n 'scroll-padding': [\n 'scroll-padding-bottom',\n 'scroll-padding-left',\n 'scroll-padding-right',\n 'scroll-padding-top',\n ],\n 'text-decoration': [\n 'text-decoration-color',\n 'text-decoration-line',\n 'text-decoration-style',\n 'text-decoration-thickness',\n ],\n 'text-emphasis': ['text-emphasis-color', 'text-emphasis-style'],\n transition: [\n 'transition-delay',\n 'transition-duration',\n 'transition-property',\n 'transition-timing-function',\n ],\n};\n\n// Get the property priority: the higher the priority, the higher the resulting\n// specificity of the atom. For example, if we had:\n//\n// import { css } from '@linaria/atomic';\n// css`\n// background-color: blue;\n// background: red;\n// `;\n//\n// we would produce:\n//\n// .atm_a.atm_a { background-color: blue }\n// .atm_b { background: red }\n//\n// and so the more specific selector (.atm_a.atm_a) would win\nexport function getPropertyPriority(property: string) {\n const longhands = Object.values(shorthandProperties).reduce(\n (a, b) => [...a, ...b],\n []\n );\n\n return longhands.includes(property) ? 2 : 1;\n}\n" }, { "path": "packages/atomic/src/processors/styled.ts", "content": "import type { SourceLocation } from '@babel/types';\nimport type { Rules, ValueCache } from '@wyw-in-js/processor-utils';\nimport { logger, hasEvalMeta } from '@wyw-in-js/shared';\n\nimport type { IProps } from '@linaria/react/processors/styled';\nimport StyledProcessor from '@linaria/react/processors/styled';\n\nimport atomize from './helpers/atomize';\n\nconst debug = logger.extend('AtomicStyledProcessor');\n\nexport default class AtomicStyledProcessor extends StyledProcessor {\n #classes: string | undefined;\n\n private get classes(): string {\n if (this.#classes) {\n return this.#classes;\n }\n\n throw new Error(\n 'Styles are not extracted yet. Please call `extractRules` first.'\n );\n }\n\n public override extractRules(\n valueCache: ValueCache,\n cssText: string,\n loc?: SourceLocation | null\n ): Rules {\n const rules: Rules = {};\n\n const wrappedValue =\n typeof this.component === 'string'\n ? null\n : valueCache.get(this.component.node.name);\n\n const atomicRules = atomize(cssText, hasEvalMeta(wrappedValue));\n atomicRules.forEach((rule) => {\n // eslint-disable-next-line no-param-reassign\n rules[rule.cssText] = {\n cssText: rule.cssText,\n start: loc?.start ?? null,\n className: this.className,\n displayName: this.displayName,\n atom: true,\n };\n\n debug('extracted-atomic-rule:\\n%s', rule.cssText);\n });\n\n this.#classes = atomicRules\n // Some atomic rules produced (eg. keyframes) don't have class names, and they also don't need to appear in the object\n .filter((rule) => !!rule.className)\n .map((rule) => rule.className!)\n .join(' ');\n\n return rules;\n }\n\n protected override getProps(): IProps {\n const props = super.getProps();\n props.class = [this.classes, this.className].filter(Boolean).join(' ');\n props.atomic = true;\n return props;\n }\n\n protected override getVariableId(\n source: string,\n unit: string,\n precedingCss: string\n ): string {\n const id = this.getCustomVariableId(source, unit, precedingCss);\n if (id) {\n return id;\n }\n\n const context = this.getVariableContext(source, unit, precedingCss);\n // id is based on the slugified value\n return context.valueSlug;\n }\n}\n" }, { "path": "packages/atomic/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.json\",\n \"compilerOptions\": {\n \"paths\": {},\n \"rootDir\": \"src/\",\n \"types\": [\"node\"]\n },\n \"references\": [{ \"path\": \"../core\" }, { \"path\": \"../react\" }]\n}\n" }, { "path": "packages/core/CHANGELOG.md", "content": "# Change Log\n\n## 7.0.0\n\n### Major Changes\n\n- ab11ebb7: BREAKING: bump `@wyw-in-js/*` dependencies to `^1.0.0` (stable).\n\n This release updates Linaria's build-time evaluation engine (WyW). See https://wyw-in-js.dev/stability for practical guidance and common pitfalls.\n\n Notes:\n\n - Linaria 7 requires Node.js 20+ (aligned with WyW 1.x).\n - If you import JSON from code that is evaluated by WyW, add `.json` to `extensions` and ensure `.json` is ignored by evaluation rules (so it's parsed as JSON, not by Babel).\n - Rollup users: WyW 1.x serializes `transform()` by default (`serializeTransform: true`). If you hit Rollup \"Unexpected early exit\" (unresolved plugin promises / deadlock during resolve), set `serializeTransform: false` (see `examples/rollup/rollup.config.mjs`).\n - WyW 1.x promotes fully-statically-evaluatable modules to `only: ['*']` and can re-evaluate modules when cached exports are incomplete (cached export values might not be reused).\n\n## 6.3.0\n\n### Minor Changes\n\n- 281ca4f5: The new version of wyw-in-js, with the support of a configurable code remover, can help prevent compilation errors and improve build time.\n\n## 6.2.0\n\n### Minor Changes\n\n- a3dcee2e: Update wyw-in-js to 0.5.3\n\n## 6.1.0\n\n### Minor Changes\n\n- 8ba655d3: Bump wyw-in-js to 0.4.0. The full list of changes https://github.com/Anber/wyw-in-js/compare/%40wyw-in-js/transform%400.2.3...%40wyw-in-js/transform%400.4.0\n\n### Patch Changes\n\n- 8d4ebd33: chore: bump @wyw-in-js/\\* packages\n\n## 6.0.0\n\n### Major Changes\n\n- 2ac94b99: BREAKING CHANGE: Linaria has been migrated to wyw-in-js.\n\n # Migration Guide\n\n ## For Users\n\n The main breaking change is that all tooling has been moved from the `@linaria` scope to the `@wyw-in-js` scope. This means that you will need to update your dependencies as follows:\n\n | Old | New |\n | ------------------------ | ------------------------- |\n | @linaria/babel-preset | @wyw-in-js/babel-preset |\n | @linaria/cli | @wyw-in-js/cli |\n | @linaria/esbuild | @wyw-in-js/esbuild |\n | @linaria/rollup | @wyw-in-js/rollup |\n | @linaria/shaker | discontinued |\n | @linaria/vite | @wyw-in-js/vite |\n | @linaria/webpack4-loader | discontinued |\n | @linaria/webpack5-loader | @wyw-in-js/webpack-loader |\n\n There is no longer a need to install `@linaria/shaker` as it is now part of `@wyw-in-js/transform`, which will be installed automatically with the bundler plugins.\n\n The configuration file has been renamed from `linaria.config.js` (`linariarc`) to `wyw-in-js.config.js` (`.wyw-in-jsrc`).\n\n ## For Custom Processor Developers\n\n Base classes for processors and most helpers have been moved to `@wyw-in-js/processor-utils`.\n\n All APIs that had `linaria` in their names have been renamed:\n\n - The field that stores meta information in runtime has been renamed from `__linaria` to `__wyw_meta`\n - The export with all interpolated values has been renamed from `__linariaPreval` to `__wywPreval`\n - The caller name in Babel has been renamed from `linaria` to `wyw-in-js`\n\n For additional information, please visit the [wyw-in-js.dev](https://wyw-in-js.dev).\n\n## 5.0.2\n\n### Patch Changes\n\n- Updated dependencies [4992c14d]\n- Updated dependencies [70000ec8]\n- Updated dependencies [1e889937]\n- Updated dependencies [5a32f4fd]\n- Updated dependencies [727dc2bd]\n- Updated dependencies [25ba1344]\n- Updated dependencies [5a32f4fd]\n - @linaria/utils@5.0.2\n - @linaria/tags@5.0.2\n\n## 5.0.1\n\n### Patch Changes\n\n- Updated dependencies [6fb6eb69]\n - @linaria/utils@5.0.1\n - @linaria/tags@5.0.1\n\n## 5.0.0\n\n### Major Changes\n\n- 88e07613: Rewritten dependecny tree processing with support for wildcard re-exports.\n- cb853e14: All processing stages were merged into one generators-based processor. It allows the implementation of more complex workflows to support features like dynamic imports and re-exports.\n\n### Minor Changes\n\n- 9cb4143d: Refactoring of the 1st stage of transformation. It opens the road to processing wildcard reexports.\n\n### Patch Changes\n\n- 2a1e24a0: Upgrade TypeScript to 5.2\n- Updated dependencies [9cb4143d]\n- Updated dependencies [ae162f46]\n- Updated dependencies [88e07613]\n- Updated dependencies [b3ef8c1f]\n- Updated dependencies [f8b9bff5]\n- Updated dependencies [63902332]\n- Updated dependencies [aa100453]\n- Updated dependencies [9bb782d0]\n- Updated dependencies [2a1e24a0]\n- Updated dependencies [16320d71]\n- Updated dependencies [cb853e14]\n - @linaria/logger@5.0.0\n - @linaria/tags@5.0.0\n - @linaria/utils@5.0.0\n\n## 4.5.4\n\n### Patch Changes\n\n- Updated dependencies [10bcd241]\n - @linaria/utils@4.5.3\n - @linaria/tags@4.5.4\n\n## 4.5.3\n\n### Patch Changes\n\n- 79557248: Nothing has changed. Just moved some utils and types from babel to utils package.\n- e59bf809: Shaker mistakenly counts references in types as valuable and keeps referenced variables alive.\n- Updated dependencies [79557248]\n- Updated dependencies [b191f543]\n- Updated dependencies [e59bf809]\n- Updated dependencies [520ba8da]\n- Updated dependencies [ae3727f9]\n- Updated dependencies [dca076ef]\n - @linaria/tags@4.5.3\n - @linaria/utils@4.5.2\n\n## 4.5.2\n\n### Patch Changes\n\n- Updated dependencies [85e74df6]\n- Updated dependencies [1bf5c5b8]\n - @linaria/utils@4.5.1\n - @linaria/tags@4.5.2\n\n## 4.5.1\n\n### Patch Changes\n\n- Updated dependencies [ceca1611]\n- Updated dependencies [13258306]\n - @linaria/tags@4.5.1\n\n## 4.5.0\n\n### Minor Changes\n\n- 16c057df: Breaking Change: Performance Optimization for `styled`\n\n When a component is wrapped in `styled`, Linaria needs to determine if that component is already a styled component. To accomplish this, the wrapped component is included in the list of variables for evaluation, along with the interpolated values used in styles. The issue arises when a wrapped component, even if it is not styled, brings along a substantial dependency tree. This situation is particularly evident when using `styled` to style components from third-party UI libraries.\n\n To address this problem, Linaria will now examine the import location of the component and check if there is an annotation in the `package.json` file of the package containing the components. This annotation indicates whether the package includes other Linaria components. If there is no such annotation, Linaria will refrain from evaluating the component.\n\n Please note that this Breaking Change solely affects developers of component libraries. In order for users to style components from your library, you must include the `linaria.components` property in the library's `package.json` file. This property should have a mask that covers all imported files with components. Here's an example of how to specify it:\n\n ```json\n \"linaria\": {\n \"components\": \"**/*\"\n }\n ```\n\n### Patch Changes\n\n- af5bb92d: The end of support for Node.js 14. Migration to pnpm 8.\n- Updated dependencies [890b4aca]\n- Updated dependencies [05ad266c]\n- Updated dependencies [16c057df]\n- Updated dependencies [af5bb92d]\n - @linaria/utils@4.5.0\n - @linaria/tags@4.5.0\n - @linaria/logger@4.5.0\n\n## 4.2.10\n\n### Patch Changes\n\n- Updated dependencies [54ab61b2]\n - @linaria/tags@4.3.5\n - @linaria/utils@4.3.4\n\n## 4.2.9\n\n### Patch Changes\n\n- 34029088: Usages of `styled` and `css` in Jest no longer trigger the \"Using the … tag in runtime is not supported\" exception.\n- Updated dependencies [2e966f23]\n- Updated dependencies [1c3f309d]\n- Updated dependencies [dbe250b5]\n - @linaria/tags@4.3.4\n - @linaria/utils@4.3.3\n\n## 4.2.8\n\n### Patch Changes\n\n- Updated dependencies [a3ad617f]\n - @linaria/tags@4.3.3\n\n## 4.2.7\n\n### Patch Changes\n\n- Updated dependencies [f9df4ed8]\n - @linaria/utils@4.3.2\n - @linaria/tags@4.3.2\n\n## 4.2.6\n\n### Patch Changes\n\n- Updated dependencies [28f3f93d]\n- Updated dependencies [71a5b351]\n- Updated dependencies [61d49a39]\n - @linaria/tags@4.3.1\n - @linaria/utils@4.3.1\n\n## 4.2.5\n\n### Patch Changes\n\n- Updated dependencies [3ce985e0]\n- Updated dependencies [d11174d0]\n - @linaria/tags@4.3.0\n - @linaria/utils@4.3.0\n\n## 4.2.4\n\n### Patch Changes\n\n- Updated dependencies [315f0366]\n - @linaria/utils@4.2.6\n - @linaria/tags@4.2.2\n\n## 4.2.3\n\n### Patch Changes\n\n- 5edde648: Upgrade Babel to support TypeScript 4.9. Fixes #1133.\n- Updated dependencies [5edde648]\n- Updated dependencies [b9e49b74]\n - @linaria/tags@4.2.1\n - @linaria/utils@4.2.5\n\n## 4.2.2\n\n### Patch Changes\n\n- Updated dependencies [63f56d47]\n- Updated dependencies [963508a2]\n - @linaria/tags@4.2.0\n - @linaria/utils@4.2.4\n\n## 4.2.1\n\n### Patch Changes\n\n- Updated dependencies [cc2f87a8]\n - @linaria/utils@4.2.3\n - @linaria/tags@4.1.5\n\n## 4.2.0\n\n### Minor Changes\n\n- 1e88e95d: Support for ECMAScript modules. Fixes #904 and #1043.\n\n## 4.1.4\n\n### Patch Changes\n\n- 87ffe61c: The new `variableNameSlug` option that allows to customize css variable names (closes #1053).\n- Updated dependencies [8a8be242]\n- Updated dependencies [8a8be242]\n- Updated dependencies [08304e09]\n- Updated dependencies [87ffe61c]\n - @linaria/utils@4.2.2\n - @linaria/tags@4.1.4\n\n## 4.1.3\n\n### Patch Changes\n\n- Updated dependencies [24b4a4bd]\n - @linaria/utils@4.2.1\n - @linaria/tags@4.1.3\n\n## 4.1.2\n\n### Patch Changes\n\n- Updated dependencies [8590e134]\n- Updated dependencies [f7351b09]\n- Updated dependencies [c0bd271a]\n- Updated dependencies [8f90fa75]\n- Updated dependencies [ac0991a6]\n - @linaria/utils@4.2.0\n - @linaria/tags@4.1.2\n\n## 4.1.1\n\n### Patch Changes\n\n- Updated dependencies [50bc0c79]\n - @linaria/utils@4.1.1\n - @linaria/tags@4.1.1\n\n## 4.1.0\n\n### Patch Changes\n\n- Updated dependencies [92f6d871]\n - @linaria/utils@4.1.0\n - @linaria/tags@4.1.0\n\n## 4.0.0\n\n### Major Changes\n\n- bc0cbeea: A completely new async mode with native support for Vite, Rollup, esbuild and Webpack resolvers.\n\n BREAKING CHANGES: Despite the fact, that it should be fully compatible with 3.0 and 2.0 branches, the new version of styles evaluator can have some serious bugs which can make your project unbuildable (however, since there is no runtime, if the build is finished successfully, everything will continue work as it was on 2.0 and 3.0). If you face some problems please let us know and we will fix it as soon as possible.\n\n### Patch Changes\n\n- 8be5650d: The repo has been migrated to PNPM and Turborepo\n- ea41d440: New package @linaria/tags that contains all abstract logic for tags processors.\n- 9a50c1c1: Linaria now removes all unused css-related code from the runtime.\n- 4cdf0315: Tagged template-specific logic has been moved from `BaseProcessor` to `TaggedTemplateProcessor`. `BaseProcessor` now can be used to define any type of expressions for zero-runtime transformations, such as `makeStyles` from `@griffel/react`.\n- 12d35cb9: `processors` aliases have been lost during publishing. (fixes #984)\n- f726eb3b: `cx` should return `LinariaClassName` if all arguments are `LinariaClassName`\n- 17c83e34: Aliases for environments without the support of `exports` in package.json.\n- f0cddda4: Extends `BaseProcessor` to support tags other than tagged templates, such as `makeStyles` from `@griffel/react`.\n- Updated dependencies [f0cddda4]\n - @linaria/logger@4.0.0\n - @linaria/utils@4.0.0\n - @linaria/tags@4.0.0\n\n## 3.0.0-beta.21\n\n### Patch Changes\n\n- f726eb3b: `cx` should return `LinariaClassName` if all arguments are `LinariaClassName`\n- 17c83e34: Aliases for environments without the support of `exports` in package.json.\n\n## 3.0.0-beta.20\n\n### Patch Changes\n\n- 8be5650d: The repo has been migrated to PNPM and Turborepo\n- Updated dependencies [8be5650d]\n - @linaria/logger@3.0.0-beta.20\n - @linaria/utils@3.0.0-beta.20\n\n# [3.0.0-beta.19](https://github.com/callstack/linaria/compare/v3.0.0-beta.18...v3.0.0-beta.19) (2022-06-03)\n\n### Features\n\n- **babel:** api for custom tags ([#976](https://github.com/callstack/linaria/issues/976)) ([3285ccc](https://github.com/callstack/linaria/commit/3285ccc1d00449b78b3fc74087528cd38cbdd116))\n- **babel:** new way for detecting tag imports ([#974](https://github.com/callstack/linaria/issues/974)) ([3305cfb](https://github.com/callstack/linaria/commit/3305cfb0c0f65abdacceeb7e6bad118c59f7d551))\n\n# [3.0.0-beta.18](https://github.com/callstack/linaria/compare/v3.0.0-beta.17...v3.0.0-beta.18) (2022-04-01)\n\n**Note:** Version bump only for package @linaria/core\n\n# [3.0.0-beta.15](https://github.com/callstack/linaria/compare/v3.0.0-beta.14...v3.0.0-beta.15) (2021-11-29)\n\n### Features\n\n- **atomic:** create an atomic package for the css API ([#867](https://github.com/callstack/linaria/issues/867)) ([4773bcf](https://github.com/callstack/linaria/commit/4773bcf4b14f08cdc4d2b612654b962cdfc97eaa))\n\n# [3.0.0-beta.13](https://github.com/callstack/linaria/compare/v3.0.0-beta.12...v3.0.0-beta.13) (2021-09-13)\n\n### Bug Fixes\n\n- **core:** return type alias instead of string from `css` and `cx` ([#835](https://github.com/callstack/linaria/issues/835)) ([7eb9d94](https://github.com/callstack/linaria/commit/7eb9d94dc2d9d79f7be0159c43fa5d71c96d7182))\n\n# [3.0.0-beta.4](https://github.com/callstack/linaria/compare/v3.0.0-beta.3...v3.0.0-beta.4) (2021-05-07)\n\n**Note:** Version bump only for package @linaria/core\n\n# [3.0.0-beta.3](https://github.com/callstack/linaria/compare/v3.0.0-beta.2...v3.0.0-beta.3) (2021-04-20)\n\n**Note:** Version bump only for package @linaria/core\n\n# [3.0.0-beta.2](https://github.com/callstack/linaria/compare/v3.0.0-beta.1...v3.0.0-beta.2) (2021-04-11)\n\n### Bug Fixes\n\n- **core:** remove unnecessary spread operators from css and cx ([#746](https://github.com/callstack/linaria/issues/746)) ([#749](https://github.com/callstack/linaria/issues/749)) ([de23a09](https://github.com/callstack/linaria/commit/de23a0926c2583db01e7df5ea9a134f5910f96a1))\n" }, { "path": "packages/core/README.md", "content": "

\n \"Linaria\"\n

\n\n

\nZero-runtime CSS in JS library.\n

\n\n---\n\n### 📖 Please refer to the [GitHub](https://github.com/callstack/linaria#readme) for full documentation.\n\n## Features\n\n- Write CSS in JS, but with **zero runtime**, CSS is extracted to CSS files during build\n- Familiar **CSS syntax** with Sass like nesting\n- Use **dynamic prop based styles** with the React bindings, uses CSS variables behind the scenes\n- Easily find where the style was defined with **CSS sourcemaps**\n- **Lint your CSS** in JS with [stylelint](https://github.com/stylelint/stylelint)\n- Use **JavaScript for logic**, no CSS preprocessor needed\n- Optionally use any **CSS preprocessor** such as Sass or PostCSS\n\n**[Why use Linaria](../../docs/BENEFITS.md)**\n\n## Installation\n\n```sh\nnpm install @linaria/core @linaria/react @linaria/babel-preset\n```\n\nor\n\n```sh\nyarn add @linaria/core @linaria/react @linaria/babel-preset\n```\n" }, { "path": "packages/core/__dtslint__/core.ts", "content": "/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { css, cx } from '../src';\n\n// $ExpectType LinariaClassName\nconst class1 = css``;\n\nconst activeClass = css``;\n\n// $ExpectType string\nconst combined1 = cx(class1, 'active');\n\n// $ExpectType LinariaClassName\nconst combined2 = cx(class1, activeClass);\n" }, { "path": "packages/core/__dtslint__/index.d.ts", "content": "// dtslint wants to see index.d.ts. Well, here it is.\ndeclare const linaria: unknown;\n" }, { "path": "packages/core/__dtslint__/tsconfig.eslint.json", "content": "{\n \"extends\": \"./tsconfig.json\"\n}\n" }, { "path": "packages/core/__dtslint__/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"module\": \"commonjs\",\n \"lib\": [\"es6\"],\n \"target\": \"ES2015\",\n \"esModuleInterop\": true,\n \"noImplicitAny\": true,\n \"noImplicitThis\": true,\n \"strictNullChecks\": true,\n \"strictFunctionTypes\": true,\n \"noEmit\": true,\n\n \"baseUrl\": \"./\"\n }\n}\n" }, { "path": "packages/core/__tests__/cx.test.ts", "content": "import cx from '../src/cx';\n\nit('should filter falsy values', () => {\n expect(cx('1', 'test', false, '2', 0, '', null, undefined, '3')).toBe(\n '1 test 2 3'\n );\n});\n\nit('should join atoms together, de-duplicating by property and joining the values', () => {\n expect(cx('atm_a_class1 atm_b_class2', 'atm_a_class3')).toBe(\n 'atm_a_class3 atm_b_class2'\n );\n});\n\nit('should join atoms and non atoms together at the same time', () => {\n expect(\n cx('atm_a_1', 'atm_b_2', false, '2', 0, '', null, undefined, '3', 'atm_b_3')\n ).toBe('atm_a_1 atm_b_3 2 3');\n});\n" }, { "path": "packages/core/__tests__/detect-core-js.test.ts", "content": "import cp from 'child_process';\n\nconst waitForProcess = async (process: cp.ChildProcess) => {\n return new Promise((resolve) => {\n let output = '';\n process.stdout?.on('data', (chunk) => {\n output += chunk.toString();\n });\n process.on('close', () => {\n resolve(output);\n });\n });\n};\n\nit('Ensures that package do not include core-js dependency after build', async () => {\n // eslint-disable-next-line import/no-extraneous-dependencies\n const packageJSON = require('@linaria/core/package.json');\n const buildScript = packageJSON.scripts['build:corejs-test'];\n\n const proc = cp.exec(buildScript, {\n env: {\n ...process.env,\n DEBUG_CORE_JS: 'true',\n },\n });\n const result = await waitForProcess(proc);\n // run `DEBUG_CORE_JS=true yarn build:lib` to debug issues with introduced core-js dependency\n expect(result).not.toContain(\n 'The corejs3 polyfill added the following polyfills'\n );\n expect(result).toContain(\n 'Based on your code and targets, the corejs3 polyfill did not add any polyfill'\n );\n}, 30000);\n" }, { "path": "packages/core/babel.config.js", "content": "const config = require('../../babel.config');\n\nmodule.exports = config;\n" }, { "path": "packages/core/package.json", "content": "{\n \"name\": \"@linaria/core\",\n \"version\": \"7.0.0\",\n \"description\": \"Blazing fast zero-runtime CSS in JS library\",\n \"keywords\": [\n \"css\",\n \"css-in-js\",\n \"linaria\",\n \"react\",\n \"styled-components\"\n ],\n \"homepage\": \"https://github.com/callstack/linaria#readme\",\n \"bugs\": \"https://github.com/callstack/linaria/issues\",\n \"repository\": \"git@github.com:callstack/linaria.git\",\n \"license\": \"MIT\",\n \"sideEffects\": false,\n \"exports\": {\n \"./package.json\": \"./package.json\",\n \".\": {\n \"types\": \"./types/index.d.ts\",\n \"import\": \"./dist/index.mjs\",\n \"default\": \"./dist/index.js\"\n },\n \"./*\": {\n \"types\": \"./types/*.d.ts\",\n \"import\": \"./dist/*.mjs\",\n \"default\": \"./dist/*.js\"\n }\n },\n \"main\": \"dist/index.js\",\n \"module\": \"dist/index.mjs\",\n \"types\": \"types/index.d.ts\",\n \"typesVersions\": {\n \"*\": {\n \"processors/*\": [\n \"./types/processors/*.d.ts\"\n ]\n }\n },\n \"files\": [\n \"dist/\",\n \"processors/\",\n \"types/\"\n ],\n \"wyw-in-js\": {\n \"tags\": {\n \"css\": \"./dist/processors/css.js\"\n }\n },\n \"scripts\": {\n \"build\": \"pnpm build:dist && pnpm build:declarations\",\n \"build:corejs-test\": \"cross-env NODE_ENV=legacy babel src --out-dir lib --extensions '.js,.jsx,.ts,.tsx' --ignore \\\"src/processors/**/*\\\"\",\n \"build:declarations\": \"tsc --emitDeclarationOnly --outDir types\",\n \"build:dist\": \"tsup --format cjs,esm\",\n \"test\": \"jest --config ../../jest.config.js --rootDir .\",\n \"test:dts\": \"dtslint --localTs ../../node_modules/typescript/lib __dtslint__\",\n \"typecheck\": \"tsc --noEmit --composite false\",\n \"watch\": \"pnpm build:dist --watch & pnpm build:declarations --watch\"\n },\n \"dependencies\": {\n \"@wyw-in-js/processor-utils\": \"^1.0.4\"\n },\n \"devDependencies\": {\n \"@babel/traverse\": \"^7.23.5\",\n \"@babel/types\": \"^7.23.5\",\n \"@types/babel__core\": \"^7.20.5\",\n \"@types/babel__traverse\": \"^7.20.4\",\n \"@types/node\": \"^17.0.39\"\n },\n \"engines\": {\n \"node\": \">=20.0.0\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"tsup\": {\n \"entry\": [\n \"src/index.ts\",\n \"src/processors/css.ts\"\n ],\n \"splitting\": false,\n \"sourcemap\": true,\n \"clean\": true\n }\n}\n" }, { "path": "packages/core/processors/css.js", "content": "Object.defineProperty(exports, '__esModule', {\n value: true,\n});\n\nexports.default = require('../dist/processors/css').default;\n" }, { "path": "packages/core/src/CSSProperties.ts", "content": "export type CSSProperties = {\n [key: string]: string | number | CSSProperties;\n};\n" }, { "path": "packages/core/src/css.ts", "content": "import type { CSSProperties } from './CSSProperties';\nimport type { LinariaClassName } from './cx';\n\ntype WYWEvalMeta = { __wyw_meta: unknown }; // simplified version of WYWEvalMeta from @wyw-in-js/shared\n\ntype CSS = (\n strings: TemplateStringsArray,\n ...exprs: Array\n) => LinariaClassName;\n\nlet idx = 0;\n\nconst css: CSS = () => {\n if (process.env.NODE_ENV === 'test') {\n // eslint-disable-next-line no-plusplus\n return `mocked-css-${idx++}` as LinariaClassName;\n }\n\n throw new Error(\n 'Using the \"css\" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly.'\n );\n};\n\nexport default css;\n" }, { "path": "packages/core/src/cx.ts", "content": "export type LinariaClassName = string & { __linariaClassName: true };\n\nexport type ClassName = T | false | void | null | 0 | '';\n\ninterface ICX {\n (...classNames: ClassName[]): LinariaClassName;\n (...classNames: ClassName[]): string;\n}\n/**\n * Takes a list of class names and filters for truthy ones, joining them into a single class name for convenience.\n * eg.\n * ```js\n * cx('red', isBig && 'big') // returns 'red big' if `isBig` is true, otherwise returns 'red'\n * ```\n * If space separated atomic styles are provided, they are deduplicated according to the first hashed valued:\n *\n * ```js\n * cx('atm_a_class1 atm_b_class2', 'atm_a_class3') // returns `atm_a_class3 atm_b_class2`\n * ```\n *\n * @returns the combined, space separated class names that can be applied directly to the class attribute\n */\nconst cx: ICX = function cx() {\n const presentClassNames: (ClassName | ClassName)[] =\n Array.prototype.slice\n // eslint-disable-next-line prefer-rest-params\n .call(arguments)\n .filter(Boolean);\n\n const atomicClasses: { [k: string]: string } = {};\n const nonAtomicClasses: string[] = [];\n presentClassNames.forEach((arg) => {\n // className could be the output of a previous cx call, so split by ' ' first\n const individualClassNames = arg ? arg.split(' ') : [];\n\n individualClassNames.forEach((className) => {\n if (className.startsWith('atm_')) {\n const [, keyHash] = className.split('_');\n atomicClasses[keyHash] = className;\n } else {\n nonAtomicClasses.push(className);\n }\n });\n });\n\n const result: string[] = [];\n\n // eslint-disable-next-line no-restricted-syntax\n for (const keyHash in atomicClasses) {\n if (Object.prototype.hasOwnProperty.call(atomicClasses, keyHash)) {\n result.push(atomicClasses[keyHash]);\n }\n }\n\n result.push(...nonAtomicClasses);\n\n return result.join(' ') as LinariaClassName;\n};\n\nexport default cx;\n" }, { "path": "packages/core/src/index.ts", "content": "export { default as css } from './css';\nexport { default as cx } from './cx';\nexport type { CSSProperties } from './CSSProperties';\nexport type { LinariaClassName } from './cx';\n" }, { "path": "packages/core/src/processors/css.ts", "content": "import type { SourceLocation, StringLiteral } from '@babel/types';\nimport type { Rules, ValueCache } from '@wyw-in-js/processor-utils';\nimport { TaggedTemplateProcessor } from '@wyw-in-js/processor-utils';\n\nexport default class CssProcessor extends TaggedTemplateProcessor {\n public override get asSelector(): string {\n return this.className;\n }\n\n public override get value(): StringLiteral {\n return this.astService.stringLiteral(this.className);\n }\n\n // eslint-disable-next-line class-methods-use-this\n public override addInterpolation(\n node: unknown,\n precedingCss: string,\n source: string\n ): string {\n throw new Error(\n `css tag cannot handle '${source}' as an interpolated value`\n );\n }\n\n public override doEvaltimeReplacement(): void {\n this.replacer(this.value, false);\n }\n\n public override doRuntimeReplacement(): void {\n this.replacer(this.astService.stringLiteral(this.className), false);\n }\n\n public override extractRules(\n valueCache: ValueCache,\n cssText: string,\n loc?: SourceLocation | null\n ): Rules {\n const rules: Rules = {};\n\n const selector = `.${this.className}`;\n\n rules[selector] = {\n cssText,\n className: this.className,\n displayName: this.displayName,\n start: loc?.start ?? null,\n };\n\n return rules;\n }\n}\n" }, { "path": "packages/core/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.json\",\n \"compilerOptions\": {\n \"paths\": {},\n \"rootDir\": \"src/\",\n \"types\": [\"node\"]\n },\n \"references\": []\n}\n" }, { "path": "packages/interop/CHANGELOG.md", "content": "# Change Log\n\n## 7.0.0\n\n### Major Changes\n\n- ab11ebb7: BREAKING: bump `@wyw-in-js/*` dependencies to `^1.0.0` (stable).\n\n This release updates Linaria's build-time evaluation engine (WyW). See https://wyw-in-js.dev/stability for practical guidance and common pitfalls.\n\n Notes:\n\n - Linaria 7 requires Node.js 20+ (aligned with WyW 1.x).\n - If you import JSON from code that is evaluated by WyW, add `.json` to `extensions` and ensure `.json` is ignored by evaluation rules (so it's parsed as JSON, not by Babel).\n - Rollup users: WyW 1.x serializes `transform()` by default (`serializeTransform: true`). If you hit Rollup \"Unexpected early exit\" (unresolved plugin promises / deadlock during resolve), set `serializeTransform: false` (see `examples/rollup/rollup.config.mjs`).\n - WyW 1.x promotes fully-statically-evaluatable modules to `only: ['*']` and can re-evaluate modules when cached exports are incomplete (cached export values might not be reused).\n\n## 6.3.0\n\n### Minor Changes\n\n- 281ca4f5: The new version of wyw-in-js, with the support of a configurable code remover, can help prevent compilation errors and improve build time.\n\n## 6.2.0\n\n### Minor Changes\n\n- a3dcee2e: Update wyw-in-js to 0.5.3\n\n## 6.1.0\n\n### Minor Changes\n\n- 8ba655d3: Bump wyw-in-js to 0.4.0. The full list of changes https://github.com/Anber/wyw-in-js/compare/%40wyw-in-js/transform%400.2.3...%40wyw-in-js/transform%400.4.0\n\n## 6.0.0\n\n### Major Changes\n\n- 2ac94b99: BREAKING CHANGE: Linaria has been migrated to wyw-in-js.\n\n # Migration Guide\n\n ## For Users\n\n The main breaking change is that all tooling has been moved from the `@linaria` scope to the `@wyw-in-js` scope. This means that you will need to update your dependencies as follows:\n\n | Old | New |\n | ------------------------ | ------------------------- |\n | @linaria/babel-preset | @wyw-in-js/babel-preset |\n | @linaria/cli | @wyw-in-js/cli |\n | @linaria/esbuild | @wyw-in-js/esbuild |\n | @linaria/rollup | @wyw-in-js/rollup |\n | @linaria/shaker | discontinued |\n | @linaria/vite | @wyw-in-js/vite |\n | @linaria/webpack4-loader | discontinued |\n | @linaria/webpack5-loader | @wyw-in-js/webpack-loader |\n\n There is no longer a need to install `@linaria/shaker` as it is now part of `@wyw-in-js/transform`, which will be installed automatically with the bundler plugins.\n\n The configuration file has been renamed from `linaria.config.js` (`linariarc`) to `wyw-in-js.config.js` (`.wyw-in-jsrc`).\n\n ## For Custom Processor Developers\n\n Base classes for processors and most helpers have been moved to `@wyw-in-js/processor-utils`.\n\n All APIs that had `linaria` in their names have been renamed:\n\n - The field that stores meta information in runtime has been renamed from `__linaria` to `__wyw_meta`\n - The export with all interpolated values has been renamed from `__linariaPreval` to `__wywPreval`\n - The caller name in Babel has been renamed from `linaria` to `wyw-in-js`\n\n For additional information, please visit the [wyw-in-js.dev](https://wyw-in-js.dev).\n\n## 5.0.0\n\n### Major Changes\n\n- 88e07613: Rewritten dependecny tree processing with support for wildcard re-exports.\n- cb853e14: All processing stages were merged into one generators-based processor. It allows the implementation of more complex workflows to support features like dynamic imports and re-exports.\n\n### Minor Changes\n\n- 9cb4143d: Refactoring of the 1st stage of transformation. It opens the road to processing wildcard reexports.\n\n### Patch Changes\n\n- 2a1e24a0: Upgrade TypeScript to 5.2\n\n## 4.5.1\n\n### Patch Changes\n\n- e59bf809: Shaker mistakenly counts references in types as valuable and keeps referenced variables alive.\n\n## 4.5.0\n\n### Patch Changes\n\n- af5bb92d: The end of support for Node.js 14. Migration to pnpm 8.\n\n## 4.0.1\n\n### Patch Changes\n\n- 5edde648: Upgrade Babel to support TypeScript 4.9. Fixes #1133.\n\n## 4.0.0\n\n### Major Changes\n\n- bc0cbeea: A completely new async mode with native support for Vite, Rollup, esbuild and Webpack resolvers.\n\n BREAKING CHANGES: Despite the fact, that it should be fully compatible with 3.0 and 2.0 branches, the new version of styles evaluator can have some serious bugs which can make your project unbuildable (however, since there is no runtime, if the build is finished successfully, everything will continue work as it was on 2.0 and 3.0). If you face some problems please let us know and we will fix it as soon as possible.\n\n### Patch Changes\n\n- 8be5650d: The repo has been migrated to PNPM and Turborepo\n- ea41d440: New package @linaria/tags that contains all abstract logic for tags processors.\n\n## 3.0.0-beta.20\n\n### Patch Changes\n\n- 8be5650d: The repo has been migrated to PNPM and Turborepo\n\n# [3.0.0-beta.19](https://github.com/callstack/linaria/tree/master/packages/interop/compare/v3.0.0-beta.18...v3.0.0-beta.19) (2022-06-03)\n\n### Features\n\n- **babel:** api for custom tags ([#976](https://github.com/callstack/linaria/tree/master/packages/interop/issues/976)) ([3285ccc](https://github.com/callstack/linaria/tree/master/packages/interop/commit/3285ccc1d00449b78b3fc74087528cd38cbdd116))\n- **babel:** new way for detecting tag imports ([#974](https://github.com/callstack/linaria/tree/master/packages/interop/issues/974)) ([3305cfb](https://github.com/callstack/linaria/tree/master/packages/interop/commit/3305cfb0c0f65abdacceeb7e6bad118c59f7d551))\n\n# [3.0.0-beta.7](https://github.com/callstack/linaria/tree/master/packages/interop/compare/v3.0.0-beta.6...v3.0.0-beta.7) (2021-06-24)\n\n**Note:** Version bump only for package @linaria/babel-plugin-interop\n\n# [3.0.0-beta.6](https://github.com/callstack/linaria/tree/master/packages/interop/compare/v3.0.0-beta.5...v3.0.0-beta.6) (2021-06-06)\n\n### Features\n\n- **interop:** interop between Linaria and traditional CSS-in-JS libraries ([#776](https://github.com/callstack/linaria/tree/master/packages/interop/issues/776)) ([0a5f5b4](https://github.com/callstack/linaria/tree/master/packages/interop/commit/0a5f5b440506bfa24724d4a91e519c48d6f6c69b))\n" }, { "path": "packages/interop/README.md", "content": "

\n \"Linaria\"\n

\n\n

\nZero-runtime CSS in JS library.\n

\n\n---\n\n# `@linaria/babel-plugin-interop`\n\nThis plugin allows to interpolate Linaria components inside styled-components and Emotion:\n```javascript\nimport styled from 'styled-components';\nimport { Title } from './Title.styled'; // Linaria component\n\nconst Article = () => { /* … */ };\n\nexport default styled(Article)`\n & > ${Title} {\n color: green;\n }\n`;\n\n```\n\n## Quick start\n\nInstall the plugin first:\n\n```\nnpm install --save-dev @linaria/babel-plugin-interop\n```\n\nThen add `@linaria/interop` to your babel configuration *before* `styled-components`:\n\n```JSON\n{\n \"plugins\": [\n [\"@linaria/interop\", { \"library\": \"styled-components\" }],\n \"styled-components\"\n ]\n}\n```\n" }, { "path": "packages/interop/__tests__/__snapshots__/index.test.ts.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`styled-components css 1`] = `\n\"\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _styledComponents = require(\"styled-components\");\nvar _Title = _interopRequireDefault(require(\"./Title\"));\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\nvar _default = exports.default = (0, _styledComponents.css)\\`\n & > \\${(i => i && i.__wyw_meta ? '.' + i.__wyw_meta.className : i)(_Title.default)} {\n color: red;\n }\n\\`;\"\n`;\n\nexports[`styled-components keeps linaria 1`] = `\n\"\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _react = _interopRequireDefault(require(\"linaria/react\"));\nvar _Title = _interopRequireDefault(require(\"./Title\"));\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\nvar _default = exports.default = _react.default.h1\\`\n & > \\${_Title.default} {\n color: red;\n }\n\\`;\"\n`;\n\nexports[`styled-components member expression as selector 1`] = `\n\"\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _styledComponents = _interopRequireDefault(require(\"styled-components\"));\nvar _Title = _interopRequireDefault(require(\"./Title\"));\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\nvar _default = exports.default = _styledComponents.default.h1\\`\n & > \\${(i => i && i.__wyw_meta ? '.' + i.__wyw_meta.className : i)(_Title.default.Small)} {\n color: red;\n }\n\\`;\"\n`;\n\nexports[`styled-components styled(Cmp) 1`] = `\n\"\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _styledComponents = _interopRequireDefault(require(\"styled-components\"));\nvar _Cmp = _interopRequireDefault(require(\"./Cmp\"));\nvar _Title = _interopRequireDefault(require(\"./Title\"));\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\nvar _default = exports.default = (0, _styledComponents.default)(_Cmp.default)\\`\n & > \\${(i => i && i.__wyw_meta ? '.' + i.__wyw_meta.className : i)(_Title.default)} {\n color: red;\n }\n\\`;\"\n`;\n\nexports[`styled-components styled(Cmp).attrs({}) 1`] = `\n\"\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _styledComponents = _interopRequireDefault(require(\"styled-components\"));\nvar _Cmp = _interopRequireDefault(require(\"./Cmp\"));\nvar _Title = _interopRequireDefault(require(\"./Title\"));\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\nvar _default = exports.default = (0, _styledComponents.default)(_Cmp.default).attrs(() => ({}))\\`\n & > \\${(i => i && i.__wyw_meta ? '.' + i.__wyw_meta.className : i)(_Title.default)} {\n color: red;\n }\n\\`;\"\n`;\n\nexports[`styled-components styled.h1 1`] = `\n\"\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _styledComponents = _interopRequireDefault(require(\"styled-components\"));\nvar _Title = _interopRequireDefault(require(\"./Title\"));\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\nvar _default = exports.default = _styledComponents.default.h1\\`\n & > \\${(i => i && i.__wyw_meta ? '.' + i.__wyw_meta.className : i)(_Title.default)} {\n color: red;\n }\n\\`;\"\n`;\n\nexports[`styled-components styled.h1.attrs({}) 1`] = `\n\"\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _styledComponents = _interopRequireDefault(require(\"styled-components\"));\nvar _Title = _interopRequireDefault(require(\"./Title\"));\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\nvar _default = exports.default = _styledComponents.default.h1.attrs(() => ({}))\\`\n & > \\${(i => i && i.__wyw_meta ? '.' + i.__wyw_meta.className : i)(_Title.default)} {\n color: red;\n }\n\\`;\"\n`;\n" }, { "path": "packages/interop/__tests__/index.test.ts", "content": "const babel = require('@babel/core');\nconst dedent = require('dedent');\n\nconst plugin = require('../src');\n\nconst getCode = (src: string) => {\n const { code } = babel.transform(dedent(src), {\n filename: 'test.js',\n babelrc: false,\n plugins: [plugin],\n });\n return code;\n};\n\ndescribe('styled-components', () => {\n it('keeps linaria', () => {\n const code = getCode(`\n import styled from \"linaria/react\";\n import Title from \"./Title\";\n\n export default styled.h1\\`\n & > ${'${Title}'} {\n color: red;\n }\n \\`;\n `);\n\n expect(code).toMatchSnapshot();\n });\n\n it('css', () => {\n const code = getCode(`\n import { css } from \"styled-components\";\n import Title from \"./Title\";\n\n export default css\\`\n & > ${'${Title}'} {\n color: red;\n }\n \\`;\n `);\n\n expect(code).toMatchSnapshot();\n });\n\n it('styled.h1', () => {\n const code = getCode(`\n import styled from \"styled-components\";\n import Title from \"./Title\";\n\n export default styled.h1\\`\n & > ${'${Title}'} {\n color: red;\n }\n \\`;\n `);\n\n expect(code).toMatchSnapshot();\n });\n\n it('member expression as selector', () => {\n const code = getCode(`\n import styled from \"styled-components\";\n import Title from \"./Title\";\n\n export default styled.h1\\`\n & > ${'${Title.Small}'} {\n color: red;\n }\n \\`;\n `);\n\n expect(code).toMatchSnapshot();\n });\n\n it('styled(Cmp)', () => {\n const code = getCode(`\n import styled from \"styled-components\";\n import Cmp from \"./Cmp\";\n import Title from \"./Title\";\n\n export default styled(Cmp)\\`\n & > ${'${Title}'} {\n color: red;\n }\n \\`;\n `);\n\n expect(code).toMatchSnapshot();\n });\n\n it('styled(Cmp).attrs({})', () => {\n const code = getCode(`\n import styled from \"styled-components\";\n import Cmp from \"./Cmp\";\n import Title from \"./Title\";\n\n export default styled(Cmp).attrs(() => ({}))\\`\n & > ${'${Title}'} {\n color: red;\n }\n \\`;\n `);\n\n expect(code).toMatchSnapshot();\n });\n\n it('styled.h1.attrs({})', () => {\n const code = getCode(`\n import styled from \"styled-components\";\n import Title from \"./Title\";\n\n export default styled.h1.attrs(() => ({}))\\`\n & > ${'${Title}'} {\n color: red;\n }\n \\`;\n `);\n\n expect(code).toMatchSnapshot();\n });\n});\n" }, { "path": "packages/interop/babel.config.js", "content": "const config = require('../../babel.config');\n\nmodule.exports = config;\n" }, { "path": "packages/interop/package.json", "content": "{\n \"name\": \"@linaria/babel-plugin-interop\",\n \"version\": \"7.0.0\",\n \"homepage\": \"https://github.com/callstack/linaria/tree/master/packages/interop#readme\",\n \"repository\": \"git@github.com:callstack/linaria.git\",\n \"license\": \"MIT\",\n \"author\": {\n \"name\": \"Anton Evzhakov\",\n \"email\": \"anton@evz.name\"\n },\n \"main\": \"lib/index.js\",\n \"module\": \"esm/index.js\",\n \"types\": \"types\",\n \"files\": [\n \"types/\",\n \"lib/\",\n \"esm/\"\n ],\n \"scripts\": {\n \"build\": \"pnpm build:lib && pnpm build:esm && pnpm build:declarations\",\n \"build:declarations\": \"tsc --emitDeclarationOnly --outDir types\",\n \"build:esm\": \"babel src --out-dir esm --extensions '.js,.jsx,.ts,.tsx' --source-maps --delete-dir-on-start\",\n \"build:lib\": \"cross-env NODE_ENV=legacy babel src --out-dir lib --extensions '.js,.jsx,.ts,.tsx' --source-maps --delete-dir-on-start\",\n \"test\": \"jest --config ../../jest.config.js --rootDir .\",\n \"typecheck\": \"tsc --noEmit --composite false\",\n \"watch\": \"pnpm build:lib --watch & pnpm build:esm --watch & pnpm build:declarations --watch\"\n },\n \"devDependencies\": {\n \"@babel/core\": \"^7.23.5\",\n \"@babel/traverse\": \"^7.23.5\",\n \"@babel/types\": \"^7.23.5\",\n \"@types/babel__core\": \"^7.20.5\",\n \"@types/babel__traverse\": \"^7.20.4\",\n \"dedent\": \"^1.5.1\"\n },\n \"engines\": {\n \"node\": \">=20.0.0\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n }\n}\n" }, { "path": "packages/interop/src/index.ts", "content": "import type core from '@babel/core';\nimport type { NodePath } from '@babel/traverse';\nimport type {\n Expression,\n Identifier,\n MemberExpression,\n TaggedTemplateExpression,\n V8IntrinsicIdentifier,\n} from '@babel/types';\n\nexport declare type Core = typeof core;\n\nexport default (\n { types: t }: Core,\n config: { library?: string | RegExp } = {}\n) => {\n const library = config.library || 'styled-components';\n const isLibrary: (s: string) => boolean =\n library instanceof RegExp ? (s) => library.test(s) : (s) => s === library;\n\n const fixer = (path: NodePath | NodePath) => {\n if (!t.isTemplateLiteral(path.parent) || path.listKey !== 'expressions') {\n return;\n }\n\n const original = path.node;\n path.replaceWithSourceString(\n \"(i => i && i.__wyw_meta ? '.' + i.__wyw_meta.className : i)('placeholder')\"\n );\n\n const args = path.get('arguments');\n if (Array.isArray(args)) {\n args[0]?.replaceWith(original);\n }\n };\n\n const visitors = {\n MemberExpression: fixer,\n Identifier: fixer,\n };\n\n return {\n visitor: {\n TaggedTemplateExpression(path: NodePath) {\n const tag = path.get('tag');\n let identifier: NodePath | null =\n null;\n if (tag.isIdentifier()) {\n identifier = tag;\n } else if (tag.isMemberExpression()) {\n identifier = tag.get('object');\n } else if (tag.isCallExpression()) {\n identifier = tag.get('callee');\n } else {\n return;\n }\n\n if (identifier.isMemberExpression()) {\n const obj = identifier.get('object');\n // it's something like styled().attrs()\n if (obj.isCallExpression()) {\n identifier = obj.get('callee');\n } else if (obj.isMemberExpression()) {\n identifier = obj.get('object');\n }\n }\n\n if (!identifier.isIdentifier()) {\n return;\n }\n\n const { scope } = identifier;\n const binding = scope.getBinding(identifier.node.name);\n const parent = binding?.path.parentPath ?? null;\n if (!parent?.isImportDeclaration()) {\n return;\n }\n\n const importSource = parent.node.source.value;\n if (isLibrary(importSource)) {\n path.get('quasi').traverse(visitors);\n }\n },\n },\n };\n};\n" }, { "path": "packages/interop/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.json\",\n \"compilerOptions\": { \"paths\": {}, \"rootDir\": \"src/\" },\n \"references\": []\n}\n" }, { "path": "packages/linaria/CHANGELOG.md", "content": "# Change Log\n\n## 7.0.1\n\n### Patch Changes\n\n- Updated dependencies [b3331e45]\n - @linaria/react@7.0.1\n\n## 7.0.0\n\n### Major Changes\n\n- ab11ebb7: BREAKING: bump `@wyw-in-js/*` dependencies to `^1.0.0` (stable).\n\n This release updates Linaria's build-time evaluation engine (WyW). See https://wyw-in-js.dev/stability for practical guidance and common pitfalls.\n\n Notes:\n\n - Linaria 7 requires Node.js 20+ (aligned with WyW 1.x).\n - If you import JSON from code that is evaluated by WyW, add `.json` to `extensions` and ensure `.json` is ignored by evaluation rules (so it's parsed as JSON, not by Babel).\n - Rollup users: WyW 1.x serializes `transform()` by default (`serializeTransform: true`). If you hit Rollup \"Unexpected early exit\" (unresolved plugin promises / deadlock during resolve), set `serializeTransform: false` (see `examples/rollup/rollup.config.mjs`).\n - WyW 1.x promotes fully-statically-evaluatable modules to `only: ['*']` and can re-evaluate modules when cached exports are incomplete (cached export values might not be reused).\n\n### Patch Changes\n\n- ebefe2e4: Require Node.js `>=20` (aligned with WyW 1.x).\n- Updated dependencies [ab11ebb7]\n- Updated dependencies [654d8590]\n - @linaria/core@7.0.0\n - @linaria/react@7.0.0\n - @linaria/server@7.0.0\n\n## 6.3.0\n\n### Minor Changes\n\n- 281ca4f5: The new version of wyw-in-js, with the support of a configurable code remover, can help prevent compilation errors and improve build time.\n\n### Patch Changes\n\n- Updated dependencies [bd8d45fd]\n- Updated dependencies [281ca4f5]\n - @linaria/react@6.3.0\n - @linaria/core@6.3.0\n - @linaria/server@6.3.0\n\n## 6.2.0\n\n### Minor Changes\n\n- a3dcee2e: Update wyw-in-js to 0.5.3\n\n### Patch Changes\n\n- Updated dependencies [a3dcee2e]\n - @linaria/core@6.2.0\n - @linaria/server@6.2.0\n - @linaria/react@6.2.1\n\n## 6.1.1\n\n### Patch Changes\n\n- Updated dependencies [fd60b5de]\n - @linaria/react@6.2.0\n\n## 6.1.0\n\n### Minor Changes\n\n- 8ba655d3: Bump wyw-in-js to 0.4.0. The full list of changes https://github.com/Anber/wyw-in-js/compare/%40wyw-in-js/transform%400.2.3...%40wyw-in-js/transform%400.4.0\n\n### Patch Changes\n\n- Updated dependencies [8d4ebd33]\n- Updated dependencies [8ba655d3]\n - @linaria/core@6.1.0\n - @linaria/react@6.1.0\n - @linaria/server@6.1.0\n\n## 6.0.0\n\n### Major Changes\n\n- 2ac94b99: BREAKING CHANGE: Linaria has been migrated to wyw-in-js.\n\n # Migration Guide\n\n ## For Users\n\n The main breaking change is that all tooling has been moved from the `@linaria` scope to the `@wyw-in-js` scope. This means that you will need to update your dependencies as follows:\n\n | Old | New |\n | ------------------------ | ------------------------- |\n | @linaria/babel-preset | @wyw-in-js/babel-preset |\n | @linaria/cli | @wyw-in-js/cli |\n | @linaria/esbuild | @wyw-in-js/esbuild |\n | @linaria/rollup | @wyw-in-js/rollup |\n | @linaria/shaker | discontinued |\n | @linaria/vite | @wyw-in-js/vite |\n | @linaria/webpack4-loader | discontinued |\n | @linaria/webpack5-loader | @wyw-in-js/webpack-loader |\n\n There is no longer a need to install `@linaria/shaker` as it is now part of `@wyw-in-js/transform`, which will be installed automatically with the bundler plugins.\n\n The configuration file has been renamed from `linaria.config.js` (`linariarc`) to `wyw-in-js.config.js` (`.wyw-in-jsrc`).\n\n ## For Custom Processor Developers\n\n Base classes for processors and most helpers have been moved to `@wyw-in-js/processor-utils`.\n\n All APIs that had `linaria` in their names have been renamed:\n\n - The field that stores meta information in runtime has been renamed from `__linaria` to `__wyw_meta`\n - The export with all interpolated values has been renamed from `__linariaPreval` to `__wywPreval`\n - The caller name in Babel has been renamed from `linaria` to `wyw-in-js`\n\n For additional information, please visit the [wyw-in-js.dev](https://wyw-in-js.dev).\n\n### Patch Changes\n\n- Updated dependencies [2ac94b99]\n - @linaria/core@6.0.0\n - @linaria/react@6.0.0\n - @linaria/server@6.0.0\n\n## 5.0.5\n\n### Patch Changes\n\n- Updated dependencies [e25e91ff]\n - @linaria/babel-preset@5.0.4\n - @linaria/shaker@5.0.3\n - @linaria/rollup@5.0.4\n - @linaria/stylelint@5.0.4\n - @linaria/webpack4-loader@5.0.4\n\n## 5.0.4\n\n### Patch Changes\n\n- Updated dependencies [4b083b7c]\n - @linaria/react@5.0.3\n\n## 5.0.3\n\n### Patch Changes\n\n- Updated dependencies [5f216d3b]\n- Updated dependencies [1e889937]\n- Updated dependencies [4992c14d]\n- Updated dependencies [15fa87a5]\n- Updated dependencies [25ba1344]\n- Updated dependencies [5f216d3b]\n - @linaria/babel-preset@5.0.3\n - @linaria/react@5.0.2\n - @linaria/shaker@5.0.2\n - @linaria/rollup@5.0.3\n - @linaria/stylelint@5.0.3\n - @linaria/webpack4-loader@5.0.3\n - @linaria/core@5.0.2\n\n## 5.0.2\n\n### Patch Changes\n\n- Updated dependencies [38796a57]\n - @linaria/babel-preset@5.0.2\n - @linaria/rollup@5.0.2\n - @linaria/stylelint@5.0.2\n - @linaria/webpack4-loader@5.0.2\n\n## 5.0.1\n\n### Patch Changes\n\n- Updated dependencies [6fb6eb69]\n- Updated dependencies [6fb6eb69]\n - @linaria/babel-preset@5.0.1\n - @linaria/shaker@5.0.1\n - @linaria/rollup@5.0.1\n - @linaria/stylelint@5.0.1\n - @linaria/webpack4-loader@5.0.1\n - @linaria/core@5.0.1\n - @linaria/react@5.0.1\n\n## 5.0.0\n\n### Major Changes\n\n- 88e07613: Rewritten dependecny tree processing with support for wildcard re-exports.\n- cb853e14: All processing stages were merged into one generators-based processor. It allows the implementation of more complex workflows to support features like dynamic imports and re-exports.\n\n### Minor Changes\n\n- 9cb4143d: Refactoring of the 1st stage of transformation. It opens the road to processing wildcard reexports.\n\n### Patch Changes\n\n- 2a1e24a0: Upgrade TypeScript to 5.2\n- Updated dependencies [9cb4143d]\n- Updated dependencies [ae162f46]\n- Updated dependencies [88e07613]\n- Updated dependencies [715dc93c]\n- Updated dependencies [b3ef8c1f]\n- Updated dependencies [144995f0]\n- Updated dependencies [f8b9bff5]\n- Updated dependencies [8a5d734b]\n- Updated dependencies [aa100453]\n- Updated dependencies [ea1444f6]\n- Updated dependencies [9bb782d0]\n- Updated dependencies [2a1e24a0]\n- Updated dependencies [cb853e14]\n- Updated dependencies [e042f96d]\n - @linaria/babel-preset@5.0.0\n - @linaria/core@5.0.0\n - @linaria/extractor@5.0.0\n - @linaria/react@5.0.0\n - @linaria/rollup@5.0.0\n - @linaria/server@5.0.0\n - @linaria/shaker@5.0.0\n - @linaria/stylelint@5.0.0\n - @linaria/webpack4-loader@5.0.0\n\n## 4.5.4\n\n### Patch Changes\n\n- Updated dependencies [10bcd241]\n - @linaria/babel-preset@4.5.4\n - @linaria/rollup@4.5.4\n - @linaria/stylelint@4.5.4\n - @linaria/webpack4-loader@4.5.4\n - @linaria/core@4.5.4\n - @linaria/react@4.5.4\n - @linaria/shaker@4.5.3\n\n## 4.5.3\n\n### Patch Changes\n\n- Updated dependencies [79557248]\n- Updated dependencies [b191f543]\n- Updated dependencies [e59bf809]\n- Updated dependencies [520ba8da]\n- Updated dependencies [ae3727f9]\n - @linaria/babel-preset@4.5.3\n - @linaria/core@4.5.3\n - @linaria/react@4.5.3\n - @linaria/stylelint@4.5.3\n - @linaria/shaker@4.5.2\n - @linaria/rollup@4.5.3\n - @linaria/webpack4-loader@4.5.3\n\n## 4.5.2\n\n### Patch Changes\n\n- Updated dependencies [85e74df6]\n- Updated dependencies [1bf5c5b8]\n - @linaria/shaker@4.5.1\n - @linaria/babel-preset@4.5.2\n - @linaria/rollup@4.5.2\n - @linaria/webpack4-loader@4.5.2\n - @linaria/core@4.5.2\n - @linaria/react@4.5.2\n - @linaria/stylelint@4.5.2\n\n## 4.5.1\n\n### Patch Changes\n\n- Updated dependencies [ceca1611]\n- Updated dependencies [13258306]\n - @linaria/babel-preset@4.5.1\n - @linaria/react@4.5.1\n - @linaria/rollup@4.5.1\n - @linaria/stylelint@4.5.1\n - @linaria/webpack4-loader@4.5.1\n - @linaria/core@4.5.1\n\n## 4.5.0\n\n### Minor Changes\n\n- 16c057df: Breaking Change: Performance Optimization for `styled`\n\n When a component is wrapped in `styled`, Linaria needs to determine if that component is already a styled component. To accomplish this, the wrapped component is included in the list of variables for evaluation, along with the interpolated values used in styles. The issue arises when a wrapped component, even if it is not styled, brings along a substantial dependency tree. This situation is particularly evident when using `styled` to style components from third-party UI libraries.\n\n To address this problem, Linaria will now examine the import location of the component and check if there is an annotation in the `package.json` file of the package containing the components. This annotation indicates whether the package includes other Linaria components. If there is no such annotation, Linaria will refrain from evaluating the component.\n\n Please note that this Breaking Change solely affects developers of component libraries. In order for users to style components from your library, you must include the `linaria.components` property in the library's `package.json` file. This property should have a mask that covers all imported files with components. Here's an example of how to specify it:\n\n ```json\n \"linaria\": {\n \"components\": \"**/*\"\n }\n ```\n\n### Patch Changes\n\n- af5bb92d: The end of support for Node.js 14. Migration to pnpm 8.\n- Updated dependencies [418e40af]\n- Updated dependencies [05ad266c]\n- Updated dependencies [16c057df]\n- Updated dependencies [af5bb92d]\n- Updated dependencies [10859924]\n - @linaria/babel-preset@4.5.0\n - @linaria/shaker@4.5.0\n - @linaria/react@4.5.0\n - @linaria/core@4.5.0\n - @linaria/extractor@4.5.0\n - @linaria/rollup@4.5.0\n - @linaria/server@4.5.0\n - @linaria/stylelint@4.5.0\n - @linaria/webpack4-loader@4.5.0\n\n## 4.1.17\n\n### Patch Changes\n\n- Updated dependencies [821a6819]\n- Updated dependencies [54ab61b2]\n - @linaria/babel-preset@4.4.5\n - @linaria/react@4.3.8\n - @linaria/shaker@4.2.11\n - @linaria/rollup@4.3.8\n - @linaria/stylelint@4.1.17\n - @linaria/webpack4-loader@4.1.17\n - @linaria/core@4.2.10\n\n## 4.1.16\n\n### Patch Changes\n\n- Updated dependencies [1c3f309d]\n- Updated dependencies [dbe250b5]\n- Updated dependencies [34029088]\n- Updated dependencies [a62e7ba6]\n - @linaria/babel-preset@4.4.4\n - @linaria/react@4.3.7\n - @linaria/shaker@4.2.10\n - @linaria/core@4.2.9\n - @linaria/rollup@4.3.7\n - @linaria/stylelint@4.1.16\n - @linaria/webpack4-loader@4.1.16\n\n## 4.1.15\n\n### Patch Changes\n\n- Updated dependencies [a3ad617f]\n - @linaria/react@4.3.6\n - @linaria/babel-preset@4.4.3\n - @linaria/core@4.2.8\n - @linaria/rollup@4.3.6\n - @linaria/stylelint@4.1.15\n - @linaria/webpack4-loader@4.1.15\n\n## 4.1.14\n\n### Patch Changes\n\n- Updated dependencies [13f0b416]\n- Updated dependencies [f9df4ed8]\n - @linaria/rollup@4.3.5\n - @linaria/babel-preset@4.4.2\n - @linaria/stylelint@4.1.14\n - @linaria/webpack4-loader@4.1.14\n - @linaria/core@4.2.7\n - @linaria/react@4.3.5\n - @linaria/shaker@4.2.9\n\n## 4.1.13\n\n### Patch Changes\n\n- Updated dependencies [917db446]\n- Updated dependencies [57c0dc4f]\n - @linaria/babel-preset@4.4.1\n - @linaria/rollup@4.3.4\n - @linaria/stylelint@4.1.13\n - @linaria/webpack4-loader@4.1.13\n\n## 4.1.12\n\n### Patch Changes\n\n- Updated dependencies [b27f328f]\n- Updated dependencies [9cf41fae]\n- Updated dependencies [860b8d21]\n- Updated dependencies [af783273]\n- Updated dependencies [28f3f93d]\n- Updated dependencies [1d4d6833]\n- Updated dependencies [71a5b351]\n- Updated dependencies [cf1d6611]\n- Updated dependencies [2d3a741f]\n- Updated dependencies [61d49a39]\n - @linaria/shaker@4.2.8\n - @linaria/babel-preset@4.4.0\n - @linaria/rollup@4.3.3\n - @linaria/stylelint@4.1.12\n - @linaria/webpack4-loader@4.1.12\n - @linaria/core@4.2.6\n - @linaria/react@4.3.4\n\n## 4.1.11\n\n### Patch Changes\n\n- Updated dependencies [3ce985e0]\n- Updated dependencies [77bcf2e7]\n - @linaria/babel-preset@4.3.3\n - @linaria/server@4.1.0\n - @linaria/rollup@4.3.2\n - @linaria/stylelint@4.1.11\n - @linaria/webpack4-loader@4.1.11\n - @linaria/core@4.2.5\n - @linaria/react@4.3.3\n - @linaria/shaker@4.2.7\n\n## 4.1.10\n\n### Patch Changes\n\n- Updated dependencies [edbf3cf1]\n- Updated dependencies [315f0366]\n - @linaria/rollup@4.3.1\n - @linaria/babel-preset@4.3.2\n - @linaria/core@4.2.4\n - @linaria/react@4.3.2\n - @linaria/shaker@4.2.6\n - @linaria/stylelint@4.1.10\n - @linaria/webpack4-loader@4.1.10\n\n## 4.1.9\n\n### Patch Changes\n\n- Updated dependencies [e2224348]\n- Updated dependencies [655c4f2c]\n- Updated dependencies [922f20d6]\n- Updated dependencies [5edde648]\n- Updated dependencies [e6420897]\n- Updated dependencies [b9e49b74]\n - @linaria/shaker@4.2.5\n - @linaria/rollup@4.3.0\n - @linaria/react@4.3.1\n - @linaria/babel-preset@4.3.1\n - @linaria/core@4.2.3\n - @linaria/stylelint@4.1.9\n - @linaria/webpack4-loader@4.1.9\n\n## 4.1.8\n\n### Patch Changes\n\n- Updated dependencies [63f56d47]\n- Updated dependencies [963508a2]\n- Updated dependencies [c26d4667]\n - @linaria/babel-preset@4.3.0\n - @linaria/react@4.3.0\n - @linaria/shaker@4.2.4\n - @linaria/rollup@4.2.2\n - @linaria/stylelint@4.1.8\n - @linaria/webpack4-loader@4.1.8\n - @linaria/core@4.2.2\n\n## 4.1.7\n\n### Patch Changes\n\n- Updated dependencies [cc2f87a8]\n- Updated dependencies [6de22792]\n - @linaria/babel-preset@4.2.4\n - @linaria/shaker@4.2.3\n - @linaria/react@4.2.1\n - @linaria/rollup@4.2.1\n - @linaria/stylelint@4.1.7\n - @linaria/webpack4-loader@4.1.7\n - @linaria/core@4.2.1\n\n## 4.1.6\n\n### Patch Changes\n\n- Updated dependencies [1e88e95d]\n- Updated dependencies [9111b4ea]\n - @linaria/core@4.2.0\n - @linaria/react@4.2.0\n - @linaria/rollup@4.2.0\n - @linaria/babel-preset@4.2.3\n - @linaria/stylelint@4.1.6\n - @linaria/webpack4-loader@4.1.6\n\n## 4.1.5\n\n### Patch Changes\n\n- Updated dependencies [8a8be242]\n- Updated dependencies [2906ec1c]\n- Updated dependencies [8a8be242]\n- Updated dependencies [c2092f61]\n- Updated dependencies [08304e09]\n- Updated dependencies [87ffe61c]\n - @linaria/shaker@4.2.2\n - @linaria/webpack4-loader@4.1.5\n - @linaria/babel-preset@4.2.2\n - @linaria/rollup@4.1.5\n - @linaria/core@4.1.4\n - @linaria/react@4.1.5\n - @linaria/stylelint@4.1.5\n\n## 4.1.4\n\n### Patch Changes\n\n- Updated dependencies [24b4a4bd]\n - @linaria/babel-preset@4.2.1\n - @linaria/shaker@4.2.1\n - @linaria/rollup@4.1.4\n - @linaria/stylelint@4.1.4\n - @linaria/webpack4-loader@4.1.4\n - @linaria/core@4.1.3\n - @linaria/react@4.1.4\n\n## 4.1.3\n\n### Patch Changes\n\n- Updated dependencies [8590e134]\n- Updated dependencies [f7351b09]\n- Updated dependencies [c0bd271a]\n- Updated dependencies [8f90fa75]\n- Updated dependencies [a5169f16]\n- Updated dependencies [ac0991a6]\n - @linaria/babel-preset@4.2.0\n - @linaria/shaker@4.2.0\n - @linaria/react@4.1.3\n - @linaria/webpack4-loader@4.1.3\n - @linaria/rollup@4.1.3\n - @linaria/stylelint@4.1.3\n - @linaria/core@4.1.2\n\n## 4.1.2\n\n### Patch Changes\n\n- Updated dependencies [008a5d13]\n- Updated dependencies [3c593aa8]\n - @linaria/webpack4-loader@4.1.2\n - @linaria/babel-preset@4.1.2\n - @linaria/rollup@4.1.2\n - @linaria/stylelint@4.1.2\n - @linaria/core@4.1.1\n - @linaria/shaker@4.1.2\n - @linaria/react@4.1.2\n\n## 4.1.1\n\n### Patch Changes\n\n- Updated dependencies [21ba7a44]\n- Updated dependencies [21ba7a44]\n- Updated dependencies [21ba7a44]\n- Updated dependencies [2abc55b3]\n- Updated dependencies [21ba7a44]\n - @linaria/babel-preset@4.1.1\n - @linaria/react@4.1.1\n - @linaria/shaker@4.1.1\n - @linaria/rollup@4.1.1\n - @linaria/stylelint@4.1.1\n - @linaria/webpack4-loader@4.1.1\n\n## 4.1.0\n\n### Patch Changes\n\n- Updated dependencies [92f6d871]\n - @linaria/babel-preset@4.1.0\n - @linaria/rollup@4.1.0\n - @linaria/stylelint@4.1.0\n - @linaria/webpack4-loader@4.1.0\n - @linaria/core@4.1.0\n - @linaria/shaker@4.1.0\n - @linaria/react@4.1.0\n\n## 4.0.0\n\n### Major Changes\n\n- bc0cbeea: A completely new async mode with native support for Vite, Rollup, esbuild and Webpack resolvers.\n\n BREAKING CHANGES: Despite the fact, that it should be fully compatible with 3.0 and 2.0 branches, the new version of styles evaluator can have some serious bugs which can make your project unbuildable (however, since there is no runtime, if the build is finished successfully, everything will continue work as it was on 2.0 and 3.0). If you face some problems please let us know and we will fix it as soon as possible.\n\n### Patch Changes\n\n- 8be5650d: The repo has been migrated to PNPM and Turborepo\n- ea41d440: New package @linaria/tags that contains all abstract logic for tags processors.\n- Updated dependencies [f0cddda4]\n - @linaria/babel-preset@4.0.0\n - @linaria/core@4.0.0\n - @linaria/extractor@4.0.0\n - @linaria/react@4.0.0\n - @linaria/rollup@4.0.0\n - @linaria/server@4.0.0\n - @linaria/shaker@4.0.0\n - @linaria/stylelint@4.0.0\n - @linaria/webpack4-loader@4.0.0\n\n## 3.0.0-beta.21\n\n### Patch Changes\n\n- Updated dependencies [17c83e34]\n - @linaria/react@3.0.0-beta.21\n - @linaria/babel-preset@3.0.0-beta.21\n - @linaria/core@3.0.0-beta.21\n - @linaria/extractor@3.0.0-beta.21\n - @linaria/rollup@3.0.0-beta.21\n - @linaria/shaker@3.0.0-beta.21\n - @linaria/stylelint@3.0.0-beta.21\n - @linaria/webpack4-loader@3.0.0-beta.21\n\n## 3.0.0-beta.20\n\n### Patch Changes\n\n- 8be5650d: The repo has been migrated to PNPM and Turborepo\n- Updated dependencies\n - @linaria/babel-preset@3.0.0-beta.20\n - @linaria/core@3.0.0-beta.20\n - @linaria/extractor@3.0.0-beta.20\n - @linaria/react@3.0.0-beta.20\n - @linaria/rollup@3.0.0-beta.20\n - @linaria/server@3.0.0-beta.20\n - @linaria/shaker@3.0.0-beta.20\n - @linaria/stylelint@3.0.0-beta.20\n - @linaria/webpack4-loader@3.0.0-beta.20\n\n# [3.0.0-beta.19](https://github.com/callstack/linaria/compare/v3.0.0-beta.18...v3.0.0-beta.19) (2022-06-03)\n\n### Features\n\n- **babel:** api for custom tags ([#976](https://github.com/callstack/linaria/issues/976)) ([3285ccc](https://github.com/callstack/linaria/commit/3285ccc1d00449b78b3fc74087528cd38cbdd116))\n- **babel:** new way for detecting tag imports ([#974](https://github.com/callstack/linaria/issues/974)) ([3305cfb](https://github.com/callstack/linaria/commit/3305cfb0c0f65abdacceeb7e6bad118c59f7d551))\n\n# [3.0.0-beta.18](https://github.com/callstack/linaria/compare/v3.0.0-beta.17...v3.0.0-beta.18) (2022-04-01)\n\n**Note:** Version bump only for package linaria\n\n# [3.0.0-beta.17](https://github.com/callstack/linaria/compare/v3.0.0-beta.16...v3.0.0-beta.17) (2021-12-27)\n\n**Note:** Version bump only for package linaria\n\n# [3.0.0-beta.16](https://github.com/callstack/linaria/compare/v3.0.0-beta.15...v3.0.0-beta.16) (2021-12-01)\n\n**Note:** Version bump only for package linaria\n\n# [3.0.0-beta.15](https://github.com/callstack/linaria/compare/v3.0.0-beta.14...v3.0.0-beta.15) (2021-11-29)\n\n**Note:** Version bump only for package linaria\n\n# [3.0.0-beta.14](https://github.com/callstack/linaria/compare/v3.0.0-beta.13...v3.0.0-beta.14) (2021-11-05)\n\n**Note:** Version bump only for package linaria\n\n# [3.0.0-beta.13](https://github.com/callstack/linaria/compare/v3.0.0-beta.12...v3.0.0-beta.13) (2021-09-13)\n\n**Note:** Version bump only for package linaria\n\n# [3.0.0-beta.12](https://github.com/callstack/linaria/compare/v3.0.0-beta.11...v3.0.0-beta.12) (2021-08-31)\n\n**Note:** Version bump only for package linaria\n\n# [3.0.0-beta.11](https://github.com/callstack/linaria/compare/v3.0.0-beta.10...v3.0.0-beta.11) (2021-08-08)\n\n**Note:** Version bump only for package linaria\n\n# [3.0.0-beta.10](https://github.com/callstack/linaria/compare/v3.0.0-beta.9...v3.0.0-beta.10) (2021-07-24)\n\n**Note:** Version bump only for package linaria\n\n# [3.0.0-beta.9](https://github.com/callstack/linaria/compare/v3.0.0-beta.8...v3.0.0-beta.9) (2021-07-23)\n\n**Note:** Version bump only for package linaria\n\n# [3.0.0-beta.8](https://github.com/callstack/linaria/compare/v3.0.0-beta.7...v3.0.0-beta.8) (2021-07-18)\n\n**Note:** Version bump only for package linaria\n\n# [3.0.0-beta.7](https://github.com/callstack/linaria/compare/v3.0.0-beta.6...v3.0.0-beta.7) (2021-06-24)\n\n**Note:** Version bump only for package linaria\n\n# [3.0.0-beta.6](https://github.com/callstack/linaria/compare/v3.0.0-beta.5...v3.0.0-beta.6) (2021-06-06)\n\n**Note:** Version bump only for package linaria\n\n# [3.0.0-beta.5](https://github.com/callstack/linaria/compare/v3.0.0-beta.4...v3.0.0-beta.5) (2021-05-31)\n\n**Note:** Version bump only for package linaria\n\n# [3.0.0-beta.4](https://github.com/callstack/linaria/compare/v3.0.0-beta.3...v3.0.0-beta.4) (2021-05-07)\n\n**Note:** Version bump only for package linaria\n\n# [3.0.0-beta.3](https://github.com/callstack/linaria/compare/v3.0.0-beta.2...v3.0.0-beta.3) (2021-04-20)\n\n**Note:** Version bump only for package linaria\n\n# [3.0.0-beta.2](https://github.com/callstack/linaria/compare/v3.0.0-beta.1...v3.0.0-beta.2) (2021-04-11)\n\n**Note:** Version bump only for package linaria\n" }, { "path": "packages/linaria/README.md", "content": "

\n \"Linaria\"\n

\n\n

\nZero-runtime CSS in JS library.\n

\n\n---\n\n### 📖 Please refer to the [GitHub](https://github.com/callstack/linaria#readme) for full documentation.\n\n## Features\n\n- Write CSS in JS, but with **zero runtime**, CSS is extracted to CSS files during build\n- Familiar **CSS syntax** with Sass like nesting\n- Use **dynamic prop based styles** with the React bindings, uses CSS variables behind the scenes\n- Easily find where the style was defined with **CSS sourcemaps**\n- **Lint your CSS** in JS with [stylelint](https://github.com/stylelint/stylelint)\n- Use **JavaScript for logic**, no CSS preprocessor needed\n- Optionally use any **CSS preprocessor** such as Sass or PostCSS\n\n**[Why use Linaria](../../docs/BENEFITS.md)**\n\n## Installation\n\n```sh\nnpm install @linaria/core @linaria/react @linaria/babel-preset\n```\n\nor\n\n```sh\nyarn add @linaria/core @linaria/react @linaria/babel-preset\n```\n" }, { "path": "packages/linaria/babel/package.json", "content": "{\n \"main\": \"../lib/babel.js\",\n \"module\": \"../esm/babel.js\",\n \"types\": \"../types/babel.d.ts\"\n}\n" }, { "path": "packages/linaria/babel.config.js", "content": "const config = require('../../babel.config');\n\nmodule.exports = config;\n" }, { "path": "packages/linaria/evaluators/package.json", "content": "{\n \"main\": \"../lib/evaluators.js\",\n \"module\": \"../esm/evaluators.js\",\n \"types\": \"../types/evaluators.d.ts\"\n}\n" }, { "path": "packages/linaria/loader/package.json", "content": "{\n \"main\": \"../lib/webpack4-loader.js\",\n \"module\": \"../esm/webpack4-loader.js\",\n \"types\": \"../types/webpack4-loader.d.ts\"\n}\n" }, { "path": "packages/linaria/package.json", "content": "{\n \"name\": \"linaria\",\n \"version\": \"7.0.1\",\n \"description\": \"Blazing fast zero-runtime CSS in JS library\",\n \"keywords\": [\n \"babel\",\n \"babel-plugin\",\n \"css\",\n \"css-in-js\",\n \"linaria\",\n \"react\",\n \"styled-components\"\n ],\n \"homepage\": \"https://github.com/callstack/linaria#readme\",\n \"bugs\": \"https://github.com/callstack/linaria/issues\",\n \"repository\": \"git@github.com:callstack/linaria.git\",\n \"license\": \"MIT\",\n \"main\": \"lib/core.js\",\n \"module\": \"esm/core.js\",\n \"types\": \"types/core.d.ts\",\n \"files\": [\n \"babel\",\n \"evaluators\",\n \"loader\",\n \"react\",\n \"rollup\",\n \"server\",\n \"stylelint-config\",\n \"types/\",\n \"lib/\",\n \"esm/\"\n ],\n \"wyw-in-js\": {\n \"tags\": {\n \"css\": \"@linaria/core/processors/css\",\n \"styled\": \"@linaria/react/processors/styled\"\n }\n },\n \"scripts\": {\n \"build\": \"pnpm build:lib && pnpm build:esm && pnpm build:declarations\",\n \"build:declarations\": \"tsc --emitDeclarationOnly --outDir types\",\n \"build:esm\": \"babel src --out-dir esm --extensions '.js,.jsx,.ts,.tsx' --source-maps --delete-dir-on-start\",\n \"build:lib\": \"cross-env NODE_ENV=legacy babel src --out-dir lib --extensions '.js,.jsx,.ts,.tsx' --source-maps --delete-dir-on-start\",\n \"typecheck\": \"tsc --noEmit --composite false\",\n \"watch\": \"pnpm build:lib --watch & pnpm build:esm --watch & pnpm build:declarations --watch\"\n },\n \"dependencies\": {\n \"@linaria/core\": \"workspace:^\",\n \"@linaria/react\": \"workspace:^\",\n \"@linaria/server\": \"workspace:^\"\n },\n \"engines\": {\n \"node\": \">=20.0.0\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n }\n}\n" }, { "path": "packages/linaria/react/package.json", "content": "{\n \"main\": \"../lib/react.js\",\n \"module\": \"../esm/react.js\",\n \"types\": \"../types/react.d.ts\"\n}\n" }, { "path": "packages/linaria/rollup/package.json", "content": "{\n \"main\": \"../lib/rollup.js\",\n \"module\": \"../esm/rollup.js\",\n \"types\": \"../types/rollup.d.ts\"\n}\n" }, { "path": "packages/linaria/server/package.json", "content": "{\n \"main\": \"../lib/server.js\",\n \"module\": \"../esm/server.js\",\n \"types\": \"../types/server.d.ts\"\n}\n" }, { "path": "packages/linaria/src/core.ts", "content": "export * from '@linaria/core';\n" }, { "path": "packages/linaria/src/react.ts", "content": "export * from '@linaria/react';\n" }, { "path": "packages/linaria/src/server.ts", "content": "export * from '@linaria/server';\n" }, { "path": "packages/linaria/stylelint-config/package.json", "content": "{\n \"main\": \"../lib/stylelint.js\",\n \"module\": \"../esm/stylelint.js\",\n \"types\": \"../types/stylelint.d.ts\"\n}\n" }, { "path": "packages/linaria/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.json\",\n \"compilerOptions\": { \"paths\": {}, \"rootDir\": \"src/\" },\n \"references\": [\n { \"path\": \"../core\" },\n { \"path\": \"../react\" },\n { \"path\": \"../server\" }\n ]\n}\n" }, { "path": "packages/postcss-linaria/CHANGELOG.md", "content": "# Change Log\n\n## 7.0.0\n\n### Major Changes\n\n- ab11ebb7: BREAKING: bump `@wyw-in-js/*` dependencies to `^1.0.0` (stable).\n\n This release updates Linaria's build-time evaluation engine (WyW). See https://wyw-in-js.dev/stability for practical guidance and common pitfalls.\n\n Notes:\n\n - Linaria 7 requires Node.js 20+ (aligned with WyW 1.x).\n - If you import JSON from code that is evaluated by WyW, add `.json` to `extensions` and ensure `.json` is ignored by evaluation rules (so it's parsed as JSON, not by Babel).\n - Rollup users: WyW 1.x serializes `transform()` by default (`serializeTransform: true`). If you hit Rollup \"Unexpected early exit\" (unresolved plugin promises / deadlock during resolve), set `serializeTransform: false` (see `examples/rollup/rollup.config.mjs`).\n - WyW 1.x promotes fully-statically-evaluatable modules to `only: ['*']` and can re-evaluate modules when cached exports are incomplete (cached export values might not be reused).\n\n### Patch Changes\n\n- b04f025e: Fix `@linaria/postcss-linaria` placeholder naming and source location correction, and ensure stylelint integration resolves configs correctly.\n\n## 6.3.0\n\n### Minor Changes\n\n- 281ca4f5: The new version of wyw-in-js, with the support of a configurable code remover, can help prevent compilation errors and improve build time.\n\n## 6.2.0\n\n### Minor Changes\n\n- a3dcee2e: Update wyw-in-js to 0.5.3\n\n## 6.1.0\n\n### Minor Changes\n\n- 8ba655d3: Bump wyw-in-js to 0.4.0. The full list of changes https://github.com/Anber/wyw-in-js/compare/%40wyw-in-js/transform%400.2.3...%40wyw-in-js/transform%400.4.0\n\n## 6.0.0\n\n### Major Changes\n\n- 2ac94b99: BREAKING CHANGE: Linaria has been migrated to wyw-in-js.\n\n # Migration Guide\n\n ## For Users\n\n The main breaking change is that all tooling has been moved from the `@linaria` scope to the `@wyw-in-js` scope. This means that you will need to update your dependencies as follows:\n\n | Old | New |\n | ------------------------ | ------------------------- |\n | @linaria/babel-preset | @wyw-in-js/babel-preset |\n | @linaria/cli | @wyw-in-js/cli |\n | @linaria/esbuild | @wyw-in-js/esbuild |\n | @linaria/rollup | @wyw-in-js/rollup |\n | @linaria/shaker | discontinued |\n | @linaria/vite | @wyw-in-js/vite |\n | @linaria/webpack4-loader | discontinued |\n | @linaria/webpack5-loader | @wyw-in-js/webpack-loader |\n\n There is no longer a need to install `@linaria/shaker` as it is now part of `@wyw-in-js/transform`, which will be installed automatically with the bundler plugins.\n\n The configuration file has been renamed from `linaria.config.js` (`linariarc`) to `wyw-in-js.config.js` (`.wyw-in-jsrc`).\n\n ## For Custom Processor Developers\n\n Base classes for processors and most helpers have been moved to `@wyw-in-js/processor-utils`.\n\n All APIs that had `linaria` in their names have been renamed:\n\n - The field that stores meta information in runtime has been renamed from `__linaria` to `__wyw_meta`\n - The export with all interpolated values has been renamed from `__linariaPreval` to `__wywPreval`\n - The caller name in Babel has been renamed from `linaria` to `wyw-in-js`\n\n For additional information, please visit the [wyw-in-js.dev](https://wyw-in-js.dev).\n\n### Patch Changes\n\n- 63392f9a: Fix the expressions in at-rule parameters and rules with functions. Fixes #1074\n\n## 5.0.0\n\n### Major Changes\n\n- 88e07613: Rewritten dependecny tree processing with support for wildcard re-exports.\n- cb853e14: All processing stages were merged into one generators-based processor. It allows the implementation of more complex workflows to support features like dynamic imports and re-exports.\n\n### Minor Changes\n\n- 9cb4143d: Refactoring of the 1st stage of transformation. It opens the road to processing wildcard reexports.\n\n### Patch Changes\n\n- 2a1e24a0: Upgrade TypeScript to 5.2\n\n## 4.5.1\n\n### Patch Changes\n\n- e59bf809: Shaker mistakenly counts references in types as valuable and keeps referenced variables alive.\n\n## 4.5.0\n\n### Patch Changes\n\n- af5bb92d: The end of support for Node.js 14. Migration to pnpm 8.\n\n## 4.1.5\n\n### Patch Changes\n\n- 5edde648: Upgrade Babel to support TypeScript 4.9. Fixes #1133.\n- e6420897: Update patch version so npm will pick up readme change\n\n## 4.1.4\n\n### Patch Changes\n\n- 4c2efaa9: Only lint when file can be parsed by babel, reduce noisey errors during dev\n\n## 4.1.3\n\n### Patch Changes\n\n- ce36da42: Add stylelint v14 custom syntax support\n" }, { "path": "packages/postcss-linaria/README.md", "content": "

\n \"Linaria\"\n

\n\n

\nZero-runtime CSS in JS library.\n

\n\n---\n\n \n## Setup\n\nPlease check the Linaria [linting documentation](https://github.com/callstack/linaria/blob/master/docs/LINTING.md) for setup instructions.\n\n## Acknowledgements\nThis project wouldn't have been possible without the following libraries or the people behind them.\n\n- [postcss-lit](https://github.com/43081j/postcss-lit) (One of the first CSS-in-JS custom syntaxes)\n- [stylelint](https://stylelint.io/)\n- [postcss](https://postcss.org/)\n\n### 📖 Please refer to [GitHub](https://github.com/callstack/linaria#readme) for full documentation.\n" }, { "path": "packages/postcss-linaria/__tests__/__utils__/index.ts", "content": "import type { Document, Node } from 'postcss';\n\nimport { parse } from '../../src/parse';\n\nexport function createTestAst(source: string): {\n ast: Document;\n source: string;\n} {\n const ast = parse(source) as Document;\n\n return { ast, source };\n}\n\nexport function getSourceForNodeByLoc(source: string, node: Node): string {\n const loc = node.source;\n\n if (!loc || !loc.start || !loc.end) {\n return '';\n }\n\n const lines = source.split(/\\r\\n|\\n/);\n const result: string[] = [];\n const startLineIndex = loc.start.line - 1;\n const endLineIndex = loc.end.line - 1;\n\n for (let i = startLineIndex; i < loc.end.line; i++) {\n const line = lines[i];\n if (line) {\n let offsetStart = 0;\n let offsetEnd = line.length;\n\n if (i === startLineIndex) {\n offsetStart = loc.start.column - 1;\n }\n\n if (i === endLineIndex) {\n offsetEnd = loc.end.column;\n }\n\n result.push(line.substring(offsetStart, offsetEnd));\n }\n }\n\n return result.join('\\n');\n}\n\nexport function getSourceForNodeByRange(source: string, node: Node): string {\n if (!node.source || !node.source.start || !node.source.end) {\n return '';\n }\n\n return source.substring(node.source.start.offset, node.source.end.offset + 1);\n}\n\nexport const sourceWithExpression = {\n ruleset: `\n const expr = 'color: black';\n css\\`\n $\\{expr}\n \\`;\n `,\n singleLineRuleset: `\n css\\`\n \\${expr0} { \\${expr1}: \\${expr2} }\n \\`\n `,\n selectorOrAtRule: `\n const expr = '@media (min-width: 100px)';\n css\\`\n $\\{expr} {\n color: black;\n }\n \\`;\n `,\n selectorBeforeExpression: `\n const expr = '.classname';\n css\\`\n .example $\\{expr} {\n color: black;\n }\n \\`;\n `,\n selectorAfterExpression: `\n const expr = '.classname';\n css\\`\n $\\{expr} .example {\n color: black;\n }\n \\`;\n `,\n declarationProperty: `\n const expr = 'color';\n css\\`\n \\${expr}: black;\n \\`;\n `,\n declarationValue: `\n const expr = 'black';\n css\\`\n color: \\${expr};\n \\`;\n `,\n declarationMultipleValues: `\n const expr1 = '10px';\n const expr2 = '5px';\n css\\`\n margin: \\${expr1} \\${expr2} \\${expr1} \\${expr2};\n \\`;\n `,\n declarationMixedValues: `\n const expr1 = '10px';\n const expr2 = '5px';\n css\\`\n margin: \\${expr1} 7px \\${expr2} 9px;\n \\`;\n `,\n combo: `\n css\\`\n \\${expr0}\n .foo {\n \\${expr1}: \\${expr2};\n }\n\n \\${expr3} {\n .bar {\n color: black;\n }\n }\n \\${expr4}\n \\`;\n `,\n};\n" }, { "path": "packages/postcss-linaria/__tests__/locationCorrection.test.ts", "content": "import type { Root, Rule, Declaration, Comment } from 'postcss';\n\nimport {\n createTestAst,\n getSourceForNodeByRange,\n getSourceForNodeByLoc,\n sourceWithExpression,\n} from './__utils__';\n\nconst {\n ruleset,\n selectorOrAtRule,\n selectorBeforeExpression,\n selectorAfterExpression,\n declarationProperty,\n declarationValue,\n declarationMultipleValues,\n declarationMixedValues,\n} = sourceWithExpression;\n\ndescribe('locationCorrection', () => {\n it('should translate basic CSS positions', () => {\n const { source, ast } = createTestAst(`\n css\\`\n .foo { color: hotpink; }\n \\`;\n `);\n const rule = (ast.nodes[0] as Root).nodes[0] as Rule;\n const color = rule.nodes[0] as Declaration;\n expect(color.type).toEqual('decl');\n expect(rule.type).toEqual('rule');\n expect(getSourceForNodeByLoc(source, rule)).toEqual(\n '.foo { color: hotpink; }'\n );\n expect(getSourceForNodeByLoc(source, color)).toEqual('color: hotpink;');\n expect(getSourceForNodeByRange(source, rule)).toEqual(\n '.foo { color: hotpink; }'\n );\n expect(getSourceForNodeByRange(source, color)).toEqual('color: hotpink;');\n });\n\n it('should handle multi-line CSS', () => {\n const { source, ast } = createTestAst(`\n css\\`\n .foo {\n color: hotpink;\n }\n \\`;\n `);\n const rule = (ast.nodes[0] as Root).nodes[0] as Rule;\n const color = rule.nodes[0] as Declaration;\n expect(color.type).toEqual('decl');\n expect(rule.type).toEqual('rule');\n expect(getSourceForNodeByLoc(source, rule)).toEqual(\n `.foo {\n color: hotpink;\n }`\n );\n expect(getSourceForNodeByLoc(source, color)).toEqual('color: hotpink;');\n expect(getSourceForNodeByRange(source, rule)).toEqual(\n `.foo {\n color: hotpink;\n }`\n );\n expect(getSourceForNodeByRange(source, color)).toEqual('color: hotpink;');\n });\n\n it('should handle multi-line CSS with expressions', () => {\n const { source, ast } = createTestAst(`\n css\\`\n .foo {\n color: hotpink;\n $\\{expr}\n }\n \\`;\n `);\n const rule = (ast.nodes[0] as Root).nodes[0] as Rule;\n const color = rule.nodes[0] as Declaration;\n expect(color.type).toEqual('decl');\n expect(rule.type).toEqual('rule');\n expect(getSourceForNodeByLoc(source, rule)).toEqual(\n `.foo {\n color: hotpink;\n $\\{expr}\n }`\n );\n expect(getSourceForNodeByLoc(source, color)).toEqual('color: hotpink;');\n expect(getSourceForNodeByRange(source, rule)).toEqual(\n `.foo {\n color: hotpink;\n $\\{expr}\n }`\n );\n expect(getSourceForNodeByRange(source, color)).toEqual('color: hotpink;');\n });\n\n it('should handle single line expressions', () => {\n const { source, ast } = createTestAst(`css\\`.foo { color: \\${expr}; }\\`;`);\n const rule = (ast.nodes[0] as Root).nodes[0] as Rule;\n const color = rule.nodes[0] as Declaration;\n expect(color.type).toEqual('decl');\n expect(rule.type).toEqual('rule');\n expect(getSourceForNodeByLoc(source, rule)).toEqual(\n '.foo { color: ${expr}; }'\n );\n expect(getSourceForNodeByLoc(source, color)).toEqual('color: ${expr};');\n expect(getSourceForNodeByRange(source, rule)).toEqual(\n '.foo { color: ${expr}; }'\n );\n expect(getSourceForNodeByRange(source, color)).toEqual('color: ${expr};');\n });\n\n it('should handle multi-line CSS with value expression', () => {\n const { source, ast } = createTestAst(`\n css\\`\n .foo {\n color: $\\{expr1};\n }\n \\`;\n `);\n const rule = (ast.nodes[0] as Root).nodes[0] as Rule;\n const color = rule.nodes[0] as Declaration;\n expect(color.type).toEqual('decl');\n expect(rule.type).toEqual('rule');\n expect(getSourceForNodeByLoc(source, rule)).toEqual(\n `.foo {\n color: $\\{expr1};\n }`\n );\n expect(getSourceForNodeByLoc(source, color)).toEqual('color: ${expr1};');\n expect(getSourceForNodeByRange(source, rule)).toEqual(\n `.foo {\n color: $\\{expr1};\n }`\n );\n expect(getSourceForNodeByRange(source, color)).toEqual(\n 'color: ${expr1};\\n'\n );\n });\n\n it('should stringify a ruleset expression', () => {\n const { source, ast } = createTestAst(ruleset);\n const node = (ast.nodes[0] as Root).nodes[0] as Comment;\n expect(node.type).toEqual('comment');\n expect(getSourceForNodeByLoc(source, node)).toEqual('${expr}');\n expect(getSourceForNodeByRange(source, node)).toEqual('${expr}');\n });\n\n it('should stringify a selector or at-rule expression', () => {\n const { source, ast } = createTestAst(selectorOrAtRule);\n const rule = (ast.nodes[0] as Root).nodes[0] as Rule;\n expect(rule.type).toEqual('rule');\n expect(getSourceForNodeByLoc(source, rule)).toEqual(\n `$\\{expr} {\n color: black;\n }`\n );\n expect(getSourceForNodeByRange(source, rule)).toEqual(\n `$\\{expr} {\n color: black;\n }`\n );\n });\n\n it('should stringify selector expression with a selector before the expression', () => {\n const { source, ast } = createTestAst(selectorBeforeExpression);\n const rule = (ast.nodes[0] as Root).nodes[0] as Rule;\n expect(rule.type).toEqual('rule');\n expect(getSourceForNodeByLoc(source, rule)).toEqual(\n `.example $\\{expr} {\n color: black;\n }`\n );\n expect(getSourceForNodeByRange(source, rule)).toEqual(\n `.example $\\{expr} {\n color: black;\n }`\n );\n });\n\n it('should stringify selector expression with a selector after the expression', () => {\n const { source, ast } = createTestAst(selectorAfterExpression);\n const rule = (ast.nodes[0] as Root).nodes[0] as Rule;\n expect(rule.type).toEqual('rule');\n expect(getSourceForNodeByLoc(source, rule)).toEqual(\n `$\\{expr} .example {\n color: black;\n }`\n );\n expect(getSourceForNodeByRange(source, rule)).toEqual(\n `$\\{expr} .example {\n color: black;\n }`\n );\n });\n\n it('should stringify a declaration property expression', () => {\n const { source, ast } = createTestAst(declarationProperty);\n const color = (ast.nodes[0] as Root).nodes[0] as Declaration;\n expect(color.type).toEqual('decl');\n expect(getSourceForNodeByLoc(source, color)).toEqual('${expr}: black;');\n expect(getSourceForNodeByRange(source, color)).toEqual('${expr}: black;');\n });\n\n it('should stringify a declaration value with a single expression', () => {\n const { source, ast } = createTestAst(declarationValue);\n const color = (ast.nodes[0] as Root).nodes[0] as Declaration;\n expect(color.type).toEqual('decl');\n expect(getSourceForNodeByLoc(source, color)).toEqual('color: ${expr};');\n expect(getSourceForNodeByRange(source, color)).toEqual('color: ${expr};');\n });\n\n it('should stringify a declaration value with multiple expressions', () => {\n const { source, ast } = createTestAst(declarationMultipleValues);\n const margin = (ast.nodes[0] as Root).nodes[0] as Declaration;\n expect(margin.type).toEqual('decl');\n expect(getSourceForNodeByLoc(source, margin)).toEqual(\n 'margin: ${expr1} ${expr2} ${expr1} ${expr2};'\n );\n expect(getSourceForNodeByRange(source, margin)).toEqual(\n 'margin: ${expr1} ${expr2} ${expr1} ${expr2};'\n );\n });\n\n it('should stringify a decl value with some but not all values as expressions', () => {\n const { source, ast } = createTestAst(declarationMixedValues);\n const margin = (ast.nodes[0] as Root).nodes[0] as Declaration;\n expect(margin.type).toEqual('decl');\n expect(getSourceForNodeByLoc(source, margin)).toEqual(\n 'margin: ${expr1} 7px ${expr2} 9px;'\n );\n expect(getSourceForNodeByRange(source, margin)).toEqual(\n 'margin: ${expr1} 7px ${expr2} 9px;'\n );\n });\n\n it('should account for code before', () => {\n const { source, ast } = createTestAst(`\n const foo = bar + baz;\n css\\`\n .foo { color: hotpink; }\n \\`;\n `);\n const rule = (ast.nodes[0] as Root).nodes[0] as Rule;\n const color = rule.nodes[0] as Declaration;\n expect(color.type).toEqual('decl');\n expect(rule.type).toEqual('rule');\n expect(getSourceForNodeByLoc(source, rule)).toEqual(\n '.foo { color: hotpink; }'\n );\n expect(getSourceForNodeByLoc(source, color)).toEqual('color: hotpink;');\n expect(getSourceForNodeByRange(source, rule)).toEqual(\n '.foo { color: hotpink; }'\n );\n expect(getSourceForNodeByRange(source, color)).toEqual('color: hotpink;');\n });\n\n it('should account for mixed indentation', () => {\n const { source, ast } = createTestAst(`\n css\\`\n .foo { $\\{expr}: hotpink; }\n \\`;\n `);\n const rule = (ast.nodes[0] as Root).nodes[0] as Rule;\n const color = rule.nodes[0] as Declaration;\n expect(color.type).toEqual('decl');\n expect(rule.type).toEqual('rule');\n expect(getSourceForNodeByLoc(source, rule)).toEqual(\n '.foo { ${expr}: hotpink; }'\n );\n expect(getSourceForNodeByLoc(source, color)).toEqual('${expr}: hotpink;');\n expect(getSourceForNodeByRange(source, rule)).toEqual(\n '.foo { ${expr}: hotpink; }'\n );\n expect(getSourceForNodeByRange(source, color)).toEqual('${expr}: hotpink;');\n });\n});\n" }, { "path": "packages/postcss-linaria/__tests__/parse.test.ts", "content": "import type { Root, Rule, Declaration } from 'postcss';\n\nimport { placeholderText } from '../src/util';\n\nimport { createTestAst, sourceWithExpression } from './__utils__';\n\nconst {\n ruleset,\n singleLineRuleset,\n selectorOrAtRule,\n selectorBeforeExpression,\n selectorAfterExpression,\n declarationProperty,\n declarationValue,\n declarationMultipleValues,\n declarationMixedValues,\n combo,\n} = sourceWithExpression;\n\ndescribe('parse', () => {\n describe('expressions', () => {\n it('should parse a ruleset expression', () => {\n const { ast } = createTestAst(ruleset);\n const root = ast.nodes[0] as Root;\n expect(root.source?.input.css).toMatchInlineSnapshot(`\n \" /* ${placeholderText}:0 */\n \"\n `);\n });\n\n it('should parse a single line ruleset expression', () => {\n const { ast } = createTestAst(singleLineRuleset);\n const root = ast.nodes[0] as Root;\n expect(root.source?.input.css).toMatchInlineSnapshot(`\n \" .${placeholderText}0 { --${placeholderText}1: ${placeholderText}2 }\n \"\n `);\n });\n\n it('should parse a selector or at-rule expression', () => {\n const { ast } = createTestAst(selectorOrAtRule);\n const root = ast.nodes[0] as Root;\n expect(root.source?.input.css).toMatchInlineSnapshot(`\n \" .${placeholderText}0 {\n color: black;\n }\n \"\n `);\n });\n\n it('should parse a selector expression with selectors before expression', () => {\n const { ast } = createTestAst(selectorBeforeExpression);\n const root = ast.nodes[0] as Root;\n expect(root.source?.input.css).toMatchInlineSnapshot(`\n \" .example .${placeholderText}0 {\n color: black;\n }\n \"\n `);\n });\n\n it('should parse a selector expression with selectors after expression', () => {\n const { ast } = createTestAst(selectorAfterExpression);\n const root = ast.nodes[0] as Root;\n expect(root.source?.input.css).toMatchInlineSnapshot(`\n \" .${placeholderText}0 .example {\n color: black;\n }\n \"\n `);\n });\n\n it('should parse a declaration property expression', () => {\n const { ast } = createTestAst(declarationProperty);\n const root = ast.nodes[0] as Root;\n expect(root.source?.input.css).toMatchInlineSnapshot(`\n \" --${placeholderText}0: black;\n \"\n `);\n });\n\n it('should parse a declaration value with a single expression', () => {\n const { ast } = createTestAst(declarationValue);\n const root = ast.nodes[0] as Root;\n expect(root.source?.input.css).toMatchInlineSnapshot(`\n \" color: ${placeholderText}0;\n \"\n `);\n });\n\n it('should parse a declaration value with multiple expressions', () => {\n const { ast } = createTestAst(declarationMultipleValues);\n const root = ast.nodes[0] as Root;\n expect(root.source?.input.css).toMatchInlineSnapshot(`\n \" margin: ${placeholderText}0 ${placeholderText}1 ${placeholderText}2 ${placeholderText}3;\n \"\n `);\n });\n\n it('should parse a decl value with some but not all values as expressions', () => {\n const { ast } = createTestAst(declarationMixedValues);\n const root = ast.nodes[0] as Root;\n expect(root.source?.input.css).toMatchInlineSnapshot(`\n \" margin: ${placeholderText}0 7px ${placeholderText}1 9px;\n \"\n `);\n });\n\n it('should parse a combinations of all expressions', () => {\n const { ast } = createTestAst(combo);\n const root = ast.nodes[0] as Root;\n expect(root.source?.input.css).toMatchInlineSnapshot(`\n \" /* ${placeholderText}:0 */\n .foo {\n --${placeholderText}1: ${placeholderText}2;\n }\n\n .${placeholderText}3 {\n .bar {\n color: black;\n }\n }\n /* ${placeholderText}:4 */\n \"\n `);\n });\n });\n\n describe('languages', () => {\n it('should parse css', () => {\n const { source, ast } = createTestAst(`\n css\\`\n .foo { color: hotpink; }\n \\`;\n `);\n expect(ast.nodes.length).toEqual(1);\n const root = ast.nodes[0] as Root;\n const rule = root.nodes[0] as Rule;\n const colour = rule.nodes[0] as Declaration;\n expect(ast.type).toEqual('document');\n expect(root.type).toEqual('root');\n expect(rule.type).toEqual('rule');\n expect(colour.type).toEqual('decl');\n expect(root.raws.codeBefore).toEqual('\\n css`\\n');\n expect(root.parent).toEqual(ast);\n expect(root.raws.codeAfter).toEqual('`;\\n ');\n expect(ast.source!.start).toEqual({\n line: 1,\n column: 1,\n offset: 0,\n });\n expect(ast.source!.input.css).toEqual(source);\n });\n\n it('should parse javascript', () => {\n const { ast } = createTestAst(`\n const someObj = {a: {b: 2}};\n const someValue = someObj?.a?.b ?? 3;\n css\\`\n .foo { color: hotpink; }\n \\`;\n `);\n expect(ast.nodes.length).toEqual(1);\n const root = ast.nodes[0] as Root;\n const rule = root.nodes[0] as Rule;\n const color = rule.nodes[0] as Declaration;\n expect(ast.type).toEqual('document');\n expect(root.type).toEqual('root');\n expect(rule.type).toEqual('rule');\n expect(color.type).toEqual('decl');\n });\n\n it('should parse javascript without any CSS', () => {\n const { source, ast } = createTestAst(`\n const foo = 'bar';\n `);\n expect(ast.type).toEqual('document');\n expect(ast.nodes.length).toEqual(0);\n expect(ast.source!.start).toEqual({\n line: 1,\n column: 1,\n offset: 0,\n });\n expect(ast.source!.input.css).toEqual(source);\n });\n\n it('should parse typescript', () => {\n const { ast } = createTestAst(`\n function doStuff(x: number, y: number): void {}\n css\\`\n .foo { color: hotpink; }\n \\`;\n `);\n expect(ast.nodes.length).toEqual(1);\n const root = ast.nodes[0] as Root;\n const rule = root.nodes[0] as Rule;\n const color = rule.nodes[0] as Declaration;\n expect(ast.type).toEqual('document');\n expect(root.type).toEqual('root');\n expect(rule.type).toEqual('rule');\n expect(color.type).toEqual('decl');\n });\n\n it('should parse jsx', () => {\n const { ast } = createTestAst(`\n import React from 'react';\n import { css } from 'linaria';\n\n const container = css\\`\n color: hotpink;\n \\`\n\n const HelloWorld = () => {\n const cx = useCx();\n return (
\n Hello World\n
);\n }\n\n export default HelloWorld;\n `);\n expect(ast.type).toEqual('document');\n const root = ast.nodes[0] as Root;\n expect(root.type).toEqual('root');\n expect(root.source!.input.css).toEqual(' color: hotpink;\\n');\n });\n\n it('should parse styled api', () => {\n const { source, ast } = createTestAst(`\n const StyledSpan = styled.span\\`\n color: black;\n \\`;\n `);\n expect(ast.nodes.length).toEqual(1);\n const root = ast.nodes[0] as Root;\n const color = root.nodes[0] as Declaration;\n expect(ast.type).toEqual('document');\n expect(root.type).toEqual('root');\n expect(color.type).toEqual('decl');\n expect(root.raws.codeBefore).toEqual(\n '\\n const StyledSpan = styled.span`\\n'\n );\n expect(root.parent).toEqual(ast);\n expect(root.raws.codeAfter).toEqual('`;\\n ');\n expect(ast.source!.start).toEqual({\n line: 1,\n column: 1,\n offset: 0,\n });\n expect(ast.source!.input.css).toEqual(source);\n });\n\n it('should parse styled api with props', () => {\n const { source, ast } = createTestAst(`\n const StyledSpan = styled.span\\`\n color: \\${(props) => props.color};\n \\`;\n `);\n expect(ast.nodes.length).toEqual(1);\n const root = ast.nodes[0] as Root;\n const color = root.nodes[0] as Declaration;\n expect(ast.type).toEqual('document');\n expect(root.type).toEqual('root');\n expect(color.type).toEqual('decl');\n expect(root.raws.codeBefore).toEqual(\n '\\n const StyledSpan = styled.span`\\n'\n );\n expect(root.parent).toEqual(ast);\n expect(root.raws.codeAfter).toEqual('`;\\n ');\n expect(ast.source!.start).toEqual({\n line: 1,\n column: 1,\n offset: 0,\n });\n expect(ast.source!.input.css).toEqual(source);\n });\n\n it('should ignore non-css templates', () => {\n const { source, ast } = createTestAst(`\n html\\`
\\`;\n `);\n expect(ast.type).toEqual('document');\n expect(ast.nodes.length).toEqual(0);\n expect(ast.source!.start).toEqual({\n line: 1,\n column: 1,\n offset: 0,\n });\n expect(ast.source!.input.css).toEqual(source);\n });\n });\n\n describe('formats', () => {\n it('should parse multiple stylesheets', () => {\n const { source, ast } = createTestAst(`\n css\\`\n .foo { color: hotpink; }\n \\`;\n\n css\\`.bar: { background: lime; }\\`;\n `);\n expect(ast.nodes.length).toEqual(2);\n const root1 = ast.nodes[0] as Root;\n const root2 = ast.nodes[1] as Root;\n\n expect(root1.type).toEqual('root');\n expect(root1.raws.codeBefore).toEqual('\\n css`\\n');\n expect(root1.raws.codeAfter).toEqual(undefined);\n expect(root1.parent).toEqual(ast);\n\n expect(root2.type).toEqual('root');\n expect(root2.raws.codeBefore).toEqual('`;\\n\\n css`');\n expect(root2.raws.codeAfter).toEqual('`;\\n ');\n expect(root2.parent).toEqual(ast);\n\n expect(ast.source!.start).toEqual({\n line: 1,\n column: 1,\n offset: 0,\n });\n expect(ast.source!.input.css).toEqual(source);\n });\n\n it('should parse multiple stylesheets indented differently', () => {\n const { source, ast } = createTestAst(`\n css\\`\n .foo { color: hotpink; }\n \\`;\n const classNames = {\n container: css\\`\n .bar: { background: lime; }\n \\`,\n };\n `);\n expect(ast.nodes.length).toEqual(2);\n const root1 = ast.nodes[0] as Root;\n const root2 = ast.nodes[1] as Root;\n\n expect(root1.type).toEqual('root');\n expect(root1.raws.codeBefore).toEqual('\\n css`\\n');\n expect(root1.raws.codeAfter).toEqual(undefined);\n expect(root1.parent).toEqual(ast);\n\n expect(root2.type).toEqual('root');\n expect(root2.raws.codeBefore).toEqual(\n '`;\\n const classNames = {\\n container: css`\\n'\n );\n expect(root2.raws.codeAfter).toEqual('`,\\n };\\n ');\n expect(root2.parent).toEqual(ast);\n\n expect(ast.source!.start).toEqual({\n line: 1,\n column: 1,\n offset: 0,\n });\n expect(ast.source!.input.css).toEqual(source);\n });\n\n it('should parse multi-line stylesheets', async () => {\n const { source, ast } = createTestAst(`\n css\\`\n .foo {\n color: hotpink;\n }\n \\`;\n `);\n const root = ast.nodes[0] as Root;\n const rule = root.nodes[0] as Rule;\n const colour = rule.nodes[0] as Declaration;\n expect(ast.type).toEqual('document');\n expect(root.type).toEqual('root');\n expect(rule.type).toEqual('rule');\n expect(colour.type).toEqual('decl');\n expect(root.raws.codeBefore).toEqual('\\n css`\\n');\n expect(root.parent).toEqual(ast);\n expect(root.raws.codeAfter).toEqual('`;\\n ');\n expect(ast.source!.start).toEqual({\n line: 1,\n column: 1,\n offset: 0,\n });\n expect(ast.source!.input.css).toEqual(source);\n });\n });\n\n it('should return empty document if babel cannot parse file', () => {\n const { ast } = createTestAst(`this is not valid source code for a file`);\n expect(ast.type).toEqual('document');\n expect(ast.raws).toEqual({});\n expect(ast.nodes.length).toEqual(0);\n });\n});\n" }, { "path": "packages/postcss-linaria/__tests__/stringify.test.ts", "content": "import type { Root, Rule, Declaration } from 'postcss';\n\nimport syntax from '../src/index';\nimport { placeholderText } from '../src/util';\n\nimport { createTestAst, sourceWithExpression } from './__utils__';\n\nconst {\n ruleset,\n singleLineRuleset,\n selectorOrAtRule,\n selectorBeforeExpression,\n selectorAfterExpression,\n declarationProperty,\n declarationValue,\n declarationMultipleValues,\n declarationMixedValues,\n combo,\n} = sourceWithExpression;\n\ndescribe('stringify', () => {\n describe('with expressions', () => {\n it('should stringify a ruleset expression', () => {\n const { source, ast } = createTestAst(ruleset);\n const output = ast.toString(syntax);\n expect(output).toEqual(source);\n });\n\n it('should stringify a single line ruleset expression', () => {\n const { source, ast } = createTestAst(singleLineRuleset);\n const output = ast.toString(syntax);\n expect(output).toEqual(source);\n });\n\n it('should stringify a selector or at-rule expression', () => {\n const { source, ast } = createTestAst(selectorOrAtRule);\n const output = ast.toString(syntax);\n expect(output).toEqual(source);\n });\n\n it('should stringify selector expression with a selector before the expression', () => {\n const { source, ast } = createTestAst(selectorBeforeExpression);\n const output = ast.toString(syntax);\n expect(output).toEqual(source);\n });\n\n it('should stringify selector expression with a selector after the expression', () => {\n const { source, ast } = createTestAst(selectorAfterExpression);\n const output = ast.toString(syntax);\n expect(output).toEqual(source);\n });\n\n it('should stringify a declaration property expression', () => {\n const { source, ast } = createTestAst(declarationProperty);\n const output = ast.toString(syntax);\n expect(output).toEqual(source);\n });\n\n it('should stringify a declaration value with a single expression', () => {\n const { source, ast } = createTestAst(declarationValue);\n const output = ast.toString(syntax);\n expect(output).toEqual(source);\n });\n\n it('should stringify a declaration value with multiple expressions', () => {\n const { source, ast } = createTestAst(declarationMultipleValues);\n const output = ast.toString(syntax);\n expect(output).toEqual(source);\n });\n\n it('should stringify a decl value with some but not all values as expressions', () => {\n const { source, ast } = createTestAst(declarationMixedValues);\n const output = ast.toString(syntax);\n expect(output).toEqual(source);\n });\n\n it('should stringify a combinations of all expressions', () => {\n const { source, ast } = createTestAst(combo);\n const output = ast.toString(syntax);\n expect(output).toEqual(source);\n });\n });\n\n it('should stringify basic CSS', () => {\n const { source, ast } = createTestAst(`\n css\\`\n .foo { color: hotpink; }\n \\`;\n `);\n\n const output = ast.toString(syntax);\n expect(output).toEqual(source);\n });\n\n it('should stringify single-line expressions', () => {\n const { source, ast } = createTestAst(`\n css\\`\n .foo { $\\{expr}: hotpink; }\n \\`;\n `);\n\n const output = ast.toString(syntax);\n\n expect(output).toEqual(source);\n });\n\n it('should stringify multiple expressions', () => {\n const { source, ast } = createTestAst(`\n css\\`\n .foo { $\\{expr}: hotpink; }\n .bar { $\\{expr2}: lime; }\n \\`;\n `);\n\n const output = ast.toString(syntax);\n\n expect(output).toEqual(source);\n });\n\n it('should stringify multiple same-named expressions', () => {\n const { source, ast } = createTestAst(`\n css\\`\n .foo { $\\{expr}: hotpink; }\n .bar { $\\{expr}: lime; }\n \\`;\n `);\n\n const output = ast.toString(syntax);\n\n expect(output).toEqual(source);\n });\n\n it('should stringify multiple stylesheets', () => {\n const { source, ast } = createTestAst(`\n css\\`\n .foo { color: hotpink; }\n \\`;\n\n const somethingInTheMiddle = 808;\n\n css\\`.foo { color: lime; }\\`;\n `);\n\n const output = ast.toString(syntax);\n\n expect(output).toEqual(source);\n });\n\n it('should handle deleted (by another plugin) expression state', () => {\n const { ast } = createTestAst(`\n css\\`\n .foo { $\\{expr}: hotpink; }\n \\`;\n `);\n\n const root = ast.nodes[0]!;\n root.raws.linariaTemplateExpressions = undefined;\n const output = ast.toString(syntax);\n\n expect(output).toEqual(\n `\n css\\`\n .foo { --${placeholderText}0: hotpink; }\n \\`;\n `\n );\n });\n\n it('should ignore non-placeholder comments', () => {\n const { source, ast } = createTestAst(`\n css\\`\n /* random comment about this line */\n .foo {\n color: hotpink; \n }\n \\`;\n `);\n\n const output = ast.toString(syntax);\n\n expect(output).toEqual(source);\n });\n\n it('should handle base indentations', () => {\n const { source, ast } = createTestAst(`\n css\\`\n .foo {\n color: hotpink;\n }\n\n .bar {\n border: 808em solid cyan;\n }\n \\`;\n `);\n\n const output = ast.toString(syntax);\n\n expect(output).toEqual(source);\n });\n\n it('should deal with multi-line rules', () => {\n const { source, ast } = createTestAst(`\n css\\`\n .foo,\n .bar {\n color: hotpink;\n }\n\n .x,\n .x > .y {\n font-size: 32em;\n }\n \\`;\n `);\n\n const output = ast.toString(syntax);\n\n expect(output).toEqual(source);\n });\n\n it('should deal with multi-line declarations', () => {\n const { source, ast } = createTestAst(`\n css\\`\n .foo {\n margin:\n 1px\n 2px\n 3px\n 4px;\n }\n\n .bar {\n margin: 1px\n 2px\n 3px;\n }\n \\`;\n `);\n\n const output = ast.toString(syntax);\n\n expect(output).toEqual(source);\n });\n\n it('should deal with unusual between values', () => {\n const { source, ast } = createTestAst(`\n css\\`\n .foo {\n margin\n :\n 10px;\n }\n \\`;\n `);\n\n const output = ast.toString(syntax);\n\n expect(output).toEqual(source);\n });\n\n it('should deal with unusual before values', () => {\n const { source, ast } = createTestAst(`\n css\\`\n .foo {\n margin: 10px;\n\n ;\n\n margin: 20px;\n }\n \\`;\n `);\n\n const output = ast.toString(syntax);\n\n expect(output).toEqual(source);\n });\n\n it('should deal with unusual after values', () => {\n const { source, ast } = createTestAst(`\n css\\`\n .foo {\n margin:\n 1px\n 2px;\n\n ;\n\n }\n \\`;\n `);\n\n const output = ast.toString(syntax);\n\n expect(output).toEqual(source);\n });\n\n it('should stringify non-css JS', () => {\n const { source, ast } = createTestAst(`\n const a = 5;\n const b = 303;\n `);\n\n const output = ast.toString(syntax);\n\n expect(output).toEqual(source);\n });\n\n it('should stringify empty CSS', () => {\n const { source, ast } = createTestAst(`\n css\\`\\`;\n `);\n\n const output = ast.toString(syntax);\n\n expect(output).toEqual(source);\n });\n\n it('should stringify single-line CSS', () => {\n const { source, ast } = createTestAst(`\n css\\`.foo { color: hotpink; }\\`;\n `);\n\n const output = ast.toString(syntax);\n\n expect(output).toEqual(source);\n });\n\n it('should escape backticks', () => {\n const { ast } = createTestAst(`\n css\\`.foo { color: hotpink; }\\`;\n `);\n\n const root = ast.nodes[0] as Root;\n const rule = root.nodes[0] as Rule;\n const colour = rule.nodes[0] as Declaration;\n\n colour.raws.between = ': /*comment with `backticks`*/';\n\n const output = ast.toString(syntax);\n expect(output).toEqual(\n `\n css\\`.foo { color: /*comment with \\\\\\`backticks\\\\\\`*/hotpink; }\\`;\n `\n );\n });\n\n it('should not escape unrelated backticks', () => {\n const { ast } = createTestAst(`\n html\\`
\\`;\n `);\n const output = ast.toString(syntax);\n\n expect(output).toEqual(\n `\n html\\`
\\`;\n `\n );\n });\n\n it('should not escape unrelated backslashes', () => {\n const { ast } = createTestAst(`\n const foo = 'abc\\\\def';\n `);\n const output = ast.toString(syntax);\n\n expect(output).toEqual(\n `\n const foo = 'abc\\\\def';\n `\n );\n });\n\n it('should escape backslashes', () => {\n const { ast } = createTestAst(`\n css\\`.foo { color: hotpink; }\\`;\n `);\n\n const root = ast.nodes[0] as Root;\n const rule = root.nodes[0] as Rule;\n\n rule.selector = '.foo\\\\:bar';\n\n const output = ast.toString(syntax);\n expect(output).toEqual(\n `\n css\\`.foo\\\\\\\\:bar { color: hotpink; }\\`;\n `\n );\n });\n\n it('should stringify styled API', () => {\n const { source, ast } = createTestAst(`\n styled.h1\\`\n .foo { width: \\${p => p.size}px; }\n \\`\n `);\n const output = ast.toString(syntax);\n expect(output).toEqual(source);\n });\n});\n" }, { "path": "packages/postcss-linaria/__tests__/stylelint.test.ts", "content": "import { resolve } from 'path';\n\nimport stylelint, { type Config } from 'stylelint';\n\n// importing from the package would create circular dependency\n// so just import the config directly here\n// eslint-disable-next-line import/no-relative-packages\nimport config from '../../stylelint-config-standard-linaria/src';\n\n// note: need to run pnpm install to pick up updates from any parse/stringify changes\ndescribe('stylelint', () => {\n const configBasedir = resolve(\n __dirname,\n '../../stylelint-config-standard-linaria'\n );\n\n it('should not error with valid syntax', async () => {\n const source = `\n css\\`\n \\${expr0}\n .foo {\n \\${expr1}: \\${expr2};\n }\n\n \\${expr3} {\n .bar {\n color: black;\n }\n }\n \\${expr4}\n \\`;\n `;\n const result = await stylelint.lint({\n code: source,\n config: config as Config,\n configBasedir,\n });\n\n expect(result.errored).toEqual(false);\n });\n\n it('should be fixable by stylelint', async () => {\n const source = `\n css\\`\n .foo { \\${expr1}: \\${expr2};; }\n \\`;`;\n const result = await stylelint.lint({\n code: source,\n config: {\n ...config,\n rules: {\n ...config.rules,\n 'no-extra-semicolons': true,\n },\n } as Config,\n fix: true,\n configBasedir,\n });\n expect(result.errored).toEqual(false);\n expect(result.output).toMatchInlineSnapshot(`\n \"\n css\\`\n .foo { \\${expr1}: \\${expr2}; }\n \\`;\"\n `);\n });\n\n it('should be fixable by stylelint with styled api', async () => {\n const source = `\n styled.h1\\`\n .foo { width: \\${p => p.size}px;; }\n \\`;`;\n const result = await stylelint.lint({\n code: source,\n config: {\n ...config,\n rules: {\n ...config.rules,\n 'no-extra-semicolons': true,\n },\n } as Config,\n fix: true,\n configBasedir,\n });\n expect(result.errored).toEqual(false);\n expect(result.output).toMatchInlineSnapshot(`\n \"\n styled.h1\\`\n .foo { width: \\${p => p.size}px; }\n \\`;\"\n `);\n });\n\n it('should be fixable by stylelint with multi-line expressions', async () => {\n const source = `\n css\\`\n $\\{expr1}\n .foo { \\${expr2}: black;; }\n \\`;`;\n const result = await stylelint.lint({\n code: source,\n config: {\n ...config,\n rules: {\n ...config.rules,\n 'no-extra-semicolons': true,\n },\n } as Config,\n fix: true,\n configBasedir,\n });\n expect(result.output).toMatchInlineSnapshot(`\n \"\n css\\`\n $\\{expr1}\n .foo { \\${expr2}: black; }\n \\`;\"\n `);\n });\n\n it('should be compatible with indentation rule', async () => {\n const source = `\n css\\`\n .foo {\n width: 100px;\n }\n \\`;\n `;\n const result = await stylelint.lint({\n code: source,\n config: {\n ...config,\n rules: {\n ...config.rules,\n indentation: 4,\n },\n } as Config,\n configBasedir,\n });\n\n expect(result.errored).toEqual(false);\n });\n});\n" }, { "path": "packages/postcss-linaria/__tests__/utils.test.ts", "content": "import { createPlaceholder, placeholderText } from '../src/util';\n\ndescribe('createPlaceholder', () => {\n it('should create a placeholder for a selector expression', () => {\n const expressionCounter = 0;\n const sourceAsString = `\n const expr = '@media (min-width: 100px)';\n css\\`\n $\\{expr} {\n color: black;\n }\n \\`;\n `;\n const indexAfterExpression = sourceAsString.indexOf('}') + 1;\n const result = createPlaceholder(\n expressionCounter,\n sourceAsString,\n indexAfterExpression\n );\n expect(result).toEqual(`.${placeholderText}${expressionCounter}`);\n });\n\n it('should create a placeholder for a property expression', () => {\n const expressionCounter = 0;\n const sourceAsString = `\n const expr = 'color';\n css\\`\n \\${expr}: black;\n \\`;\n `;\n const indexAfterExpression = sourceAsString.indexOf('}') + 1;\n const result = createPlaceholder(\n expressionCounter,\n sourceAsString,\n indexAfterExpression\n );\n expect(result).toEqual(`--${placeholderText}${expressionCounter}`);\n });\n\n it('should create a placeholder for a ruleset expression', () => {\n const expressionCounter = 0;\n const sourceAsString = `\n const expr = 'color: black';\n css\\`\n $\\{expr}\n \\`;\n `;\n const indexAfterExpression = sourceAsString.indexOf('}') + 1;\n const result = createPlaceholder(\n expressionCounter,\n sourceAsString,\n indexAfterExpression\n );\n expect(result).toEqual(`/* ${placeholderText}:${expressionCounter} */`);\n });\n\n it('should create a placeholder for a value expression', () => {\n const expressionCounter = 0;\n const sourceAsString = `\n const expr = 'black';\n css\\`\n color: \\${expr};\n \\`;\n `;\n const indexAfterExpression = sourceAsString.indexOf('}') + 1;\n const result = createPlaceholder(\n expressionCounter,\n sourceAsString,\n indexAfterExpression\n );\n expect(result).toEqual(`${placeholderText}${expressionCounter}`);\n });\n});\n" }, { "path": "packages/postcss-linaria/babel.config.js", "content": "const config = require('../../babel.config');\n\nmodule.exports = config;\n" }, { "path": "packages/postcss-linaria/package.json", "content": "{\n \"name\": \"@linaria/postcss-linaria\",\n \"version\": \"7.0.0\",\n \"description\": \"Blazing fast zero-runtime CSS in JS library\",\n \"keywords\": [\n \"css\",\n \"css-in-js\",\n \"linaria\",\n \"react\",\n \"styled-components\"\n ],\n \"homepage\": \"https://github.com/callstack/linaria#readme\",\n \"bugs\": \"https://github.com/callstack/linaria/issues\",\n \"repository\": \"git@github.com:callstack/linaria.git\",\n \"license\": \"MIT\",\n \"sideEffects\": false,\n \"main\": \"lib/index.js\",\n \"module\": \"esm/index.js\",\n \"types\": \"types/index.d.ts\",\n \"files\": [\n \"esm/\",\n \"lib/\",\n \"processors/\",\n \"types/\"\n ],\n \"scripts\": {\n \"build\": \"pnpm build:lib && pnpm build:esm && pnpm build:declarations\",\n \"build:declarations\": \"tsc --emitDeclarationOnly --outDir types\",\n \"build:esm\": \"babel src --out-dir esm --extensions '.js,.jsx,.ts,.tsx' --source-maps --delete-dir-on-start\",\n \"build:lib\": \"cross-env NODE_ENV=legacy babel src --out-dir lib --extensions '.js,.jsx,.ts,.tsx' --source-maps --delete-dir-on-start\",\n \"typecheck\": \"tsc --noEmit --composite false\",\n \"test\": \"jest --config ../../jest.config.js --rootDir .\",\n \"watch\": \"pnpm build:lib --watch & pnpm build:esm --watch & pnpm build:declarations --watch\"\n },\n \"dependencies\": {\n \"@babel/generator\": \"^7.23.5\",\n \"@babel/parser\": \"^7.23.5\",\n \"@babel/traverse\": \"^7.23.5\",\n \"stylelint\": \"^14.11.0\"\n },\n \"devDependencies\": {\n \"@babel/types\": \"^7.23.5\",\n \"@types/babel__generator\": \"^7.6.7\",\n \"@types/babel__traverse\": \"^7.20.4\",\n \"postcss\": \"^8.4.31\"\n },\n \"peerDependencies\": {\n \"postcss\": \"^8.4.31\"\n },\n \"engines\": {\n \"node\": \">=20.0.0\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n }\n}\n" }, { "path": "packages/postcss-linaria/src/index.ts", "content": "import { parse } from './parse';\nimport { stringify } from './stringify';\n\nexport { parse, stringify };\nexport default { parse, stringify };\n" }, { "path": "packages/postcss-linaria/src/locationCorrection.ts", "content": "/* eslint-disable no-param-reassign */\nimport type { TaggedTemplateExpression } from '@babel/types';\nimport type { Root, Position, Document, ChildNode, AnyNode } from 'postcss';\n\nimport { createPlaceholder } from './util';\n\nconst correctLocation = (\n node: TaggedTemplateExpression,\n loc: Position,\n baseIndentations: Map,\n sourceAsString: string,\n prefixOffsets?: { lines: number; offset: number },\n kind: 'start' | 'end' = 'start'\n): Position => {\n if (!node.quasi.loc || !node.quasi.range) {\n return loc;\n }\n\n const baseIndentation = baseIndentations?.get(loc.line) ?? 0;\n const nodeLoc = node.quasi.loc;\n const nodeOffset = node.quasi.range[0];\n let lineOffset = nodeLoc.start.line - 1;\n let newOffset = loc.offset + nodeOffset + (kind === 'start' ? 1 : 0);\n let currentLine = 1;\n let columnOffset = nodeLoc.start.column + 1;\n\n if (prefixOffsets) {\n lineOffset += prefixOffsets.lines;\n newOffset += prefixOffsets.offset;\n }\n\n for (let i = 0; i < node.quasi.expressions.length; i++) {\n const expr = node.quasi.expressions[i];\n const previousQuasi = node.quasi.quasis[i];\n const nextQuasi = node.quasi.quasis[i + 1];\n\n if (\n expr &&\n expr.loc &&\n expr.range &&\n nextQuasi &&\n previousQuasi &&\n previousQuasi.loc &&\n nextQuasi.loc &&\n previousQuasi.range &&\n nextQuasi.range &&\n previousQuasi.range[1] < newOffset\n ) {\n const placeholderSize = createPlaceholder(\n i,\n sourceAsString,\n nextQuasi.range[0]\n ).length;\n const exprSize =\n nextQuasi.range[0] - previousQuasi.range[1] - placeholderSize;\n const exprStartLine = previousQuasi.loc.end.line;\n const exprEndLine = nextQuasi.loc.start.line;\n newOffset += exprSize;\n lineOffset += exprEndLine - exprStartLine;\n\n if (currentLine !== exprEndLine) {\n currentLine = exprEndLine;\n if (exprStartLine === exprEndLine) {\n columnOffset = exprSize;\n } else {\n columnOffset =\n nextQuasi.loc.start.column -\n previousQuasi.loc.end.column -\n placeholderSize;\n }\n } else {\n columnOffset += exprSize;\n }\n }\n }\n\n let indentationOffset = 0;\n\n if (baseIndentations) {\n for (let i = 1; i <= loc.line; i++) {\n indentationOffset += baseIndentations.get(i) ?? 0;\n }\n }\n\n loc.line += lineOffset;\n if (loc.line === currentLine) {\n loc.column += columnOffset;\n }\n loc.column += baseIndentation;\n\n loc.offset = newOffset + indentationOffset;\n\n return loc;\n};\n\n/**\n * Computes the re-indented string of a given string on a given line\n * @param {string} value Value to re-indent\n * @param {number} lineNumber Current line number of the value\n * @param {Map=} baseIndentations Indentation map\n * @return {string}\n */\nfunction computeCorrectedString(\n value: string,\n lineNumber: number,\n baseIndentations?: Map\n): string {\n if (!value.includes('\\n')) {\n const baseIndentation = baseIndentations?.get(lineNumber);\n if (baseIndentation !== undefined) {\n return ' '.repeat(baseIndentation) + value;\n }\n return value;\n }\n\n const lines = value.split('\\n');\n const rawLines: string[] = [];\n\n if (lines[0] !== undefined) {\n rawLines.push(lines[0]);\n }\n\n for (let i = 1; i < lines.length; i++) {\n const line = lines[i];\n if (line !== undefined) {\n const currentLineNumber = lineNumber + i;\n const baseIndentation = baseIndentations?.get(currentLineNumber);\n\n if (baseIndentation !== undefined) {\n rawLines.push(' '.repeat(baseIndentation) + line);\n } else {\n rawLines.push(line);\n }\n }\n }\n\n return rawLines.join('\\n');\n}\n\n/**\n * Computes the re-indented value of a given node's raw value\n * @param {T} node Node to re-indent raw value of\n * @param {string} key Raw value key to re-indent\n * @param {Map=} baseIndentations Indentation map\n * @return {string|null}\n */\nfunction computeCorrectedRawValue(\n node: T,\n key: keyof T,\n baseIndentations?: Map\n): string | null {\n const value = node[key];\n\n if (typeof value !== 'string' || !node.source?.start) {\n return null;\n }\n\n return computeCorrectedString(\n value,\n node.source.start.line,\n baseIndentations\n );\n}\n\n/**\n * Computes the before/after strings from the original source for\n * restoration later when stringifying.\n * @param {Document|Root|ChildNode} node Node to compute strings for\n * @param {Map} baseIndentations Map of base indentations by line\n * @return {void}\n */\nfunction computeBeforeAfter(\n node: Document | Root | ChildNode,\n baseIndentations: Map\n): void {\n if (\n node.raws.before &&\n (node.raws.before.includes('\\n') || node.parent?.type === 'root') &&\n node.source?.start\n ) {\n const numBeforeLines = node.raws.before.split('\\n').length - 1;\n const corrected = computeCorrectedString(\n node.raws.before,\n node.source.start.line - numBeforeLines,\n baseIndentations\n );\n node.raws.linariaBefore = corrected;\n }\n\n if (\n node.raws.after &&\n node.raws.after.includes('\\n') &&\n (node.type === 'root' || node.source?.end)\n ) {\n const numAfterLines = node.raws.after.split('\\n').length - 1;\n const line =\n node.type === 'root'\n ? node.nodes[node.nodes.length - 1]?.source?.end?.line\n : node.source?.end?.line;\n if (line !== undefined) {\n const corrected = computeCorrectedString(\n node.raws.after,\n line - numAfterLines,\n baseIndentations\n );\n node.raws.linariaAfter = corrected;\n }\n }\n\n if (\n node.raws.between &&\n node.raws.between.includes('\\n') &&\n node.source?.start\n ) {\n const corrected = computeCorrectedString(\n node.raws.between,\n node.source.start.line,\n baseIndentations\n );\n\n node.raws.linariaBetween = corrected;\n }\n\n if (node.type === 'rule' && node.selector.includes('\\n')) {\n const rawValue = computeCorrectedRawValue(\n node,\n 'selector',\n baseIndentations\n );\n\n if (rawValue !== null) {\n (node.raws as unknown as Record).linariaSelector =\n rawValue;\n }\n }\n\n if (node.type === 'decl' && node.value.includes('\\n')) {\n const rawValue = computeCorrectedRawValue(node, 'value', baseIndentations);\n\n if (rawValue !== null) {\n (node.raws as unknown as Record).linariaValue = rawValue;\n }\n }\n\n if (node.type === 'atrule' && node.params.includes('\\n')) {\n const rawValue = computeCorrectedRawValue(node, 'params', baseIndentations);\n\n if (rawValue !== null) {\n (node.raws as unknown as Record).linariaParams =\n rawValue;\n }\n }\n}\n\n/**\n * Creates an AST walker/visitor for correcting PostCSS AST locations to\n * those in the original JavaScript document.\n * @param {TaggedTemplateExpression} expr Expression the original source came\n * from\n * @return {Function}\n */\nexport function locationCorrectionWalker(\n expr: TaggedTemplateExpression,\n sourceAsString: string\n): (node: Document | Root | ChildNode) => void {\n return (node: Document | Root | ChildNode): void => {\n const root = node.root();\n const baseIndentations = root.raws.linariaBaseIndentations;\n\n if (baseIndentations) {\n computeBeforeAfter(node, baseIndentations);\n }\n\n if (node.source?.start) {\n node.source.start = correctLocation(\n expr,\n node.source.start,\n baseIndentations,\n sourceAsString,\n root.raws.linariaPrefixOffsets,\n 'start'\n );\n }\n if (node.source?.end) {\n node.source.end = correctLocation(\n expr,\n node.source.end,\n baseIndentations,\n sourceAsString,\n root.raws.linariaPrefixOffsets,\n 'end'\n );\n }\n };\n}\n" }, { "path": "packages/postcss-linaria/src/parse.ts", "content": "import { parse as babelParse } from '@babel/parser';\nimport type { NodePath } from '@babel/traverse';\nimport traverse from '@babel/traverse';\nimport type { Identifier, TaggedTemplateExpression } from '@babel/types';\nimport type { Parser, Root, ProcessOptions } from 'postcss';\nimport { Document, Input } from 'postcss';\nimport postcssParse from 'postcss/lib/parse';\n\nimport { locationCorrectionWalker } from './locationCorrection';\nimport { createPlaceholder } from './util';\n\n// This function returns\n// 1) styleText with placeholders for the expressions.\n// for example:\n// `${selector} { ${property} : ${value} }`\n// becomes\n// `.pcss-lin0 { --pcss-lin1: pcss-lin2 }`\n// 2) an array of the expressions:\n// ['${selector}', '${property}', '${value}']\nconst generateStyleTextWithExpressionPlaceholders = (\n node: TaggedTemplateExpression,\n sourceAsString: string\n): { expressionStrings: string[]; styleText: string } => {\n let styleText = '';\n const expressionStrings: string[] = [];\n\n for (let i = 0; i < node.quasi.quasis.length; i++) {\n const template = node.quasi.quasis[i];\n const expr = node.quasi.expressions[i];\n const nextTemplate = node.quasi.quasis[i + 1];\n if (template) {\n styleText += template.value.raw;\n\n if (expr && nextTemplate && nextTemplate.range && template.range) {\n const exprText = sourceAsString.slice(\n template.range[1],\n nextTemplate.range[0]\n );\n styleText += createPlaceholder(\n i,\n sourceAsString,\n nextTemplate.range[0]\n );\n expressionStrings.push(exprText);\n }\n }\n }\n return { styleText, expressionStrings };\n};\n\nconst getDeindentedStyleTextAndOffsets = (\n styleText: string,\n node: TaggedTemplateExpression\n) => {\n const baseIndentation = (node.quasi.loc?.end.column ?? 1) - 1;\n const sourceLines = styleText.split('\\n');\n const baseIndentations = new Map();\n const indentationPattern = new RegExp(`^[ \\\\t]{${baseIndentation}}`);\n const emptyLinePattern = /^[ \\\\t\\r]*$/;\n const deindentedLines: string[] = [];\n const prefixOffsets = { lines: 0, offset: 0 };\n\n // remove the first line if it's an empty string and update the prefix\n // offset to be the lines 1 instead of lines 0\n if (\n sourceLines.length > 1 &&\n sourceLines[0] !== undefined &&\n emptyLinePattern.test(sourceLines[0])\n ) {\n prefixOffsets.lines = 1;\n prefixOffsets.offset = sourceLines[0].length + 1;\n sourceLines.shift();\n }\n\n // go through each source line and deindent lines\n for (let i = 0; i < sourceLines.length; i++) {\n const sourceLine = sourceLines[i];\n if (sourceLine !== undefined) {\n // if the sourceline has the indentation pattern\n if (indentationPattern.test(sourceLine)) {\n deindentedLines.push(sourceLine.replace(indentationPattern, ''));\n baseIndentations.set(i + 1, baseIndentation);\n // Roots don't have an end line, so we can't look this up so easily\n // later on. Having a special '-1' key helps here.\n if (i === sourceLines.length - 1) {\n baseIndentations.set(-1, baseIndentation);\n }\n } else {\n deindentedLines.push(sourceLine);\n }\n }\n }\n\n const deindentedStyleText = deindentedLines.join('\\n');\n return { deindentedStyleText, prefixOffsets, baseIndentations };\n};\n\n/**\n * Parses CSS from within tagged template literals in a JavaScript document\n * @param {string} source Source code to parse\n * @param {*=} opts Options to pass to PostCSS' parser when parsing\n * @return {Root|Document}\n */\nexport const parse: Parser = (\n source: string | { toString(): string },\n opts?: Pick\n): Root | Document => {\n const doc = new Document();\n const sourceAsString = source.toString();\n\n // avoid error spam (and vscode error toasts) if babel can't parse doc\n // allows user to type new code without constant warnings\n let ast;\n try {\n ast = babelParse(sourceAsString, {\n sourceType: 'unambiguous',\n plugins: ['typescript', 'jsx'],\n ranges: true,\n });\n } catch {\n return doc;\n }\n const extractedStyles = new Set();\n\n traverse(ast, {\n TaggedTemplateExpression: (\n path: NodePath\n ): void => {\n if (\n path.node.tag.type === 'Identifier' &&\n path.node.tag.name.includes('css')\n ) {\n extractedStyles.add(path.node);\n }\n\n if (path.node.tag.type === 'MemberExpression') {\n if ((path.node.tag.object as Identifier).name === 'styled') {\n extractedStyles.add(path.node);\n }\n }\n\n if (\n path.node.tag.type === 'CallExpression' &&\n path.node.tag.callee.type === 'Identifier'\n ) {\n if (path.node.tag.callee.name === 'styled') {\n extractedStyles.add(path.node);\n }\n }\n },\n });\n\n let currentOffset = 0;\n\n // eslint-disable-next-line no-restricted-syntax\n for (const node of extractedStyles) {\n if (!node.quasi.range) {\n // eslint-disable-next-line no-continue\n continue;\n }\n\n const startIndex = node.quasi.range[0] + 1;\n\n const { styleText, expressionStrings } =\n generateStyleTextWithExpressionPlaceholders(node, sourceAsString);\n\n const { deindentedStyleText, prefixOffsets, baseIndentations } =\n getDeindentedStyleTextAndOffsets(styleText, node);\n\n const root = postcssParse(deindentedStyleText, {\n ...opts,\n map: false,\n }) as Root;\n\n root.raws.linariaPrefixOffsets = prefixOffsets;\n root.raws.linariaTemplateExpressions = expressionStrings;\n root.raws.linariaBaseIndentations = baseIndentations;\n // TODO: remove this if stylelint/stylelint#5767 ever gets fixed,\n // or they drop the indentation rule. Their indentation rule depends on\n // `beforeStart` existing as they unsafely try to call `endsWith` on it.\n if (!root.raws.beforeStart) {\n root.raws.beforeStart = '';\n }\n root.raws.codeBefore = sourceAsString.slice(\n currentOffset,\n startIndex + prefixOffsets.offset\n );\n root.parent = doc;\n // TODO: stylelint relies on this existing, really unsure why.\n // it could just access root.parent to get the document...\n (root as Root & { document: Document }).document = doc;\n const walker = locationCorrectionWalker(node, sourceAsString);\n walker(root);\n root.walk(walker);\n doc.nodes.push(root);\n\n currentOffset = node.quasi.range[1] - 1;\n }\n\n if (doc.nodes.length > 0) {\n const last = doc.nodes[doc.nodes.length - 1];\n if (last) {\n last.raws.codeAfter = sourceAsString.slice(currentOffset);\n }\n }\n\n doc.source = {\n input: new Input(sourceAsString, opts),\n start: {\n line: 1,\n column: 1,\n offset: 0,\n },\n };\n\n return doc;\n};\n" }, { "path": "packages/postcss-linaria/src/stringify.ts", "content": "import type {\n Stringifier as StringifierFn,\n Comment,\n Root,\n Document,\n AnyNode,\n Builder,\n Declaration,\n Rule,\n AtRule,\n} from 'postcss';\nimport Stringifier from 'postcss/lib/stringifier';\n\nimport { placeholderText } from './util';\n\nconst substitutePlaceholders = (\n stringWithPlaceholders: string,\n expressions: string[]\n) => {\n if (!stringWithPlaceholders.includes(placeholderText) || !expressions) {\n return stringWithPlaceholders;\n }\n\n const values = stringWithPlaceholders.split(' ');\n const temp: string[] = [];\n values.forEach((val) => {\n let [prefix, expressionIndexString] = val.split(placeholderText);\n prefix = prefix.replace(/(\\.|--|\\/\\*)$/, '');\n // if the val is 'pcss-lin10px', need to remove the px to get the placeholder number\n let suffix = '';\n while (\n Number.isNaN(Number(expressionIndexString)) &&\n expressionIndexString &&\n expressionIndexString.length > 0\n ) {\n suffix = expressionIndexString[expressionIndexString.length - 1] + suffix;\n expressionIndexString = expressionIndexString.slice(\n 0,\n expressionIndexString.length - 1\n );\n }\n const expressionIndex = Number(expressionIndexString);\n const expression =\n expressions &&\n !Number.isNaN(expressionIndex) &&\n expressions[expressionIndex];\n if (expression) {\n temp.push(prefix + expression + suffix);\n } else {\n temp.push(val);\n }\n });\n return temp.join(' ');\n};\n\n/**\n * Stringifies PostCSS nodes while taking interpolated expressions\n * into account.\n */\nclass LinariaStringifier extends Stringifier {\n /** @inheritdoc */\n public constructor(builder: Builder) {\n const wrappedBuilder: Builder = (\n str: string,\n node?: AnyNode,\n type?: 'start' | 'end'\n ): void => {\n // We purposely ignore the root node since the only thing we should\n // be stringifying here is already JS (before/after raws) so likely\n // already contains backticks on purpose.\n //\n // Similarly, if there is no node, we're probably stringifying\n // pure JS which never contained any CSS. Or something really weird\n // we don't want to touch anyway.\n //\n // For everything else, we want to escape backticks.\n if (!node || node?.type === 'root') {\n builder(str, node, type);\n } else {\n builder(str.replace(/\\\\/g, '\\\\\\\\').replace(/`/g, '\\\\`'), node, type);\n }\n };\n super(wrappedBuilder);\n }\n\n public override atrule(node: AtRule, semicolon?: boolean) {\n const { params } = node;\n\n const expressionStrings = node.root().raws.linariaTemplateExpressions;\n if (params.includes(placeholderText)) {\n // eslint-disable-next-line no-param-reassign\n node.params = substitutePlaceholders(params, expressionStrings);\n }\n\n super.atrule(node, semicolon);\n }\n\n /** @inheritdoc */\n public override comment(node: Comment): void {\n const placeholderPattern = new RegExp(`^${placeholderText}:\\\\d+$`);\n if (placeholderPattern.test(node.text)) {\n const [, expressionIndexString] = node.text.split(':');\n const expressionIndex = Number(expressionIndexString);\n const root = node.root();\n const expressionStrings = root.raws.linariaTemplateExpressions;\n\n if (expressionStrings && !Number.isNaN(expressionIndex)) {\n const expression = expressionStrings[expressionIndex];\n\n if (expression) {\n this.builder(expression, node);\n return;\n }\n }\n }\n\n super.comment(node);\n }\n\n public override decl(node: Declaration, semicolon: boolean): void {\n const between = this.raw(node, 'between', 'colon');\n let { prop } = node;\n const expressionStrings = node.root().raws.linariaTemplateExpressions;\n if (prop.includes(placeholderText)) {\n prop = substitutePlaceholders(prop, expressionStrings);\n }\n\n let value = this.rawValue(node, 'value');\n if (value.includes(placeholderText)) {\n value = substitutePlaceholders(value, expressionStrings);\n }\n\n let string = prop + between + value;\n\n if (node.important) {\n string += node.raws.important || ' !important';\n }\n\n if (semicolon) string += ';';\n this.builder(string, node);\n }\n\n /** @inheritdoc */\n public override document(node: Document): void {\n if (node.nodes.length === 0) {\n this.builder(node.source?.input.css ?? '');\n } else {\n super.document(node);\n }\n }\n\n /** @inheritdoc */\n public override raw(\n node: AnyNode,\n own: string,\n detect: string | undefined\n ): string {\n if (own === 'before' && node.raws.before && node.raws.linariaBefore) {\n return node.raws.linariaBefore;\n }\n if (own === 'after' && node.raws.after && node.raws.linariaAfter) {\n return node.raws.linariaAfter;\n }\n if (own === 'between' && node.raws.between && node.raws.linariaBetween) {\n return node.raws.linariaBetween;\n }\n return super.raw(node, own, detect);\n }\n\n /** @inheritdoc */\n public override rawValue(node: AnyNode, prop: string): string {\n const linariaProp = `linaria${prop[0]?.toUpperCase()}${prop.slice(1)}`;\n if (Object.prototype.hasOwnProperty.call(node.raws, linariaProp)) {\n return `${node.raws[linariaProp]}`;\n }\n\n return super.rawValue(node, prop);\n }\n\n /** @inheritdoc */\n public override root(node: Root): void {\n this.builder(node.raws.codeBefore ?? '', node, 'start');\n\n this.body(node);\n\n // Here we want to recover any previously removed JS indentation\n // if possible. Otherwise, we use the `after` string as-is.\n const after = node.raws.linariaAfter ?? node.raws.after;\n if (after) {\n this.builder(after);\n }\n\n this.builder(node.raws.codeAfter ?? '', node, 'end');\n }\n\n public override rule(node: Rule): void {\n let value = this.rawValue(node, 'selector');\n if (value.includes(placeholderText)) {\n const expressionStrings = node.root().raws.linariaTemplateExpressions;\n value = substitutePlaceholders(value, expressionStrings);\n }\n this.block(node, value);\n if (node.raws.ownSemicolon) {\n this.builder(node.raws.ownSemicolon, node, 'end');\n }\n }\n}\n\nexport const stringify: StringifierFn = (\n node: AnyNode,\n builder: Builder\n): void => {\n const str = new LinariaStringifier(builder);\n str.stringify(node);\n};\n" }, { "path": "packages/postcss-linaria/src/util.ts", "content": "const getLine = (sourceAsString: string, indexAfterExpression: number) => {\n const begginningOfLineIndex =\n sourceAsString.lastIndexOf('\\n', indexAfterExpression) || 0;\n const endOfLineIndex =\n sourceAsString.indexOf('\\n', indexAfterExpression - 1) || Infinity;\n const indexAfterExpressionInLine =\n indexAfterExpression - begginningOfLineIndex;\n return {\n line: sourceAsString.substring(begginningOfLineIndex, endOfLineIndex + 1),\n indexAfterExpressionInLine,\n };\n};\n\nconst isSelector = (sourceAsString: string, indexAfterExpression: number) => {\n const { line } = getLine(sourceAsString, indexAfterExpression);\n const isSingleLineRule =\n line.indexOf('{', indexAfterExpression) > 0 &&\n line.indexOf('}', indexAfterExpression) > 0;\n return isSingleLineRule || line[line.length - 2] === '{';\n};\n\nconst isProperty = (sourceAsString: string, indexAfterExpression: number) => {\n return sourceAsString[indexAfterExpression] === ':';\n};\n\n// no ':' or '{' on the line\nconst isRuleSet = (sourceAsString: string, indexAfterExpression: number) => {\n const { line: possibleRuleset, indexAfterExpressionInLine } = getLine(\n sourceAsString,\n indexAfterExpression\n );\n const hasCurlyBraceAfterExpression =\n possibleRuleset.indexOf('{', indexAfterExpressionInLine) > 0;\n const hasCommmaAfterExpression =\n possibleRuleset.indexOf(',', indexAfterExpressionInLine) > 0;\n\n // check if possible ruleset has ':' and outside of the func args if expression has a func\n // i.e. avoid false postivive for `${func({ key: value })}\n const indexOfOpenParenthesis = possibleRuleset.indexOf('(');\n const indexOfClosedParenthesis = possibleRuleset.indexOf(')');\n const hasFuncInExpression =\n indexOfOpenParenthesis > 0 && indexOfClosedParenthesis > 0;\n let hasColonOutsideOfExpression = possibleRuleset.includes(':');\n if (hasFuncInExpression) {\n hasColonOutsideOfExpression =\n possibleRuleset.lastIndexOf(':', indexOfOpenParenthesis) > 0 ||\n possibleRuleset.indexOf(':', indexOfClosedParenthesis) > 0;\n }\n\n return !(\n hasColonOutsideOfExpression ||\n hasCurlyBraceAfterExpression ||\n hasCommmaAfterExpression\n );\n};\n\nexport const placeholderText = 'pcss-lin';\n\nexport const createPlaceholder = (\n i: number,\n sourceAsString: string,\n indexAfterExpression: number\n): string => {\n if (isSelector(sourceAsString, indexAfterExpression)) {\n return `.${placeholderText}${i}`;\n }\n if (isProperty(sourceAsString, indexAfterExpression)) {\n return `--${placeholderText}${i}`;\n }\n if (isRuleSet(sourceAsString, indexAfterExpression)) {\n return `/* ${placeholderText}:${i} */`;\n }\n\n // assume it's a property value or part of another string;\n return `${placeholderText}${i}`;\n};\n" }, { "path": "packages/postcss-linaria/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.json\",\n \"compilerOptions\": { \"paths\": {}, \"rootDir\": \"src/\" },\n \"references\": []\n}\n" }, { "path": "packages/react/CHANGELOG.md", "content": "# Change Log\n\n## 7.0.1\n\n### Patch Changes\n\n- b3331e45: Fix `styled.` typings in environments where only the React JSX runtime types are available (e.g. `jsx: react-jsx`).\n\n## 7.0.0\n\n### Major Changes\n\n- ab11ebb7: BREAKING: bump `@wyw-in-js/*` dependencies to `^1.0.0` (stable).\n\n This release updates Linaria's build-time evaluation engine (WyW). See https://wyw-in-js.dev/stability for practical guidance and common pitfalls.\n\n Notes:\n\n - Linaria 7 requires Node.js 20+ (aligned with WyW 1.x).\n - If you import JSON from code that is evaluated by WyW, add `.json` to `extensions` and ensure `.json` is ignored by evaluation rules (so it's parsed as JSON, not by Babel).\n - Rollup users: WyW 1.x serializes `transform()` by default (`serializeTransform: true`). If you hit Rollup \"Unexpected early exit\" (unresolved plugin promises / deadlock during resolve), set `serializeTransform: false` (see `examples/rollup/rollup.config.mjs`).\n - WyW 1.x promotes fully-statically-evaluatable modules to `only: ['*']` and can re-evaluate modules when cached exports are incomplete (cached export values might not be reused).\n\n### Patch Changes\n\n- 654d8590: Fix TypeScript typings for React 17 projects using the automatic JSX runtime (`jsx: react-jsx`), so `styled.*` intrinsic components don’t incorrectly require `children`.\n- Updated dependencies [ab11ebb7]\n - @linaria/core@7.0.0\n\n## 6.3.0\n\n### Minor Changes\n\n- 281ca4f5: The new version of wyw-in-js, with the support of a configurable code remover, can help prevent compilation errors and improve build time.\n\n### Patch Changes\n\n- bd8d45fd: Support for React 19\n- Updated dependencies [281ca4f5]\n - @linaria/core@6.3.0\n\n## 6.2.1\n\n### Patch Changes\n\n- Updated dependencies [a3dcee2e]\n - @linaria/core@6.2.0\n\n## 6.2.0\n\n### Minor Changes\n\n- fd60b5de: Fix for extending imported component #1378\n\n## 6.1.0\n\n### Minor Changes\n\n- 8ba655d3: Bump wyw-in-js to 0.4.0. The full list of changes https://github.com/Anber/wyw-in-js/compare/%40wyw-in-js/transform%400.2.3...%40wyw-in-js/transform%400.4.0\n\n### Patch Changes\n\n- 8d4ebd33: chore: bump @wyw-in-js/\\* packages\n- Updated dependencies [8d4ebd33]\n- Updated dependencies [8ba655d3]\n - @linaria/core@6.1.0\n\n## 6.0.0\n\n### Major Changes\n\n- 2ac94b99: BREAKING CHANGE: Linaria has been migrated to wyw-in-js.\n\n # Migration Guide\n\n ## For Users\n\n The main breaking change is that all tooling has been moved from the `@linaria` scope to the `@wyw-in-js` scope. This means that you will need to update your dependencies as follows:\n\n | Old | New |\n | ------------------------ | ------------------------- |\n | @linaria/babel-preset | @wyw-in-js/babel-preset |\n | @linaria/cli | @wyw-in-js/cli |\n | @linaria/esbuild | @wyw-in-js/esbuild |\n | @linaria/rollup | @wyw-in-js/rollup |\n | @linaria/shaker | discontinued |\n | @linaria/vite | @wyw-in-js/vite |\n | @linaria/webpack4-loader | discontinued |\n | @linaria/webpack5-loader | @wyw-in-js/webpack-loader |\n\n There is no longer a need to install `@linaria/shaker` as it is now part of `@wyw-in-js/transform`, which will be installed automatically with the bundler plugins.\n\n The configuration file has been renamed from `linaria.config.js` (`linariarc`) to `wyw-in-js.config.js` (`.wyw-in-jsrc`).\n\n ## For Custom Processor Developers\n\n Base classes for processors and most helpers have been moved to `@wyw-in-js/processor-utils`.\n\n All APIs that had `linaria` in their names have been renamed:\n\n - The field that stores meta information in runtime has been renamed from `__linaria` to `__wyw_meta`\n - The export with all interpolated values has been renamed from `__linariaPreval` to `__wywPreval`\n - The caller name in Babel has been renamed from `linaria` to `wyw-in-js`\n\n For additional information, please visit the [wyw-in-js.dev](https://wyw-in-js.dev).\n\n### Patch Changes\n\n- Updated dependencies [2ac94b99]\n - @linaria/core@6.0.0\n\n## 5.0.3\n\n### Patch Changes\n\n- 4b083b7c: Fix compatibility with Webpack 4.\n\n## 5.0.2\n\n### Patch Changes\n\n- 1e889937: fix: make StyledProcessor work on Windows\n- Updated dependencies [4992c14d]\n- Updated dependencies [70000ec8]\n- Updated dependencies [1e889937]\n- Updated dependencies [5a32f4fd]\n- Updated dependencies [727dc2bd]\n- Updated dependencies [25ba1344]\n- Updated dependencies [5a32f4fd]\n - @linaria/utils@5.0.2\n - @linaria/tags@5.0.2\n - @linaria/core@5.0.2\n\n## 5.0.1\n\n### Patch Changes\n\n- Updated dependencies [6fb6eb69]\n - @linaria/utils@5.0.1\n - @linaria/core@5.0.1\n - @linaria/tags@5.0.1\n\n## 5.0.0\n\n### Major Changes\n\n- 88e07613: Rewritten dependecny tree processing with support for wildcard re-exports.\n- cb853e14: All processing stages were merged into one generators-based processor. It allows the implementation of more complex workflows to support features like dynamic imports and re-exports.\n\n### Minor Changes\n\n- 9cb4143d: Refactoring of the 1st stage of transformation. It opens the road to processing wildcard reexports.\n\n### Patch Changes\n\n- 2a1e24a0: Upgrade TypeScript to 5.2\n- Updated dependencies [9cb4143d]\n- Updated dependencies [ae162f46]\n- Updated dependencies [88e07613]\n- Updated dependencies [b3ef8c1f]\n- Updated dependencies [f8b9bff5]\n- Updated dependencies [63902332]\n- Updated dependencies [aa100453]\n- Updated dependencies [2a1e24a0]\n- Updated dependencies [16320d71]\n- Updated dependencies [cb853e14]\n - @linaria/core@5.0.0\n - @linaria/tags@5.0.0\n - @linaria/utils@5.0.0\n\n## 4.5.4\n\n### Patch Changes\n\n- Updated dependencies [10bcd241]\n - @linaria/utils@4.5.3\n - @linaria/core@4.5.4\n - @linaria/tags@4.5.4\n\n## 4.5.3\n\n### Patch Changes\n\n- 79557248: Nothing has changed. Just moved some utils and types from babel to utils package.\n- e59bf809: Shaker mistakenly counts references in types as valuable and keeps referenced variables alive.\n- Updated dependencies [79557248]\n- Updated dependencies [b191f543]\n- Updated dependencies [e59bf809]\n- Updated dependencies [520ba8da]\n- Updated dependencies [ae3727f9]\n- Updated dependencies [dca076ef]\n - @linaria/core@4.5.3\n - @linaria/tags@4.5.3\n - @linaria/utils@4.5.2\n\n## 4.5.2\n\n### Patch Changes\n\n- Updated dependencies [85e74df6]\n- Updated dependencies [1bf5c5b8]\n - @linaria/utils@4.5.1\n - @linaria/core@4.5.2\n - @linaria/tags@4.5.2\n\n## 4.5.1\n\n### Patch Changes\n\n- ceca1611: Enable optimisation from #1276 for complex expressions such as `styled(Component as unknow)` or `styled(connect(Component))`.\n- 13258306: Variables in props-based interpolation functions are no longer required for the evaluation stage.\n Here's an example:\n\n ```\n import { getColor } from \"very-big-library\";\n\n export const Box = styled.div\\`\n color: ${props => getColor(props.kind)};\n \\`;\n ```\n\n In versions prior to and including 4.5.0, the evaluator would attempt to import `getColor` from `very-big-library`, despite it having no relevance to style generation. However, in versions greater than 4.5.0, `very-big-library` will be ignored.\n\n- Updated dependencies [ceca1611]\n- Updated dependencies [13258306]\n - @linaria/tags@4.5.1\n - @linaria/core@4.5.1\n\n## 4.5.0\n\n### Minor Changes\n\n- 16c057df: Breaking Change: Performance Optimization for `styled`\n\n When a component is wrapped in `styled`, Linaria needs to determine if that component is already a styled component. To accomplish this, the wrapped component is included in the list of variables for evaluation, along with the interpolated values used in styles. The issue arises when a wrapped component, even if it is not styled, brings along a substantial dependency tree. This situation is particularly evident when using `styled` to style components from third-party UI libraries.\n\n To address this problem, Linaria will now examine the import location of the component and check if there is an annotation in the `package.json` file of the package containing the components. This annotation indicates whether the package includes other Linaria components. If there is no such annotation, Linaria will refrain from evaluating the component.\n\n Please note that this Breaking Change solely affects developers of component libraries. In order for users to style components from your library, you must include the `linaria.components` property in the library's `package.json` file. This property should have a mask that covers all imported files with components. Here's an example of how to specify it:\n\n ```json\n \"linaria\": {\n \"components\": \"**/*\"\n }\n ```\n\n### Patch Changes\n\n- af5bb92d: The end of support for Node.js 14. Migration to pnpm 8.\n- 10859924: Don't add `mocked-styled` classnames outside test env\n- Updated dependencies [890b4aca]\n- Updated dependencies [05ad266c]\n- Updated dependencies [16c057df]\n- Updated dependencies [af5bb92d]\n - @linaria/utils@4.5.0\n - @linaria/tags@4.5.0\n - @linaria/core@4.5.0\n\n## 4.3.8\n\n### Patch Changes\n\n- 54ab61b2: Enhance @linaria/shaker strategy: better search in namespace imports, add support for side effect imports, fix file skipping.\n- Updated dependencies [54ab61b2]\n - @linaria/tags@4.3.5\n - @linaria/utils@4.3.4\n - @linaria/core@4.2.10\n\n## 4.3.7\n\n### Patch Changes\n\n- 1c3f309d: Fix tags usage validation (fixes #1224)\n- 34029088: Usages of `styled` and `css` in Jest no longer trigger the \"Using the … tag in runtime is not supported\" exception.\n- Updated dependencies [2e966f23]\n- Updated dependencies [1c3f309d]\n- Updated dependencies [dbe250b5]\n- Updated dependencies [34029088]\n - @linaria/tags@4.3.4\n - @linaria/utils@4.3.3\n - @linaria/core@4.2.9\n\n## 4.3.6\n\n### Patch Changes\n\n- a3ad617f: Fix \"Invalid usage of `styled` tag\" when it's not really invalid. Fixes #1214.\n- Updated dependencies [a3ad617f]\n - @linaria/tags@4.3.3\n - @linaria/core@4.2.8\n\n## 4.3.5\n\n### Patch Changes\n\n- Updated dependencies [f9df4ed8]\n - @linaria/utils@4.3.2\n - @linaria/core@4.2.7\n - @linaria/tags@4.3.2\n\n## 4.3.4\n\n### Patch Changes\n\n- Updated dependencies [28f3f93d]\n- Updated dependencies [71a5b351]\n- Updated dependencies [61d49a39]\n - @linaria/tags@4.3.1\n - @linaria/utils@4.3.1\n - @linaria/core@4.2.6\n\n## 4.3.3\n\n### Patch Changes\n\n- Updated dependencies [3ce985e0]\n- Updated dependencies [d11174d0]\n - @linaria/tags@4.3.0\n - @linaria/utils@4.3.0\n - @linaria/core@4.2.5\n\n## 4.3.2\n\n### Patch Changes\n\n- Updated dependencies [315f0366]\n - @linaria/utils@4.2.6\n - @linaria/core@4.2.4\n - @linaria/tags@4.2.2\n\n## 4.3.1\n\n### Patch Changes\n\n- 922f20d6: Do not allow to wrap components without props.\n- 5edde648: Upgrade Babel to support TypeScript 4.9. Fixes #1133.\n- Updated dependencies [5edde648]\n- Updated dependencies [b9e49b74]\n - @linaria/core@4.2.3\n - @linaria/tags@4.2.1\n - @linaria/utils@4.2.5\n\n## 4.3.0\n\n### Minor Changes\n\n- 63f56d47: Do not filter properties if an unknown component is passed to `styled`. Fixes support of custom elements #968\n\n### Patch Changes\n\n- c26d4667: force interop check to fix @emotion/is-prop-valid esm import\n- Updated dependencies [63f56d47]\n- Updated dependencies [963508a2]\n - @linaria/tags@4.2.0\n - @linaria/utils@4.2.4\n - @linaria/core@4.2.2\n\n## 4.2.1\n\n### Patch Changes\n\n- 6de22792: Upgrade @emotion/is-prop-valid to support ES modules\n- Updated dependencies [cc2f87a8]\n - @linaria/utils@4.2.3\n - @linaria/core@4.2.1\n - @linaria/tags@4.1.5\n\n## 4.2.0\n\n### Minor Changes\n\n- 1e88e95d: Support for ECMAScript modules. Fixes #904 and #1043.\n\n### Patch Changes\n\n- Updated dependencies [1e88e95d]\n - @linaria/core@4.2.0\n\n## 4.1.5\n\n### Patch Changes\n\n- 87ffe61c: The new `variableNameSlug` option that allows to customize css variable names (closes #1053).\n- Updated dependencies [8a8be242]\n- Updated dependencies [8a8be242]\n- Updated dependencies [08304e09]\n- Updated dependencies [87ffe61c]\n - @linaria/utils@4.2.2\n - @linaria/core@4.1.4\n - @linaria/tags@4.1.4\n\n## 4.1.4\n\n### Patch Changes\n\n- @linaria/core@4.1.3\n- @linaria/tags@4.1.3\n\n## 4.1.3\n\n### Patch Changes\n\n- c0bd271a: Sometimes Linaria can meet already processed code. In such a case, it shall ignore runtime versions of `styled` tags. Fixes #1037.\n- Updated dependencies [c0bd271a]\n - @linaria/tags@4.1.2\n - @linaria/core@4.1.2\n\n## 4.1.2\n\n### Patch Changes\n\n- @linaria/core@4.1.1\n- @linaria/tags@4.1.1\n\n## 4.1.1\n\n### Patch Changes\n\n- 2abc55b3: Fix 'Using the tag in runtime is not supported' in some enviroments (fixes #1021)\n\n## 4.1.0\n\n### Patch Changes\n\n- @linaria/core@4.1.0\n- @linaria/tags@4.1.0\n\n## 4.0.0\n\n### Major Changes\n\n- bc0cbeea: A completely new async mode with native support for Vite, Rollup, esbuild and Webpack resolvers.\n\n BREAKING CHANGES: Despite the fact, that it should be fully compatible with 3.0 and 2.0 branches, the new version of styles evaluator can have some serious bugs which can make your project unbuildable (however, since there is no runtime, if the build is finished successfully, everything will continue work as it was on 2.0 and 3.0). If you face some problems please let us know and we will fix it as soon as possible.\n\n### Patch Changes\n\n- 8be5650d: The repo has been migrated to PNPM and Turborepo\n- 609d79ba: Generic parameters of wrapped components had been missed in some cases.\n- ea41d440: New package @linaria/tags that contains all abstract logic for tags processors.\n- 9a50c1c1: Linaria now removes all unused css-related code from the runtime.\n- 4cdf0315: Tagged template-specific logic has been moved from `BaseProcessor` to `TaggedTemplateProcessor`. `BaseProcessor` now can be used to define any type of expressions for zero-runtime transformations, such as `makeStyles` from `@griffel/react`.\n- 12d35cb9: `processors` aliases have been lost during publishing. (fixes #984)\n- 3111ca8d: beta.19 broke prop interploation in some enviroments. Fixed. (fix #981)\n- 17c83e34: Aliases for environments without the support of `exports` in package.json.\n- f0cddda4: Extends `BaseProcessor` to support tags other than tagged templates, such as `makeStyles` from `@griffel/react`.\n- Updated dependencies [f0cddda4]\n - @linaria/core@4.0.0\n - @linaria/tags@4.0.0\n\n## 3.0.0-beta.21\n\n### Patch Changes\n\n- 609d79ba: Generic parameters of wrapped components had been missed in some cases.\n- 17c83e34: Aliases for environments without the support of `exports` in package.json.\n- Updated dependencies [17c83e34]\n - @linaria/core@3.0.0-beta.21\n\n## 3.0.0-beta.20\n\n### Patch Changes\n\n- 8be5650d: The repo has been migrated to PNPM and Turborepo\n- beta.19 broke prop interploation in some enviroments. Fixed. (fix #981)\n- Updated dependencies [8be5650d]\n - @linaria/core@3.0.0-beta.20\n\n# [3.0.0-beta.19](https://github.com/callstack/linaria/compare/v3.0.0-beta.18...v3.0.0-beta.19) (2022-06-03)\n\n### Bug Fixes\n\n- **react:** support UpperCamelCase custom elements [#968](https://github.com/callstack/linaria/issues/968) ([#970](https://github.com/callstack/linaria/issues/970)) ([59800db](https://github.com/callstack/linaria/commit/59800dba540e09c0c43b1f0ec1d4b2c46d8a4672))\n\n### Features\n\n- **atomic:** add support for atomic using styled API ([#966](https://github.com/callstack/linaria/issues/966)) ([f59860b](https://github.com/callstack/linaria/commit/f59860b09c5f91b0423dbf188e5f8aaaef38a6b5))\n- **babel:** api for custom tags ([#976](https://github.com/callstack/linaria/issues/976)) ([3285ccc](https://github.com/callstack/linaria/commit/3285ccc1d00449b78b3fc74087528cd38cbdd116))\n- **babel:** new way for detecting tag imports ([#974](https://github.com/callstack/linaria/issues/974)) ([3305cfb](https://github.com/callstack/linaria/commit/3305cfb0c0f65abdacceeb7e6bad118c59f7d551))\n\n# [3.0.0-beta.18](https://github.com/callstack/linaria/compare/v3.0.0-beta.17...v3.0.0-beta.18) (2022-04-01)\n\n**Note:** Version bump only for package @linaria/react\n\n# [3.0.0-beta.17](https://github.com/callstack/linaria/compare/v3.0.0-beta.16...v3.0.0-beta.17) (2021-12-27)\n\n### Bug Fixes\n\n- **react:** refactored types for styled function (fixes [#872](https://github.com/callstack/linaria/issues/872)) ([#887](https://github.com/callstack/linaria/issues/887)) ([7b8b129](https://github.com/callstack/linaria/commit/7b8b12937f9a0d1730d908e7cebad1684ccb03c3))\n\n# [3.0.0-beta.15](https://github.com/callstack/linaria/compare/v3.0.0-beta.14...v3.0.0-beta.15) (2021-11-29)\n\n### Bug Fixes\n\n- **react:** fixed types for supporting class components (fixes [#730](https://github.com/callstack/linaria/issues/730)) ([#877](https://github.com/callstack/linaria/issues/877)) ([e637ecb](https://github.com/callstack/linaria/commit/e637ecb8946a8119cfbd039bfb65d42206e09c4e))\n\n# [3.0.0-beta.14](https://github.com/callstack/linaria/compare/v3.0.0-beta.13...v3.0.0-beta.14) (2021-11-05)\n\n### Bug Fixes\n\n- **react:** refactor/rest op ([#860](https://github.com/callstack/linaria/issues/860)) ([da94704](https://github.com/callstack/linaria/commit/da94704df8ca74d94fe57682e2557274cf2d4cb0))\n- **react:** unions in prop types are not resolved ([#844](https://github.com/callstack/linaria/issues/844)) ([62009e9](https://github.com/callstack/linaria/commit/62009e9184638fd8761f187c99e7ea434f364bee))\n\n# [3.0.0-beta.13](https://github.com/callstack/linaria/compare/v3.0.0-beta.12...v3.0.0-beta.13) (2021-09-13)\n\n### Bug Fixes\n\n- **react:** fixes for `--exactOptionalPropertyTypes` TS flag ([#827](https://github.com/callstack/linaria/issues/827)) ([eed92b1](https://github.com/callstack/linaria/commit/eed92b19e3b779b656fb780307bbab8a08d14ba2))\n\n# [3.0.0-beta.11](https://github.com/callstack/linaria/compare/v3.0.0-beta.10...v3.0.0-beta.11) (2021-08-08)\n\n### Bug Fixes\n\n- **styled:** remove unnecessary core-js polyfills (fixes [#799](https://github.com/callstack/linaria/issues/799)) ([#814](https://github.com/callstack/linaria/issues/814)) ([6c3070a](https://github.com/callstack/linaria/commit/6c3070a47715022eb761567b8795f6918784ae4c))\n\n# [3.0.0-beta.7](https://github.com/callstack/linaria/compare/v3.0.0-beta.6...v3.0.0-beta.7) (2021-06-24)\n\n**Note:** Version bump only for package @linaria/react\n\n# [3.0.0-beta.4](https://github.com/callstack/linaria/compare/v3.0.0-beta.3...v3.0.0-beta.4) (2021-05-07)\n\n**Note:** Version bump only for package @linaria/react\n\n# [3.0.0-beta.3](https://github.com/callstack/linaria/compare/v3.0.0-beta.2...v3.0.0-beta.3) (2021-04-20)\n\n### Bug Fixes\n\n- **core,react:** make IE 11 compatible (fixes [#746](https://github.com/callstack/linaria/issues/746)) ([#750](https://github.com/callstack/linaria/issues/750)) ([922df95](https://github.com/callstack/linaria/commit/922df9576a430cdfe9b27aed5dc45c4f75917607))\n\n# [3.0.0-beta.2](https://github.com/callstack/linaria/compare/v3.0.0-beta.1...v3.0.0-beta.2) (2021-04-11)\n\n**Note:** Version bump only for package @linaria/react\n" }, { "path": "packages/react/README.md", "content": "

\n \"Linaria\"\n

\n\n

\nZero-runtime CSS in JS library.\n

\n\n---\n\n### 📖 Please refer to the [GitHub](https://github.com/callstack/linaria#readme) for full documentation.\n\n## Features\n\n- Write CSS in JS, but with **zero runtime**, CSS is extracted to CSS files during build\n- Familiar **CSS syntax** with Sass like nesting\n- Use **dynamic prop based styles** with the React bindings, uses CSS variables behind the scenes\n- Easily find where the style was defined with **CSS sourcemaps**\n- **Lint your CSS** in JS with [stylelint](https://github.com/stylelint/stylelint)\n- Use **JavaScript for logic**, no CSS preprocessor needed\n- Optionally use any **CSS preprocessor** such as Sass or PostCSS\n\n**[Why use Linaria](../../docs/BENEFITS.md)**\n\n## Installation\n\n```sh\nnpm install @linaria/core @linaria/react @linaria/babel-preset\n```\n\nor\n\n```sh\nyarn add @linaria/core @linaria/react @linaria/babel-preset\n```\n" }, { "path": "packages/react/__dtslint-react17__/index.d.ts", "content": "// dtslint expects an `index.d.ts` in the test folder.\n" }, { "path": "packages/react/__dtslint-react17__/react17.tsx", "content": "import { styled } from '..';\n\nconst Button = styled.button``;\n\n// Should not require `children` for intrinsic elements on React 17 projects.\nButton({});\n;\n" }, { "path": "packages/react/__dtslint-react17__/stubs/jsx-runtime.d.ts", "content": "declare module 'react/jsx-runtime' {\n const Fragment: unknown;\n function jsx(type: unknown, props: unknown, key?: unknown): unknown;\n function jsxs(type: unknown, props: unknown, key?: unknown): unknown;\n}\n\ndeclare module 'react/jsx-dev-runtime' {\n const Fragment: unknown;\n function jsxDEV(\n type: unknown,\n props: unknown,\n key: unknown,\n isStaticChildren: boolean,\n source: unknown,\n self: unknown\n ): unknown;\n}\n" }, { "path": "packages/react/__dtslint-react17__/stubs/react17.d.ts", "content": "// Minimal React 17-like type surface for dtslint.\n// It intentionally does NOT export a module-level `JSX` namespace.\n\ndeclare namespace React {\n type ElementType = unknown;\n\n interface CSSProperties {\n [key: string]: unknown;\n }\n\n interface FunctionComponent

> {\n (props: P & { children?: unknown }): unknown;\n }\n\n function createElement(...args: unknown[]): unknown;\n}\n\nexport = React;\nexport as namespace React;\n\ndeclare global {\n namespace JSX {\n interface IntrinsicElements {\n button: Record;\n }\n }\n}\n" }, { "path": "packages/react/__dtslint-react17__/tsconfig.eslint.json", "content": "{\n \"extends\": \"./tsconfig.json\"\n}\n" }, { "path": "packages/react/__dtslint-react17__/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"module\": \"commonjs\",\n \"lib\": [\"es6\"],\n \"target\": \"ES2015\",\n \"jsx\": \"react-jsx\",\n \"noImplicitAny\": true,\n \"noImplicitThis\": true,\n \"strictNullChecks\": true,\n \"strictFunctionTypes\": true,\n \"esModuleInterop\": true,\n \"allowSyntheticDefaultImports\": true,\n \"types\": [],\n \"noEmit\": true,\n \"baseUrl\": \"./\",\n \"paths\": {\n \"react\": [\"./stubs/react17.d.ts\"],\n \"react/jsx-runtime\": [\"./stubs/jsx-runtime.d.ts\"],\n \"react/jsx-dev-runtime\": [\"./stubs/jsx-runtime.d.ts\"]\n }\n }\n}\n" }, { "path": "packages/react/__dtslint__/index.d.ts", "content": "// dtslint wants to see index.d.ts. Well, here it is.\ndeclare const linaria: unknown;\n" }, { "path": "packages/react/__dtslint__/styled.ts", "content": "/* tslint:disable:no-unnecessary-generics */\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport * as React from 'react';\n\nimport { css } from '@linaria/core';\n\nimport { styled } from '..';\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction isExtends(arg1?: C, arg2?: T): C extends T ? 'extends' : never {\n // It will never be executed, so the result doesn't matter.\n return null as any;\n}\n\nconst Fabric =\n >(): React.FC =>\n (props) =>\n React.createElement('div', props);\n\nconst Header = (p: { children: string }) => React.createElement('h1', p);\n\nconst Generic = (\n p: T & { className?: string; style?: React.CSSProperties }\n) => React.createElement('h1', p);\n\nconst StyledDiv = styled.div``;\n// $ExpectType \"extends\"\nisExtends>>();\n\nconst A = (): React.ReactElement => React.createElement('div', null);\n// @ts-expect-error\nstyled(A)``;\n\n// foo is not a valid property of div\n// @ts-expect-error\nReact.createElement(StyledDiv, { foo: 'foo' });\n\nconst ReStyledDiv = styled(StyledDiv)<{ foo: string }>``;\nReact.createElement(ReStyledDiv, { foo: 'foo' });\n\n// component should have className property\n// @ts-expect-error\nstyled(Fabric<{ a: string }>())``;\n\n// className property should be string\n// @ts-expect-error\nstyled(Fabric<{ className: number }>())``;\n\nconst SimplestComponent = styled(Fabric<{ className: string }>())``;\n// $ExpectType \"extends\"\nisExtends>();\n\nstyled(Fabric<{ className: string }>())`\n // component should have style property\n color: ${\n // @ts-expect-error\n () => 'red'\n };\n`;\n\nstyled(Fabric<{ className: string }>())`\n // it looks like function, but it's a reference to another styled component\n & > ${SimplestComponent} {\n color: red;\n }\n`;\n\nstyled(Fabric<{ className: string }>())`\n // it looks like the previous test, but it references a non-linaria component\n &\n > ${\n // @ts-expect-error\n Header\n } {\n color: red;\n }\n`;\n\nstyled(Fabric<{ className: string; style: {} }>())`\n color: ${() => 'red'};\n`;\n\nstyled(Fabric<{ className: string; style: {} }>())`\n // color should be defined in props\n color: ${\n // @ts-expect-error\n (props) => props.color\n };\n`;\n\nstyled(Fabric<{ className: string; color: 'red' | 'blue'; style: {} }>())`\n & > ${SimplestComponent} {\n color: ${(props) => props.color};\n }\n`;\n\n// $ExpectType number\nGeneric({ children: 123 }).props.children;\n\nconst StyledGeneric = styled(Generic)``;\n// $ExpectType number\nStyledGeneric({ children: 123 }).props.children;\n\nstyled.a`\n & > ${SimplestComponent} {\n color: red;\n }\n`({ href: 'about:blank' });\n\n((/* Issue #536 */) => {\n const Title = styled.div<{ background: string }>`\n background: ${(props) => props.background};\n `;\n\n // $ExpectType \"extends\"\n isExtends>();\n\n css`\n ${Title} {\n color: green;\n }\n `;\n})();\n\n((/* Issue #622 */) => {\n const Wrapper = styled.div<{ prop1: boolean }>`\n width: 1em;\n background-color: ${(props) => (props.prop1 ? 'transparent' : 'green')};\n `;\n\n const Custom: React.FC<{ className?: string; id: number }> = () => null;\n\n const tag = styled(Custom);\n const Card = tag`\n ${Wrapper} {\n color: green;\n }\n `;\n\n // $ExpectType Validator | undefined\n Card.propTypes!.id;\n\n const styledTag = styled(Wrapper);\n\n const NewWrapper = styledTag<{ prop2: string }>`\n width: 2em;\n background-color: ${(props) => (props.prop1 ? 'transparent' : 'red')};\n color: ${(props) => props.prop2};\n `;\n\n // $ExpectType Validator | undefined\n NewWrapper.propTypes!.prop1;\n\n // $ExpectType Validator | undefined\n NewWrapper.propTypes!.prop2;\n})();\n\n((/* Issue #844 */) => {\n type GridProps = { container?: false } | { container: true; spacing: number };\n\n const Grid: React.FC = () => null;\n\n // Type 'false' is not assignable to type 'true'\n // @ts-expect-error\n React.createElement(Grid, { container: false, spacing: 8 });\n\n React.createElement(Grid, { container: true, spacing: 8 });\n\n styled(Grid)``;\n})();\n\n((/* Issue #872 */) => {\n interface BaseProps {\n className?: string;\n style?: React.CSSProperties;\n }\n\n interface ComponentProps extends BaseProps {\n title: string;\n }\n\n const Flow = (Cmp: React.FC) => styled(Cmp)`\n display: flow;\n `;\n\n const Component: React.FC = (props) =>\n React.createElement('div', props);\n\n const Implementation = Flow(Component);\n\n (() => React.createElement(Implementation, { title: 'Title' }))();\n})();\n" }, { "path": "packages/react/__dtslint__/tsconfig.eslint.json", "content": "{\n \"extends\": \"./tsconfig.json\"\n}\n" }, { "path": "packages/react/__dtslint__/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"module\": \"commonjs\",\n \"lib\": [\"es6\"],\n \"target\": \"ES2015\",\n \"esModuleInterop\": true,\n \"noImplicitAny\": true,\n \"noImplicitThis\": true,\n \"strictNullChecks\": true,\n \"strictFunctionTypes\": true,\n \"noUncheckedIndexedAccess\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noEmit\": true,\n\n \"baseUrl\": \"./\"\n }\n}\n" }, { "path": "packages/react/__tests__/__snapshots__/styled.test.tsx.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`applies CSS variables in style prop 1`] = `\n\n This is a test\n\n`;\n\nexports[`does not filter attributes for components 1`] = `\n

\n voila\n
\n`;\n\nexports[`does not filter attributes for kebab cased custom elements 1`] = `\n\n This is a test\n\n`;\n\nexports[`does not filter attributes for unknown tag 1`] = `\n\n This is a test\n\n`;\n\nexports[`does not filter attributes for upper camel cased custom elements 1`] = `\n\n This is a test\n\n`;\n\nexports[`filters unknown html attributes for HTML tag 1`] = `\n\n This is a test\n\n`;\n\nexports[`forwards as prop when wrapping another styled component 1`] = `\n\n This is a test\n\n`;\n\nexports[`handles wrapping another styled component 1`] = `\n\n This is a test\n\n`;\n\nexports[`merges CSS variables with custom style prop 1`] = `\n\n This is a test\n\n`;\n\nexports[`provides linaria component className for composition as last item in props.className 1`] = `\n\n original classname used for composition\n\n`;\n\nexports[`renders component with display name and class name 1`] = `\n\n This is a test\n\n`;\n\nexports[`renders tag with display name and class name 1`] = `\n\n This is a test\n\n`;\n\nexports[`replaces custom component with as prop for primitive 1`] = `\n\n This is a test\n\n`;\n\nexports[`replaces primitive with as prop for custom component 1`] = `\n\n This is a test\n\n`;\n\nexports[`replaces simple component with as prop 1`] = `\n\n This is a test\n\n`;\n\nexports[`supports extra class prop 1`] = `\n\n This is a test\n\n`;\n\nexports[`supports extra className prop 1`] = `\n\n This is a test\n\n`;\n" }, { "path": "packages/react/__tests__/detect-core-js.test.ts", "content": "import cp from 'child_process';\n\nconst waitForProcess = async (process) => {\n return new Promise((resolve) => {\n let output = '';\n process.stdout.on('data', (chunk) => {\n output += chunk.toString();\n });\n process.on('close', () => {\n resolve(output);\n });\n });\n};\n\nit('Ensures that package do not include core-js dependency after build', async () => {\n // eslint-disable-next-line import/no-extraneous-dependencies\n const packageJSON = require('@linaria/react/package.json');\n const buildScript = packageJSON.scripts['build:corejs-test'];\n\n const proc = cp.exec(buildScript, {\n stdio: 'ignore',\n env: {\n ...process.env,\n DEBUG_CORE_JS: 'true',\n },\n });\n const result = await waitForProcess(proc);\n // run `DEBUG_CORE_JS=true yarn build:lib` to debug issues with introduced core-js dependency\n expect(result).not.toContain(\n 'The corejs3 polyfill added the following polyfills'\n );\n expect(result).toContain(\n 'Based on your code and targets, the corejs3 polyfill did not add any polyfill'\n );\n}, 15000);\n" }, { "path": "packages/react/__tests__/styled.test.tsx", "content": "import React from 'react';\n\nimport { omit } from '../src/styled';\n\nconst renderer = require('react-test-renderer');\n\nconst { styled } = require('../src');\n\nit('renders tag with display name and class name', () => {\n const Test = styled('h1')({\n name: 'TestComponent',\n class: 'abcdefg',\n });\n\n expect(Test.displayName).toBe('TestComponent');\n expect(Test.__wyw_meta.className).toBe('abcdefg');\n expect(Test.__wyw_meta.extends).toBe('h1');\n\n const tree = renderer.create(This is a test);\n\n expect(tree.toJSON()).toMatchSnapshot();\n});\n\nit('renders component with display name and class name', () => {\n const Custom: React.FC = (props) =>
;\n\n const Test = styled(Custom)({\n name: 'TestComponent',\n class: 'abcdefg',\n });\n\n expect(Test.displayName).toBe('TestComponent');\n expect(Test.__wyw_meta.className).toBe('abcdefg');\n expect(Test.__wyw_meta.extends).toBe(Custom);\n\n const tree = renderer.create(This is a test);\n\n expect(tree.toJSON()).toMatchSnapshot();\n});\n\nit('applies CSS variables in style prop', () => {\n const Test = styled('div')({\n name: 'TestComponent',\n class: 'abcdefg',\n vars: {\n foo: ['tomato'],\n bar: [20, 'px'],\n baz: [(props: { size: number }) => props.size, 'px'],\n },\n });\n\n const tree = renderer.create(This is a test);\n\n expect(tree.toJSON()).toMatchSnapshot();\n});\n\nit('merges CSS variables with custom style prop', () => {\n const Test = styled('div')({\n name: 'TestComponent',\n class: 'abcdefg',\n vars: {\n foo: ['tomato'],\n },\n });\n\n const tree = renderer.create(\n This is a test\n );\n\n expect(tree.toJSON()).toMatchSnapshot();\n});\n\nit('supports extra className prop', () => {\n const Test = styled('div')({\n name: 'TestComponent',\n class: 'abcdefg',\n });\n\n const tree = renderer.create(This is a test);\n\n expect(tree.toJSON()).toMatchSnapshot();\n});\n\nit('supports extra class prop', () => {\n const Test = styled('div')({\n name: 'TestComponent',\n class: 'abcdefg',\n });\n\n const tree = renderer.create(This is a test);\n\n expect(tree.toJSON()).toMatchSnapshot();\n});\n\nit('replaces simple component with as prop', () => {\n const Test = styled('button')({\n name: 'TestComponent',\n class: 'abcdefg',\n });\n\n const tree = renderer.create(\n \n This is a test\n \n );\n\n expect(tree.toJSON()).toMatchSnapshot();\n});\n\nit('replaces custom component with as prop for primitive', () => {\n const Custom: React.FC = (props) => (\n
\n );\n\n const Test = styled(Custom)({\n name: 'TestComponent',\n class: 'abcdefg',\n });\n\n const tree = renderer.create(\n \n This is a test\n \n );\n\n expect(tree.toJSON()).toMatchSnapshot();\n});\n\nit('replaces primitive with as prop for custom component', () => {\n const Custom: React.FC = (props) => (\n
\n );\n\n const Test = styled('div')({\n name: 'TestComponent',\n class: 'abcdefg',\n });\n\n const tree = renderer.create(\n \n This is a test\n \n );\n\n expect(tree.toJSON()).toMatchSnapshot();\n});\n\nit('handles wrapping another styled component', () => {\n const First = styled('div')({\n name: 'FirstComponent',\n class: 'abcdefg',\n });\n\n const Second = styled(First)({\n name: 'SecondComponent',\n class: 'hijklmn',\n });\n\n const tree = renderer.create(This is a test);\n\n expect(tree.toJSON()).toMatchSnapshot();\n});\n\nit('forwards as prop when wrapping another styled component', () => {\n const First = styled('div')({\n name: 'FirstComponent',\n class: 'abcdefg',\n });\n\n const Second = styled(First)({\n name: 'SecondComponent',\n class: 'hijklmn',\n });\n\n const tree = renderer.create(This is a test);\n\n expect(tree.toJSON()).toMatchSnapshot();\n});\n\nit('filters unknown html attributes for HTML tag', () => {\n const Test = styled('div')({\n name: 'TestComponent',\n class: 'abcdefg',\n });\n\n const tree = renderer.create(\n This is a test\n );\n\n expect(tree.toJSON()).toMatchSnapshot();\n});\n\nit('does not filter attributes for kebab cased custom elements', () => {\n const Test = styled('my-element')({\n name: 'TestComponent',\n class: 'abcdefg',\n });\n\n const tree = renderer.create(\n This is a test\n );\n\n expect(tree.toJSON()).toMatchSnapshot();\n});\n\nit('does not filter attributes for upper camel cased custom elements', () => {\n const Test = styled('View')({\n name: 'TestComponent',\n class: 'abcdefg',\n });\n\n const tree = renderer.create(This is a test);\n\n expect(tree.toJSON()).toMatchSnapshot();\n});\n\nit('does not filter attributes for unknown tag', () => {\n const Test = styled('definitelyunknowntag')({\n name: 'TestComponent',\n class: 'abcdefg',\n propsAsIs: true,\n });\n\n const tree = renderer.create(This is a test);\n\n expect(tree.toJSON()).toMatchSnapshot();\n});\n\nit('does not filter attributes for components', () => {\n const Custom: React.FC<{ unknownAttribute: string }> = (props) => (\n
{props.unknownAttribute}
\n );\n\n const Test = styled(Custom)({\n name: 'TestComponent',\n class: 'abcdefg',\n });\n\n const tree = renderer.create(\n This is a test\n );\n\n expect(tree.toJSON()).toMatchSnapshot();\n});\n\nit('provides linaria component className for composition as last item in props.className', () => {\n const Custom: React.FC<{ className: string }> = (props) => {\n const classnames = props.className.split(' ');\n const linariaClassName = classnames[classnames.length - 1];\n const newClassNames = [\n props.className,\n `${linariaClassName}--primary`,\n `${linariaClassName}--accessibility`,\n ].join(' ');\n\n return (\n
\n original classname used for composition\n
\n );\n };\n\n const Test = styled(Custom)({\n name: 'TestComponent',\n class: 'abcdefg',\n });\n\n const tree = renderer.create(\n This is a test\n );\n\n expect(tree.toJSON()).toMatchSnapshot();\n});\n\nit('throws when using as tag for template literal', () => {\n // styled uses process.env.NODE_ENV to determine if it's running in a test environment\n const nodeEnv = process.env.NODE_ENV;\n delete process.env.NODE_ENV;\n\n expect(\n () => styled('div')`\n color: blue;\n `\n ).toThrow('Using the \"styled\" tag in runtime is not supported');\n\n expect(\n () => styled.div`\n color: blue;\n `\n ).toThrow('Using the \"styled\" tag in runtime is not supported');\n\n process.env.NODE_ENV = nodeEnv;\n});\n\nit('can get rest keys from object', () => {\n const obj = { one: 1, two: 2, three: 3 };\n const rest = omit(obj, ['two']);\n // eslint-disable-next-line no-unused-vars\n const { two, ...expectedRest } = obj;\n expect(rest).toEqual(expectedRest);\n});\nit('can get rest keys from complex object', () => {\n const obj = {\n string: 'hello',\n bool: false,\n object: { hello: 'world' },\n arr: [1, 2, 3],\n num: 47,\n };\n const rest = omit(obj, ['bool', 'object', 'arr']);\n // eslint-disable-next-line no-unused-vars\n const { bool, object, arr, ...expectedRest } = obj;\n expect(rest).toEqual(expectedRest);\n});\n" }, { "path": "packages/react/babel.config.js", "content": "const config = require('../../babel.config');\n\nmodule.exports = config;\n" }, { "path": "packages/react/package.json", "content": "{\n \"name\": \"@linaria/react\",\n \"version\": \"7.0.1\",\n \"description\": \"Blazing fast zero-runtime CSS in JS library\",\n \"keywords\": [\n \"css\",\n \"css-in-js\",\n \"linaria\",\n \"react\",\n \"styled-components\"\n ],\n \"homepage\": \"https://github.com/callstack/linaria#readme\",\n \"bugs\": \"https://github.com/callstack/linaria/issues\",\n \"repository\": \"git@github.com:callstack/linaria.git\",\n \"license\": \"MIT\",\n \"sideEffects\": false,\n \"exports\": {\n \"./package.json\": \"./package.json\",\n \".\": {\n \"types\": \"./types/index.d.ts\",\n \"import\": \"./dist/index.mjs\",\n \"default\": \"./dist/index.js\"\n },\n \"./*\": {\n \"types\": \"./types/*.d.ts\",\n \"import\": \"./dist/*.mjs\",\n \"default\": \"./dist/*.js\"\n }\n },\n \"main\": \"dist/index.js\",\n \"module\": \"dist/index.mjs\",\n \"types\": \"types/index.d.ts\",\n \"typesVersions\": {\n \"*\": {\n \"processors/*\": [\n \"./types/processors/*.d.ts\"\n ]\n }\n },\n \"files\": [\n \"dist/\",\n \"processors/\",\n \"types/\"\n ],\n \"wyw-in-js\": {\n \"tags\": {\n \"styled\": \"./dist/processors/styled.js\"\n }\n },\n \"scripts\": {\n \"build\": \"pnpm build:dist && pnpm build:declarations\",\n \"build:corejs-test\": \"cross-env NODE_ENV=legacy babel src --out-dir lib --extensions '.js,.jsx,.ts,.tsx' --ignore \\\"src/processors/**/*\\\"\",\n \"build:declarations\": \"tsc --emitDeclarationOnly --outDir types\",\n \"build:dist\": \"tsup --format cjs,esm\",\n \"test\": \"jest --config ../../jest.config.js --rootDir .\",\n \"test:dts\": \"dtslint --localTs ../../node_modules/typescript/lib __dtslint__ && dtslint --localTs ../../node_modules/typescript/lib __dtslint-react17__\",\n \"typecheck\": \"tsc --noEmit --composite false\",\n \"watch\": \"pnpm build:dist --watch & pnpm build:declarations --watch\"\n },\n \"dependencies\": {\n \"@emotion/is-prop-valid\": \"^1.2.0\",\n \"@linaria/core\": \"workspace:^\",\n \"@wyw-in-js/processor-utils\": \"^1.0.4\",\n \"@wyw-in-js/shared\": \"^1.0.4\",\n \"minimatch\": \"^9.0.3\",\n \"react-html-attributes\": \"^1.4.6\",\n \"resolve\": \"^1.22.8\",\n \"ts-invariant\": \"^0.10.3\"\n },\n \"devDependencies\": {\n \"@babel/types\": \"^7.23.5\",\n \"@types/babel__core\": \"^7.20.5\",\n \"@types/node\": \"^17.0.39\",\n \"@types/react\": \">=16\",\n \"react\": \"^16.14.0\",\n \"react-test-renderer\": \"^16.8.3\"\n },\n \"peerDependencies\": {\n \"react\": \">=16\"\n },\n \"engines\": {\n \"node\": \">=20.0.0\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"tsup\": {\n \"entry\": [\n \"src/index.ts\",\n \"src/processors/styled.ts\"\n ],\n \"splitting\": false,\n \"sourcemap\": true,\n \"clean\": true\n }\n}\n" }, { "path": "packages/react/processors/styled.js", "content": "Object.defineProperty(exports, '__esModule', {\n value: true,\n});\n\nexports.default = require('../dist/processors/styled').default;\n" }, { "path": "packages/react/src/index.ts", "content": "export { default as styled } from './styled';\nexport type {\n HtmlStyledTag,\n StyledComponent,\n StyledJSXIntrinsics,\n Styled,\n} from './styled';\nexport type { CSSProperties } from '@linaria/core';\nexport type { WYWEvalMeta } from '@wyw-in-js/shared';\n" }, { "path": "packages/react/src/processors/styled.ts", "content": "import { readFileSync } from 'fs';\nimport { dirname, join, posix } from 'path';\n\nimport type {\n CallExpression,\n Expression,\n ObjectExpression,\n SourceLocation,\n StringLiteral,\n Identifier,\n} from '@babel/types';\nimport {\n buildSlug,\n TaggedTemplateProcessor,\n validateParams,\n toValidCSSIdentifier,\n} from '@wyw-in-js/processor-utils';\nimport type {\n Params,\n Rules,\n TailProcessorParams,\n ValueCache,\n} from '@wyw-in-js/processor-utils';\nimport type { IVariableContext } from '@wyw-in-js/shared';\nimport {\n findPackageJSON,\n hasEvalMeta,\n slugify,\n ValueType,\n} from '@wyw-in-js/shared';\nimport { minimatch } from 'minimatch';\nimport html from 'react-html-attributes';\nimport { sync as resolveSync } from 'resolve';\n\nconst isNotNull = (x: T | null): x is T => x !== null;\n\nconst allTagsSet = new Set([...html.elements.html, html.elements.svg]);\n\nexport type WrappedNode =\n | string\n | { node: Identifier; nonLinaria?: true; source: string };\n\nexport interface IProps {\n atomic?: boolean;\n class?: string;\n name: string;\n propsAsIs: boolean;\n vars?: Record;\n}\n\nconst singleQuotedStringLiteral = (value: string): StringLiteral => ({\n type: 'StringLiteral',\n value,\n extra: {\n rawValue: value,\n raw: `'${value}'`,\n },\n});\n\nexport default class StyledProcessor extends TaggedTemplateProcessor {\n public component: WrappedNode;\n\n #variableIdx = 0;\n\n #variablesCache = new Map();\n\n constructor(params: Params, ...args: TailProcessorParams) {\n // Should have at least two params and the first one should be a callee.\n validateParams(\n params,\n ['callee', '*', '...'],\n TaggedTemplateProcessor.SKIP\n );\n\n validateParams(\n params,\n ['callee', ['call', 'member'], ['template', 'call']],\n 'Invalid usage of `styled` tag'\n );\n\n const [tag, tagOp, template] = params;\n\n if (template[0] === 'call') {\n // It is already transformed styled-literal. Skip it.\n // eslint-disable-next-line @typescript-eslint/no-throw-literal\n throw TaggedTemplateProcessor.SKIP;\n }\n\n super([tag, template], ...args);\n\n let component: WrappedNode | undefined;\n if (tagOp[0] === 'call' && tagOp.length === 2) {\n const value = tagOp[1];\n if (value.kind === ValueType.FUNCTION) {\n component = 'FunctionalComponent';\n } else if (value.kind === ValueType.CONST) {\n component = typeof value.value === 'string' ? value.value : undefined;\n } else {\n if (value.importedFrom?.length) {\n const selfPkg = findPackageJSON('.', this.context.filename);\n\n // Check if at least one used identifier is a Linaria component.\n const isSomeMatched = value.importedFrom.some((importedFrom) => {\n const importedPkg =\n // If package.json is not found, assume it's a local package\n findPackageJSON(importedFrom, this.context.filename) ?? selfPkg;\n\n if (importedPkg) {\n const packageJSON = JSON.parse(readFileSync(importedPkg, 'utf8'));\n const mask: string | undefined = packageJSON?.linaria?.components;\n if (importedPkg === selfPkg && mask === undefined) {\n // If mask is not specified for the local package, all components are treated as styled.\n return true;\n }\n\n if (mask) {\n const packageDir = dirname(importedPkg);\n // Masks for minimatch should always use POSIX slashes\n const fullMask = join(packageDir, mask).replace(\n /\\\\/g,\n posix.sep\n );\n\n try {\n const fileWithComponent = resolveSync(importedFrom, {\n basedir: dirname(this.context.filename!),\n extensions: this.options.extensions,\n });\n\n return minimatch(fileWithComponent, fullMask);\n } catch (e) {\n // It means that resolver can't find the file.\n // eslint-disable-next-line no-console\n console.warn(\n `Can't resolve ${importedFrom} from ${this.context.filename}. If ${value.source} is another styled component, it should be resolvable with default Node.js resolver. If it's not, please exclude it from the linaria.components mask in package.json.`\n );\n\n return false;\n }\n }\n }\n\n return false;\n });\n\n if (!isSomeMatched) {\n component = {\n node: value.ex,\n nonLinaria: true,\n source: value.source,\n };\n }\n }\n\n if (component === undefined) {\n component = {\n node: value.ex,\n source: value.source,\n };\n\n this.dependencies.push(value);\n }\n }\n }\n\n if (tagOp[0] === 'member') {\n [, component] = tagOp;\n }\n\n if (!component) {\n throw new Error('Invalid usage of `styled` tag');\n }\n\n this.component = component;\n }\n\n public override get asSelector(): string {\n return `.${this.className}`;\n }\n\n public override get value(): ObjectExpression {\n const t = this.astService;\n const extendsNode =\n typeof this.component === 'string' || this.component.nonLinaria\n ? null\n : this.component.node.name;\n\n return t.objectExpression([\n t.objectProperty(\n t.stringLiteral('displayName'),\n t.stringLiteral(this.displayName)\n ),\n t.objectProperty(\n t.stringLiteral('__wyw_meta'),\n t.objectExpression([\n t.objectProperty(\n t.stringLiteral('className'),\n t.stringLiteral(this.className)\n ),\n t.objectProperty(\n t.stringLiteral('extends'),\n extendsNode\n ? t.callExpression(t.identifier(extendsNode), [])\n : t.nullLiteral()\n ),\n ])\n ),\n ]);\n }\n\n protected get tagExpression(): CallExpression {\n const t = this.astService;\n return t.callExpression(this.callee, [this.tagExpressionArgument]);\n }\n\n protected get tagExpressionArgument(): Expression {\n const t = this.astService;\n if (typeof this.component === 'string') {\n if (this.component === 'FunctionalComponent') {\n return t.arrowFunctionExpression([], t.blockStatement([]));\n }\n\n return singleQuotedStringLiteral(this.component);\n }\n\n return t.callExpression(t.identifier(this.component.node.name), []);\n }\n\n public override addInterpolation(\n node: Expression,\n precedingCss: string,\n source: string,\n unit = ''\n ): string {\n const id = this.getVariableId(source, unit, precedingCss);\n\n this.interpolations.push({\n id,\n node,\n source,\n unit,\n });\n\n return id;\n }\n\n public override doEvaltimeReplacement(): void {\n this.replacer(this.value, false);\n }\n\n public override doRuntimeReplacement(): void {\n const t = this.astService;\n\n const props = this.getProps();\n\n this.replacer(\n t.callExpression(this.tagExpression, [this.getTagComponentProps(props)]),\n true\n );\n }\n\n public override extractRules(\n valueCache: ValueCache,\n cssText: string,\n loc?: SourceLocation | null\n ): Rules {\n const rules: Rules = {};\n\n let selector = `.${this.className}`;\n\n // If `styled` wraps another component and not a primitive,\n // get its class name to create a more specific selector\n // it'll ensure that styles are overridden properly\n let value =\n typeof this.component === 'string' || this.component.nonLinaria\n ? null\n : valueCache.get(this.component.node.name);\n while (hasEvalMeta(value)) {\n selector += `.${value.__wyw_meta.className}`;\n value = value.__wyw_meta.extends;\n }\n\n rules[selector] = {\n cssText,\n className: this.className,\n displayName: this.displayName,\n start: loc?.start ?? null,\n };\n\n return rules;\n }\n\n public override toString(): string {\n const res = (arg: string) => `${this.tagSourceCode()}(${arg})\\`…\\``;\n\n if (typeof this.component === 'string') {\n if (this.component === 'FunctionalComponent') {\n return res('() => {…}');\n }\n\n return res(`'${this.component}'`);\n }\n\n return res(this.component.source);\n }\n\n protected getCustomVariableId(\n source: string,\n unit: string,\n precedingCss: string\n ) {\n const context = this.getVariableContext(source, unit, precedingCss);\n const customSlugFn = this.options.variableNameSlug;\n if (!customSlugFn) {\n return undefined;\n }\n\n return typeof customSlugFn === 'function'\n ? customSlugFn(context)\n : buildSlug(customSlugFn, { ...context });\n }\n\n protected getProps(): IProps {\n const propsObj: IProps = {\n name: this.displayName,\n class: this.className,\n propsAsIs:\n typeof this.component !== 'string' || !allTagsSet.has(this.component),\n };\n\n // If we found any interpolations, also pass them, so they can be applied\n if (this.interpolations.length) {\n propsObj.vars = {};\n this.interpolations.forEach(({ id, unit, node }) => {\n const items: Expression[] = [this.astService.callExpression(node, [])];\n\n if (unit) {\n items.push(this.astService.stringLiteral(unit));\n }\n\n propsObj.vars![id] = items;\n });\n }\n\n return propsObj;\n }\n\n protected getTagComponentProps(props: IProps): ObjectExpression {\n const t = this.astService;\n\n const propExpressions = Object.entries(props)\n .map(([key, value]: [key: string, value: IProps[keyof IProps]]) => {\n if (value === undefined) {\n return null;\n }\n\n const keyNode = t.identifier(key);\n\n if (value === null) {\n return t.objectProperty(keyNode, t.nullLiteral());\n }\n\n if (typeof value === 'string') {\n return t.objectProperty(keyNode, t.stringLiteral(value));\n }\n\n if (typeof value === 'boolean') {\n return t.objectProperty(keyNode, t.booleanLiteral(value));\n }\n\n const vars = Object.entries(value).map(([propName, propValue]) => {\n return t.objectProperty(\n t.stringLiteral(propName),\n t.arrayExpression(propValue)\n );\n });\n\n return t.objectProperty(keyNode, t.objectExpression(vars));\n })\n .filter(isNotNull);\n\n return t.objectExpression(propExpressions);\n }\n\n protected getVariableContext(\n source: string,\n unit: string,\n precedingCss: string\n ): IVariableContext {\n const getIndex = () => {\n // eslint-disable-next-line no-plusplus\n return this.#variableIdx++;\n };\n\n return {\n componentName: this.displayName,\n componentSlug: this.slug,\n get index() {\n return getIndex();\n },\n precedingCss,\n processor: this.constructor.name,\n source,\n unit,\n valueSlug: slugify(source + unit),\n };\n }\n\n protected getVariableId(\n source: string,\n unit: string,\n precedingCss: string\n ): string {\n const value = source + unit;\n if (!this.#variablesCache.has(value)) {\n const id = this.getCustomVariableId(source, unit, precedingCss);\n if (id) {\n return toValidCSSIdentifier(id);\n }\n\n const context = this.getVariableContext(source, unit, precedingCss);\n\n // make the variable unique to this styled component\n this.#variablesCache.set(value, `${this.slug}-${context.index}`);\n }\n\n return this.#variablesCache.get(value)!;\n }\n}\n" }, { "path": "packages/react/src/react-html-attributes.d.ts", "content": "declare module 'react-html-attributes' {\n interface IElements {\n html: string[];\n svg: string[];\n }\n\n interface IAttributes {\n [tag: string]: string[];\n }\n\n const result: IAttributes & {\n elements: IElements;\n };\n\n export = result;\n}\n" }, { "path": "packages/react/src/styled.ts", "content": "/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * This file contains a runtime version of `styled` component. Responsibilities of the component are:\n * - returns ReactElement based on HTML tag used with `styled` or custom React Component\n * - injects classNames for the returned component\n * - injects CSS variables used to define dynamic styles based on props\n */\nimport validAttr from '@emotion/is-prop-valid';\nimport { createElement, forwardRef } from 'react';\nimport type React from 'react';\n\nimport { cx } from '@linaria/core';\nimport type { CSSProperties } from '@linaria/core';\n\ntype WYWEvalMeta = { __wyw_meta: unknown }; // simplified version of WYWEvalMeta from @wyw-in-js/shared\n\nexport type NoInfer = [A][A extends any ? 0 : never];\n\ntype Component =\n | ((props: TProps) => unknown)\n | { new (props: TProps): unknown };\n\ntype Has = [T] extends [TObj] ? T : T & TObj;\n\ntype Options = {\n atomic?: boolean;\n class: string;\n name: string;\n propsAsIs: boolean;\n vars?: {\n [key: string]: [\n string | number | ((props: unknown) => string | number),\n string | void,\n ];\n };\n};\n\nconst isCapital = (ch: string): boolean => ch.toUpperCase() === ch;\nconst filterKey =\n (keys: TExclude[]) =>\n (key: TAll): key is Exclude =>\n keys.indexOf(key as any) === -1;\n\nexport const omit = , TKeys extends keyof T>(\n obj: T,\n keys: TKeys[]\n): Omit => {\n const res = {} as Omit;\n Object.keys(obj)\n .filter(filterKey(keys))\n .forEach((key) => {\n res[key] = obj[key];\n });\n\n return res;\n};\n\nfunction filterProps, TKeys extends keyof T>(\n asIs: boolean,\n props: T,\n omitKeys: TKeys[]\n): Partial> {\n const filteredProps = omit(props, omitKeys) as Partial;\n\n if (!asIs) {\n /**\n * A failsafe check for esModule import issues\n * if validAttr !== 'function' then it is an object of { default: Fn }\n */\n const interopValidAttr =\n typeof validAttr === 'function' ? { default: validAttr } : validAttr;\n\n Object.keys(filteredProps).forEach((key) => {\n if (!interopValidAttr.default(key)) {\n // Don't pass through invalid attributes to HTML elements\n delete filteredProps[key];\n }\n });\n }\n\n return filteredProps;\n}\n\nconst warnIfInvalid = (value: unknown, componentName: string) => {\n if (process.env.NODE_ENV !== 'production') {\n if (\n typeof value === 'string' ||\n // eslint-disable-next-line no-self-compare,no-restricted-globals\n (typeof value === 'number' && isFinite(value))\n ) {\n return;\n }\n\n const stringified =\n typeof value === 'object' ? JSON.stringify(value) : String(value);\n\n // eslint-disable-next-line no-console\n console.warn(\n `An interpolation evaluated to '${stringified}' in the component '${componentName}', which is probably a mistake. You should explicitly cast or transform the value to a string.`\n );\n }\n};\n\ninterface IProps {\n [props: string]: unknown;\n className?: string;\n style?: Record;\n}\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {}\n }\n}\n\nlet idx = 0;\n\ntype GlobalJSXIntrinsicElements = JSX.IntrinsicElements;\n\ndeclare module 'react' {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements extends GlobalJSXIntrinsicElements {}\n }\n}\n\ntype IntrinsicElements = React.JSX.IntrinsicElements;\n\n// Components with props are not allowed\nfunction styled(\n componentWithStyle: () => any\n): (error: 'The target component should have a className prop') => void;\n// Property-based interpolation is allowed only if `style` property exists\nfunction styled<\n TProps extends Has,\n TMustHave extends { style?: React.CSSProperties },\n TConstructor extends Component,\n>(\n componentWithStyle: TConstructor & Component\n): ComponentStyledTagWithInterpolation;\n// If styled wraps custom component, that component should have className property\nfunction styled<\n TProps extends Has,\n TMustHave extends { className?: string },\n TConstructor extends Component,\n>(\n componentWithoutStyle: TConstructor & Component\n): ComponentStyledTagWithoutInterpolation;\nfunction styled(\n tag: TName\n): HtmlStyledTag;\nfunction styled(\n component: 'The target component should have a className prop'\n): never;\nfunction styled(tag: any): any {\n let mockedClass = '';\n\n if (process.env.NODE_ENV === 'test') {\n // eslint-disable-next-line no-plusplus\n mockedClass += `mocked-styled-${idx++}`;\n if (tag && tag.__wyw_meta && tag.__wyw_meta.className) {\n mockedClass += ` ${tag.__wyw_meta.className}`;\n }\n }\n\n return (options: Options) => {\n if (\n process.env.NODE_ENV !== 'production' &&\n process.env.NODE_ENV !== 'test'\n ) {\n if (Array.isArray(options)) {\n // We received a strings array since it's used as a tag\n throw new Error(\n 'Using the \"styled\" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly. See https://github.com/callstack/linaria#setup'\n );\n }\n }\n\n const render = (props: any, ref: any) => {\n const { as: component = tag, class: className = mockedClass } = props;\n const shouldKeepProps =\n options.propsAsIs === undefined\n ? !(\n typeof component === 'string' &&\n component.indexOf('-') === -1 &&\n !isCapital(component[0])\n )\n : options.propsAsIs;\n const filteredProps: IProps = filterProps(shouldKeepProps, props, [\n 'as',\n 'class',\n ]);\n\n filteredProps.ref = ref;\n filteredProps.className = options.atomic\n ? cx(options.class, filteredProps.className || className)\n : cx(filteredProps.className || className, options.class);\n\n const { vars } = options;\n\n if (vars) {\n const style: Record = {};\n\n // eslint-disable-next-line guard-for-in,no-restricted-syntax\n for (const name in vars) {\n const variable = vars[name];\n const result = variable[0];\n const unit = variable[1] || '';\n const value = typeof result === 'function' ? result(props) : result;\n\n warnIfInvalid(value, options.name);\n\n style[`--${name}`] = `${value}${unit}`;\n }\n\n const ownStyle = filteredProps.style || {};\n const keys = Object.keys(ownStyle);\n if (keys.length > 0) {\n keys.forEach((key) => {\n style[key] = ownStyle[key];\n });\n }\n\n filteredProps.style = style;\n }\n\n if ((tag as any).__wyw_meta && tag !== component) {\n // If the underlying tag is a styled component, forward the `as` prop\n // Otherwise the styles from the underlying component will be ignored\n filteredProps.as = component;\n\n return createElement(tag, filteredProps);\n }\n return createElement(component, filteredProps);\n };\n\n const Result = forwardRef\n ? forwardRef(render)\n : // React.forwardRef won't available on older React versions and in Preact\n // Fallback to a innerRef prop in that case\n (props: any) => {\n const rest = omit(props, ['innerRef']);\n return render(rest, props.innerRef);\n };\n\n (Result as any).displayName = options.name;\n\n // These properties will be read by the babel plugin for interpolation\n (Result as any).__wyw_meta = {\n className: options.class || mockedClass,\n extends: tag,\n };\n\n return Result;\n };\n}\n\nexport type StyledComponent = WYWEvalMeta &\n ([T] extends [React.FunctionComponent]\n ? T\n : React.FunctionComponent);\n\ntype StaticPlaceholder = string | number | CSSProperties | WYWEvalMeta;\n\nexport type HtmlStyledTag = <\n TAdditionalProps = Record,\n>(\n strings: TemplateStringsArray,\n ...exprs: Array<\n | StaticPlaceholder\n | ((\n // Without Omit here TS tries to infer TAdditionalProps\n // from a component passed for interpolation\n props: IntrinsicElements[TName] & Omit\n ) => string | number)\n >\n) => StyledComponent;\n\ntype ComponentStyledTagWithoutInterpolation = (\n strings: TemplateStringsArray,\n ...exprs: Array<\n | StaticPlaceholder\n | ((props: 'The target component should have a style prop') => never)\n >\n) => WYWEvalMeta & TOrigCmp;\n\n// eslint-disable-next-line @typescript-eslint/ban-types\ntype ComponentStyledTagWithInterpolation = (\n strings: TemplateStringsArray,\n ...exprs: Array<\n | StaticPlaceholder\n | ((props: NoInfer) => string | number)\n >\n) => keyof OwnProps extends never\n ? WYWEvalMeta & TOrigCmp\n : StyledComponent;\n\nexport type StyledJSXIntrinsics = {\n readonly [P in keyof IntrinsicElements]: HtmlStyledTag

;\n};\n\nexport type Styled = typeof styled & StyledJSXIntrinsics;\n\nexport default (process.env.NODE_ENV !== 'production'\n ? new Proxy(styled, {\n get(o, prop: keyof IntrinsicElements) {\n return o(prop);\n },\n })\n : styled) as Styled;\n" }, { "path": "packages/react/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.json\",\n \"compilerOptions\": {\n \"paths\": {},\n \"rootDir\": \"src/\",\n \"types\": [\n \"node\"\n ],\n },\n \"include\": [\"src\"],\n \"references\": [{ \"path\": \"../core\" }]\n}\n" }, { "path": "packages/server/CHANGELOG.md", "content": "# Change Log\n\n## 7.0.0\n\n### Major Changes\n\n- ab11ebb7: BREAKING: bump `@wyw-in-js/*` dependencies to `^1.0.0` (stable).\n\n This release updates Linaria's build-time evaluation engine (WyW). See https://wyw-in-js.dev/stability for practical guidance and common pitfalls.\n\n Notes:\n\n - Linaria 7 requires Node.js 20+ (aligned with WyW 1.x).\n - If you import JSON from code that is evaluated by WyW, add `.json` to `extensions` and ensure `.json` is ignored by evaluation rules (so it's parsed as JSON, not by Babel).\n - Rollup users: WyW 1.x serializes `transform()` by default (`serializeTransform: true`). If you hit Rollup \"Unexpected early exit\" (unresolved plugin promises / deadlock during resolve), set `serializeTransform: false` (see `examples/rollup/rollup.config.mjs`).\n - WyW 1.x promotes fully-statically-evaluatable modules to `only: ['*']` and can re-evaluate modules when cached exports are incomplete (cached export values might not be reused).\n\n## 6.3.0\n\n### Minor Changes\n\n- 281ca4f5: The new version of wyw-in-js, with the support of a configurable code remover, can help prevent compilation errors and improve build time.\n\n## 6.2.0\n\n### Minor Changes\n\n- a3dcee2e: Update wyw-in-js to 0.5.3\n\n## 6.1.0\n\n### Minor Changes\n\n- 8ba655d3: Bump wyw-in-js to 0.4.0. The full list of changes https://github.com/Anber/wyw-in-js/compare/%40wyw-in-js/transform%400.2.3...%40wyw-in-js/transform%400.4.0\n\n## 6.0.0\n\n### Major Changes\n\n- 2ac94b99: BREAKING CHANGE: Linaria has been migrated to wyw-in-js.\n\n # Migration Guide\n\n ## For Users\n\n The main breaking change is that all tooling has been moved from the `@linaria` scope to the `@wyw-in-js` scope. This means that you will need to update your dependencies as follows:\n\n | Old | New |\n | ------------------------ | ------------------------- |\n | @linaria/babel-preset | @wyw-in-js/babel-preset |\n | @linaria/cli | @wyw-in-js/cli |\n | @linaria/esbuild | @wyw-in-js/esbuild |\n | @linaria/rollup | @wyw-in-js/rollup |\n | @linaria/shaker | discontinued |\n | @linaria/vite | @wyw-in-js/vite |\n | @linaria/webpack4-loader | discontinued |\n | @linaria/webpack5-loader | @wyw-in-js/webpack-loader |\n\n There is no longer a need to install `@linaria/shaker` as it is now part of `@wyw-in-js/transform`, which will be installed automatically with the bundler plugins.\n\n The configuration file has been renamed from `linaria.config.js` (`linariarc`) to `wyw-in-js.config.js` (`.wyw-in-jsrc`).\n\n ## For Custom Processor Developers\n\n Base classes for processors and most helpers have been moved to `@wyw-in-js/processor-utils`.\n\n All APIs that had `linaria` in their names have been renamed:\n\n - The field that stores meta information in runtime has been renamed from `__linaria` to `__wyw_meta`\n - The export with all interpolated values has been renamed from `__linariaPreval` to `__wywPreval`\n - The caller name in Babel has been renamed from `linaria` to `wyw-in-js`\n\n For additional information, please visit the [wyw-in-js.dev](https://wyw-in-js.dev).\n\n## 5.0.0\n\n### Major Changes\n\n- 88e07613: Rewritten dependecny tree processing with support for wildcard re-exports.\n- cb853e14: All processing stages were merged into one generators-based processor. It allows the implementation of more complex workflows to support features like dynamic imports and re-exports.\n\n### Minor Changes\n\n- 9cb4143d: Refactoring of the 1st stage of transformation. It opens the road to processing wildcard reexports.\n\n### Patch Changes\n\n- 2a1e24a0: Upgrade TypeScript to 5.2\n\n## 4.5.0\n\n### Minor Changes\n\n- 16c057df: Breaking Change: Performance Optimization for `styled`\n\n When a component is wrapped in `styled`, Linaria needs to determine if that component is already a styled component. To accomplish this, the wrapped component is included in the list of variables for evaluation, along with the interpolated values used in styles. The issue arises when a wrapped component, even if it is not styled, brings along a substantial dependency tree. This situation is particularly evident when using `styled` to style components from third-party UI libraries.\n\n To address this problem, Linaria will now examine the import location of the component and check if there is an annotation in the `package.json` file of the package containing the components. This annotation indicates whether the package includes other Linaria components. If there is no such annotation, Linaria will refrain from evaluating the component.\n\n Please note that this Breaking Change solely affects developers of component libraries. In order for users to style components from your library, you must include the `linaria.components` property in the library's `package.json` file. This property should have a mask that covers all imported files with components. Here's an example of how to specify it:\n\n ```json\n \"linaria\": {\n \"components\": \"**/*\"\n }\n ```\n\n### Patch Changes\n\n- af5bb92d: The end of support for Node.js 14. Migration to pnpm 8.\n\n## 4.1.0\n\n### Minor Changes\n\n- 77bcf2e7: - 714a8e86: Modify the handling of CSS @ rules in `collect` to only include child rules if critical\n - 1559cfa9: Add support in `collect` for ignoring and blocking classes from the regex for critical CSS extraction\n\n## 4.0.0\n\n### Major Changes\n\n- bc0cbeea: A completely new async mode with native support for Vite, Rollup, esbuild and Webpack resolvers.\n\n BREAKING CHANGES: Despite the fact, that it should be fully compatible with 3.0 and 2.0 branches, the new version of styles evaluator can have some serious bugs which can make your project unbuildable (however, since there is no runtime, if the build is finished successfully, everything will continue work as it was on 2.0 and 3.0). If you face some problems please let us know and we will fix it as soon as possible.\n\n### Patch Changes\n\n- 8be5650d: The repo has been migrated to PNPM and Turborepo\n- ea41d440: New package @linaria/tags that contains all abstract logic for tags processors.\n- 4cdf0315: Tagged template-specific logic has been moved from `BaseProcessor` to `TaggedTemplateProcessor`. `BaseProcessor` now can be used to define any type of expressions for zero-runtime transformations, such as `makeStyles` from `@griffel/react`.\n\n## 3.0.0-beta.20\n\n### Patch Changes\n\n- 8be5650d: The repo has been migrated to PNPM and Turborepo\n\n# [3.0.0-beta.19](https://github.com/callstack/linaria/compare/v3.0.0-beta.18...v3.0.0-beta.19) (2022-06-03)\n\n### Features\n\n- **babel:** api for custom tags ([#976](https://github.com/callstack/linaria/issues/976)) ([3285ccc](https://github.com/callstack/linaria/commit/3285ccc1d00449b78b3fc74087528cd38cbdd116))\n- **babel:** new way for detecting tag imports ([#974](https://github.com/callstack/linaria/issues/974)) ([3305cfb](https://github.com/callstack/linaria/commit/3305cfb0c0f65abdacceeb7e6bad118c59f7d551))\n\n# [3.0.0-beta.13](https://github.com/callstack/linaria/compare/v3.0.0-beta.12...v3.0.0-beta.13) (2021-09-13)\n\n### Bug Fixes\n\n- **server:** fix collect to ignore empty class ([#832](https://github.com/callstack/linaria/issues/832)) ([639fcca](https://github.com/callstack/linaria/commit/639fccae7f814eaa2714354aaa516a85cc8c4ebf))\n\n# [3.0.0-beta.3](https://github.com/callstack/linaria/compare/v3.0.0-beta.2...v3.0.0-beta.3) (2021-04-20)\n\n**Note:** Version bump only for package @linaria/server\n" }, { "path": "packages/server/README.md", "content": "

\n \"Linaria\"\n

\n\n

\nZero-runtime CSS in JS library.\n

\n\n---\n\n### 📖 Please refer to the [GitHub](https://github.com/callstack/linaria#readme) for full documentation.\n\n## Features\n\n- Write CSS in JS, but with **zero runtime**, CSS is extracted to CSS files during build\n- Familiar **CSS syntax** with Sass like nesting\n- Use **dynamic prop based styles** with the React bindings, uses CSS variables behind the scenes\n- Easily find where the style was defined with **CSS sourcemaps**\n- **Lint your CSS** in JS with [stylelint](https://github.com/stylelint/stylelint)\n- Use **JavaScript for logic**, no CSS preprocessor needed\n- Optionally use any **CSS preprocessor** such as Sass or PostCSS\n\n**[Why use Linaria](../../docs/BENEFITS.md)**\n\n## Installation\n\n```sh\nnpm install @linaria/core @linaria/react @linaria/babel-preset\n```\n\nor\n\n```sh\nyarn add @linaria/core @linaria/react @linaria/babel-preset\n```\n" }, { "path": "packages/server/__tests__/__snapshots__/collect.test.ts.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`classname in @rule critical 1`] = `\n\"@supports (object-fit: cover) {\n .linaria {\n }\n}\n@media (min-width: 600px) {\n .linaria {\n }\n}\n@charset() {\n .linaria {\n }\n}\n@import() {\n .linaria {\n }\n}\n@namespace () {\n .linaria {\n }\n}\n@media() {\n .linaria {\n }\n}\n@supports () {\n .linaria {\n }\n}\n@document() {\n .linaria {\n }\n}\n@page() {\n .linaria {\n }\n}\n@viewport() {\n .linaria {\n }\n}\n@counter-style() {\n .linaria {\n }\n}\n@font-feature-values() {\n .linaria {\n }\n}\n\"\n`;\n\nexports[`classname in @rule other 1`] = `\n\"@supports (object-fit: cover) {\n .other {\n }\n}\n@media (min-width: 600px) {\n .other {\n }\n}\n@charset() {\n .other {\n }\n}\n@import() {\n .other {\n }\n}\n@namespace () {\n .other {\n }\n}\n@media() {\n .other {\n }\n}\n@supports () {\n .other {\n }\n}\n@document() {\n .other {\n }\n}\n@page() {\n .other {\n }\n}\n@viewport() {\n .other {\n }\n}\n@counter-style() {\n .other {\n }\n}\n@font-feature-values() {\n .other {\n }\n}\n\"\n`;\n\nexports[`collects complex css critical 1`] = `\n\".lotus {\n vertical-align: top;\n}\n@media (max-width: 1200px) {\n .lotus {\n vertical-align: bottom;\n }\n}\n@supports (object-fit: contain) {\n .lotus {\n object-fit: contain;\n }\n\n .linaria::before,\n .linaria::after {\n content: \\\\\"\\\\\";\n object-fit: contain;\n }\n}\n.linaria {\n float: left;\n flex: 1;\n animation: custom-animation 0.2s;\n}\n.linaria:hover {\n float: right;\n}\n.linaria > span,\n.linaria + .linaria,\n.linaria ~ div {\n display: none;\n}\n.linaria > span {\n display: none;\n}\n.linaria::after {\n display: block;\n}\n.lily {\n color: #fff;\n}\n[data-theme=\\\\\"dark\\\\\"] .lily {\n color: #000;\n}\n.linaria ~ div {\n}\n.linaria.linaria2 {\n}\n@keyframes custom-animation {\n 0% {\n opacity: 0;\n }\n 50% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\"\n`;\n\nexports[`collects complex css other 1`] = `\n\"@supports (object-fit: cover) {\n .unrelated-nested {\n float: left;\n animation: custom-animation;\n }\n\n .unrelated-nested2 {\n float: left;\n }\n}\n\n.unrelated {\n animation-name: custom-animation;\n}\n\n.unrelated2 {\n animation: custom-animation 0.3s;\n}\n\n.unrelated3 {\n flex: 0;\n}\n\"\n`;\n\nexports[`handles top-level @font-face critical 1`] = `\n\"@font-face {\n font-family: MyFont;\n font-weight: normal;\n font-style: normal;\n src: url(MyFont.woff);\n}\n\"\n`;\n\nexports[`handles top-level @font-face other 1`] = `\"\"`;\n\nexports[`include atrule once critical 1`] = `\n\"@media screen {\n body {\n font-size: 10px;\n }\n h1 {\n font-size: 20px;\n }\n}\n\"\n`;\n\nexports[`include atrule once other 1`] = `\n\"@media screen {\n .class {\n font-size: 15px;\n }\n}\n\"\n`;\n\nexports[`simple class name critical 1`] = `\n\".linaria {\n}\n\"\n`;\n\nexports[`simple class name other 1`] = `\n\".classname {\n}\n\"\n`;\n\nexports[`works with CSS combinators critical 1`] = `\n\".linaria + span {\n}\n.linaria ~ div {\n}\n.linaria > a {\n}\n.linaria b {\n}\n\"\n`;\n\nexports[`works with CSS combinators other 1`] = `\n\".other + span {\n}\n.other ~ div {\n}\n.other > a {\n}\n.other b {\n}\n\"\n`;\n\nexports[`works with global css critical 1`] = `\n\"body {\n font-size: 13.37px;\n}\nhtml {\n -webkit-font-smoothing: antialiased;\n}\nh1 {\n font-weight: bold;\n}\n.linaria:active {\n}\n.linaria::before {\n}\n\"\n`;\n\nexports[`works with global css other 1`] = `\n\".other:active {\n}\n.other::before {\n}\n\"\n`;\n\nexports[`works with pseudo-class and pseudo-elements critical 1`] = `\n\".linaria:active {\n}\n.linaria::before {\n}\n\"\n`;\n\nexports[`works with pseudo-class and pseudo-elements other 1`] = `\n\".other:active {\n}\n.other::before {\n}\n\"\n`;\n" }, { "path": "packages/server/__tests__/collect.test.ts", "content": "import dedent from 'dedent';\nimport prettier from 'prettier';\n\nimport collect from '../src/collect';\n\nconst prettyPrint = (src: string) => prettier.format(src, { parser: 'scss' });\n\nconst testCollect = (html: string, css: string) => {\n const { critical, other } = collect(html, css);\n test('critical', () => expect(prettyPrint(critical)).toMatchSnapshot());\n test('other', () => expect(prettyPrint(other)).toMatchSnapshot());\n};\n\nconst html = dedent`\n
\n
\n
\n`;\n\ndescribe('collects complex css', () => {\n const css = dedent`\n .lotus {\n vertical-align: top;\n }\n\n @media (max-width: 1200px) {\n .lotus {\n vertical-align: bottom;\n }\n }\n\n @supports (object-fit: cover) {\n .unrelated-nested {\n float: left;\n animation: custom-animation;\n }\n\n .unrelated-nested2 {\n float: left;\n }\n }\n\n @supports (object-fit: contain) {\n .lotus {\n object-fit: contain;\n }\n\n .linaria::before,\n .linaria::after {\n content: '';\n object-fit: contain;\n }\n }\n\n @keyframes custom-animation {\n 0% { opacity: 0 }\n 50% { opacity: 0 }\n 100% { opacity: 1 }\n }\n\n .linaria {\n float: left;\n flex: 1;\n animation: custom-animation .2s;\n }\n\n .linaria:hover {\n float: right;\n }\n\n .linaria > span,\n .linaria + .linaria,\n .linaria ~ div {\n display: none;\n }\n\n .linaria > span {\n display: none;\n }\n\n .linaria::after {\n display: block;\n }\n\n .unrelated {\n animation-name: custom-animation;\n }\n\n .unrelated2 {\n animation: custom-animation .3s;\n }\n\n .lily {\n color: #fff;\n }\n\n [data-theme=dark] .lily {\n color: #000;\n }\n\n .unrelated3 {\n flex: 0;\n }\n\n .linaria ~ div {}\n .linaria.linaria2{}\n `;\n\n testCollect(html, css);\n});\n\ndescribe('simple class name', () => {\n const css = dedent`\n .linaria {}\n .classname {}\n `;\n\n testCollect(html, css);\n});\n\ndescribe('classname in @rule', () => {\n const css = dedent`\n @supports (object-fit: cover) { .linaria {} }\n @media (min-width: 600px) { .linaria {} }\n @charset () { .linaria {} }\n @import () { .linaria {} }\n @namespace () { .linaria {} }\n @media () { .linaria {} }\n @supports () { .linaria {} }\n @document () { .linaria {} }\n @page () { .linaria {} }\n @keyframes () { .linaria {} }\n @viewport () { .linaria {} }\n @counter-style () { .linaria {} }\n @font-feature-values () { .linaria {} }\n\n @supports (object-fit: cover) { .other {} }\n @media (min-width: 600px) { .other {} }\n @charset () { .other {} }\n @import () { .other {} }\n @namespace () { .other {} }\n @media () { .other {} }\n @supports () { .other {} }\n @document () { .other {} }\n @page () { .other {} }\n @keyframes () { .other {} }\n @viewport () { .other {} }\n @counter-style () { .other {} }\n @font-feature-values () { .other {} }\n `;\n\n testCollect(html, css);\n});\n\ndescribe('works with CSS combinators', () => {\n const css = dedent`\n .linaria + span {}\n .linaria ~ div {}\n .linaria > a {}\n .linaria b {}\n\n .other + span {}\n .other ~ div {}\n .other > a {}\n .other b {}\n `;\n testCollect(html, css);\n});\n\ndescribe('works with pseudo-class and pseudo-elements', () => {\n const css = dedent`\n .linaria:active {}\n .linaria::before {}\n\n .other:active {}\n .other::before {}\n `;\n testCollect(html, css);\n});\n\ndescribe('works with global css', () => {\n const css = dedent`\n body { font-size: 13.37px; }\n\n html { -webkit-font-smoothing: antialiased; }\n\n h1 { font-weight: bold; }\n\n .linaria:active {}\n .linaria::before {}\n\n .other:active {}\n .other::before {}\n `;\n\n const { critical, other } = collect(html, css);\n\n test('critical', () => expect(prettyPrint(critical)).toMatchSnapshot());\n test('other', () => expect(prettyPrint(other)).toMatchSnapshot());\n});\n\ndescribe('handles top-level @font-face', () => {\n const css = dedent`\n @font-face {\n font-family: MyFont;\n font-weight: normal;\n font-style: normal;\n src: url(MyFont.woff);\n }\n `;\n const { critical, other } = collect(html, css);\n\n test('critical', () => expect(prettyPrint(critical)).toMatchSnapshot());\n test('other', () => expect(prettyPrint(other)).toMatchSnapshot());\n});\n\n// there was a bug when the whole atrule was included for each child rule\ndescribe('include atrule once', () => {\n const css = dedent`\n @media screen {\n body {\n font-size: 10px;\n }\n h1 {\n font-size: 20px;\n }\n .class {\n font-size: 15px;\n }\n }\n `;\n const { critical, other } = collect(html, css);\n\n test('critical', () => expect(prettyPrint(critical)).toMatchSnapshot());\n test('other', () => expect(prettyPrint(other)).toMatchSnapshot());\n});\n\ndescribe('ignore empty class attribute', () => {\n const code = dedent`\n
\n
\n
\n
\n
\n `;\n\n const css = dedent`\n .not-exist {}\n `;\n\n const { critical } = collect(code, css);\n test('critical should be empty', () => expect(critical).toEqual(''));\n});\n\ntest('does not match selectors in ignoredClasses list', () => {\n const code = dedent`\n
\n `;\n\n const css = dedent`\n .linaria.dir {}\n .linaria.ltr {}\n .lily {}\n `;\n\n const { critical, other } = collect(code, css, {\n ignoredClasses: ['ltr', 'dir'],\n });\n expect(critical).toMatchInlineSnapshot(`\".lily {}\"`);\n expect(other).toMatchInlineSnapshot(`\".linaria.dir {}.linaria.ltr {}\"`);\n});\n\ntest('does not match selectors in blockedClasses list', () => {\n const code = dedent`\n
\n `;\n\n const css = dedent`\n .linaria.ltr {}\n .linaria.rtl {}\n .lily {}\n `;\n\n const { critical, other } = collect(code, css, { blockedClasses: ['rtl'] });\n expect(critical).toMatchInlineSnapshot(`\".linaria.ltr {}.lily {}\"`);\n expect(other).toMatchInlineSnapshot(`\".linaria.rtl {}\"`);\n});\n\ntest('does not match child selectors in blockedClasses list for media queries', () => {\n const code = dedent`\n
\n `;\n\n const css = dedent`\n @media only screen and (max-width:561.5px) {\n .dir-ltr.left_6_3_l9xil3s {\n padding-left: 24px !important;\n }\n\n .dir-rtl.left_6_3_l9xil3s {\n padding-right: 24px !important;\n }\n }\n `;\n\n const { critical, other } = collect(code, css, {\n blockedClasses: ['dir-rtl'],\n });\n\n expect(critical).toMatchInlineSnapshot(`\n \"@media only screen and (max-width:561.5px) {\n .dir-ltr.left_6_3_l9xil3s {\n padding-left: 24px !important;\n }\n }\"\n `);\n expect(other).toMatchInlineSnapshot(`\n \"@media only screen and (max-width:561.5px) {\n\n .dir-rtl.left_6_3_l9xil3s {\n padding-right: 24px !important;\n }\n }\"\n `);\n});\n" }, { "path": "packages/server/babel.config.js", "content": "const config = require('../../babel.config');\n\nmodule.exports = config;\n" }, { "path": "packages/server/package.json", "content": "{\n \"name\": \"@linaria/server\",\n \"version\": \"7.0.0\",\n \"description\": \"Blazing fast zero-runtime CSS in JS library\",\n \"keywords\": [\n \"css\",\n \"css-in-js\",\n \"linaria\",\n \"react\",\n \"styled-components\"\n ],\n \"homepage\": \"https://github.com/callstack/linaria#readme\",\n \"bugs\": \"https://github.com/callstack/linaria/issues\",\n \"repository\": \"git@github.com:callstack/linaria.git\",\n \"license\": \"MIT\",\n \"main\": \"lib/index.js\",\n \"module\": \"esm/index.js\",\n \"types\": \"types\",\n \"files\": [\n \"types/\",\n \"lib/\",\n \"esm/\"\n ],\n \"scripts\": {\n \"build\": \"pnpm build:lib && pnpm build:esm && pnpm build:declarations\",\n \"build:declarations\": \"tsc --emitDeclarationOnly --outDir types\",\n \"build:esm\": \"babel src --out-dir esm --extensions '.js,.jsx,.ts,.tsx' --source-maps --delete-dir-on-start\",\n \"build:lib\": \"cross-env NODE_ENV=legacy babel src --out-dir lib --extensions '.js,.jsx,.ts,.tsx' --source-maps --delete-dir-on-start\",\n \"typecheck\": \"tsc --noEmit --composite false\",\n \"watch\": \"pnpm build:lib --watch & pnpm build:esm --watch & pnpm build:declarations --watch\"\n },\n \"dependencies\": {\n \"postcss\": \"^8.4.31\"\n },\n \"devDependencies\": {\n \"dedent\": \"^1.5.1\",\n \"prettier\": \"^3.0.3\"\n },\n \"engines\": {\n \"node\": \">=20.0.0\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n }\n}\n" }, { "path": "packages/server/src/collect.ts", "content": "import type { AtRule, ChildNode } from 'postcss';\nimport postcss from 'postcss';\n\ntype CollectResult = {\n critical: string;\n other: string;\n};\n\ninterface ClassnameModifiers {\n blockedClasses?: string[];\n ignoredClasses?: string[];\n}\n\n/**\n * Used to escape `RegExp`\n * [syntax characters](https://262.ecma-international.org/7.0/#sec-regular-expressions-patterns).\n */\nfunction escapeRegex(string: string) {\n return string.replace(/[\\\\^$.*+?()[\\]{}|]/g, '\\\\$&');\n}\n\nconst extractClassesFromHtml = (\n html: string,\n ignoredClasses: string[]\n): RegExp => {\n const htmlClasses: string[] = [];\n const regex = /\\s+class=\"([^\"]+)\"/gm;\n let match = regex.exec(html);\n const ignoredClassesDeduped = new Set(ignoredClasses);\n\n while (match !== null) {\n match[1].split(' ').forEach((className) => {\n // eslint-disable-next-line no-param-reassign\n className = escapeRegex(className);\n if (className !== '' && !ignoredClassesDeduped.has(className)) {\n htmlClasses.push(className);\n }\n });\n match = regex.exec(html);\n }\n\n return new RegExp(htmlClasses.join('|'), 'gm');\n};\n\n/**\n * This utility extracts critical CSS from given HTML and CSS file to be used in SSR environments\n * @param {string} html the HTML from which classes will be parsed\n * @param {string} css the CSS file from which selectors will be parsed and determined as critical or other\n * @param {string[]} ignoredClasses classes that, when present in the HTML, will not be included in the regular expression used to match selectors\n * @param {string[]} blockedClasses classes that, when contained in a selector, will cause the selector to be marked as not critical\n * @returns {CollectResult} object containing the critical and other CSS styles\n */\nexport default function collect(\n html: string,\n css: string,\n classnameModifiers?: ClassnameModifiers\n): CollectResult {\n const animations = new Set();\n const other = postcss.root();\n const critical = postcss.root();\n const stylesheet = postcss.parse(css);\n const ignoredClasses = classnameModifiers?.ignoredClasses ?? [];\n const blockedClasses = classnameModifiers?.blockedClasses ?? [];\n\n const htmlClassesRegExp = extractClassesFromHtml(html, ignoredClasses);\n const blockedClassesSanitized = blockedClasses.map(escapeRegex);\n const blockedClassesRegExp = new RegExp(\n blockedClassesSanitized.join('|'),\n 'gm'\n );\n\n const isCritical = (rule: ChildNode) => {\n // Only check class names selectors\n if ('selector' in rule && rule.selector.startsWith('.')) {\n const isExcluded =\n blockedClasses.length > 0 && blockedClassesRegExp.test(rule.selector);\n if (isExcluded) return false;\n\n return Boolean(rule.selector.match(htmlClassesRegExp));\n }\n\n return true;\n };\n\n const handleAtRule = (rule: AtRule) => {\n if (rule.name === 'keyframes') {\n return;\n }\n\n const criticalRule = rule.clone();\n const otherRule = rule.clone();\n\n let removedNodesFromOther = 0;\n criticalRule.each((childRule: ChildNode, index: number) => {\n if (isCritical(childRule)) {\n otherRule.nodes[index - removedNodesFromOther]?.remove();\n removedNodesFromOther += 1;\n } else {\n childRule.remove();\n }\n });\n\n rule.remove();\n\n if (criticalRule.nodes.length > 0) {\n critical.append(criticalRule);\n }\n if (otherRule.nodes.length > 0) {\n other.append(otherRule);\n }\n };\n\n stylesheet.walkAtRules('font-face', (rule) => {\n /**\n * @font-face rules may be defined also in CSS conditional groups (eg. @media)\n * we want only handle those from top-level, rest will be handled in stylesheet.walkRules\n */\n if (rule.parent?.type === 'root') {\n critical.append(rule);\n }\n });\n\n const walkedAtRules = new Set();\n\n stylesheet.walkRules((rule) => {\n if (\n rule.parent &&\n 'name' in rule.parent &&\n (rule.parent as { name: string }).name === 'keyframes'\n ) {\n return;\n }\n\n if (rule.parent?.type === 'atrule') {\n if (!walkedAtRules.has(rule.parent)) {\n handleAtRule(rule.parent as AtRule);\n walkedAtRules.add(rule.parent);\n }\n return;\n }\n\n if (isCritical(rule)) {\n critical.append(rule);\n } else {\n other.append(rule);\n }\n });\n\n critical.walkDecls(/animation/, (decl) => {\n animations.add(decl.value.split(' ')[0]);\n });\n\n stylesheet.walkAtRules('keyframes', (rule) => {\n if (animations.has(rule.params)) {\n critical.append(rule);\n }\n });\n\n return {\n critical: critical.toString(),\n other: other.toString(),\n };\n}\n" }, { "path": "packages/server/src/index.ts", "content": "export { default as collect } from './collect';\n" }, { "path": "packages/server/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.json\",\n \"compilerOptions\": {\n \"paths\": {},\n \"rootDir\": \"src/\"\n }\n}\n" }, { "path": "packages/stylelint/CHANGELOG.md", "content": "# Change Log\n\n## 7.0.0\n\n### Major Changes\n\n- ab11ebb7: BREAKING: bump `@wyw-in-js/*` dependencies to `^1.0.0` (stable).\n\n This release updates Linaria's build-time evaluation engine (WyW). See https://wyw-in-js.dev/stability for practical guidance and common pitfalls.\n\n Notes:\n\n - Linaria 7 requires Node.js 20+ (aligned with WyW 1.x).\n - If you import JSON from code that is evaluated by WyW, add `.json` to `extensions` and ensure `.json` is ignored by evaluation rules (so it's parsed as JSON, not by Babel).\n - Rollup users: WyW 1.x serializes `transform()` by default (`serializeTransform: true`). If you hit Rollup \"Unexpected early exit\" (unresolved plugin promises / deadlock during resolve), set `serializeTransform: false` (see `examples/rollup/rollup.config.mjs`).\n - WyW 1.x promotes fully-statically-evaluatable modules to `only: ['*']` and can re-evaluate modules when cached exports are incomplete (cached export values might not be reused).\n\n## 6.3.0\n\n### Minor Changes\n\n- 281ca4f5: The new version of wyw-in-js, with the support of a configurable code remover, can help prevent compilation errors and improve build time.\n\n## 6.2.0\n\n### Minor Changes\n\n- a3dcee2e: Update wyw-in-js to 0.5.3\n\n## 6.1.0\n\n### Minor Changes\n\n- 8ba655d3: Bump wyw-in-js to 0.4.0. The full list of changes https://github.com/Anber/wyw-in-js/compare/%40wyw-in-js/transform%400.2.3...%40wyw-in-js/transform%400.4.0\n\n### Patch Changes\n\n- 8d4ebd33: chore: bump @wyw-in-js/\\* packages\n\n## 6.0.0\n\n### Major Changes\n\n- 2ac94b99: BREAKING CHANGE: Linaria has been migrated to wyw-in-js.\n\n # Migration Guide\n\n ## For Users\n\n The main breaking change is that all tooling has been moved from the `@linaria` scope to the `@wyw-in-js` scope. This means that you will need to update your dependencies as follows:\n\n | Old | New |\n | ------------------------ | ------------------------- |\n | @linaria/babel-preset | @wyw-in-js/babel-preset |\n | @linaria/cli | @wyw-in-js/cli |\n | @linaria/esbuild | @wyw-in-js/esbuild |\n | @linaria/rollup | @wyw-in-js/rollup |\n | @linaria/shaker | discontinued |\n | @linaria/vite | @wyw-in-js/vite |\n | @linaria/webpack4-loader | discontinued |\n | @linaria/webpack5-loader | @wyw-in-js/webpack-loader |\n\n There is no longer a need to install `@linaria/shaker` as it is now part of `@wyw-in-js/transform`, which will be installed automatically with the bundler plugins.\n\n The configuration file has been renamed from `linaria.config.js` (`linariarc`) to `wyw-in-js.config.js` (`.wyw-in-jsrc`).\n\n ## For Custom Processor Developers\n\n Base classes for processors and most helpers have been moved to `@wyw-in-js/processor-utils`.\n\n All APIs that had `linaria` in their names have been renamed:\n\n - The field that stores meta information in runtime has been renamed from `__linaria` to `__wyw_meta`\n - The export with all interpolated values has been renamed from `__linariaPreval` to `__wywPreval`\n - The caller name in Babel has been renamed from `linaria` to `wyw-in-js`\n\n For additional information, please visit the [wyw-in-js.dev](https://wyw-in-js.dev).\n\n## 5.0.4\n\n### Patch Changes\n\n- Updated dependencies [e25e91ff]\n - @linaria/babel-preset@5.0.4\n\n## 5.0.3\n\n### Patch Changes\n\n- Updated dependencies [5f216d3b]\n- Updated dependencies [4992c14d]\n- Updated dependencies [70000ec8]\n- Updated dependencies [15fa87a5]\n- Updated dependencies [5a32f4fd]\n- Updated dependencies [727dc2bd]\n- Updated dependencies [25ba1344]\n- Updated dependencies [5a32f4fd]\n- Updated dependencies [5f216d3b]\n - @linaria/babel-preset@5.0.3\n - @linaria/utils@5.0.2\n\n## 5.0.2\n\n### Patch Changes\n\n- Updated dependencies [38796a57]\n - @linaria/babel-preset@5.0.2\n\n## 5.0.1\n\n### Patch Changes\n\n- Updated dependencies [6fb6eb69]\n- Updated dependencies [6fb6eb69]\n - @linaria/babel-preset@5.0.1\n - @linaria/utils@5.0.1\n\n## 5.0.0\n\n### Major Changes\n\n- 88e07613: Rewritten dependecny tree processing with support for wildcard re-exports.\n- cb853e14: All processing stages were merged into one generators-based processor. It allows the implementation of more complex workflows to support features like dynamic imports and re-exports.\n\n### Minor Changes\n\n- 9cb4143d: Refactoring of the 1st stage of transformation. It opens the road to processing wildcard reexports.\n\n### Patch Changes\n\n- 2a1e24a0: Upgrade TypeScript to 5.2\n- Updated dependencies [9cb4143d]\n- Updated dependencies [ae162f46]\n- Updated dependencies [88e07613]\n- Updated dependencies [715dc93c]\n- Updated dependencies [b3ef8c1f]\n- Updated dependencies [144995f0]\n- Updated dependencies [f8b9bff5]\n- Updated dependencies [63902332]\n- Updated dependencies [8a5d734b]\n- Updated dependencies [aa100453]\n- Updated dependencies [ea1444f6]\n- Updated dependencies [9bb782d0]\n- Updated dependencies [2a1e24a0]\n- Updated dependencies [16320d71]\n- Updated dependencies [cb853e14]\n- Updated dependencies [e042f96d]\n - @linaria/babel-preset@5.0.0\n - @linaria/utils@5.0.0\n\n## 4.5.4\n\n### Patch Changes\n\n- Updated dependencies [10bcd241]\n - @linaria/babel-preset@4.5.4\n - @linaria/utils@4.5.3\n\n## 4.5.3\n\n### Patch Changes\n\n- 79557248: Nothing has changed. Just moved some utils and types from babel to utils package.\n- Updated dependencies [79557248]\n- Updated dependencies [b191f543]\n- Updated dependencies [e59bf809]\n- Updated dependencies [520ba8da]\n- Updated dependencies [ae3727f9]\n- Updated dependencies [dca076ef]\n - @linaria/babel-preset@4.5.3\n - @linaria/utils@4.5.2\n\n## 4.5.2\n\n### Patch Changes\n\n- Updated dependencies [85e74df6]\n- Updated dependencies [1bf5c5b8]\n - @linaria/utils@4.5.1\n - @linaria/babel-preset@4.5.2\n\n## 4.5.1\n\n### Patch Changes\n\n- Updated dependencies [ceca1611]\n- Updated dependencies [13258306]\n - @linaria/babel-preset@4.5.1\n\n## 4.5.0\n\n### Patch Changes\n\n- af5bb92d: The end of support for Node.js 14. Migration to pnpm 8.\n- Updated dependencies [890b4aca]\n- Updated dependencies [418e40af]\n- Updated dependencies [05ad266c]\n- Updated dependencies [16c057df]\n- Updated dependencies [af5bb92d]\n - @linaria/utils@4.5.0\n - @linaria/babel-preset@4.5.0\n\n## 4.1.17\n\n### Patch Changes\n\n- Updated dependencies [821a6819]\n- Updated dependencies [54ab61b2]\n - @linaria/babel-preset@4.4.5\n - @linaria/utils@4.3.4\n\n## 4.1.16\n\n### Patch Changes\n\n- Updated dependencies [1c3f309d]\n- Updated dependencies [dbe250b5]\n- Updated dependencies [a62e7ba6]\n - @linaria/babel-preset@4.4.4\n - @linaria/utils@4.3.3\n\n## 4.1.15\n\n### Patch Changes\n\n- @linaria/babel-preset@4.4.3\n\n## 4.1.14\n\n### Patch Changes\n\n- Updated dependencies [f9df4ed8]\n - @linaria/babel-preset@4.4.2\n - @linaria/utils@4.3.2\n\n## 4.1.13\n\n### Patch Changes\n\n- Updated dependencies [917db446]\n- Updated dependencies [57c0dc4f]\n - @linaria/babel-preset@4.4.1\n\n## 4.1.12\n\n### Patch Changes\n\n- Updated dependencies [9cf41fae]\n- Updated dependencies [860b8d21]\n- Updated dependencies [af783273]\n- Updated dependencies [28f3f93d]\n- Updated dependencies [1d4d6833]\n- Updated dependencies [71a5b351]\n- Updated dependencies [2d3a741f]\n- Updated dependencies [61d49a39]\n - @linaria/babel-preset@4.4.0\n - @linaria/utils@4.3.1\n\n## 4.1.11\n\n### Patch Changes\n\n- Updated dependencies [3ce985e0]\n- Updated dependencies [d11174d0]\n - @linaria/babel-preset@4.3.3\n - @linaria/utils@4.3.0\n\n## 4.1.10\n\n### Patch Changes\n\n- Updated dependencies [315f0366]\n - @linaria/utils@4.2.6\n - @linaria/babel-preset@4.3.2\n\n## 4.1.9\n\n### Patch Changes\n\n- e6420897: Update patch version so npm will pick up readme change\n- Updated dependencies [5edde648]\n- Updated dependencies [b9e49b74]\n - @linaria/babel-preset@4.3.1\n - @linaria/utils@4.2.5\n\n## 4.1.8\n\n### Patch Changes\n\n- Updated dependencies [63f56d47]\n- Updated dependencies [963508a2]\n - @linaria/babel-preset@4.3.0\n - @linaria/utils@4.2.4\n\n## 4.1.7\n\n### Patch Changes\n\n- Updated dependencies [cc2f87a8]\n - @linaria/babel-preset@4.2.4\n - @linaria/utils@4.2.3\n\n## 4.1.6\n\n### Patch Changes\n\n- Updated dependencies [9111b4ea]\n - @linaria/babel-preset@4.2.3\n\n## 4.1.5\n\n### Patch Changes\n\n- Updated dependencies [8a8be242]\n- Updated dependencies [8a8be242]\n- Updated dependencies [c2092f61]\n- Updated dependencies [08304e09]\n- Updated dependencies [87ffe61c]\n - @linaria/utils@4.2.2\n - @linaria/babel-preset@4.2.2\n\n## 4.1.4\n\n### Patch Changes\n\n- Updated dependencies [24b4a4bd]\n - @linaria/babel-preset@4.2.1\n - @linaria/utils@4.2.1\n\n## 4.1.3\n\n### Patch Changes\n\n- Updated dependencies [8590e134]\n- Updated dependencies [f7351b09]\n- Updated dependencies [c0bd271a]\n- Updated dependencies [8f90fa75]\n- Updated dependencies [a5169f16]\n- Updated dependencies [ac0991a6]\n - @linaria/babel-preset@4.2.0\n - @linaria/utils@4.2.0\n\n## 4.1.2\n\n### Patch Changes\n\n- Updated dependencies [3c593aa8]\n- Updated dependencies [50bc0c79]\n - @linaria/babel-preset@4.1.2\n - @linaria/utils@4.1.1\n\n## 4.1.1\n\n### Patch Changes\n\n- Updated dependencies [21ba7a44]\n- Updated dependencies [21ba7a44]\n- Updated dependencies [21ba7a44]\n- Updated dependencies [2abc55b3]\n- Updated dependencies [21ba7a44]\n - @linaria/babel-preset@4.1.1\n\n## 4.1.0\n\n### Patch Changes\n\n- Updated dependencies [92f6d871]\n - @linaria/babel-preset@4.1.0\n - @linaria/utils@4.1.0\n\n## 4.0.0\n\n### Major Changes\n\n- bc0cbeea: A completely new async mode with native support for Vite, Rollup, esbuild and Webpack resolvers.\n\n BREAKING CHANGES: Despite the fact, that it should be fully compatible with 3.0 and 2.0 branches, the new version of styles evaluator can have some serious bugs which can make your project unbuildable (however, since there is no runtime, if the build is finished successfully, everything will continue work as it was on 2.0 and 3.0). If you face some problems please let us know and we will fix it as soon as possible.\n\n### Patch Changes\n\n- 8be5650d: The repo has been migrated to PNPM and Turborepo\n- ea41d440: New package @linaria/tags that contains all abstract logic for tags processors.\n- Updated dependencies [f0cddda4]\n - @linaria/babel-preset@4.0.0\n - @linaria/utils@4.0.0\n\n## 3.0.0-beta.21\n\n### Patch Changes\n\n- Updated dependencies [17c83e34]\n - @linaria/babel-preset@3.0.0-beta.21\n\n## 3.0.0-beta.20\n\n### Patch Changes\n\n- 8be5650d: The repo has been migrated to PNPM and Turborepo\n- Updated dependencies [8be5650d]\n - @linaria/babel-preset@3.0.0-beta.20\n\n# [3.0.0-beta.19](https://github.com/callstack/linaria/compare/v3.0.0-beta.18...v3.0.0-beta.19) (2022-06-03)\n\n### Bug Fixes\n\n- **stylelint:** remove console.log from stylelint preprocessor ([#969](https://github.com/callstack/linaria/issues/969)) ([1ae913b](https://github.com/callstack/linaria/commit/1ae913b0e6091e95c8d9ee42d98bfbe78260d65d))\n\n### Features\n\n- **babel:** api for custom tags ([#976](https://github.com/callstack/linaria/issues/976)) ([3285ccc](https://github.com/callstack/linaria/commit/3285ccc1d00449b78b3fc74087528cd38cbdd116))\n- **babel:** new way for detecting tag imports ([#974](https://github.com/callstack/linaria/issues/974)) ([3305cfb](https://github.com/callstack/linaria/commit/3305cfb0c0f65abdacceeb7e6bad118c59f7d551))\n\n# [3.0.0-beta.18](https://github.com/callstack/linaria/compare/v3.0.0-beta.17...v3.0.0-beta.18) (2022-04-01)\n\n**Note:** Version bump only for package @linaria/stylelint\n\n# [3.0.0-beta.17](https://github.com/callstack/linaria/compare/v3.0.0-beta.16...v3.0.0-beta.17) (2021-12-27)\n\n### Bug Fixes\n\n- **react:** refactored types for styled function (fixes [#872](https://github.com/callstack/linaria/issues/872)) ([#887](https://github.com/callstack/linaria/issues/887)) ([7b8b129](https://github.com/callstack/linaria/commit/7b8b12937f9a0d1730d908e7cebad1684ccb03c3))\n\n# [3.0.0-beta.15](https://github.com/callstack/linaria/compare/v3.0.0-beta.14...v3.0.0-beta.15) (2021-11-29)\n\n### Bug Fixes\n\n- **stylelint:** fix indentation errors (fixes [#693](https://github.com/callstack/linaria/issues/693)) ([#876](https://github.com/callstack/linaria/issues/876)) ([7f9f24f](https://github.com/callstack/linaria/commit/7f9f24f25018e45081efd2da98e70ebed0564da6))\n\n# [3.0.0-beta.14](https://github.com/callstack/linaria/compare/v3.0.0-beta.13...v3.0.0-beta.14) (2021-11-05)\n\n**Note:** Version bump only for package @linaria/stylelint\n\n# [3.0.0-beta.13](https://github.com/callstack/linaria/compare/v3.0.0-beta.12...v3.0.0-beta.13) (2021-09-13)\n\n**Note:** Version bump only for package @linaria/stylelint\n\n# [3.0.0-beta.12](https://github.com/callstack/linaria/compare/v3.0.0-beta.11...v3.0.0-beta.12) (2021-08-31)\n\n**Note:** Version bump only for package @linaria/stylelint\n\n# [3.0.0-beta.7](https://github.com/callstack/linaria/compare/v3.0.0-beta.6...v3.0.0-beta.7) (2021-06-24)\n\n**Note:** Version bump only for package @linaria/stylelint\n\n# [3.0.0-beta.5](https://github.com/callstack/linaria/compare/v3.0.0-beta.4...v3.0.0-beta.5) (2021-05-31)\n\n**Note:** Version bump only for package @linaria/stylelint\n\n# [3.0.0-beta.4](https://github.com/callstack/linaria/compare/v3.0.0-beta.3...v3.0.0-beta.4) (2021-05-07)\n\n**Note:** Version bump only for package @linaria/stylelint\n\n# [3.0.0-beta.3](https://github.com/callstack/linaria/compare/v3.0.0-beta.2...v3.0.0-beta.3) (2021-04-20)\n\n**Note:** Version bump only for package @linaria/stylelint\n\n# [3.0.0-beta.2](https://github.com/callstack/linaria/compare/v3.0.0-beta.1...v3.0.0-beta.2) (2021-04-11)\n\n**Note:** Version bump only for package @linaria/stylelint\n" }, { "path": "packages/stylelint/README.md", "content": "

\n \"Linaria\"\n

\n\n

\nZero-runtime CSS in JS library.\n

\n\n---\n\n## Setup\n\nPlease check the Linaria [linting documentation](https://github.com/callstack/linaria/blob/master/docs/LINTING.md) for setup instructions.\n\n### 📖 Please refer to the [GitHub](https://github.com/callstack/linaria#readme) for full documentation.\n" }, { "path": "packages/stylelint/babel.config.js", "content": "const config = require('../../babel.config');\n\nmodule.exports = config;\n" }, { "path": "packages/stylelint/package.json", "content": "{\n \"name\": \"@linaria/stylelint\",\n \"version\": \"7.0.0\",\n \"description\": \"Blazing fast zero-runtime CSS in JS library\",\n \"keywords\": [\n \"css\",\n \"css-in-js\",\n \"linaria\",\n \"react\",\n \"styled-components\"\n ],\n \"homepage\": \"https://github.com/callstack/linaria#readme\",\n \"bugs\": \"https://github.com/callstack/linaria/issues\",\n \"repository\": \"git@github.com:callstack/linaria.git\",\n \"license\": \"MIT\",\n \"main\": \"lib/index.js\",\n \"module\": \"esm/index.js\",\n \"types\": \"types\",\n \"files\": [\n \"types/\",\n \"lib/\",\n \"esm/\"\n ],\n \"scripts\": {\n \"build\": \"pnpm build:lib && pnpm build:esm && pnpm build:declarations\",\n \"build:declarations\": \"tsc --emitDeclarationOnly --outDir types\",\n \"build:esm\": \"babel src --out-dir esm --extensions '.js,.jsx,.ts,.tsx' --source-maps --delete-dir-on-start\",\n \"build:lib\": \"cross-env NODE_ENV=legacy babel src --out-dir lib --extensions '.js,.jsx,.ts,.tsx' --source-maps --delete-dir-on-start\",\n \"typecheck\": \"tsc --noEmit --composite false\",\n \"watch\": \"pnpm build:lib --watch & pnpm build:esm --watch & pnpm build:declarations --watch\"\n },\n \"dependencies\": {\n \"@wyw-in-js/shared\": \"^1.0.4\",\n \"@wyw-in-js/transform\": \"^1.0.6\"\n },\n \"devDependencies\": {\n \"@types/node\": \"^17.0.39\"\n },\n \"engines\": {\n \"node\": \">=20.0.0\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n }\n}\n" }, { "path": "packages/stylelint/src/index.ts", "content": "export default {\n processors: [require.resolve('./preprocessor')],\n syntax: 'scss',\n rules: {\n 'property-no-vendor-prefix': true,\n 'string-no-newline': true,\n 'value-no-vendor-prefix': true,\n 'no-empty-source': null,\n 'no-extra-semicolons': null,\n },\n};\n" }, { "path": "packages/stylelint/src/preprocessor.ts", "content": "import { stripVTControlCharacters as stripAnsi } from 'node:util';\n\nimport type { Replacements } from '@wyw-in-js/shared';\nimport { asyncResolveFallback } from '@wyw-in-js/shared';\nimport { transform } from '@wyw-in-js/transform';\n\ntype Errors = {\n [key: string]:\n | {\n code?: string;\n loc?: {\n column: number;\n line: number;\n };\n message: string;\n name?: string;\n pos?: number;\n }\n | null\n | undefined;\n};\n\ntype Cache = {\n [key: string]: Replacements | null | undefined;\n};\n\ntype Warning = {\n column: number;\n line: number;\n rule?: string;\n severity: 'error' | 'warning';\n text: string;\n};\n\ntype LintResult = {\n errored: boolean;\n warnings: Warning[];\n};\n\ninterface IPosition {\n column: number;\n line: number;\n}\n\ninterface ISourceOffset {\n generated: IPosition;\n name: string;\n original: IPosition;\n}\n\nfunction preprocessor() {\n const errors: Errors = {};\n const cache: Cache = {};\n const offsets: Record = {};\n\n return {\n async code(input: string, filename: string) {\n let result;\n\n const transformServices = {\n options: {\n filename,\n },\n };\n\n try {\n result = await transform(\n transformServices,\n input,\n asyncResolveFallback\n );\n\n cache[filename] = undefined;\n errors[filename] = undefined;\n offsets[filename] = [];\n } catch (e: unknown) {\n cache[filename] = undefined;\n offsets[filename] = undefined;\n errors[filename] = e as Error;\n\n // Ignore parse errors here\n // We handle it separately\n return '';\n }\n\n const { rules, replacements } = result;\n\n if (!rules) {\n return '';\n }\n\n // Construct a CSS-ish file from the unprocessed style rules\n let generatedLineNumber = 1;\n const cssText = Object.values(rules)\n .map((rule) => {\n const ruleText = `.${rule.className} {${rule.cssText}}`;\n\n if (rule.start && 'line' in rule.start) {\n offsets[filename]?.push({\n generated: {\n line: generatedLineNumber,\n column: 1,\n },\n original: {\n ...rule.start,\n },\n name: rule.displayName,\n });\n\n generatedLineNumber += 1;\n }\n\n generatedLineNumber += ruleText.split('\\n').length + 2;\n return ruleText;\n })\n .join('\\n\\n');\n\n cache[filename] = replacements;\n offsets[filename] = offsets[filename]?.reverse();\n\n return `${cssText}\\n`;\n },\n result(result: LintResult, filename: string) {\n const error = errors[filename];\n const replacements = cache[filename];\n const sourceMap = offsets[filename];\n\n if (sourceMap) {\n // eslint-disable-next-line no-param-reassign\n result.warnings = result.warnings.map((warning) => {\n const offset = sourceMap.find(\n (o) => o.generated.line <= warning.line\n );\n if (offset) {\n // eslint-disable-next-line no-param-reassign\n warning.line += offset.original.line - offset.generated.line;\n }\n\n return warning;\n });\n }\n\n if (error) {\n // Babel adds this to the error message\n const prefix = `${filename}: `;\n\n let message = stripAnsi(\n error.message.startsWith(prefix)\n ? error.message.replace(prefix, '')\n : error.message\n );\n\n let { loc } = error;\n\n if (!loc) {\n // If the error doesn't have location info, try to find it from the code frame\n const line = message.split('\\n').find((l) => l.startsWith('>'));\n const column = message.split('\\n').find((l) => l.includes('^'));\n\n if (line && column) {\n loc = {\n line: Number(line.replace(/^> /, '').split('|')[0].trim()),\n column: column.replace(/[^|]+\\|\\s/, '').length,\n };\n }\n }\n\n if (loc) {\n // Strip the codeframe text if we have location of the error\n // It's formatted badly by stylelint, so not very helpful\n message = message.replace(/^>?\\s+\\d?\\s\\|.*$/gm, '').trim();\n }\n\n // eslint-disable-next-line no-param-reassign\n result.errored = true;\n result.warnings.push({\n rule: error.code || error.name,\n text: message,\n line: loc ? loc.line : 0,\n column: loc ? loc.column : 0,\n severity: 'error',\n });\n }\n\n if (replacements) {\n replacements.forEach(({ original, length }) => {\n // If the warnings contain stuff that's been replaced,\n // Correct the line and column numbers to what's replaced\n result.warnings.forEach((w) => {\n /* eslint-disable no-param-reassign */\n if (w.line === original.start.line) {\n // If the error is on the same line where an interpolation started, we need to adjust the line and column numbers\n // Because a replacement would have increased or decreased the column numbers\n // If it's in the same line where interpolation ended, it would have been adjusted during replacement\n if (w.column > original.start.column + length) {\n // The error is from an item after the replacements\n // So we need to adjust the column\n w.column +=\n original.end.column - original.start.column + 1 - length;\n } else if (\n w.column >= original.start.column &&\n w.column < original.start.column + length\n ) {\n // The linter will underline the whole word in the editor if column is in inside a word\n // Set the column to the end, so it will underline the word inside the interpolation\n // e.g. in `${colors.primary}`, `primary` will be underlined\n w.column =\n original.start.line === original.end.line\n ? original.end.column - 1\n : original.start.column;\n }\n }\n });\n });\n }\n\n return result;\n },\n };\n}\n\nexport default preprocessor;\n" }, { "path": "packages/stylelint/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.json\",\n \"compilerOptions\": { \"paths\": {}, \"rootDir\": \"src/\", \"types\": [\"node\"] },\n \"references\": []\n}\n" }, { "path": "packages/stylelint-config-standard-linaria/CHANGELOG.md", "content": "# Change Log\n\n## 7.0.0\n\n### Major Changes\n\n- ab11ebb7: BREAKING: bump `@wyw-in-js/*` dependencies to `^1.0.0` (stable).\n\n This release updates Linaria's build-time evaluation engine (WyW). See https://wyw-in-js.dev/stability for practical guidance and common pitfalls.\n\n Notes:\n\n - Linaria 7 requires Node.js 20+ (aligned with WyW 1.x).\n - If you import JSON from code that is evaluated by WyW, add `.json` to `extensions` and ensure `.json` is ignored by evaluation rules (so it's parsed as JSON, not by Babel).\n - Rollup users: WyW 1.x serializes `transform()` by default (`serializeTransform: true`). If you hit Rollup \"Unexpected early exit\" (unresolved plugin promises / deadlock during resolve), set `serializeTransform: false` (see `examples/rollup/rollup.config.mjs`).\n - WyW 1.x promotes fully-statically-evaluatable modules to `only: ['*']` and can re-evaluate modules when cached exports are incomplete (cached export values might not be reused).\n\n### Patch Changes\n\n- Updated dependencies [ab11ebb7]\n- Updated dependencies [b04f025e]\n - @linaria/postcss-linaria@7.0.0\n\n## 6.3.0\n\n### Minor Changes\n\n- 281ca4f5: The new version of wyw-in-js, with the support of a configurable code remover, can help prevent compilation errors and improve build time.\n\n### Patch Changes\n\n- Updated dependencies [281ca4f5]\n - @linaria/postcss-linaria@6.3.0\n\n## 6.2.0\n\n### Minor Changes\n\n- a3dcee2e: Update wyw-in-js to 0.5.3\n\n### Patch Changes\n\n- Updated dependencies [a3dcee2e]\n - @linaria/postcss-linaria@6.2.0\n\n## 6.1.0\n\n### Minor Changes\n\n- 8ba655d3: Bump wyw-in-js to 0.4.0. The full list of changes https://github.com/Anber/wyw-in-js/compare/%40wyw-in-js/transform%400.2.3...%40wyw-in-js/transform%400.4.0\n\n### Patch Changes\n\n- Updated dependencies [8ba655d3]\n - @linaria/postcss-linaria@6.1.0\n\n## 6.0.0\n\n### Major Changes\n\n- 2ac94b99: BREAKING CHANGE: Linaria has been migrated to wyw-in-js.\n\n # Migration Guide\n\n ## For Users\n\n The main breaking change is that all tooling has been moved from the `@linaria` scope to the `@wyw-in-js` scope. This means that you will need to update your dependencies as follows:\n\n | Old | New |\n | ------------------------ | ------------------------- |\n | @linaria/babel-preset | @wyw-in-js/babel-preset |\n | @linaria/cli | @wyw-in-js/cli |\n | @linaria/esbuild | @wyw-in-js/esbuild |\n | @linaria/rollup | @wyw-in-js/rollup |\n | @linaria/shaker | discontinued |\n | @linaria/vite | @wyw-in-js/vite |\n | @linaria/webpack4-loader | discontinued |\n | @linaria/webpack5-loader | @wyw-in-js/webpack-loader |\n\n There is no longer a need to install `@linaria/shaker` as it is now part of `@wyw-in-js/transform`, which will be installed automatically with the bundler plugins.\n\n The configuration file has been renamed from `linaria.config.js` (`linariarc`) to `wyw-in-js.config.js` (`.wyw-in-jsrc`).\n\n ## For Custom Processor Developers\n\n Base classes for processors and most helpers have been moved to `@wyw-in-js/processor-utils`.\n\n All APIs that had `linaria` in their names have been renamed:\n\n - The field that stores meta information in runtime has been renamed from `__linaria` to `__wyw_meta`\n - The export with all interpolated values has been renamed from `__linariaPreval` to `__wywPreval`\n - The caller name in Babel has been renamed from `linaria` to `wyw-in-js`\n\n For additional information, please visit the [wyw-in-js.dev](https://wyw-in-js.dev).\n\n### Patch Changes\n\n- Updated dependencies [63392f9a]\n- Updated dependencies [2ac94b99]\n - @linaria/postcss-linaria@6.0.0\n\n## 5.0.0\n\n### Major Changes\n\n- 88e07613: Rewritten dependecny tree processing with support for wildcard re-exports.\n- cb853e14: All processing stages were merged into one generators-based processor. It allows the implementation of more complex workflows to support features like dynamic imports and re-exports.\n\n### Minor Changes\n\n- 9cb4143d: Refactoring of the 1st stage of transformation. It opens the road to processing wildcard reexports.\n\n### Patch Changes\n\n- 2a1e24a0: Upgrade TypeScript to 5.2\n- Updated dependencies [9cb4143d]\n- Updated dependencies [88e07613]\n- Updated dependencies [2a1e24a0]\n- Updated dependencies [cb853e14]\n - @linaria/postcss-linaria@5.0.0\n\n## 4.5.1\n\n### Patch Changes\n\n- Updated dependencies [e59bf809]\n - @linaria/postcss-linaria@4.5.1\n\n## 4.5.0\n\n### Patch Changes\n\n- af5bb92d: The end of support for Node.js 14. Migration to pnpm 8.\n- Updated dependencies [16c057df]\n- Updated dependencies [af5bb92d]\n - @linaria/postcss-linaria@4.5.0\n\n## 4.1.5\n\n### Patch Changes\n\n- e6420897: Update patch version so npm will pick up readme change\n- Updated dependencies [5edde648]\n- Updated dependencies [e6420897]\n - @linaria/postcss-linaria@4.1.5\n\n## 4.1.4\n\n### Patch Changes\n\n- Updated dependencies [4c2efaa9]\n - @linaria/postcss-linaria@4.1.4\n\n## 4.1.3\n\n### Patch Changes\n\n- ce36da42: Add stylelint v14 custom syntax support\n- Updated dependencies [ce36da42]\n - @linaria/postcss-linaria@4.1.3\n" }, { "path": "packages/stylelint-config-standard-linaria/README.md", "content": "

\n \"Linaria\"\n

\n\n

\nZero-runtime CSS in JS library.\n

\n\n---\n\n \n## Setup\n\nPlease check the Linaria [linting documentation](https://github.com/callstack/linaria/blob/master/docs/LINTING.md) for setup instructions.\n\n## Acknowledgements\nThis project wouldn't have been possible without the following libraries or the people behind them.\n\n- [postcss-lit](https://github.com/43081j/postcss-lit) (One of the first CSS-in-JS custom syntaxes)\n- [stylelint](https://stylelint.io/)\n- [postcss](https://postcss.org/)\n\n### 📖 Please refer to [GitHub](https://github.com/callstack/linaria#readme) for full documentation.\n" }, { "path": "packages/stylelint-config-standard-linaria/babel.config.js", "content": "const config = require('../../babel.config');\n\nmodule.exports = config;\n" }, { "path": "packages/stylelint-config-standard-linaria/package.json", "content": "{\n \"name\": \"@linaria/stylelint-config-standard-linaria\",\n \"version\": \"7.0.0\",\n \"description\": \"Blazing fast zero-runtime CSS in JS library\",\n \"keywords\": [\n \"css\",\n \"css-in-js\",\n \"linaria\",\n \"react\",\n \"styled-components\"\n ],\n \"homepage\": \"https://github.com/callstack/linaria#readme\",\n \"bugs\": \"https://github.com/callstack/linaria/issues\",\n \"repository\": \"git@github.com:callstack/linaria.git\",\n \"license\": \"MIT\",\n \"sideEffects\": false,\n \"main\": \"lib/index.js\",\n \"module\": \"esm/index.js\",\n \"types\": \"types/index.d.ts\",\n \"files\": [\n \"esm/\",\n \"lib/\",\n \"processors/\",\n \"types/\"\n ],\n \"scripts\": {\n \"build\": \"pnpm build:lib && pnpm build:esm && pnpm build:declarations\",\n \"build:declarations\": \"tsc --emitDeclarationOnly --outDir types\",\n \"build:esm\": \"babel src --out-dir esm --extensions '.js,.jsx,.ts,.tsx' --source-maps --delete-dir-on-start\",\n \"build:lib\": \"cross-env NODE_ENV=legacy babel src --out-dir lib --extensions '.js,.jsx,.ts,.tsx' --source-maps --delete-dir-on-start\",\n \"typecheck\": \"tsc --noEmit --composite false\",\n \"watch\": \"pnpm build:lib --watch & pnpm build:esm --watch & pnpm build:declarations --watch\"\n },\n \"dependencies\": {\n \"@linaria/postcss-linaria\": \"workspace:^\",\n \"stylelint\": \"^14.11.0\",\n \"stylelint-config-standard\": \"^28.0.0\"\n },\n \"engines\": {\n \"node\": \">=20.0.0\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n }\n}\n" }, { "path": "packages/stylelint-config-standard-linaria/src/index.js", "content": "module.exports = {\n extends: ['stylelint-config-standard'],\n // eslint-disable-next-line global-require\n customSyntax: require('@linaria/postcss-linaria'),\n rules: {\n 'property-no-vendor-prefix': true,\n 'string-no-newline': true,\n 'value-no-vendor-prefix': true,\n 'no-empty-source': null,\n 'no-extra-semicolons': null,\n // /* pcss-lin */ placeholder comments are added during parsing\n 'comment-empty-line-before': [\n 'always',\n {\n except: ['first-nested'],\n ignore: ['stylelint-commands'],\n ignoreComments: [/pcss-lin/],\n },\n ],\n // '//' comments create unknown word issues while linting. Force using /* */\n 'no-invalid-double-slash-comments': true,\n },\n};\n" }, { "path": "packages/stylelint-config-standard-linaria/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.json\",\n \"compilerOptions\": { \"paths\": {}, \"rootDir\": \"src/\" },\n \"references\": []\n}\n" }, { "path": "packages/testkit/CHANGELOG.md", "content": "# Change Log\n\n## 7.0.1\n\n### Patch Changes\n\n- Updated dependencies [b3331e45]\n - @linaria/react@7.0.1\n\n## 7.0.0\n\n### Major Changes\n\n- ab11ebb7: BREAKING: bump `@wyw-in-js/*` dependencies to `^1.0.0` (stable).\n\n This release updates Linaria's build-time evaluation engine (WyW). See https://wyw-in-js.dev/stability for practical guidance and common pitfalls.\n\n Notes:\n\n - Linaria 7 requires Node.js 20+ (aligned with WyW 1.x).\n - If you import JSON from code that is evaluated by WyW, add `.json` to `extensions` and ensure `.json` is ignored by evaluation rules (so it's parsed as JSON, not by Babel).\n - Rollup users: WyW 1.x serializes `transform()` by default (`serializeTransform: true`). If you hit Rollup \"Unexpected early exit\" (unresolved plugin promises / deadlock during resolve), set `serializeTransform: false` (see `examples/rollup/rollup.config.mjs`).\n - WyW 1.x promotes fully-statically-evaluatable modules to `only: ['*']` and can re-evaluate modules when cached exports are incomplete (cached export values might not be reused).\n\n### Patch Changes\n\n- Updated dependencies [ab11ebb7]\n- Updated dependencies [654d8590]\n - @linaria/react@7.0.0\n\n## 6.3.0\n\n### Minor Changes\n\n- 281ca4f5: The new version of wyw-in-js, with the support of a configurable code remover, can help prevent compilation errors and improve build time.\n\n### Patch Changes\n\n- Updated dependencies [bd8d45fd]\n- Updated dependencies [281ca4f5]\n - @linaria/react@6.3.0\n\n## 6.2.0\n\n### Minor Changes\n\n- a3dcee2e: Update wyw-in-js to 0.5.3\n\n### Patch Changes\n\n- @linaria/react@6.2.1\n\n## 6.1.1\n\n### Patch Changes\n\n- Updated dependencies [fd60b5de]\n - @linaria/react@6.2.0\n\n## 6.1.0\n\n### Minor Changes\n\n- 8ba655d3: Bump wyw-in-js to 0.4.0. The full list of changes https://github.com/Anber/wyw-in-js/compare/%40wyw-in-js/transform%400.2.3...%40wyw-in-js/transform%400.4.0\n\n### Patch Changes\n\n- 8d4ebd33: chore: bump @wyw-in-js/\\* packages\n- Updated dependencies [8d4ebd33]\n- Updated dependencies [8ba655d3]\n - @linaria/react@6.1.0\n\n## 6.0.0\n\n### Major Changes\n\n- 60e6b7e2: Stylis has been upgraded from v3 to v4.\n- 2ac94b99: BREAKING CHANGE: Linaria has been migrated to wyw-in-js.\n\n # Migration Guide\n\n ## For Users\n\n The main breaking change is that all tooling has been moved from the `@linaria` scope to the `@wyw-in-js` scope. This means that you will need to update your dependencies as follows:\n\n | Old | New |\n | ------------------------ | ------------------------- |\n | @linaria/babel-preset | @wyw-in-js/babel-preset |\n | @linaria/cli | @wyw-in-js/cli |\n | @linaria/esbuild | @wyw-in-js/esbuild |\n | @linaria/rollup | @wyw-in-js/rollup |\n | @linaria/shaker | discontinued |\n | @linaria/vite | @wyw-in-js/vite |\n | @linaria/webpack4-loader | discontinued |\n | @linaria/webpack5-loader | @wyw-in-js/webpack-loader |\n\n There is no longer a need to install `@linaria/shaker` as it is now part of `@wyw-in-js/transform`, which will be installed automatically with the bundler plugins.\n\n The configuration file has been renamed from `linaria.config.js` (`linariarc`) to `wyw-in-js.config.js` (`.wyw-in-jsrc`).\n\n ## For Custom Processor Developers\n\n Base classes for processors and most helpers have been moved to `@wyw-in-js/processor-utils`.\n\n All APIs that had `linaria` in their names have been renamed:\n\n - The field that stores meta information in runtime has been renamed from `__linaria` to `__wyw_meta`\n - The export with all interpolated values has been renamed from `__linariaPreval` to `__wywPreval`\n - The caller name in Babel has been renamed from `linaria` to `wyw-in-js`\n\n For additional information, please visit the [wyw-in-js.dev](https://wyw-in-js.dev).\n\n### Patch Changes\n\n- faf65795: Fix for space inserted after function interpolation. Fixes #1141 and #1368.\n- Updated dependencies [2ac94b99]\n - @linaria/react@6.0.0\n\n## 5.0.5\n\n### Patch Changes\n\n- Updated dependencies [e25e91ff]\n - @linaria/babel-preset@5.0.4\n - @linaria/shaker@5.0.3\n\n## 5.0.4\n\n### Patch Changes\n\n- Updated dependencies [4b083b7c]\n - @linaria/react@5.0.3\n\n## 5.0.3\n\n### Patch Changes\n\n- 5f216d3b: Fix for lost `pluginOptions` in some entrypoints.\n- 727dc2bd: fix: add caller settings to loadBabelOptions()\n- 25ba1344: `useBabelConfigs` feature flag.\n- 5f216d3b: `pluginOptions` could be lost during processing.\n- Updated dependencies [5f216d3b]\n- Updated dependencies [1e889937]\n- Updated dependencies [4992c14d]\n- Updated dependencies [15fa87a5]\n- Updated dependencies [1e889937]\n- Updated dependencies [25ba1344]\n- Updated dependencies [5f216d3b]\n - @linaria/babel-preset@5.0.3\n - @linaria/react@5.0.2\n - @linaria/shaker@5.0.2\n - @linaria/tags@5.0.2\n\n## 5.0.2\n\n### Patch Changes\n\n- Updated dependencies [38796a57]\n - @linaria/babel-preset@5.0.2\n\n## 5.0.1\n\n### Patch Changes\n\n- Updated dependencies [6fb6eb69]\n- Updated dependencies [6fb6eb69]\n - @linaria/babel-preset@5.0.1\n - @linaria/shaker@5.0.1\n - @linaria/react@5.0.1\n - @linaria/tags@5.0.1\n\n## 5.0.0\n\n### Major Changes\n\n- 88e07613: Rewritten dependecny tree processing with support for wildcard re-exports.\n- cb853e14: All processing stages were merged into one generators-based processor. It allows the implementation of more complex workflows to support features like dynamic imports and re-exports.\n\n### Minor Changes\n\n- 9cb4143d: Refactoring of the 1st stage of transformation. It opens the road to processing wildcard reexports.\n- ae162f46: babelrc should not be used for preeval transformations (fixes #1308)\n\n### Patch Changes\n\n- 715dc93c: feat: support dynamic imports for evaluation\n- b3ef8c1f: fix: add support for params in dynamic imports\n- f8b9bff5: Improved exports finder so it works with pure TS files and better detects transpiled reexports.\n- 63902332: The exports finder didn't support enums that were transpiled to esm by tsc. Fixed.\n- 8a5d734b: Add support for `import` and `require` calls with dynamic arguments.\n- aa100453: In some cases, an asynchronous resolver could cause race conditions. Fixed.\n- ea1444f6: feat: use happy-dom in module\n- 9bb782d0: The improved cache that fixes race conditions which lead to \"The expression evaluated to 'undefined'\" (fixes #1304 and #1287)\n- 2a1e24a0: Upgrade TypeScript to 5.2\n- Updated dependencies [9cb4143d]\n- Updated dependencies [ae162f46]\n- Updated dependencies [88e07613]\n- Updated dependencies [715dc93c]\n- Updated dependencies [b3ef8c1f]\n- Updated dependencies [144995f0]\n- Updated dependencies [f8b9bff5]\n- Updated dependencies [8a5d734b]\n- Updated dependencies [aa100453]\n- Updated dependencies [ea1444f6]\n- Updated dependencies [9bb782d0]\n- Updated dependencies [2a1e24a0]\n- Updated dependencies [cb853e14]\n- Updated dependencies [e042f96d]\n - @linaria/babel-preset@5.0.0\n - @linaria/extractor@5.0.0\n - @linaria/react@5.0.0\n - @linaria/shaker@5.0.0\n - @linaria/tags@5.0.0\n\n## 4.5.4\n\n### Patch Changes\n\n- Updated dependencies [10bcd241]\n - @linaria/babel-preset@4.5.4\n - @linaria/react@4.5.4\n - @linaria/shaker@4.5.3\n - @linaria/tags@4.5.4\n\n## 4.5.3\n\n### Patch Changes\n\n- 79557248: Nothing has changed. Just moved some utils and types from babel to utils package.\n- b191f543: New option `features` for fine-tuning the build and evaluation process.\n- e59bf809: Shaker mistakenly counts references in types as valuable and keeps referenced variables alive.\n- 520ba8da: Debug mode for CLI, Webpack 5 and Vite. When enabled, prints brief perf report to console and information about processed dependency tree to the specified file.\n- ae3727f9: Fix the issues with processing files that are supposed to be parsed with their respective Babel config.\n- Updated dependencies [79557248]\n- Updated dependencies [b191f543]\n- Updated dependencies [e59bf809]\n- Updated dependencies [520ba8da]\n- Updated dependencies [ae3727f9]\n - @linaria/babel-preset@4.5.3\n - @linaria/react@4.5.3\n - @linaria/tags@4.5.3\n - @linaria/shaker@4.5.2\n\n## 4.5.2\n\n### Patch Changes\n\n- 85e74df6: Fix: type imports without `type` annotation may lead to an unexpected increase in the evaluated codebase.\n- 1bf5c5b8: The cache has been improved, which should address the build time issues for Webpack 4/5 and resolve HMR-related problems for Vite. Fixes #1199, #1265 and maybe some more.\n- Updated dependencies [85e74df6]\n- Updated dependencies [1bf5c5b8]\n - @linaria/shaker@4.5.1\n - @linaria/babel-preset@4.5.2\n - @linaria/react@4.5.2\n - @linaria/tags@4.5.2\n\n## 4.5.1\n\n### Patch Changes\n\n- ceca1611: Enable optimisation from #1276 for complex expressions such as `styled(Component as unknow)` or `styled(connect(Component))`.\n- 13258306: Variables in props-based interpolation functions are no longer required for the evaluation stage.\n Here's an example:\n\n ```\n import { getColor } from \"very-big-library\";\n\n export const Box = styled.div\\`\n color: ${props => getColor(props.kind)};\n \\`;\n ```\n\n In versions prior to and including 4.5.0, the evaluator would attempt to import `getColor` from `very-big-library`, despite it having no relevance to style generation. However, in versions greater than 4.5.0, `very-big-library` will be ignored.\n\n- Updated dependencies [ceca1611]\n- Updated dependencies [13258306]\n - @linaria/babel-preset@4.5.1\n - @linaria/react@4.5.1\n - @linaria/tags@4.5.1\n\n## 4.5.0\n\n### Minor Changes\n\n- 16c057df: Breaking Change: Performance Optimization for `styled`\n\n When a component is wrapped in `styled`, Linaria needs to determine if that component is already a styled component. To accomplish this, the wrapped component is included in the list of variables for evaluation, along with the interpolated values used in styles. The issue arises when a wrapped component, even if it is not styled, brings along a substantial dependency tree. This situation is particularly evident when using `styled` to style components from third-party UI libraries.\n\n To address this problem, Linaria will now examine the import location of the component and check if there is an annotation in the `package.json` file of the package containing the components. This annotation indicates whether the package includes other Linaria components. If there is no such annotation, Linaria will refrain from evaluating the component.\n\n Please note that this Breaking Change solely affects developers of component libraries. In order for users to style components from your library, you must include the `linaria.components` property in the library's `package.json` file. This property should have a mask that covers all imported files with components. Here's an example of how to specify it:\n\n ```json\n \"linaria\": {\n \"components\": \"**/*\"\n }\n ```\n\n### Patch Changes\n\n- af5bb92d: The end of support for Node.js 14. Migration to pnpm 8.\n- Updated dependencies [418e40af]\n- Updated dependencies [05ad266c]\n- Updated dependencies [16c057df]\n- Updated dependencies [af5bb92d]\n- Updated dependencies [10859924]\n - @linaria/babel-preset@4.5.0\n - @linaria/shaker@4.5.0\n - @linaria/react@4.5.0\n - @linaria/tags@4.5.0\n - @linaria/extractor@4.5.0\n\n## 4.3.6\n\n### Patch Changes\n\n- Updated dependencies [821a6819]\n- Updated dependencies [54ab61b2]\n - @linaria/babel-preset@4.4.5\n - @linaria/react@4.3.8\n - @linaria/shaker@4.2.11\n - @linaria/tags@4.3.5\n\n## 4.3.5\n\n### Patch Changes\n\n- 1c3f309d: Fix tags usage validation (fixes #1224)\n- dbe250b5: Fix module function deletion when containing restricted code (fixes #1226)\n- Updated dependencies [2e966f23]\n- Updated dependencies [1c3f309d]\n- Updated dependencies [dbe250b5]\n- Updated dependencies [34029088]\n- Updated dependencies [a62e7ba6]\n - @linaria/tags@4.3.4\n - @linaria/babel-preset@4.4.4\n - @linaria/react@4.3.7\n - @linaria/shaker@4.2.10\n\n## 4.3.4\n\n### Patch Changes\n\n- a3ad617f: Fix \"Invalid usage of `styled` tag\" when it's not really invalid. Fixes #1214.\n- Updated dependencies [a3ad617f]\n - @linaria/react@4.3.6\n - @linaria/tags@4.3.3\n - @linaria/babel-preset@4.4.3\n\n## 4.3.3\n\n### Patch Changes\n\n- f9df4ed8: Address the problem in which a module may be erroneously evaluated as an empty object (fixes #1209)\n- Updated dependencies [f9df4ed8]\n - @linaria/babel-preset@4.4.2\n - @linaria/react@4.3.5\n - @linaria/shaker@4.2.9\n - @linaria/tags@4.3.2\n\n## 4.3.2\n\n### Patch Changes\n\n- Updated dependencies [917db446]\n- Updated dependencies [57c0dc4f]\n - @linaria/babel-preset@4.4.1\n\n## 4.3.1\n\n### Patch Changes\n\n- 860b8d21: Ensure that the Proxy for this.#exports forwards unknown properties to the underlying Object instance.\n- 28f3f93d: Add the tagSource property for processors, indicating the package and name of the imported processor.\n- 71a5b351: Workaround for weirdly packaged cjs modules.\n- 2d3a741f: fix: handle .cjs & .mjs extensions\n- Updated dependencies [b27f328f]\n- Updated dependencies [9cf41fae]\n- Updated dependencies [860b8d21]\n- Updated dependencies [af783273]\n- Updated dependencies [28f3f93d]\n- Updated dependencies [1d4d6833]\n- Updated dependencies [71a5b351]\n- Updated dependencies [cf1d6611]\n- Updated dependencies [2d3a741f]\n- Updated dependencies [61d49a39]\n - @linaria/shaker@4.2.8\n - @linaria/babel-preset@4.4.0\n - @linaria/tags@4.3.1\n - @linaria/react@4.3.4\n\n## 4.3.0\n\n### Minor Changes\n\n- d11174d0: Add option to remove var() wrapper around css variables\n\n### Patch Changes\n\n- Updated dependencies [3ce985e0]\n- Updated dependencies [d11174d0]\n - @linaria/babel-preset@4.3.3\n - @linaria/tags@4.3.0\n - @linaria/react@4.3.3\n - @linaria/shaker@4.2.7\n\n## 4.2.2\n\n### Patch Changes\n\n- 315f0366: Support for code transpiled with esbuild.\n- Updated dependencies [315f0366]\n - @linaria/babel-preset@4.3.2\n - @linaria/react@4.3.2\n - @linaria/shaker@4.2.6\n - @linaria/tags@4.2.2\n\n## 4.2.1\n\n### Patch Changes\n\n- e2224348: Fix @linaria/shaker from removing exported renamed imports. Fixes #1114.\n- 5edde648: Upgrade Babel to support TypeScript 4.9. Fixes #1133.\n- b9e49b74: Support for code transpiled with SWC.\n- Updated dependencies [e2224348]\n- Updated dependencies [922f20d6]\n- Updated dependencies [5edde648]\n- Updated dependencies [b9e49b74]\n - @linaria/shaker@4.2.5\n - @linaria/react@4.3.1\n - @linaria/babel-preset@4.3.1\n - @linaria/tags@4.2.1\n\n## 4.2.0\n\n### Minor Changes\n\n- 63f56d47: Do not filter properties if an unknown component is passed to `styled`. Fixes support of custom elements #968\n\n### Patch Changes\n\n- 963508a2: Shaker shouldn't remove parameters of functions if they aren't used.\n- Updated dependencies [63f56d47]\n- Updated dependencies [963508a2]\n- Updated dependencies [c26d4667]\n - @linaria/babel-preset@4.3.0\n - @linaria/react@4.3.0\n - @linaria/tags@4.2.0\n - @linaria/shaker@4.2.4\n\n## 4.1.7\n\n### Patch Changes\n\n- cc2f87a8: Get rid of \"expected node to be of a type\" errors\n- Updated dependencies [cc2f87a8]\n- Updated dependencies [6de22792]\n - @linaria/babel-preset@4.2.4\n - @linaria/shaker@4.2.3\n - @linaria/react@4.2.1\n - @linaria/tags@4.1.5\n\n## 4.1.6\n\n### Patch Changes\n\n- Updated dependencies [1e88e95d]\n- Updated dependencies [9111b4ea]\n - @linaria/react@4.2.0\n - @linaria/babel-preset@4.2.3\n\n## 4.1.5\n\n### Patch Changes\n\n- c2092f61: Support for rollup@3 and vite@3 (fixes #1044, #1060)\n- 08304e09: Fix support of re-exports compiled by tsc\n- 87ffe61c: The new `variableNameSlug` option that allows to customize css variable names (closes #1053).\n- Updated dependencies [8a8be242]\n- Updated dependencies [8a8be242]\n- Updated dependencies [c2092f61]\n- Updated dependencies [08304e09]\n- Updated dependencies [87ffe61c]\n - @linaria/shaker@4.2.2\n - @linaria/babel-preset@4.2.2\n - @linaria/react@4.1.5\n - @linaria/tags@4.1.4\n\n## 4.1.4\n\n### Patch Changes\n\n- Updated dependencies [24b4a4bd]\n - @linaria/babel-preset@4.2.1\n - @linaria/shaker@4.2.1\n - @linaria/tags@4.1.3\n - @linaria/react@4.1.4\n\n## 4.1.3\n\n### Patch Changes\n\n- ac0991a6: Better detection for jsx-runtime. Reduces the amount of evaluated code and improves speed and stability.\n- Updated dependencies [8590e134]\n- Updated dependencies [f7351b09]\n- Updated dependencies [c0bd271a]\n- Updated dependencies [8f90fa75]\n- Updated dependencies [a5169f16]\n- Updated dependencies [ac0991a6]\n - @linaria/babel-preset@4.2.0\n - @linaria/shaker@4.2.0\n - @linaria/react@4.1.3\n - @linaria/tags@4.1.2\n\n## 4.1.2\n\n### Patch Changes\n\n- Updated dependencies [3c593aa8]\n - @linaria/babel-preset@4.1.2\n - @linaria/shaker@4.1.2\n - @linaria/tags@4.1.1\n - @linaria/react@4.1.2\n\n## 4.1.1\n\n### Patch Changes\n\n- 21ba7a44: The default config was changed to process ES modules inside node_modules.\n- 21ba7a44: The better detector of React components.\n- Updated dependencies [21ba7a44]\n- Updated dependencies [21ba7a44]\n- Updated dependencies [21ba7a44]\n- Updated dependencies [2abc55b3]\n- Updated dependencies [21ba7a44]\n - @linaria/babel-preset@4.1.1\n - @linaria/react@4.1.1\n - @linaria/shaker@4.1.1\n\n## 4.1.0\n\n### Minor Changes\n\n- 92f6d871: Instead of just replacing tags with their runtime versions, `transform` mistakenly applied all babel transformations. (fixes #1018)\n\n### Patch Changes\n\n- Updated dependencies [92f6d871]\n - @linaria/babel-preset@4.1.0\n - @linaria/shaker@4.1.0\n - @linaria/tags@4.1.0\n - @linaria/react@4.1.0\n\n## 4.0.0\n\n### Major Changes\n\n- bc0cbeea: A completely new async mode with native support for Vite, Rollup, esbuild and Webpack resolvers.\n\n BREAKING CHANGES: Despite the fact, that it should be fully compatible with 3.0 and 2.0 branches, the new version of styles evaluator can have some serious bugs which can make your project unbuildable (however, since there is no runtime, if the build is finished successfully, everything will continue work as it was on 2.0 and 3.0). If you face some problems please let us know and we will fix it as soon as possible.\n\n### Patch Changes\n\n- 8be5650d: The repo has been migrated to PNPM and Turborepo\n- 17c83e34: Fix for the case when `styled` wraps an imported component.\n- ea41d440: New package @linaria/tags that contains all abstract logic for tags processors.\n- 592b89b5: Fix for broken object interpolation (#995)\n- 9a50c1c1: Linaria now removes all unused css-related code from the runtime.\n- 4cdf0315: Tagged template-specific logic has been moved from `BaseProcessor` to `TaggedTemplateProcessor`. `BaseProcessor` now can be used to define any type of expressions for zero-runtime transformations, such as `makeStyles` from `@griffel/react`.\n- 17c83e34: Aliases for environments without the support of `exports` in package.json.\n- f0cddda4: Extends `BaseProcessor` to support tags other than tagged templates, such as `makeStyles` from `@griffel/react`.\n- Updated dependencies [f0cddda4]\n - @linaria/babel-preset@4.0.0\n - @linaria/extractor@4.0.0\n - @linaria/react@4.0.0\n - @linaria/shaker@4.0.0\n - @linaria/tags@4.0.0\n\n## 3.0.0-beta.21\n\n### Patch Changes\n\n- 17c83e34: Aliases for environments without the support of `exports` in package.json.\n- Updated dependencies [17c83e34]\n - @linaria/react@3.0.0-beta.21\n - @linaria/babel-preset@3.0.0-beta.21\n - @linaria/extractor@3.0.0-beta.21\n - @linaria/preeval@3.0.0-beta.21\n - @linaria/shaker@3.0.0-beta.21\n\n## 3.0.0-beta.20\n\n### Patch Changes\n\n- 8be5650d: The repo has been migrated to PNPM and Turborepo\n- Updated dependencies\n - @linaria/babel-preset@3.0.0-beta.20\n - @linaria/extractor@3.0.0-beta.20\n - @linaria/preeval@3.0.0-beta.20\n - @linaria/react@3.0.0-beta.20\n - @linaria/shaker@3.0.0-beta.20\n" }, { "path": "packages/testkit/jest.config.js", "content": "/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */\nmodule.exports = {\n preset: 'ts-jest',\n testEnvironment: 'node',\n};\n" }, { "path": "packages/testkit/package.json", "content": "{\n \"name\": \"@linaria/testkit\",\n \"version\": \"7.0.1\",\n \"private\": true,\n \"description\": \"Blazing fast zero-runtime CSS in JS library\",\n \"keywords\": [\n \"babel\",\n \"babel-plugin\",\n \"css\",\n \"css-in-js\",\n \"linaria\",\n \"react\",\n \"styled-components\"\n ],\n \"homepage\": \"https://github.com/callstack/linaria#readme\",\n \"bugs\": \"https://github.com/callstack/linaria/issues\",\n \"repository\": \"git@github.com:callstack/linaria.git\",\n \"license\": \"MIT\",\n \"scripts\": {\n \"test\": \"jest --config ./jest.config.js --rootDir .\",\n \"typecheck\": \"tsc --noEmit --composite false\"\n },\n \"dependencies\": {\n \"@babel/core\": \"^7.23.5\",\n \"@babel/generator\": \"^7.23.5\",\n \"@babel/traverse\": \"^7.23.5\",\n \"@linaria/react\": \"workspace:^\",\n \"@swc/core\": \"^1.3.20\",\n \"@wyw-in-js/processor-utils\": \"^1.0.4\",\n \"@wyw-in-js/shared\": \"^1.0.4\",\n \"@wyw-in-js/transform\": \"^1.0.6\",\n \"debug\": \"^4.3.4\",\n \"dedent\": \"^1.5.1\",\n \"esbuild\": \"^0.15.16\",\n \"typescript\": \"^5.2.2\"\n },\n \"devDependencies\": {\n \"@babel/plugin-syntax-jsx\": \"^7.23.3\",\n \"@babel/plugin-syntax-typescript\": \"^7.23.3\",\n \"@babel/plugin-transform-modules-commonjs\": \"^7.23.3\",\n \"@babel/preset-typescript\": \"^7.23.3\",\n \"@babel/runtime\": \"^7.23.5\",\n \"@babel/types\": \"^7.23.5\",\n \"@linaria/atomic\": \"workspace:^\",\n \"@linaria/core\": \"workspace:^\",\n \"@types/babel__core\": \"^7.20.5\",\n \"@types/babel__generator\": \"^7.6.7\",\n \"@types/babel__traverse\": \"^7.20.4\",\n \"@types/debug\": \"^4.1.8\",\n \"@types/jest\": \"^28.1.0\",\n \"@types/node\": \"^17.0.39\",\n \"babel-plugin-istanbul\": \"^6.1.1\",\n \"babel-plugin-module-resolver\": \"^4.1.0\",\n \"jest\": \"^29.6.2\",\n \"linaria\": \"workspace:^\",\n \"ts-jest\": \"^29.1.1\"\n },\n \"engines\": {\n \"node\": \">=20.0.0\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n }\n}\n" }, { "path": "packages/testkit/src/__fixtures__/assignToExport.js", "content": "var Padding = (exports.Padding = 4);\n" }, { "path": "packages/testkit/src/__fixtures__/bar.js", "content": "export * from './re-exports/constants';\n\nexport const bar1 = 'bar1';\nexport const bar2 = 'bar2';\n" }, { "path": "packages/testkit/src/__fixtures__/circular-imports/bar.js", "content": "export const bar = 'bar';\n" }, { "path": "packages/testkit/src/__fixtures__/circular-imports/constants.js", "content": "import { bar } from './index';\n\nexport const foo = 'foo';\nexport const constBar = bar;\n" }, { "path": "packages/testkit/src/__fixtures__/circular-imports/foo.js", "content": "import * as fooStyles from './constants';\n\nexport { fooStyles };\n" }, { "path": "packages/testkit/src/__fixtures__/circular-imports/index.js", "content": "export * from './bar';\nexport * from './foo';\n" }, { "path": "packages/testkit/src/__fixtures__/complex-component.js", "content": "// Dead code in this file should be ignored\n\nimport deadDep from 'unknown-dependency';\nimport { styled } from '@linaria/react';\n\nexport const deadValue = deadDep();\n\nconst objects = { font: { fontSize: 12 }, box: { border: '1px solid red' } };\nconst foo = (k) => {\n const { [k]: obj } = objects;\n return obj;\n};\n\nobjects.font.fontWeight = 'bold';\n\nexport const whiteColor = '#fff';\n\nexport const Title = styled.h1`\n ${foo('font')}\n ${foo('box')}\n`;\n" }, { "path": "packages/testkit/src/__fixtures__/components-library.js", "content": "import { styled } from '@linaria/react';\n\nexport const T1 = styled.h1`\n background: #111;\n`;\nexport const T2 = styled.h2`\n background: #222;\n`;\nexport const T3 = styled.h3`\n ${T2} {\n background: #333;\n }\n`;\nexport default styled.p`\n background: #333;\n`;\n" }, { "path": "packages/testkit/src/__fixtures__/computedKeys.js", "content": "const computedKeyName = 'red';\nexport const object = {\n [computedKeyName]: 'red',\n blue: 'blue',\n};\n" }, { "path": "packages/testkit/src/__fixtures__/enums.ts", "content": "export enum Colors {\n BLUE = '#27509A',\n}\n" }, { "path": "packages/testkit/src/__fixtures__/escape-character.js", "content": "import { styled } from '@linaria/react';\n\nconst selectors = ['a', 'b'];\n\nexport const Block = styled.div`\n ${selectors.map((c) => String.raw`${c} { content: \"\\u000A\"; }`).join('\\n')};\n`;\n" }, { "path": "packages/testkit/src/__fixtures__/foo-nonstatic.js", "content": "export const foo1 = String('foo1');\nexport const foo2 = String('foo2');\nexport const foo3 = () => 'foo3';\n" }, { "path": "packages/testkit/src/__fixtures__/foo.js", "content": "export const foo1 = 'foo1';\nexport const foo2 = 'foo2';\nexport const foo3 = () => 'foo3';\n" }, { "path": "packages/testkit/src/__fixtures__/linaria-ui-library/components/index.js", "content": "export const Title = () => 'Title';\n" }, { "path": "packages/testkit/src/__fixtures__/linaria-ui-library/hocs.js", "content": "export const connect = (i) => i;\n" }, { "path": "packages/testkit/src/__fixtures__/linaria-ui-library/non-linaria-components.js", "content": "export const Title = () => 'Title';\n\nthrow new Error('This file should not be imported');\n" }, { "path": "packages/testkit/src/__fixtures__/linaria-ui-library/package.json", "content": "{\n \"name\": \"linaria-ui-library\",\n \"version\": \"1.0.0\",\n \"dependencies\": {\n },\n \"linaria\": {\n \"components\": \"components/**/*\"\n }\n}\n" }, { "path": "packages/testkit/src/__fixtures__/linaria-ui-library/types.ts", "content": "export type ComponentType = 'class' | 'function' | 'arrow';\n\nexport Unexpected token;\n" }, { "path": "packages/testkit/src/__fixtures__/loop/a.js", "content": "const b = require('./b');\n\nexports.A = 'A';\n\nexports.smallB = b.B.toLowerCase();\n" }, { "path": "packages/testkit/src/__fixtures__/loop/ab.js", "content": "const a = require('./a');\n\nexports.AB = a.A + a.smallB;\n" }, { "path": "packages/testkit/src/__fixtures__/loop/b.js", "content": "const a = require('./a');\n\nexports.B = 'B';\n\nexports.smallA = a.A.toLowerCase();\n" }, { "path": "packages/testkit/src/__fixtures__/loop/ba.js", "content": "const b = require('./b');\n\nexports.BA = b.B + b.smallA;\n" }, { "path": "packages/testkit/src/__fixtures__/loop/index.js", "content": "const ab = require('./ab');\nconst ba = require('./ba');\n\nexports.AB = ab.AB;\nexports.BA = ba.BA;\n" }, { "path": "packages/testkit/src/__fixtures__/module-reexport.js", "content": "module.exports = require('./re-exports/constants');\n" }, { "path": "packages/testkit/src/__fixtures__/non-linaria-ui-library/index.js", "content": "export const Title = () => 'Title';\n\nthrow new Error('This file should not be imported');\n" }, { "path": "packages/testkit/src/__fixtures__/non-linaria-ui-library/package.json", "content": "{\n \"name\": \"non-linaria-ui-library\",\n \"version\": \"1.0.0\",\n \"dependencies\": {\n }\n}\n" }, { "path": "packages/testkit/src/__fixtures__/objectExport.js", "content": "module.exports = {\n margin: 5,\n};\n" }, { "path": "packages/testkit/src/__fixtures__/re-exports/constants.js", "content": "export const foo = 'foo';\nexport const bar = 'bar';\n" }, { "path": "packages/testkit/src/__fixtures__/re-exports/empty.js", "content": "export {};\n" }, { "path": "packages/testkit/src/__fixtures__/re-exports/foo.js", "content": "import * as fooStyles from './constants';\nexport * from '../bar';\n\nexport { fooStyles };\n" }, { "path": "packages/testkit/src/__fixtures__/re-exports/index.js", "content": "export * from './empty';\nexport * from './foo';\n" }, { "path": "packages/testkit/src/__fixtures__/reexports.js", "content": "export * from './foo';\nexport * from './bar';\n" }, { "path": "packages/testkit/src/__fixtures__/runNearFramePaint.js", "content": "/**\n * The whole this file should be shaken out because it uses DOM API\n */\n\nlet isHidden = document.visibilityState !== 'visible';\n\ndocument.addEventListener('visibilitychange', () => {\n isHidden = document.visibilityState !== 'visible';\n});\n\nexport function runNearFramePaint(callback) {\n if (isHidden) {\n return;\n } else {\n callback();\n }\n}\n" }, { "path": "packages/testkit/src/__fixtures__/sample-data.json", "content": "{\n \"name\": \"Luke Skywalker\",\n \"height\": \"172\",\n \"mass\": \"77\",\n \"hair_color\": \"blond\",\n \"skin_color\": \"fair\",\n \"eye_color\": \"blue\",\n \"birth_year\": \"19BBY\",\n \"gender\": \"male\"\n}\n" }, { "path": "packages/testkit/src/__fixtures__/sample-script.cjs", "content": "module.exports = 42;\n" }, { "path": "packages/testkit/src/__fixtures__/sample-script.js", "content": "module.exports = 42;\n" }, { "path": "packages/testkit/src/__fixtures__/sample-typescript.tsx", "content": "export default 27;\n" }, { "path": "packages/testkit/src/__fixtures__/self-import.js", "content": "import { constant as importedConstant } from './self-import';\n\nexport const constant = 42;\nexport const stringConstant = importedConstant.toString(16);\n" }, { "path": "packages/testkit/src/__fixtures__/sequenceExport.js", "content": "let n = 0;\nexport default ((n = 5), n);\n" }, { "path": "packages/testkit/src/__fixtures__/slugify.js", "content": "/* eslint-disable no-plusplus, no-bitwise, default-case, no-param-reassign, prefer-destructuring */\n/**\n * This file contains a utility to generate hashes to be used as generated class names\n */\n\n/**\n * murmurhash2 via https://gist.github.com/raycmorgan/588423\n */\n\nfunction UInt32(str, pos) {\n return (\n str.charCodeAt(pos++) +\n (str.charCodeAt(pos++) << 8) +\n (str.charCodeAt(pos++) << 16) +\n (str.charCodeAt(pos) << 24)\n );\n}\n\nfunction UInt16(str, pos) {\n return str.charCodeAt(pos++) + (str.charCodeAt(pos++) << 8);\n}\n\nfunction Umul32(n, m) {\n n |= 0;\n m |= 0;\n const nlo = n & 0xffff;\n const nhi = n >>> 16;\n return (nlo * m + (((nhi * m) & 0xffff) << 16)) | 0;\n}\n\nfunction doHash(str, seed = 0) {\n const m = 0x5bd1e995;\n const r = 24;\n let h = seed ^ str.length;\n let length = str.length;\n let currentIndex = 0;\n\n while (length >= 4) {\n let k = UInt32(str, currentIndex);\n\n k = Umul32(k, m);\n k ^= k >>> r;\n k = Umul32(k, m);\n\n h = Umul32(h, m);\n h ^= k;\n\n currentIndex += 4;\n length -= 4;\n }\n\n switch (length) {\n case 3:\n h ^= UInt16(str, currentIndex);\n h ^= str.charCodeAt(currentIndex + 2) << 16;\n h = Umul32(h, m);\n break;\n\n case 2:\n h ^= UInt16(str, currentIndex);\n h = Umul32(h, m);\n break;\n\n case 1:\n h ^= str.charCodeAt(currentIndex);\n h = Umul32(h, m);\n break;\n }\n\n h ^= h >>> 13;\n h = Umul32(h, m);\n h ^= h >>> 15;\n\n return h >>> 0;\n}\n\nexport default function slugify(code) {\n return doHash(code).toString(36);\n}\n" }, { "path": "packages/testkit/src/__fixtures__/ts-compiled-re-exports/constants.js", "content": "\"use strict\";\nexports.__esModule = true;\nexports.bar = exports.foo = void 0;\nexports.foo = 'foo';\nexports.bar = 'bar';\n" }, { "path": "packages/testkit/src/__fixtures__/ts-compiled-re-exports/index.js", "content": "\"use strict\";\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __exportStar = (this && this.__exportStar) || function(m, exports) {\n for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);\n};\nexports.__esModule = true;\n__exportStar(require(\"./constants\"), exports);\n" }, { "path": "packages/testkit/src/__fixtures__/ts-data.ts", "content": "export enum TestEnum {\n FirstValue,\n SecondValue,\n}\n" }, { "path": "packages/testkit/src/__fixtures__/with-babelrc/.babelrc.js", "content": "const path = require('path');\n\nmodule.exports = {\n \"plugins\": [\n [\n \"module-resolver\",\n {\n \"alias\": {\n \"_\": \"./src/__fixtures__\"\n }\n }\n ]\n ]\n}\n" }, { "path": "packages/testkit/src/__fixtures__/with-babelrc/index.js", "content": "import { styled } from '@linaria/react';\nimport { fooStyles } from \"_/re-exports\";\n\nconst value = fooStyles.foo;\n\nexport const H1 = styled.h1`\n color: ${value};\n`;\n" }, { "path": "packages/testkit/src/__snapshots__/babel.test.ts.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`strategy shaker assigning to exports 1`] = `\"export const square = \"square_s13jq05\";\"`;\n\nexports[`strategy shaker assigning to exports 2`] = `\n\nCSS:\n\n.square_s13jq05 {\n div {\n padding: 4px;\n }\n}\n\nDependencies: ./__fixtures__/assignToExport\n\n`;\n\nexports[`strategy shaker cache should cache evaluation 1`] = `\n\"import { foo2 } from \"./__fixtures__/foo-nonstatic\";\nexport const text = \"text_t13jq05\";\"\n`;\n\nexports[`strategy shaker cache should cache evaluation 2`] = `\n\nCSS:\n\n.text_t13jq05 {font-size: foo1}\n\nDependencies: ./__fixtures__/foo-nonstatic\n\n`;\n\nexports[`strategy shaker cache should reprocess module when cached exports are incomplete 1`] = `\"export const text = \"text_t13jq05\";\"`;\n\nexports[`strategy shaker cache should reprocess module when cached exports are incomplete 2`] = `\n\nCSS:\n\n.text_t13jq05 {font-size: foo1foo2}\n\nDependencies: ./__fixtures__/foo-nonstatic\n\n`;\n\nexports[`strategy shaker cache should use cached value 1`] = `\"export const text = \"text_t13jq05\";\"`;\n\nexports[`strategy shaker cache should use cached value 2`] = `\n\nCSS:\n\n.text_t13jq05 {font-size: cached-foo1}\n\nDependencies: ./__fixtures__/foo-nonstatic\n\n`;\n\nexports[`strategy shaker cache should use cached value even if only part is required 1`] = `\"export const text = \"text_t13jq05\";\"`;\n\nexports[`strategy shaker cache should use cached value even if only part is required 2`] = `\n\nCSS:\n\n.text_t13jq05 {font-size: cached-foo1}\n\nDependencies: ./__fixtures__/foo-nonstatic\n\n`;\n\nexports[`strategy shaker compiles atomic css 1`] = `\n\"/* @flow */\n\nconst x = \"atm_26_5scuol atm_e2_12xxubj\";\nconsole.log(x);\"\n`;\n\nexports[`strategy shaker compiles atomic css 2`] = `\n\nCSS:\n\n.atm_26_5scuol{background:red;}\n.atm_e2_12xxubj{height:100px;}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker compiles atomic css with at-rules and property priorities 1`] = `\n\"/* @flow */\n\nconst x = \"atm_1h9nsec_idpfg4 atm_7xgmf7_14y27yu atm_ci1k5c_i2wt44 atm_le_1v6z61t\";\nconsole.log(x);\"\n`;\n\nexports[`strategy shaker compiles atomic css with at-rules and property priorities 2`] = `\n\nCSS:\n\n@media (max-width: 500px){.atm_1h9nsec_idpfg4.atm_1h9nsec_idpfg4{padding:0;}}\n@media (min-width: 300px){.atm_7xgmf7_14y27yu.atm_7xgmf7_14y27yu.atm_7xgmf7_14y27yu:hover{padding-top:5px;}}\n.atm_ci1k5c_i2wt44.atm_ci1k5c_i2wt44:enabled{padding-left:6px;}\n.atm_le_1v6z61t.atm_le_1v6z61t{padding-bottom:7px;}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker compiles atomic css with at-rules and pseudo classes 1`] = `\n\"/* @flow */\n\nconst x = \"atm_1apu8aw_13q2bts atm_1yli2by_1cnho6b atm_1hwwax4_1osqo2v atm_26_5scuol atm_e2_12xxubj\";\nconsole.log(x);\"\n`;\n\nexports[`strategy shaker compiles atomic css with at-rules and pseudo classes 2`] = `\n\nCSS:\n\n@media (max-width: 500px){.atm_1apu8aw_13q2bts.atm_1apu8aw_13q2bts{background:blue;}}\n@media (min-width: 300px){.atm_1yli2by_1cnho6b.atm_1yli2by_1cnho6b:hover{background:purple;}}\n.atm_1hwwax4_1osqo2v:enabled{width:100%;}\n.atm_26_5scuol{background:red;}\n.atm_e2_12xxubj{height:100px;}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker compiles atomic css with keyframes 1`] = `\n\"/* @flow */\n\nconst x = \"atm_p_x1wbsp atm_26_5scuol atm_e2_12xxubj\";\nconsole.log(x);\"\n`;\n\nexports[`strategy shaker compiles atomic css with keyframes 2`] = `\n\nCSS:\n\n@keyframes fade {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n.atm_p_x1wbsp{animation:fade 1s infinite;}\n.atm_26_5scuol{background:red;}\n.atm_e2_12xxubj{height:100px;}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker compiles atomic css with property priorities 1`] = `\n\"/* @flow */\n\nconst y = \"atm_gz_14y27yu\";\nconst x = \"atm_gi_idpfg4\";\nconsole.log(x, y);\"\n`;\n\nexports[`strategy shaker compiles atomic css with property priorities 2`] = `\n\nCSS:\n\n.atm_gz_14y27yu.atm_gz_14y27yu{margin-left:5px;}\n.atm_gi_idpfg4{margin:0;}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker compiles atomic css with unique atoms based on key value pairs 1`] = `\n\"/* @flow */\n\nconst x = \"atm_e2_12xxubj\";\nconst y = \"atm_e2_tnzek8\";\nconsole.log(x, y);\"\n`;\n\nexports[`strategy shaker compiles atomic css with unique atoms based on key value pairs 2`] = `\n\nCSS:\n\n.atm_e2_12xxubj{height:100px;}\n.atm_e2_tnzek8{height:99px;}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker compiles atomic styled with dynamic interpolations as unique variables based on the interpolation text 1`] = `\n\"/* @flow */\n\nimport { styled } from '@linaria/atomic';\nconst _exp2 = () => props => props.color;\nconst _exp3 = () => props => props.backgroundColor;\nconst Component = /*#__PURE__*/styled('div')({\n name: \"Component\",\n class: \"atm_7l_15g95l5 atm_4b_15g95l5 atm_2d_1en4k16 Component_c13jq05\",\n propsAsIs: false,\n vars: {\n \"1p69eoh\": [_exp2()],\n \"l12cfn\": [_exp3()]\n },\n atomic: true\n});\nconst _exp4 = () => props => props.color;\nconst _exp5 = () => props => props.color || \"black\";\nconst Component2 = /*#__PURE__*/styled('div')({\n name: \"Component2\",\n class: \"atm_7l_15g95l5 atm_4b_1kgl01d Component2_c1vhermz\",\n propsAsIs: false,\n vars: {\n \"1p69eoh\": [_exp4()],\n \"1n9iccq\": [_exp5()]\n },\n atomic: true\n});\nconsole.log(Component, Component2);\"\n`;\n\nexports[`strategy shaker compiles atomic styled with dynamic interpolations as unique variables based on the interpolation text 2`] = `\n\nCSS:\n\n.atm_7l_15g95l5{color:var(--1p69eoh);}\n.atm_4b_15g95l5.atm_4b_15g95l5{border-color:var(--1p69eoh);}\n.atm_2d_1en4k16.atm_2d_1en4k16{background-color:var(--l12cfn);}\n.atm_4b_1kgl01d.atm_4b_1kgl01d{border-color:var(--1n9iccq);}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker compiles atomic styled with plain css, static and dynamic interpolations 1`] = `\n\"/* @flow */\n\nimport { styled } from '@linaria/atomic';\nconst _exp2 = () => props => props.color;\nconst Component = /*#__PURE__*/styled('div')({\n name: \"Component\",\n class: \"atm_7l_13q2bts atm_e2_12xxubj atm_gi_12am3vd atm_2d_15g95l5 Component_c13jq05\",\n propsAsIs: false,\n vars: {\n \"1p69eoh\": [_exp2()]\n },\n atomic: true\n});\nconsole.log(Component);\"\n`;\n\nexports[`strategy shaker compiles atomic styled with plain css, static and dynamic interpolations 2`] = `\n\nCSS:\n\n.atm_7l_13q2bts{color:blue;}\n.atm_e2_12xxubj{height:100px;}\n.atm_gi_12am3vd{margin:50px;}\n.atm_2d_15g95l5.atm_2d_15g95l5{background-color:var(--1p69eoh);}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker compiles atomic styled with static css 1`] = `\n\"/* @flow */\n\nimport { styled } from '@linaria/atomic';\nconst Component = /*#__PURE__*/styled('div')({\n name: \"Component\",\n class: \"atm_7l_13q2bts atm_e2_12xxubj Component_c13jq05\",\n propsAsIs: false,\n atomic: true\n});\nconsole.log(Component);\"\n`;\n\nexports[`strategy shaker compiles atomic styled with static css 2`] = `\n\nCSS:\n\n.atm_7l_13q2bts{color:blue;}\n.atm_e2_12xxubj{height:100px;}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker compiles atomic styled without colliding by property 1`] = `\n\"/* @flow */\n\nimport { styled } from '@linaria/atomic';\nexport const Component = /*#__PURE__*/styled('ul')({\n name: \"Component\",\n class: \"atm_9s_1txwivl atm_l8_idpfg4 Component_c13jq05\",\n propsAsIs: false,\n atomic: true\n});\nexport const Component2 = /*#__PURE__*/styled('ul')({\n name: \"Component2\",\n class: \"atm_9s_1ulexfb atm_l8_idpfg4 Component2_c1vhermz\",\n propsAsIs: false,\n atomic: true\n});\"\n`;\n\nexports[`strategy shaker compiles atomic styled without colliding by property 2`] = `\n\nCSS:\n\n.atm_9s_1txwivl{display:flex;}\n.atm_l8_idpfg4{padding:0;}\n.atm_9s_1ulexfb{display:block;}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker compiles atomic styled wrapping other components with extra priority 1`] = `\n\"/* @flow */\n\nimport { styled } from '@linaria/atomic';\nconst Component = /*#__PURE__*/styled('div')({\n name: \"Component\",\n class: \"atm_2d_13q2bts atm_e2_12xxubj Component_c13jq05\",\n propsAsIs: false,\n atomic: true\n});\nconst _exp = () => Component;\nconst ComponentCompositing = /*#__PURE__*/styled(_exp())({\n name: \"ComponentCompositing\",\n class: \"atm_26_5scuol atm_e2_1nzxncv ComponentCompositing_c1vhermz\",\n propsAsIs: true,\n atomic: true\n});\nconsole.log(ComponentCompositing);\"\n`;\n\nexports[`strategy shaker compiles atomic styled wrapping other components with extra priority 2`] = `\n\nCSS:\n\n.atm_2d_13q2bts.atm_2d_13q2bts{background-color:blue;}\n.atm_e2_12xxubj{height:100px;}\n.atm_26_5scuol.atm_26_5scuol{background:red;}\n.atm_e2_1nzxncv.atm_e2_1nzxncv{height:105px;}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker compiles atoms that are shared between css and styled templates 1`] = `\n\"/* @flow */\n\nimport { styled } from '@linaria/atomic';\nconst x = \"atm_26_5scuol atm_e2_12xxubj\";\nconst _exp2 = () => props => props.color;\nconst Component = /*#__PURE__*/styled('div')({\n name: \"Component\",\n class: \"atm_26_5scuol atm_e2_12xxubj atm_gi_19bvopo atm_7l_15g95l5 Component_c1vhermz\",\n propsAsIs: false,\n vars: {\n \"1p69eoh\": [_exp2()]\n },\n atomic: true\n});\nconsole.log(x, Component);\"\n`;\n\nexports[`strategy shaker compiles atoms that are shared between css and styled templates 2`] = `\n\nCSS:\n\n.atm_26_5scuol{background:red;}\n.atm_e2_12xxubj{height:100px;}\n.atm_gi_19bvopo{margin:10px;}\n.atm_7l_15g95l5{color:var(--1p69eoh);}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker compiles css with keyframes 1`] = `\n\"const x = \"x_x13jq05\";\nconsole.log(x);\"\n`;\n\nexports[`strategy shaker compiles css with keyframes 2`] = `\n\nCSS:\n\n.x_x13jq05 {\n @keyframes fade {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n animation: fade 1s infinite;\n\n background: red;\n height: 100px;\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker concurrent multiple parallel chains of reexports 1`] = `\n\"import { styled } from '@linaria/react';\nexport const H1foo = /*#__PURE__*/styled('h1')({\n name: \"H1foo\",\n class: \"H1foo_h1m1lid5\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker concurrent multiple parallel chains of reexports 2`] = `\n\nCSS:\n\n.H1foo_h1m1lid5 {\n color: foo;\n}\n\nDependencies: ./__fixtures__/re-exports\n\n`;\n\nexports[`strategy shaker concurrent multiple parallel chains of reexports 3`] = `\n\"import { styled } from '@linaria/react';\nexport const H1bar = /*#__PURE__*/styled('h1')({\n name: \"H1bar\",\n class: \"H1bar_h1r70tzz\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker concurrent multiple parallel chains of reexports 4`] = `\n\nCSS:\n\n.H1bar_h1r70tzz {\n color: bar;\n}\n\nDependencies: ./__fixtures__/re-exports\n\n`;\n\nexports[`strategy shaker concurrent multiple parallel chains of reexports 5`] = `\n\"import { styled } from '@linaria/react';\nexport const H1bar1 = /*#__PURE__*/styled('h1')({\n name: \"H1bar1\",\n class: \"H1bar1_hsluxkf\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker concurrent multiple parallel chains of reexports 6`] = `\n\nCSS:\n\n.H1bar1_hsluxkf {\n color: bar1;\n}\n\nDependencies: ./__fixtures__/re-exports\n\n`;\n\nexports[`strategy shaker concurrent multiple parallel chains of reexports 7`] = `\n\"import { styled } from '@linaria/react';\nexport const H1bar2 = /*#__PURE__*/styled('h1')({\n name: \"H1bar2\",\n class: \"H1bar2_ht4s9ym\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker concurrent multiple parallel chains of reexports 8`] = `\n\nCSS:\n\n.H1bar2_ht4s9ym {\n color: bar2;\n}\n\nDependencies: ./__fixtures__/re-exports\n\n`;\n\nexports[`strategy shaker concurrent two parallel chains of reexports 1`] = `\n\"import { styled } from '@linaria/react';\nexport const H1 = /*#__PURE__*/styled('h1')({\n name: \"H1\",\n class: \"H1_hpsacp3\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker concurrent two parallel chains of reexports 2`] = `\n\nCSS:\n\n.H1_hpsacp3 {\n color: foo;\n}\n\nDependencies: ./__fixtures__/re-exports\n\n`;\n\nexports[`strategy shaker concurrent two parallel chains of reexports 3`] = `\n\"import { styled } from '@linaria/react';\nexport const H1 = /*#__PURE__*/styled('h1')({\n name: \"H1\",\n class: \"H1_htinbxh\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker concurrent two parallel chains of reexports 4`] = `\n\nCSS:\n\n.H1_htinbxh {\n color: bar2;\n}\n\nDependencies: ./__fixtures__/re-exports\n\n`;\n\nexports[`strategy shaker derives display name from filename 1`] = `\n\"import { styled } from '@linaria/react';\nexport default /*#__PURE__*/styled('h1')({\n name: \"FancyName0\",\n class: \"FancyName0_f15w9xbr\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker derives display name from filename 2`] = `\n\nCSS:\n\n.FancyName0_f15w9xbr {\n font-size: 14px;\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker derives display name from parent folder name 1`] = `\n\"import { styled } from '@linaria/react';\nexport default /*#__PURE__*/styled('h1')({\n name: \"FancyName0\",\n class: \"FancyName0_f13t8ham\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker derives display name from parent folder name 2`] = `\n\nCSS:\n\n.FancyName0_f13t8ham {\n font-size: 14px;\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker do not include in dependencies expressions from interpolation functions bodies 1`] = `\n\"import { styled } from '@linaria/react';\nimport constant from './broken-dependency-1';\nimport modifier from './broken-dependency-2';\nconst _exp = () => props => props.size + constant;\nconst _exp2 = () => props => modifier(props.size);\nexport const Box = /*#__PURE__*/styled('div')({\n name: \"Box\",\n class: \"Box_b13jq05\",\n propsAsIs: false,\n vars: {\n \"b13jq05-0\": [_exp(), \"px\"],\n \"b13jq05-1\": [_exp2(), \"px\"]\n }\n});\"\n`;\n\nexports[`strategy shaker do not include in dependencies expressions from interpolation functions bodies 2`] = `\n\nCSS:\n\n.Box_b13jq05 {\n height: var(--b13jq05-0);\n width: var(--b13jq05-1);\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker does not include styles if not referenced anywhere 1`] = `\n\"import { styled } from '@linaria/react';\nconst Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_t13jq05\",\n propsAsIs: false\n});\nconst title = \"title_t1vhermz\";\"\n`;\n\nexports[`strategy shaker does not include styles if not referenced anywhere 2`] = `\n\nCSS:\n\n\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker does not output CSS if none present 1`] = `\n\"const number = 42;\n\nconst title = String.raw\\`This is something\\`;\"\n`;\n\nexports[`strategy shaker does not output CSS if none present 2`] = `\n\nCSS:\n\n\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker does not output CSS property when value is a blank string 1`] = `\"export const title = \"title_t13jq05\";\"`;\n\nexports[`strategy shaker does not output CSS property when value is a blank string 2`] = `\n\nCSS:\n\n.title_t13jq05 {\n font-size: ;\n margin: 6px;\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker does not strip istanbul coverage sequences 1`] = `\n\"function cov___HASH__() {\n var path = \"__PATH__\";\n var hash = \"__HASH__\";\n var global = new Function(\"return this\")();\n var gcv = \"__coverage__\";\n var coverageData = {\n path: \"__PATH__\",\n statementMap: {\n \"0\": {\n start: {\n line: 2,\n column: 10\n },\n end: {\n line: 2,\n column: 12\n }\n },\n \"1\": {\n start: {\n line: 4,\n column: 26\n },\n end: {\n line: 6,\n column: 1\n }\n }\n },\n fnMap: {},\n branchMap: {},\n s: {\n \"0\": 0,\n \"1\": 0\n },\n f: {},\n b: {},\n _coverageSchema: \"1a1c01bbd47fc00a2c39e90264f33305004495a9\",\n hash: \"__HASH__\"\n };\n var coverage = global[gcv] || (global[gcv] = {});\n if (!coverage[path] || coverage[path].hash !== hash) {\n coverage[path] = coverageData;\n }\n var actualCoverage = coverage[path];\n {\n // @ts-ignore\n cov___HASH__ = function () {\n return actualCoverage;\n };\n }\n return actualCoverage;\n}\ncov___HASH__();\nexport const titleClass = \"titleClass_t13jq05\";\"\n`;\n\nexports[`strategy shaker does not strip istanbul coverage sequences 2`] = `\n\nCSS:\n\n.titleClass_t13jq05 {\n height: 42px;\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker evaluates and inlines expressions in scope 1`] = `\n\"import { styled } from '@linaria/react';\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_t13jq05\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker evaluates and inlines expressions in scope 2`] = `\n\nCSS:\n\n.Title_t13jq05 {\n color: blue;\n width: 33.333333333333336%;\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker evaluates babel helpers 1`] = `\n\"import { styled } from '@linaria/react';\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_t13jq05\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker evaluates babel helpers 2`] = `\n\nCSS:\n\n.Title_t13jq05 {\n &:before {\n content: \"2\"\n }\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker evaluates chain of reexports 1`] = `\n\"import { styled } from '@linaria/react';\nexport const H1 = /*#__PURE__*/styled('h1')({\n name: \"H1\",\n class: \"H1_h13jq05\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker evaluates chain of reexports 2`] = `\n\nCSS:\n\n.H1_h13jq05 {\n color: foo;\n}\n\nDependencies: ./__fixtures__/re-exports\n\n`;\n\nexports[`strategy shaker evaluates complex styles with functions and nested selectors 1`] = `\n\"export const bareIconClass = \"bareIconClass_b13jq05\";\nexport const SIZES = {\n XS: \"XS_x1vhermz\"\n};\"\n`;\n\nexports[`strategy shaker evaluates complex styles with functions and nested selectors 2`] = `\n\nCSS:\n\n.bareIconClass_b13jq05 {}\n.XS_x1vhermz {&.bareIconClass_b13jq05 { font-size: 16.5px; }}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker evaluates component interpolations 1`] = `\n\"const {\n styled\n} = require('@linaria/react');\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_t13jq05\",\n propsAsIs: false\n});\nexport const Paragraph = /*#__PURE__*/styled('p')({\n name: \"Paragraph\",\n class: \"Paragraph_p1vhermz\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker evaluates component interpolations 2`] = `\n\nCSS:\n\n.Title_t13jq05 {\n color: red;\n}\n.Paragraph_p1vhermz {\n .Title_t13jq05 {\n color: blue;\n }\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker evaluates dependencies with sequence expression 1`] = `\n\"import { styled } from '@linaria/react';\nlet external = 0;\nconst color = (external, () => 'blue');\nconst _exp = () => color;\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_t13jq05\",\n propsAsIs: false,\n vars: {\n \"t13jq05-0\": [_exp()]\n }\n});\"\n`;\n\nexports[`strategy shaker evaluates dependencies with sequence expression 2`] = `\n\nCSS:\n\n.Title_t13jq05 {\n color: var(--t13jq05-0);\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker evaluates expressions with dependencies 1`] = `\n\"import { styled } from '@linaria/react';\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_t13jq05\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker evaluates expressions with dependencies 2`] = `\n\nCSS:\n\n.Title_t13jq05 {\n &:before {\n content: \"6og6jy\"\n }\n}\n\nDependencies: ./__fixtures__/slugify\n\n`;\n\nexports[`strategy shaker evaluates expressions with expressions depending on shared dependency 1`] = `\n\"import { styled } from '@linaria/react';\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_t13jq05\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker evaluates expressions with expressions depending on shared dependency 2`] = `\n\nCSS:\n\n.Title_t13jq05 {\n &:before {\n content: \"6og6jyboo6og6jybar\"\n }\n}\n\nDependencies: ./__fixtures__/slugify\n\n`;\n\nexports[`strategy shaker evaluates functions with nested identifiers 1`] = `\n\"import { styled } from '@linaria/react';\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_t13jq05\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker evaluates functions with nested identifiers 2`] = `\n\nCSS:\n\n.Title_t13jq05 {\n font-size: 12px;\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker evaluates identifier in scope 1`] = `\n\"import { styled } from '@linaria/react';\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_t13jq05\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker evaluates identifier in scope 2`] = `\n\nCSS:\n\n.Title_t13jq05 {\n &:before {\n content: \"42 days\"\n }\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker evaluates imported typescript enums 1`] = `\n\"import { styled } from '@linaria/react';\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_t9vkbjs\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker evaluates imported typescript enums 2`] = `\n\nCSS:\n\n.Title_t9vkbjs {\n color: #27509A;\n}\n\nDependencies: ./__fixtures__/enums\n\n`;\n\nexports[`strategy shaker evaluates interpolations with sequence expression 1`] = `\n\"import { styled } from '@linaria/react';\nconst _exp = () => (0, () => \"blue\");\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_t13jq05\",\n propsAsIs: false,\n vars: {\n \"t13jq05-0\": [_exp()]\n }\n});\"\n`;\n\nexports[`strategy shaker evaluates interpolations with sequence expression 2`] = `\n\nCSS:\n\n.Title_t13jq05 {\n color: var(--t13jq05-0);\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker evaluates local expressions 1`] = `\n\"import { styled } from '@linaria/react';\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_t13jq05\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker evaluates local expressions 2`] = `\n\nCSS:\n\n.Title_t13jq05 {\n &:before {\n content: \"42 days\"\n }\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker evaluates multiple expressions with shared dependency 1`] = `\n\"import { styled } from '@linaria/react';\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_t13jq05\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker evaluates multiple expressions with shared dependency 2`] = `\n\nCSS:\n\n.Title_t13jq05 {\n &:before {\n content: \"6og6jyboo\"\n content: \"6og6jybar\"\n }\n}\n\nDependencies: ./__fixtures__/slugify\n\n`;\n\nexports[`strategy shaker evaluates nested nested object interpolation 1`] = `\"export const greenContentStyles = \"greenContentStyles_g1vhermz\";\"`;\n\nexports[`strategy shaker evaluates nested nested object interpolation 2`] = `\n\nCSS:\n\n.defaultStyle_d13jq05 {\n color: red;\n padding-bottom: 0px;\n}\n.greenContentStyles_g1vhermz {\n &.defaultStyle_d13jq05 .green { display: inline-block; border: 1px solid green; }\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker evaluates typescript enums 1`] = `\n\"import { styled } from '@linaria/react';\nenum Colors {\n BLUE = '#27509A',\n}\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_t9vkbjs\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker evaluates typescript enums 2`] = `\n\nCSS:\n\n.Title_t9vkbjs {\n color: #27509A;\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker exporting objects 1`] = `\"export const square = \"square_s13jq05\";\"`;\n\nexports[`strategy shaker exporting objects 2`] = `\n\nCSS:\n\n.square_s13jq05 {\n div {\n margin: 5px;\n }\n}\n\nDependencies: ./__fixtures__/objectExport\n\n`;\n\nexports[`strategy shaker exporting objects with computed keys 1`] = `\"export const square = \"square_s13jq05\";\"`;\n\nexports[`strategy shaker exporting objects with computed keys 2`] = `\n\nCSS:\n\n.square_s13jq05 {\n div {\n color: blue;\n }\n}\n\nDependencies: ./__fixtures__/computedKeys\n\n`;\n\nexports[`strategy shaker exporting sequence expressions 1`] = `\"export const square = \"square_s13jq05\";\"`;\n\nexports[`strategy shaker exporting sequence expressions 2`] = `\n\nCSS:\n\n.square_s13jq05 {\n div {\n height: 5px;\n }\n}\n\nDependencies: ./__fixtures__/sequenceExport\n\n`;\n\nexports[`strategy shaker generates stable class names 1`] = `\n\"import { styled } from '@linaria/react';\nexport const T1 = /*#__PURE__*/styled('h1')({\n name: \"T1\",\n class: \"T1_t11kcpnd\",\n propsAsIs: false\n});\nexport const T2 = /*#__PURE__*/styled('h2')({\n name: \"T2\",\n class: \"T2_t1xdipzs\",\n propsAsIs: false\n});\nexport const T3 = /*#__PURE__*/styled('h3')({\n name: \"T3\",\n class: \"T3_tmgfls7\",\n propsAsIs: false\n});\nexport default /*#__PURE__*/styled('p')({\n name: \"components-library3\",\n class: \"components-library3_c30gynh\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker generates stable class names 2`] = `\n\nCSS:\n\n.T1_t11kcpnd {\n background: #111;\n}\n.T2_t1xdipzs {\n background: #222;\n}\n.T3_tmgfls7 {\n .T2_t1xdipzs {\n background: #333;\n }\n}\n.components-library3_c30gynh {\n background: #333;\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker handles complex component 1`] = `\n\"// Dead code in this file should be ignored\n\nimport deadDep from 'unknown-dependency';\nimport { styled } from '@linaria/react';\nexport const deadValue = deadDep();\nconst objects = {\n font: {\n fontSize: 12\n },\n box: {\n border: '1px solid red'\n }\n};\nobjects.font.fontWeight = 'bold';\nexport const whiteColor = '#fff';\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_t1us8k4s\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker handles complex component 2`] = `\n\nCSS:\n\n.Title_t1us8k4s {\n font-size: 12px; font-weight: bold;\n border: 1px solid red;\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker handles css template literal in JSX element 1`] = `\";\"`;\n\nexports[`strategy shaker handles css template literal in JSX element 2`] = `\n\nCSS:\n\n.Title_twgemqq { font-size: 14px; }\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker handles css template literal in object property 1`] = `\n\"const components = {\n title: \"title_t13jq05\"\n};\"\n`;\n\nexports[`strategy shaker handles css template literal in object property 2`] = `\n\nCSS:\n\n.title_t13jq05 {\n font-size: 14px;\n }\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker handles dashes in variableNameConfig 1`] = `\n\"import { styled as atomicStyled } from '@linaria/atomic';\nimport { styled } from '@linaria/react';\nconst _exp = () => props => props.size;\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_t13jq05\",\n propsAsIs: false,\n vars: {\n \"t13jq05-0\": [_exp(), \"px\"]\n }\n});\nconst _exp2 = () => props => props.size;\nexport const Body = /*#__PURE__*/atomicStyled('h1')({\n name: \"Body\",\n class: \"atm_c8_trva6l Body_b1vhermz\",\n propsAsIs: false,\n vars: {\n \"1qqvhyq\": [_exp2(), \"px\"]\n },\n atomic: true\n});\"\n`;\n\nexports[`strategy shaker handles dashes in variableNameConfig 2`] = `\n\nCSS:\n\n.Title_t13jq05 {\n font-size: --t13jq05-0;\n}\n.atm_c8_trva6l.atm_c8_trva6l{font-size:--1qqvhyq;}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker handles escapes properly 1`] = `\n\"import { styled } from '@linaria/react';\nexport const Block = /*#__PURE__*/styled('div')({\n name: \"Block\",\n class: \"Block_b3rflbm\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker handles escapes properly 2`] = `\n\nCSS:\n\n.Block_b3rflbm {\n a { content: \"\\\\u000A\"; } b { content: \"\\\\u000A\"; };\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker handles fn passed in classNameSlug 1`] = `\n\"import { styled } from '@linaria/react';\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"t13jq05_Title_t13jq05_Title_src_source_js_source__js_src\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker handles fn passed in classNameSlug 2`] = `\n\nCSS:\n\n.t13jq05_Title_t13jq05_Title_src_source_js_source__js_src {\n font-size: 14px;\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker handles fn passed in variableNameSlug 1`] = `\n\"import { styled as atomicStyled } from '@linaria/atomic';\nimport { styled } from '@linaria/react';\nconst _exp = () => props => props.size;\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_t13jq05\",\n propsAsIs: false,\n vars: {\n \"_qqvhyq__Title__font-size\": [_exp(), \"px\"]\n }\n});\nconst _exp2 = () => props => props.size;\nexport const Body = /*#__PURE__*/atomicStyled('h1')({\n name: \"Body\",\n class: \"atm_c8_f3y1j4 Body_b1vhermz\",\n propsAsIs: false,\n vars: {\n \"1qqvhyq__Body__font-size\": [_exp2(), \"px\"]\n },\n atomic: true\n});\"\n`;\n\nexports[`strategy shaker handles fn passed in variableNameSlug 2`] = `\n\nCSS:\n\n.Title_t13jq05 {\n font-size: var(--_qqvhyq__Title__font-size);\n}\n.atm_c8_f3y1j4.atm_c8_f3y1j4{font-size:var(--1qqvhyq__Body__font-size);}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker handles indirect wrapping another styled component 1`] = `\n\"const {\n styled\n} = require('@linaria/react');\nconst Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_t13jq05\",\n propsAsIs: false\n});\nconst hoc = Cmp => Cmp;\nconst _exp = () => hoc(Title);\nexport const CustomTitle = /*#__PURE__*/styled(_exp())({\n name: \"CustomTitle\",\n class: \"CustomTitle_c1vhermz\",\n propsAsIs: true\n});\"\n`;\n\nexports[`strategy shaker handles indirect wrapping another styled component 2`] = `\n\nCSS:\n\n.Title_t13jq05 {\n color: red;\n}\n.CustomTitle_c1vhermz.Title_t13jq05 {\n font-size: 24px;\n color: blue;\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker handles interpolation followed by unit 1`] = `\n\"import { styled } from '@linaria/react';\nconst size = () => 100;\nconst shadow = () => 5;\nconst unit = () => 1;\nconst _exp = () => size;\nconst _exp2 = () => shadow;\nconst _exp3 = () => size;\nconst _exp4 = () => props => props.width;\nconst _exp5 = () => props => {\n if (true) {\n return props.height;\n } else {\n return 200;\n }\n};\nconst _exp7 = () => unit;\nconst _exp8 = () => function (props) {\n return 200;\n};\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_t13jq05\",\n propsAsIs: false,\n vars: {\n \"t13jq05-0\": [_exp(), \"em\"],\n \"t13jq05-1\": [_exp2(), \"px\"],\n \"t13jq05-2\": [_exp3(), \"px\"],\n \"t13jq05-3\": [_exp4(), \"vw\"],\n \"t13jq05-4\": [_exp5(), \"px\"],\n \"t13jq05-5\": [_exp7(), \"fr\"],\n \"t13jq05-6\": [_exp8(), \"px\"]\n }\n});\"\n`;\n\nexports[`strategy shaker handles interpolation followed by unit 2`] = `\n\nCSS:\n\n.Title_t13jq05 {\n font-size: var(--t13jq05-0);\n text-shadow: black 1px var(--t13jq05-1), white -2px -2px;\n margin: var(--t13jq05-2);\n width: calc(2 * var(--t13jq05-3));\n height: var(--t13jq05-4);\n grid-template-columns: var(--t13jq05-5) 1fr 1fr var(--t13jq05-5);\n border-radius: var(--t13jq05-6);\n padding: 10px;\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker handles interpolation in css function followed by unit 1`] = `\n\"import { styled } from '@linaria/atomic';\nconst _exp = () => props => props.$rotateDeg;\nexport const Container = /*#__PURE__*/styled('div')({\n name: \"Container\",\n class: \"atm_tr_18309cv atm_vy_uuw12j Container_c13jq05\",\n propsAsIs: false,\n vars: {\n \"y6125t\": [_exp(), \"deg\"]\n },\n atomic: true\n});\"\n`;\n\nexports[`strategy shaker handles interpolation in css function followed by unit 2`] = `\n\nCSS:\n\n.atm_tr_18309cv{transform:rotate(var(--y6125t));}\n.atm_vy_uuw12j{width:200px;}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker handles nested blocks 1`] = `\n\"import { styled } from '@linaria/react';\nconst regular = () => \"arial\";\nconst _exp = () => regular;\nexport const Button = /*#__PURE__*/styled('button')({\n name: \"Button\",\n class: \"Button_b13jq05\",\n propsAsIs: false,\n vars: {\n \"b13jq05-0\": [_exp()]\n }\n});\"\n`;\n\nexports[`strategy shaker handles nested blocks 2`] = `\n\nCSS:\n\n.Button_b13jq05 {\n font-family: var(--b13jq05-0);\n\n &:hover {\n border-color: blue;\n }\n\n @media (max-width: 200px) {\n width: 100%;\n }\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker handles objects with enums as keys 1`] = `\n\"import { TestEnum } from './__fixtures__/ts-data.ts';\nexport const object = {\n [TestEnum.FirstValue]: \"TestEnum_FirstValue_t9vkbjs\",\n [TestEnum.SecondValue]: \"TestEnum_SecondValue_t17e3x2d\"\n};\"\n`;\n\nexports[`strategy shaker handles objects with enums as keys 2`] = `\n\nCSS:\n\n.TestEnum_FirstValue_t9vkbjs {}\n.TestEnum_SecondValue_t17e3x2d {}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker handles objects with numeric keys 1`] = `\n\"export const object = {\n stringKey: \"stringKey_s13jq05\",\n 42: \"_2__1vhermz\"\n};\"\n`;\n\nexports[`strategy shaker handles objects with numeric keys 2`] = `\n\nCSS:\n\n.stringKey_s13jq05 {}\n._2__1vhermz {}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker handles raw in variableNameConfig 1`] = `\n\"import { styled as atomicStyled } from '@linaria/atomic';\nimport { styled } from '@linaria/react';\nconst _exp = () => props => props.size;\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_t13jq05\",\n propsAsIs: false,\n vars: {\n \"t13jq05-0\": [_exp(), \"px\"]\n }\n});\nconst _exp2 = () => props => props.size;\nexport const Body = /*#__PURE__*/atomicStyled('h1')({\n name: \"Body\",\n class: \"atm_c8_1s69o7d Body_b1vhermz\",\n propsAsIs: false,\n vars: {\n \"1qqvhyq\": [_exp2(), \"px\"]\n },\n atomic: true\n});\"\n`;\n\nexports[`strategy shaker handles raw in variableNameConfig 2`] = `\n\nCSS:\n\n.Title_t13jq05 {\n font-size: t13jq05-0;\n}\n.atm_c8_1s69o7d.atm_c8_1s69o7d{font-size:1qqvhyq;}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker handles val in variableNameConfig 1`] = `\n\"import { styled as atomicStyled } from '@linaria/atomic';\nimport { styled } from '@linaria/react';\nconst _exp = () => props => props.size;\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_t13jq05\",\n propsAsIs: false,\n vars: {\n \"t13jq05-0\": [_exp(), \"px\"]\n }\n});\nconst _exp2 = () => props => props.size;\nexport const Body = /*#__PURE__*/atomicStyled('h1')({\n name: \"Body\",\n class: \"atm_c8_1g7eom2 Body_b1vhermz\",\n propsAsIs: false,\n vars: {\n \"1qqvhyq\": [_exp2(), \"px\"]\n },\n atomic: true\n});\"\n`;\n\nexports[`strategy shaker handles val in variableNameConfig 2`] = `\n\nCSS:\n\n.Title_t13jq05 {\n font-size: var(--t13jq05-0);\n}\n.atm_c8_1g7eom2.atm_c8_1g7eom2{font-size:var(--1qqvhyq);}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker handles wrapping another styled component 1`] = `\n\"const {\n styled\n} = require('@linaria/react');\nconst Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_t13jq05\",\n propsAsIs: false\n});\nconst _exp = () => Title;\nexport const BlueTitle = /*#__PURE__*/styled(_exp())({\n name: \"BlueTitle\",\n class: \"BlueTitle_b1vhermz\",\n propsAsIs: true\n});\nconst _exp2 = () => BlueTitle;\nexport const GreenTitle = /*#__PURE__*/styled(_exp2())({\n name: \"GreenTitle\",\n class: \"GreenTitle_g1egpet8\",\n propsAsIs: true\n});\"\n`;\n\nexports[`strategy shaker handles wrapping another styled component 2`] = `\n\nCSS:\n\n.Title_t13jq05 {\n color: red;\n}\n.BlueTitle_b1vhermz.Title_t13jq05 {\n font-size: 24px;\n color: blue;\n}\n.GreenTitle_g1egpet8.BlueTitle_b1vhermz.Title_t13jq05 {\n color: green;\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker hoistable identifiers 1`] = `\n\"import { styled } from '@linaria/react';\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_t13jq05\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker hoistable identifiers 2`] = `\n\nCSS:\n\n.Title_t13jq05 {\n &:before {\n content: \"42\"\n }\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker ignores external expressions 1`] = `\n\"import { styled } from '@linaria/react';\nconst generate = props => props.content;\nconst _exp = () => generate;\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_t13jq05\",\n propsAsIs: false,\n vars: {\n \"t13jq05-0\": [_exp()]\n }\n});\"\n`;\n\nexports[`strategy shaker ignores external expressions 2`] = `\n\nCSS:\n\n.Title_t13jq05 {\n &:before {\n content: \"var(--t13jq05-0)\"\n }\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker ignores inline arrow function expressions 1`] = `\n\"import { styled } from '@linaria/react';\nconst _exp = () => props => props.content;\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_t13jq05\",\n propsAsIs: false,\n vars: {\n \"t13jq05-0\": [_exp()]\n }\n});\"\n`;\n\nexports[`strategy shaker ignores inline arrow function expressions 2`] = `\n\nCSS:\n\n.Title_t13jq05 {\n &:before {\n content: \"var(--t13jq05-0)\"\n }\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker ignores inline vanilla function expressions 1`] = `\n\"import { styled } from '@linaria/react';\nconst _exp = () => function (props) {\n return props.content;\n};\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_t13jq05\",\n propsAsIs: false,\n vars: {\n \"t13jq05-0\": [_exp()]\n }\n});\"\n`;\n\nexports[`strategy shaker ignores inline vanilla function expressions 2`] = `\n\nCSS:\n\n.Title_t13jq05 {\n &:before {\n content: \"var(--t13jq05-0)\"\n }\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker includes unreferenced styles for :global 1`] = `\n\"import { styled } from '@linaria/react';\nconst a = \"a_a13jq05\";\nconst B = /*#__PURE__*/styled('div')({\n name: \"B\",\n class: \"B_b1vhermz\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker includes unreferenced styles for :global 2`] = `\n\nCSS:\n\n.a_a13jq05 {\n :global() {\n .title {\n font-size: 14px;\n }\n }\n}\n.B_b1vhermz {\n :global(.title) {\n font-size: 14px;\n }\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker inlines array styles as CSS string 1`] = `\n\"import { styled } from '@linaria/react';\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_t13jq05\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker inlines array styles as CSS string 2`] = `\n\nCSS:\n\n.Title_t13jq05 {\n flex: 1; display: block; height: 24px;\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker inlines array styles as CSS string 3`] = `\n\"import { styled } from '@linaria/react';\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_t13jq05\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker inlines array styles as CSS string 4`] = `\n\nCSS:\n\n.Title_t13jq05 {\n position: absolute; top: 0; right: 0; bottom: 0; left: 0;\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker inlines object styles as CSS string 1`] = `\n\"import { styled } from '@linaria/react';\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_t13jq05\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker inlines object styles as CSS string 2`] = `\n\nCSS:\n\n.Title_t13jq05 {\n --color-primaryText: #222; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 1; min-height: 420px; &.shouldNotBeChanged { border-color: #fff; } @media (min-width: 200px) { -webkit-opacity: 0.8; -moz-opacity: 0.8; -ms-opacity: 0.8; -o-opacity: 0.8; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; -webkit-transition: 400ms; -moz-transition: 400ms; -o-transition: 400ms; -ms-transition: 400ms; }\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker inlines object styles as CSS string 3`] = `\n\"import { styled } from '@linaria/react';\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_t13jq05\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker inlines object styles as CSS string 4`] = `\n\nCSS:\n\n.Title_t13jq05 {\n position: absolute; top: 0; right: 0; bottom: 0; left: 0;\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker it should not throw location error for hoisted identifier 1`] = `\n\"import React from 'react';\nexport default function Component() {\n return \"source0_s13jq05\";\n}\"\n`;\n\nexports[`strategy shaker it should not throw location error for hoisted identifier 2`] = `\n\nCSS:\n\n.source0_s13jq05 {opacity:5;}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker keeps cx import and removes css 1`] = `\n\"import { cx } from '@linaria/core';\nconst defaultStyle = \"defaultStyle_d13jq05\";\nexport const combined = cx(defaultStyle, Math.random() > 0.5 ? 'green' : 'red');\"\n`;\n\nexports[`strategy shaker keeps cx import and removes css 2`] = `\n\nCSS:\n\n.defaultStyle_d13jq05 {\n color: red;\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker non-hoistable identifiers 1`] = `\n\"<<DIRNAME>>/source.js: An error occurred when evaluating the expression:\n\n > days is not defined.\n\n Make sure you are not using a browser or Node specific API and all the variables are available in static context.\n Linaria have to extract pieces of your code to resolve the interpolated values.\n Defining styled component or class will not work inside:\n - function,\n - class,\n - method,\n - loop,\n because it cannot be statically determined in which context you use them.\n That's why some variables may be not defined during evaluation.\n \n 7 | export const Title = styled.h1\\`\n 8 | &:before {\n> 9 | content: \"\\${days}\"\n | ^^^^\n 10 | }\n 11 | \\`;\"\n`;\n\nexports[`strategy shaker outputs valid CSS classname 1`] = `\n\"import { styled } from '@linaria/react';\nexport const ΩPage$Title = /*#__PURE__*/styled('h1')({\n name: \"\\\\u03A9Page$Title\",\n class: \"\\\\u03A9Page_Title_\\\\u03C913jq05\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker outputs valid CSS classname 2`] = `\n\nCSS:\n\n.ΩPage_Title_ω13jq05 {\n font-size: 14px;\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker prevents class name collision 1`] = `\n\"import { styled } from '@linaria/react';\nconst size = () => 100;\nconst regular = () => \"arial\";\nconst _exp = () => size;\nconst _exp2 = () => props => props.color;\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_twgemqq\",\n propsAsIs: false,\n vars: {\n \"twgemqq-0\": [_exp(), \"px\"],\n \"twgemqq-1\": [_exp2()]\n }\n});\nconst _exp3 = () => regular;\nexport function Something() {\n const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_tjtmpns\",\n propsAsIs: false,\n vars: {\n \"tjtmpns-0\": [_exp3()]\n }\n });\n return <Title />;\n}\"\n`;\n\nexports[`strategy shaker prevents class name collision 2`] = `\n\nCSS:\n\n.Title_twgemqq {\n font-size: var(--twgemqq-0);\n color: var(--twgemqq-1)\n}\n.Title_tjtmpns {\n font-family: var(--tjtmpns-0);\n }\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker removes fake replacement patterns in string classNameSlug 1`] = `\n\"import { styled } from '@linaria/react';\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"__\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker removes fake replacement patterns in string classNameSlug 2`] = `\n\nCSS:\n\n.__ {\n font-size: 14px;\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker respects module-resolver plugin and don't show waring 1`] = `\n\"import { styled } from '@linaria/react';\nexport const H1 = /*#__PURE__*/styled('h1')({\n name: \"H1\",\n class: \"H1_hlxjig5\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker respects module-resolver plugin and don't show waring 2`] = `\n\nCSS:\n\n.H1_hlxjig5 {\n color: foo;\n}\n\nDependencies: ../re-exports\n\n`;\n\nexports[`strategy shaker respects module-resolver plugin and show waring 1`] = `\n\"import { styled } from '@linaria/react';\nexport const H1 = /*#__PURE__*/styled('h1')({\n name: \"H1\",\n class: \"H1_hlxjig5\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker respects module-resolver plugin and show waring 2`] = `\n\nCSS:\n\n.H1_hlxjig5 {\n color: foo;\n}\n\nDependencies: ../re-exports\n\n`;\n\nexports[`strategy shaker should apply stylis 1`] = `\n\".Title_t13jq05.Title_t13jq05>span{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\n\"\n`;\n\nexports[`strategy shaker should apply stylis 2`] = `\n\"import { styled } from '@linaria/react';\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_t13jq05\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker should apply stylis 3`] = `\n\nCSS:\n\n.Title_t13jq05 {\n && > span {\n display:flex;\n }\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker should eval component from a linaria library 1`] = `\n\"import { styled } from \"@linaria/react\";\nimport { Title } from \"./__fixtures__/linaria-ui-library/components/index\";\nconst _exp = () => Title;\nexport const StyledTitle = /*#__PURE__*/styled(_exp())({\n name: \"StyledTitle\",\n class: \"StyledTitle_s13jq05\",\n propsAsIs: true\n});\"\n`;\n\nexports[`strategy shaker should eval component from a linaria library 2`] = `\n\nCSS:\n\n.StyledTitle_s13jq05 {}\n\nDependencies: ./__fixtures__/linaria-ui-library/components/index\n\n`;\n\nexports[`strategy shaker should eval wrapped component from a linaria library 1`] = `\n\"import { styled } from \"@linaria/react\";\nimport { connect } from \"./__fixtures__/linaria-ui-library/hocs\";\nimport { Title } from \"./__fixtures__/linaria-ui-library/components/index\";\nconst _exp = () => connect(Title);\nexport const StyledTitle = /*#__PURE__*/styled(_exp())({\n name: \"StyledTitle\",\n class: \"StyledTitle_s13jq05\",\n propsAsIs: true\n});\"\n`;\n\nexports[`strategy shaker should eval wrapped component from a linaria library 2`] = `\n\nCSS:\n\n.StyledTitle_s13jq05 {}\n\nDependencies: ./__fixtures__/linaria-ui-library/hocs, ./__fixtures__/linaria-ui-library/components/index\n\n`;\n\nexports[`strategy shaker should handle shadowed identifier inside components 1`] = `\n\"import React from 'react';\nconst color = 'red';\nexport default function Component() {\n return React.createElement('div', {\n className: \"className_c13jq05\"\n });\n}\"\n`;\n\nexports[`strategy shaker should handle shadowed identifier inside components 2`] = `\n\nCSS:\n\n.className_c13jq05 {background-color:blue;}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker should ignore unused wildcard reexports 1`] = `\"export const square = \"square_s13jq05\";\"`;\n\nexports[`strategy shaker should ignore unused wildcard reexports 2`] = `\n\nCSS:\n\n.square_s13jq05 {\n color: foo1;\n}\n\nDependencies: ./__fixtures__/reexports\n\n`;\n\nexports[`strategy shaker should import react as namespace 1`] = `\n\"import { styled } from \"@linaria/react\";\nimport * as React from \"react\";\nconst Cmp = React.memo(() => null);\nconst _exp = () => Cmp;\nexport const StyledTitle = /*#__PURE__*/styled(_exp())({\n name: \"StyledTitle\",\n class: \"StyledTitle_s13jq05\",\n propsAsIs: true\n});\"\n`;\n\nexports[`strategy shaker should import react as namespace 2`] = `\n\nCSS:\n\n.StyledTitle_s13jq05 {}\n\nDependencies: react\n\n`;\n\nexports[`strategy shaker should interpolate imported components 1`] = `\"export const square = \"square_s13jq05\";\"`;\n\nexports[`strategy shaker should interpolate imported components 2`] = `\n\nCSS:\n\n.square_s13jq05 {\n .Title_t1us8k4s {\n color: red;\n }\n}\n\nDependencies: ./__fixtures__/complex-component\n\n`;\n\nexports[`strategy shaker should interpolate imported variables 1`] = `\"export const square = \"square_s13jq05\";\"`;\n\nexports[`strategy shaker should interpolate imported variables 2`] = `\n\nCSS:\n\n.square_s13jq05 {\n color: #fff\n}\n\nDependencies: ./__fixtures__/complex-component\n\n`;\n\nexports[`strategy shaker should not drop exported vars of renamed imports 1`] = `\n\"import { foo3 } from \"./__fixtures__/reexports\";\nexport const bar3 = foo3;\nexport const square = \"square_s13jq05\";\"\n`;\n\nexports[`strategy shaker should not drop exported vars of renamed imports 2`] = `\n\nCSS:\n\n.square_s13jq05 {\n color: foo3;\n}\n\nDependencies: ./__fixtures__/reexports\n\n`;\n\nexports[`strategy shaker should not eval components from a non-linaria library 1`] = `\n\"import { styled } from \"@linaria/react\";\nimport { Title } from \"./__fixtures__/non-linaria-ui-library/index\";\nconst _exp = () => Title;\nexport const StyledTitle = /*#__PURE__*/styled(_exp())({\n name: \"StyledTitle\",\n class: \"StyledTitle_s13jq05\",\n propsAsIs: true\n});\"\n`;\n\nexports[`strategy shaker should not eval components from a non-linaria library 2`] = `\n\nCSS:\n\n.StyledTitle_s13jq05 {}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker should not eval non-linaria component from a linaria library 1`] = `\n\"import { styled } from \"@linaria/react\";\nimport { Title } from \"./__fixtures__/linaria-ui-library/non-linaria-components\";\nconst _exp = () => Title;\nexport const StyledTitle = /*#__PURE__*/styled(_exp())({\n name: \"StyledTitle\",\n class: \"StyledTitle_s13jq05\",\n propsAsIs: true\n});\"\n`;\n\nexports[`strategy shaker should not eval non-linaria component from a linaria library 2`] = `\n\nCSS:\n\n.StyledTitle_s13jq05 {}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker should not eval wrapped component from a non-linaria library 1`] = `\n\"import { styled } from \"@linaria/react\";\nimport { connect } from \"./__fixtures__/linaria-ui-library/hocs\";\nimport { Title } from \"./__fixtures__/non-linaria-ui-library/index\";\nconst _exp = () => connect(Title);\nexport const StyledTitle = /*#__PURE__*/styled(_exp())({\n name: \"StyledTitle\",\n class: \"StyledTitle_s13jq05\",\n propsAsIs: true\n});\"\n`;\n\nexports[`strategy shaker should not eval wrapped component from a non-linaria library 2`] = `\n\nCSS:\n\n.StyledTitle_s13jq05 {}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker should not import types 1`] = `\n\"import { styled } from \"@linaria/react\";\nimport { Title } from \"./__fixtures__/linaria-ui-library/components/index\";\nimport { ComponentType } from \"./__fixtures__/linaria-ui-library/types\";\nconst map = new Map<string, ComponentType>().set('Title', Title);\nconst Gate = (props: {\n type: ComponentType;\n className: string;\n}) => {\n const {\n className,\n type\n } = props;\n const Component = map.get(type);\n return <Component className={className} />;\n};\nconst _exp = () => Gate;\nexport const StyledTitle = /*#__PURE__*/styled(_exp())({\n name: \"StyledTitle\",\n class: \"StyledTitle_s18alru3\",\n propsAsIs: true\n});\"\n`;\n\nexports[`strategy shaker should not import types 2`] = `\n\nCSS:\n\n.StyledTitle_s18alru3 {}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker should process \\`css\\` calls inside components 1`] = `\n\"import React from 'react';\nexport function Component() {\n const className = \"className_c13jq05\";\n return React.createElement(\"div\", {\n className\n });\n}\"\n`;\n\nexports[`strategy shaker should process \\`css\\` calls inside components 2`] = `\n\nCSS:\n\n.className_c13jq05 {\n opacity: 0.2;\n }\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker should process \\`css\\` calls referencing other \\`css\\` calls inside components 1`] = `\n\"import React from 'react';\nexport function Component() {\n const outer = \"outer_o13jq05\";\n const inner = \"inner_i1vhermz\";\n return React.createElement(\"div\", {\n className: outer\n }, \"outer\", React.createElement(\"div\", {\n className: inner\n }, \"inner\"));\n}\"\n`;\n\nexports[`strategy shaker should process \\`css\\` calls referencing other \\`css\\` calls inside components 2`] = `\n\nCSS:\n\n.outer_o13jq05 {\n color: red;\n }\n.inner_i1vhermz {\n color: green;\n .outer_o13jq05:hover & {\n color: blue;\n }\n }\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker should process \\`css\\` calls with complex interpolation inside components 1`] = `\n\"import React from 'react';\nexport function Component() {\n const className = \"className_c1vhermz\";\n return React.createElement(\"div\", {\n className\n });\n}\"\n`;\n\nexports[`strategy shaker should process \\`css\\` calls with complex interpolation inside components 2`] = `\n\nCSS:\n\n.cell_c13jq05 {\n opacity: 0;\n }\n.className_c1vhermz {\n opacity: 0.5;\n font-size: 42\n font-size: 42\n\n &:hover .cell_c13jq05 {\n opacity: 0.2;\n }\n }\n\nDependencies: ./__fixtures__/sample-script\n\n`;\n\nexports[`strategy shaker should process \\`styled\\` calls inside components 1`] = `\n\"import React from 'react';\nimport { styled } from '@linaria/react';\nexport function Component() {\n const MyComponent = /*#__PURE__*/styled('h1')({\n name: \"MyComponent\",\n class: \"MyComponent_m13jq05\",\n propsAsIs: false\n });\n return React.createElement(MyComponent);\n}\"\n`;\n\nexports[`strategy shaker should process \\`styled\\` calls inside components 2`] = `\n\nCSS:\n\n.MyComponent_m13jq05 {\n opacity: 0.2;\n }\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker should process \\`styled\\` calls with complex interpolation inside components 1`] = `\n\"import React from 'react';\nimport { styled } from '@linaria/react';\nexport function Component() {\n const MyComponent = /*#__PURE__*/styled('h1')({\n name: \"MyComponent\",\n class: \"MyComponent_m1egpet8\",\n propsAsIs: false\n });\n return React.createElement(MyComponent);\n}\"\n`;\n\nexports[`strategy shaker should process \\`styled\\` calls with complex interpolation inside components 2`] = `\n\nCSS:\n\n.Styled1_s13jq05 {\n opacity: 0.5\n}\n.cell_c1vhermz {\n opacity: 0;\n }\n.MyComponent_m1egpet8 {\n opacity: 0.5;\n\n &:hover .cell_c1vhermz {\n opacity: 0.2;\n }\n .Styled1_s13jq05 {\n font-size: 1;\n }\n }\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker should process circular imports 1`] = `\n\"import { styled } from '@linaria/react';\nexport const H1 = /*#__PURE__*/styled('h1')({\n name: \"H1\",\n class: \"H1_h13jq05\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker should process circular imports 2`] = `\n\nCSS:\n\n.H1_h13jq05 {\n color: bar;\n}\n\nDependencies: ./__fixtures__/circular-imports\n\n`;\n\nexports[`strategy shaker should process dynamic require 1`] = `\"export const square = \"square_s13jq05\";\"`;\n\nexports[`strategy shaker should process dynamic require 2`] = `\n\nCSS:\n\n.square_s13jq05 {\n div:before {\n content: foo2;\n }\n}\n\nDependencies: ./__fixtures__/foo\n\n`;\n\nexports[`strategy shaker should process module.exports = require(…) 1`] = `\"export const square = \"square_s13jq05\";\"`;\n\nexports[`strategy shaker should process module.exports = require(…) 2`] = `\n\nCSS:\n\n.square_s13jq05 {\n div:before {\n content: foo;\n }\n}\n\nDependencies: ./__fixtures__/module-reexport\n\n`;\n\nexports[`strategy shaker should process unary expressions in interpolation 1`] = `\n\"export const class1 = \"class1_c13jq05\";\nexport const class2 = \"class2_c1vhermz\";\"\n`;\n\nexports[`strategy shaker should process unary expressions in interpolation 2`] = `\n\nCSS:\n\n.class1_c13jq05 {width:1337px;}\n.class2_c1vhermz {width:1337px;}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker should shake out identifiers that are referenced only in types 1`] = `\n\"import { styled } from \"@linaria/react\";\nimport * as yup from \"yup\";\nimport { Form } from \"./__fixtures__/linaria-ui-library/components/index\";\nconst validationSchema = yup.object();\ntype IModel = yup.InferType<typeof validationSchema>;\nconst Editor = () => {\n const initial: IModel = {};\n return <Form schema={validationSchema} data={initial} />;\n};\nconst _exp = () => Editor;\nexport const StyledEditor = /*#__PURE__*/styled(_exp())({\n name: \"StyledEditor\",\n class: \"StyledEditor_s18alru3\",\n propsAsIs: true\n});\"\n`;\n\nexports[`strategy shaker should shake out identifiers that are referenced only in types 2`] = `\n\nCSS:\n\n.StyledEditor_s18alru3 {}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker should work with String and Number object 1`] = `\"export const style = \"style_s13jq05\";\"`;\n\nexports[`strategy shaker should work with String and Number object 2`] = `\n\nCSS:\n\n.style_s13jq05 {\n width: 100%;\n opacity: 0.75;\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker should work with built-in modules 1`] = `\"export const square = \"square_s13jq05\";\"`;\n\nexports[`strategy shaker should work with built-in modules 2`] = `\n\nCSS:\n\n.square_s13jq05 {\n background: url(https://example.com/);\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker should work with generated classnames as selectors 1`] = `\n\"export const text = \"text_t13jq05\";\nexport const square = \"square_s1vhermz\";\"\n`;\n\nexports[`strategy shaker should work with generated classnames as selectors 2`] = `\n\nCSS:\n\n.text_t13jq05 {}\n.square_s1vhermz {\n .text_t13jq05 {\n color: red;\n }\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker should work with short-circuit imports 1`] = `\"export const StyledTitle = \"StyledTitle_s13jq05\";\"`;\n\nexports[`strategy shaker should work with short-circuit imports 2`] = `\n\nCSS:\n\n.StyledTitle_s13jq05 {\n content: \"2a\";\n}\n\nDependencies: ./__fixtures__/self-import\n\n`;\n\nexports[`strategy shaker should work with wildcard imports 1`] = `\"export const square = \"square_s13jq05\";\"`;\n\nexports[`strategy shaker should work with wildcard imports 2`] = `\n\nCSS:\n\n.square_s13jq05 {\n .Title_t1us8k4s {\n color: #fff;\n }\n}\n\nDependencies: ./__fixtures__/complex-component\n\n`;\n\nexports[`strategy shaker should work with wildcard reexports 1`] = `\"export const square = \"square_s13jq05\";\"`;\n\nexports[`strategy shaker should work with wildcard reexports 2`] = `\n\nCSS:\n\n.square_s13jq05 {\n color: foo1;\n}\n\nDependencies: ./__fixtures__/reexports\n\n`;\n\nexports[`strategy shaker should wrap memoized components 1`] = `\n\"import React from 'react';\nimport { styled } from '@linaria/react';\nconst MyComponent = React.memo(() => <div />);\nconst _exp = () => MyComponent;\nexport default /*#__PURE__*/styled(_exp())({\n name: \"source0\",\n class: \"source0_swgemqq\",\n propsAsIs: true\n});\"\n`;\n\nexports[`strategy shaker should wrap memoized components 2`] = `\n\nCSS:\n\n.source0_swgemqq {\n color: red;\n}\n\nDependencies: react\n\n`;\n\nexports[`strategy shaker simplifies react components 1`] = `\n\"import React from 'react';\nimport { styled } from '@linaria/react';\nimport constant from './broken-dependency';\nconst FuncComponent = props => <div>{props.children + constant}</div>;\nclass ClassComponent extends React.PureComponent {\n method() {\n return constant;\n }\n render() {\n return <div>{props.children + constant}</div>;\n }\n}\nconst ComplexFunctionComponent = props => {\n if (import.meta.env.PROD) {\n return <div>{props.children + constant}</div>;\n }\n return null;\n};\nconst _exp = () => FuncComponent;\nexport const StyledFunc = /*#__PURE__*/styled(_exp())({\n name: \"StyledFunc\",\n class: \"StyledFunc_swgemqq\",\n propsAsIs: true\n});\nconst _exp2 = () => ClassComponent;\nexport const StyledClass = /*#__PURE__*/styled(_exp2())({\n name: \"StyledClass\",\n class: \"StyledClass_sjtmpns\",\n propsAsIs: true\n});\"\n`;\n\nexports[`strategy shaker simplifies react components 2`] = `\n\nCSS:\n\n.StyledFunc_swgemqq {\n color: red;\n}\n.StyledClass_sjtmpns {\n color: blue;\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker simplifies transpiled react components 1`] = `\n\"import * as ReactNS from 'react';\nimport React from 'react';\nimport { createElement } from 'react';\nimport { styled } from '@linaria/react';\nimport constant from './broken-dependency';\nconst A = () => ReactNS.createElement('div', {}, constant);\nconst B = () => createElement(A, {}, constant);\nconst C = () => React.createElement(FuncComponent, {}, constant);\nconst _exp = () => C;\nexport const D = /*#__PURE__*/styled(_exp())({\n name: \"D\",\n class: \"D_dwgemqq\",\n propsAsIs: true\n});\"\n`;\n\nexports[`strategy shaker simplifies transpiled react components 2`] = `\n\nCSS:\n\n.D_dwgemqq {\n color: red;\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker simplifies transpiled react components CJS 1`] = `\n\"var _interopRequireWildcard = require(\"@babel/runtime/helpers/interopRequireWildcard\").default;\nvar React = _interopRequireWildcard(require(\"react\"));\nvar styled = require('@linaria/react').styled;\nvar constant = require('./broken-dependency').default;\nconst A = () => React.createElement('div', {}, constant);\nconst B = () => React.createElement(A, {}, constant);\nconst C = () => React.createElement(FuncComponent, {}, constant);\nconst _exp = () => C;\nexports.D = /*#__PURE__*/styled(_exp())({\n name: \"source0\",\n class: \"source0_swgemqq\",\n propsAsIs: true\n});\"\n`;\n\nexports[`strategy shaker simplifies transpiled react components CJS 2`] = `\n\nCSS:\n\n.source0_swgemqq {\n color: red;\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker supports both css and styled tags 1`] = `\n\"import { styled } from '@linaria/react';\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_t13jq05\",\n propsAsIs: false\n});\nexport const title = \"title_t1vhermz\";\"\n`;\n\nexports[`strategy shaker supports both css and styled tags 2`] = `\n\nCSS:\n\n.Title_t13jq05 {\n font-size: 14px;\n}\n.title_t1vhermz {\n color: blue;\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker throws codeframe error when evaluation fails 1`] = `\n\"<<DIRNAME>>/source.js: An error occurred when evaluating the expression:\n\n > This will fail.\n\n Make sure you are not using a browser or Node specific API and all the variables are available in static context.\n Linaria have to extract pieces of your code to resolve the interpolated values.\n Defining styled component or class will not work inside:\n - function,\n - class,\n - method,\n - loop,\n because it cannot be statically determined in which context you use them.\n That's why some variables may be not defined during evaluation.\n \n 4 |\n 5 | export const Title = styled.h1\\`\n> 6 | font-size: \\${foo()}px;\n | ^^^^^\n 7 | \\`;\"\n`;\n\nexports[`strategy shaker throws if couldn't determine a display name 1`] = `\n\"<<DIRNAME>>/.js: Couldn't determine a name for the component. Ensure that it's either:\n- Assigned to a variable\n- Is an object property\n- Is a prop in a JSX element\n\n 1 | import { styled } from '@linaria/react';\n 2 |\n> 3 | export default styled.h1\\`\n | ^^^^^^\n 4 | font-size: 14px;\n 5 | \\`;\"\n`;\n\nexports[`strategy shaker throws when contains unsupported expression 1`] = `\n\"<<DIRNAME>>/source.js: css tag cannot handle '() => size' as an interpolated value\n 4 |\n 5 | const title = css\\`\n> 6 | font-size: \\${() => size}px;\n | ^^^^^^^^^^\n 7 | \\`;\"\n`;\n\nexports[`strategy shaker throws when interpolation evaluates to NaN 1`] = `\n\"<<DIRNAME>>/source.js: The expression evaluated to 'NaN', which is probably a mistake. If you want it to be inserted into CSS, explicitly cast or transform the value to a string, e.g. - 'String(height)'.\n 4 |\n 5 | export const Title = styled.h1\\`\n> 6 | height: \\${height}px;\n | ^^^^^^\n 7 | \\`;\"\n`;\n\nexports[`strategy shaker throws when interpolation evaluates to null 1`] = `\n\"<<DIRNAME>>/source.js: The expression evaluated to 'null', which is probably a mistake. If you want it to be inserted into CSS, explicitly cast or transform the value to a string, e.g. - 'String(color)'.\n 4 |\n 5 | export const Title = styled.h1\\`\n> 6 | color: \\${color};\n | ^^^^^\n 7 | \\`;\"\n`;\n\nexports[`strategy shaker throws when interpolation evaluates to undefined 1`] = `\n\"<<DIRNAME>>/source.js: The expression evaluated to 'undefined', which is probably a mistake. If you want it to be inserted into CSS, explicitly cast or transform the value to a string, e.g. - 'String(fontSize)'.\n 4 |\n 5 | export const Title = styled.h1\\`\n> 6 | font-size: \\${fontSize};\n | ^^^^^^^^\n 7 | \\`;\"\n`;\n\nexports[`strategy shaker transpiles css template literal 1`] = `\"export const title = \"title_t13jq05\";\"`;\n\nexports[`strategy shaker transpiles css template literal 2`] = `\n\nCSS:\n\n.title_t13jq05 {\n font-size: 14px;\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker transpiles renamed css and atomic-css imports in the same file 1`] = `\n\"/* @flow */\n\nconst x = \"x_x13jq05\";\nconst y = \"atm_26_5scuol\";\nconsole.log(x, y);\"\n`;\n\nexports[`strategy shaker transpiles renamed css and atomic-css imports in the same file 2`] = `\n\nCSS:\n\n.x_x13jq05 {\n background: red;\n}\n.atm_26_5scuol{background:red;}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker transpiles renamed css from linaria v2 1`] = `\n\"const x = \"x_x13jq05\";\nconsole.log(x);\"\n`;\n\nexports[`strategy shaker transpiles renamed css from linaria v2 2`] = `\n\nCSS:\n\n.x_x13jq05 {\n background: red;\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker transpiles renamed styled and atomic-styled imports in the same file 1`] = `\n\"/* @flow */\n\nimport { styled as reactStyled } from '@linaria/react';\nimport { styled as atomicStyled } from '@linaria/atomic';\nconst StyledComponent = /*#__PURE__*/reactStyled('div')({\n name: \"StyledComponent\",\n class: \"StyledComponent_s13jq05\",\n propsAsIs: false\n});\nconst _exp = () => StyledComponent;\nconst StyledComponent2 = /*#__PURE__*/reactStyled(_exp())({\n name: \"StyledComponent2\",\n class: \"StyledComponent2_s1vhermz\",\n propsAsIs: true\n});\nconst AtomicComponent = /*#__PURE__*/atomicStyled('div')({\n name: \"AtomicComponent\",\n class: \"atm_26_5scuol AtomicComponent_a1egpet8\",\n propsAsIs: false,\n atomic: true\n});\nconst _exp2 = () => AtomicComponent;\nconst AtomicComponent2 = /*#__PURE__*/atomicStyled(_exp2())({\n name: \"AtomicComponent2\",\n class: \"atm_26_13q2bts AtomicComponent2_avc9xb3\",\n propsAsIs: true,\n atomic: true\n});\nconsole.log(StyledComponent, StyledComponent2, AtomicComponent, AtomicComponent2);\"\n`;\n\nexports[`strategy shaker transpiles renamed styled and atomic-styled imports in the same file 2`] = `\n\nCSS:\n\n.StyledComponent_s13jq05 {\n background: red;\n}\n.StyledComponent2_s1vhermz.StyledComponent_s13jq05 {\n background: blue;\n}\n.atm_26_5scuol{background:red;}\n.atm_26_13q2bts.atm_26_13q2bts{background:blue;}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker transpiles renamed styled import 1`] = `\n\"import { styled as custom } from '@linaria/react';\nexport const Title = /*#__PURE__*/custom('h1')({\n name: \"Title\",\n class: \"Title_t13jq05\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker transpiles renamed styled import 2`] = `\n\nCSS:\n\n.Title_t13jq05 {\n font-size: 14px;\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker transpiles styled template literal with TS component 1`] = `\n\"import { styled } from '@linaria/react';\ntype Props = {\n className?: string;\n children?: React.ReactNode;\n};\nexport const Title = /*#__PURE__*/styled(() => {})({\n name: \"Title\",\n class: \"Title_t9vkbjs\",\n propsAsIs: true\n});\"\n`;\n\nexports[`strategy shaker transpiles styled template literal with TS component 2`] = `\n\nCSS:\n\n.Title_t9vkbjs {\n font-size: 14px;\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker transpiles styled template literal with function and component 1`] = `\n\"import { styled } from '@linaria/react';\nconst Heading = () => null;\nconst _exp = () => Heading;\nexport const Title = /*#__PURE__*/styled(_exp())({\n name: \"Title\",\n class: \"Title_t13jq05\",\n propsAsIs: true\n});\"\n`;\n\nexports[`strategy shaker transpiles styled template literal with function and component 2`] = `\n\nCSS:\n\n.Title_t13jq05 {\n font-size: 14px;\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker transpiles styled template literal with function and tag 1`] = `\n\"import { styled } from '@linaria/react';\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_t13jq05\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker transpiles styled template literal with function and tag 2`] = `\n\nCSS:\n\n.Title_t13jq05 {\n font-size: 14px;\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker transpiles styled template literal with object 1`] = `\n\"import { styled } from '@linaria/react';\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_t13jq05\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker transpiles styled template literal with object 2`] = `\n\nCSS:\n\n.Title_t13jq05 {\n font-size: 14px;\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker transpiles with typed fn as interpolated value 1`] = `\n\"import { styled } from '@linaria/react';\ntype Props = {\n className?: string;\n children?: React.ReactNode;\n};\nconst _exp = () => (props: Props) => props.className;\nexport const Title = /*#__PURE__*/styled('div')({\n name: \"Title\",\n class: \"Title_t9vkbjs\",\n propsAsIs: false,\n vars: {\n \"t9vkbjs-0\": [_exp()]\n }\n});\"\n`;\n\nexports[`strategy shaker transpiles with typed fn as interpolated value 2`] = `\n\nCSS:\n\n.Title_t9vkbjs {\n font-size: 14px;\n content: \"var(--t9vkbjs-0)\"\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker understands satisfies keyword 1`] = `\n\"interface ColorTokenMap {\n primary: string;\n secondary: string;\n}\nexport const text = \"text_t9vkbjs\";\"\n`;\n\nexports[`strategy shaker understands satisfies keyword 2`] = `\n\nCSS:\n\n.text_t9vkbjs {\n color: #111;\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker uses string passed in classNameSlug 1`] = `\n\"import { styled } from '@linaria/react';\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"t13jq05_Title_src_source_js_source__js_src\",\n propsAsIs: false\n});\"\n`;\n\nexports[`strategy shaker uses string passed in classNameSlug 2`] = `\n\nCSS:\n\n.t13jq05_Title_src_source_js_source__js_src {\n font-size: 14px;\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker uses string passed in variableNameSlug 1`] = `\n\"import { styled as atomicStyled } from '@linaria/atomic';\nimport { styled } from '@linaria/react';\nconst _exp = () => props => props.size;\nexport const Title = /*#__PURE__*/styled('h1')({\n name: \"Title\",\n class: \"Title_t13jq05\",\n propsAsIs: false,\n vars: {\n \"Title_t13jq05_StyledProcessor_1qqvhyq_0\": [_exp(), \"px\"]\n }\n});\nconst _exp2 = () => props => props.size;\nexport const Body = /*#__PURE__*/atomicStyled('h1')({\n name: \"Body\",\n class: \"atm_c8_1cjuufw Body_b1vhermz\",\n propsAsIs: false,\n vars: {\n \"Body_b1vhermz_AtomicStyledProcessor_1qqvhyq_0\": [_exp2(), \"px\"]\n },\n atomic: true\n});\"\n`;\n\nexports[`strategy shaker uses string passed in variableNameSlug 2`] = `\n\nCSS:\n\n.Title_t13jq05 {\n font-size: var(--Title_t13jq05_StyledProcessor_1qqvhyq_0);\n}\n.atm_c8_1cjuufw.atm_c8_1cjuufw{font-size:var(--Body_b1vhermz_AtomicStyledProcessor_1qqvhyq_0);}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker uses the same custom property for the same expression 1`] = `\n\"import { styled } from '@linaria/react';\nconst _exp2 = () => props => props.size;\nexport const Box = /*#__PURE__*/styled('div')({\n name: \"Box\",\n class: \"Box_b13jq05\",\n propsAsIs: false,\n vars: {\n \"b13jq05-0\": [_exp2(), \"px\"]\n }\n});\"\n`;\n\nexports[`strategy shaker uses the same custom property for the same expression 2`] = `\n\nCSS:\n\n.Box_b13jq05 {\n height: var(--b13jq05-0);\n width: var(--b13jq05-0);\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker uses the same custom property for the same identifier 1`] = `\n\"import { styled } from '@linaria/react';\nconst size = () => 100;\nconst _exp2 = () => size;\nexport const Box = /*#__PURE__*/styled('div')({\n name: \"Box\",\n class: \"Box_b13jq05\",\n propsAsIs: false,\n vars: {\n \"b13jq05-0\": [_exp2(), \"px\"]\n }\n});\"\n`;\n\nexports[`strategy shaker uses the same custom property for the same identifier 2`] = `\n\nCSS:\n\n.Box_b13jq05 {\n height: var(--b13jq05-0);\n width: var(--b13jq05-0);\n}\n\nDependencies: NA\n\n`;\n\nexports[`strategy shaker uses values from json 1`] = `\"export const eyeColorClass = \"eyeColorClass_e13jq05\";\"`;\n\nexports[`strategy shaker uses values from json 2`] = `\n\nCSS:\n\n.eyeColorClass_e13jq05 {\n color: blue;\n}\n\nDependencies: ./__fixtures__/sample-data.json\n\n`;\n" }, { "path": "packages/testkit/src/__snapshots__/transform.test.ts.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`doesn't rewrite an absolute path in url() declarations 1`] = `\n\".tpyglzj{background-image:url(/assets/test.jpg);}\n\"\n`;\n\nexports[`rewrites a relative path in url() declarations 1`] = `\n\".tpyglzj{background-image:url(../assets/test.jpg);background-image:url(\"../assets/test.jpg\");background-image:url('../assets/test.jpg');}\n\"\n`;\n\nexports[`rewrites multiple relative paths in url() declarations 1`] = `\n\"@font-face{font-family:Test;src:url(../assets/font.woff2) format(\"woff2\"),url(../assets/font.woff) format(\"woff\");}\n\"\n`;\n" }, { "path": "packages/testkit/src/__utils__/linaria-snapshot-serializer.ts", "content": "import type { WYWTransformMetadata } from '@wyw-in-js/transform';\nimport { withTransformMetadata } from '@wyw-in-js/transform';\n\ntype Serializer<T> = {\n serialize: (value: T) => string;\n test: (value: unknown) => value is T;\n};\n\nexport default {\n test: withTransformMetadata,\n serialize: ({ wywInJS }) => `\nCSS:\n\n${Object.keys(wywInJS.rules ?? {})\n .map((selector) =>\n wywInJS.rules[selector].atom\n ? wywInJS.rules[selector].cssText\n : `${selector} {${wywInJS.rules[selector].cssText}}`\n )\n .join('\\n')}\n\nDependencies: ${\n wywInJS.dependencies?.length ? wywInJS.dependencies.join(', ') : 'NA'\n }\n`,\n} as Serializer<{ wywInJS: WYWTransformMetadata & { rules?: any } }>;\n" }, { "path": "packages/testkit/src/babel.test.ts", "content": "/* eslint-disable no-restricted-syntax */\nimport { readFileSync } from 'fs';\nimport { stripVTControlCharacters as stripAnsi } from 'node:util';\nimport { dirname, join, resolve, sep } from 'path';\n\nimport * as babel from '@babel/core';\nimport type { PluginItem } from '@babel/core';\nimport { logger } from '@wyw-in-js/shared';\nimport type { Evaluator, FeatureFlags } from '@wyw-in-js/shared';\nimport {\n Entrypoint,\n EventEmitter,\n TransformCacheCollection,\n loadWywOptions,\n shaker,\n transform as wywTransform,\n} from '@wyw-in-js/transform';\nimport type {\n EntrypointEvent,\n OnEvent,\n OnActionStartArgs,\n OnActionFinishArgs,\n PluginOptions,\n Stage,\n} from '@wyw-in-js/transform';\nimport dedent from 'dedent';\n\nimport serializer from './__utils__/linaria-snapshot-serializer';\n\nexpect.addSnapshotSerializer(serializer);\n\nconst dirName = __dirname;\n\ntype PartialOptions = Partial<Omit<PluginOptions, 'features'>> & {\n features?: Partial<FeatureFlags>;\n};\n\ntype Options = [\n evaluator: Evaluator,\n linariaConfig?: PartialOptions,\n extension?: 'js' | 'ts' | 'jsx' | 'tsx',\n filename?: string,\n babelConfig?: babel.TransformOptions,\n];\n\nconst asyncResolve = (what: string, importer: string, stack: string[]) => {\n const where = [importer, ...stack].map((p) => dirname(p));\n try {\n return Promise.resolve(require.resolve(what, { paths: where }));\n } catch {\n return Promise.reject();\n }\n};\n\nconst getPresets = (extension: 'js' | 'ts' | 'jsx' | 'tsx') => {\n const presets: PluginItem[] = [];\n if (extension === 'ts' || extension === 'tsx') {\n presets.push(require.resolve('@babel/preset-typescript'));\n }\n\n if (extension === 'jsx' || extension === 'tsx') {\n presets.push(require.resolve('@babel/preset-react'));\n }\n\n return presets;\n};\n\nconst getLinariaConfig = (\n evaluator: Evaluator,\n linariaConfig: PartialOptions,\n presets: PluginItem[],\n stage?: Stage\n): PluginOptions => {\n const { features: customFeatures, ...restConfig } = linariaConfig;\n\n return loadWywOptions({\n babelOptions: {\n presets,\n plugins: [],\n },\n extensions: [\n '.cjs',\n '.cts',\n '.js',\n '.jsx',\n '.mjs',\n '.mts',\n '.ts',\n '.tsx',\n '.json',\n ],\n displayName: true,\n rules: [\n {\n action: evaluator,\n babelOptions: {\n plugins: [\n require.resolve('@babel/plugin-transform-modules-commonjs'),\n ],\n },\n },\n {\n test: /[\\\\/]node_modules[\\\\/](?!@linaria)/,\n action: 'ignore',\n },\n {\n test: /\\.json$/,\n action: 'ignore',\n },\n ],\n features: {\n ...customFeatures,\n happyDOM: false,\n softErrors: false,\n },\n stage,\n ...restConfig,\n });\n};\n\nasync function transform(\n originalCode: string,\n opts: Options,\n cache?: TransformCacheCollection,\n eventEmitter?: EventEmitter,\n filename = 'source'\n) {\n const [\n evaluator,\n linariaPartialConfig = {},\n extension = 'js',\n fullFilename = join(dirName, `${filename}.${extension}`),\n babelPartialConfig = {},\n ] = opts;\n\n const presets = getPresets(extension);\n const linariaConfig = getLinariaConfig(\n evaluator,\n linariaPartialConfig,\n presets,\n 'collect'\n );\n\n const services = {\n babel,\n cache,\n options: {\n filename: babelPartialConfig.filename ?? fullFilename,\n root: babelPartialConfig.root ?? undefined,\n inputSourceMap: babelPartialConfig.inputSourceMap ?? undefined,\n pluginOptions: linariaConfig,\n },\n eventEmitter,\n };\n const result = await wywTransform(services, originalCode, asyncResolve);\n\n return {\n cssText: result.cssText,\n code: result.code,\n metadata: {\n wywInJS: {\n rules: result.rules,\n dependencies: result.dependencies,\n cssText: result.cssText,\n },\n },\n };\n}\n\nasync function transformFile(filename: string, opts: Options) {\n const [evaluator, linariaPartialConfig = {}, extension = 'js'] = opts;\n const code = readFileSync(filename, 'utf8');\n return transform(code, [\n evaluator,\n linariaPartialConfig,\n extension,\n filename,\n ]);\n}\n\ndescribe('strategy shaker', () => {\n const evaluator = shaker;\n let onEvent: jest.Mock<void, Parameters<OnEvent>>;\n let onAction: jest.Mock<number, OnActionStartArgs | OnActionFinishArgs>;\n let onEntrypointEvent: jest.Mock<\n void,\n [idx: number, timestamp: number, event: EntrypointEvent]\n >;\n let emitter: EventEmitter;\n\n function hasNotBeenProcessed(filename: string) {\n expect(onEntrypointEvent).toHaveBeenCalledWith(\n expect.any(Number),\n expect.any(Number),\n expect.objectContaining({\n filename,\n type: 'created',\n })\n );\n\n const entrypointId = onEntrypointEvent.mock.calls.find(\n (call) => call[2].type === 'created' && call[2].filename === filename\n )![0];\n\n expect(onEntrypointEvent).not.toHaveBeenCalledWith(\n entrypointId,\n expect.any(Number),\n expect.objectContaining({\n type: 'actionCreated',\n actionType: 'explodeReexports',\n })\n );\n }\n\n beforeEach(() => {\n onEvent = jest.fn();\n onAction = jest.fn();\n onEntrypointEvent = jest.fn();\n emitter = new EventEmitter(onEvent, onAction, onEntrypointEvent);\n });\n\n it('transpiles styled template literal with object', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n\n export const Title = styled.h1\\`\n font-size: 14px;\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('should apply stylis', async () => {\n const { cssText, code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n\n export const Title = styled.h1\\`\n && > span {\n display:flex;\n }\n \\`;\n `,\n [evaluator]\n );\n\n expect(cssText).toMatchSnapshot();\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('uses string passed in classNameSlug', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n\n export const Title = styled('h1')\\`\n font-size: 14px;\n \\`;\n`,\n [\n evaluator,\n {\n classNameSlug: ['hash', 'title', 'file', 'name', 'ext', 'dir']\n .map((s) => `[${s}]`)\n .join('_'),\n },\n ]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('uses string passed in variableNameSlug', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled as atomicStyled } from '@linaria/atomic';\n import { styled } from '@linaria/react';\n\n export const Title = styled('h1')\\`\n font-size: ${'${props => props.size}px'};\n \\`;\n\n export const Body = atomicStyled('h1')\\`\n font-size: ${'${props => props.size}px'};\n \\`;\n`,\n [\n evaluator,\n {\n variableNameSlug: [\n 'componentName',\n 'componentSlug',\n 'processor',\n 'valueSlug',\n 'index',\n ]\n .map((s) => `[${s}]`)\n .join('_'),\n },\n ]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('removes fake replacement patterns in string classNameSlug', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n\n export const Title = styled('h1')\\`\n font-size: 14px;\n \\`;\n`,\n [\n evaluator,\n {\n classNameSlug: '[not]_[actual]_[replacements]',\n },\n ]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('handles fn passed in classNameSlug', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n\n export const Title = styled('h1')\\`\n font-size: 14px;\n \\`;\n`,\n [\n evaluator,\n {\n classNameSlug: (hash, title, vars) =>\n [\n hash,\n title,\n vars.hash,\n vars.title,\n vars.file,\n vars.name,\n vars.ext,\n vars.dir,\n ].join('_'),\n },\n ]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('handles fn passed in variableNameSlug', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled as atomicStyled } from '@linaria/atomic';\n import { styled } from '@linaria/react';\n\n export const Title = styled('h1')\\`\n font-size: ${'${props => props.size}px'};\n \\`;\n\n export const Body = atomicStyled('h1')\\`\n font-size: ${'${props => props.size}px'};\n \\`;\n`,\n [\n evaluator,\n {\n variableNameSlug: (context) =>\n `${context.valueSlug}__${context.componentName}__${\n context.precedingCss.match(/([\\w-]+)\\s*:\\s*$/)?.[1] ?? 'unknown'\n }`,\n },\n ]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('handles val in variableNameConfig', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled as atomicStyled } from '@linaria/atomic';\n import { styled } from '@linaria/react';\n\n export const Title = styled('h1')\\`\n font-size: ${'${props => props.size}px'};\n \\`;\n\n export const Body = atomicStyled('h1')\\`\n font-size: ${'${props => props.size}px'};\n \\`;\n`,\n [\n evaluator,\n {\n variableNameConfig: 'var',\n },\n ]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('handles dashes in variableNameConfig', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled as atomicStyled } from '@linaria/atomic';\n import { styled } from '@linaria/react';\n\n export const Title = styled('h1')\\`\n font-size: ${'${props => props.size}px'};\n \\`;\n\n export const Body = atomicStyled('h1')\\`\n font-size: ${'${props => props.size}px'};\n \\`;\n`,\n [\n evaluator,\n {\n variableNameConfig: 'dashes',\n },\n ]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('handles raw in variableNameConfig', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled as atomicStyled } from '@linaria/atomic';\n import { styled } from '@linaria/react';\n\n export const Title = styled('h1')\\`\n font-size: ${'${props => props.size}px'};\n \\`;\n\n export const Body = atomicStyled('h1')\\`\n font-size: ${'${props => props.size}px'};\n \\`;\n`,\n [\n evaluator,\n {\n variableNameConfig: 'raw',\n },\n ]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('transpiles styled template literal with function and tag', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n\n export const Title = styled('h1')\\`\n font-size: 14px;\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('transpiles renamed styled import', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled as custom } from '@linaria/react';\n\n export const Title = custom('h1')\\`\n font-size: 14px;\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('transpiles renamed css and atomic-css imports in the same file', async () => {\n const { code, metadata } = await transform(\n dedent`\n /* @flow */\n\n import { css as coreCss } from '@linaria/core';\n import { css as atomicCss } from '@linaria/atomic';\n\n const x = coreCss\\`\n background: red;\n \\`;\n\n const y = atomicCss\\`\n background: red;\n \\`;\n\n console.log(x, y);\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('transpiles renamed styled and atomic-styled imports in the same file', async () => {\n const { code, metadata } = await transform(\n dedent`\n /* @flow */\n\n import { styled as reactStyled } from '@linaria/react';\n import { styled as atomicStyled } from '@linaria/atomic';\n\n const StyledComponent = reactStyled.div\\`\n background: red;\n \\`;\n const StyledComponent2 = reactStyled(StyledComponent)\\`\n background: blue;\n \\`;\n\n const AtomicComponent = atomicStyled.div\\`\n background: red;\n \\`;\n const AtomicComponent2 = atomicStyled(AtomicComponent)\\`\n background: blue;\n \\`;\n\n console.log(StyledComponent, StyledComponent2, AtomicComponent, AtomicComponent2);\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('transpiles renamed css from linaria v2', async () => {\n const { code, metadata } = await transform(\n dedent`\n import {css as coreCss} from 'linaria';\n\n const x = coreCss\\`\n background: red;\n \\`;\n\n console.log(x);\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('transpiles styled template literal with function and component', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n const Heading = () => null;\n\n export const Title = styled(Heading)\\`\n font-size: 14px;\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('transpiles styled template literal with TS component', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n\n type Props = { className?: string; children?: React.ReactNode };\n\n export const Title = styled((props: Props) => null)\\`\n font-size: 14px;\n \\`;\n `,\n [\n evaluator,\n {\n evaluate: false,\n },\n 'ts',\n ]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('transpiles with typed fn as interpolated value', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n\n type Props = { className?: string; children?: React.ReactNode };\n\n export const Title = styled.div\\`\n font-size: 14px;\n content: \"${'${(props: Props) => props.className}'}\"\n \\`;\n `,\n [\n evaluator,\n {\n evaluate: false,\n },\n 'ts',\n ]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('outputs valid CSS classname', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n\n export const ΩPage$Title = styled.h1\\`\n font-size: 14px;\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('evaluates nested nested object interpolation', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { css } from '@linaria/core';\n\n const defaultStyle = css\\`\n color: red;\n padding-bottom: ${'${0}'}px;\n \\`;\n\n const obj = {\n [\\`&.${'${defaultStyle}'} .green\\`]: {\n display: \"inline-block\",\n border: \"1px solid green\",\n },\n };\n\n export const greenContentStyles = css\\`\n ${'${obj}'}\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('keeps cx import and removes css', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { css, cx } from '@linaria/core';\n\n const defaultStyle = css\\`\n color: red;\n \\`;\n\n export const combined = cx(defaultStyle, Math.random() > 0.5 ? 'green' : 'red');\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('evaluates and inlines expressions in scope', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n\n const color = 'blue';\n\n export const Title = styled.h1\\`\n color: ${'${color}'};\n width: ${'${100 / 3}'}%;\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('inlines object styles as CSS string', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n\n const cover = {\n '--color-primaryText': '#222',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n opacity: 1,\n minHeight: 420,\n\n '&.shouldNotBeChanged': {\n borderColor: '#fff',\n },\n\n '@media (min-width: 200px)': {\n WebkitOpacity: .8,\n MozOpacity: .8,\n msOpacity: .8,\n OOpacity: .8,\n WebkitBorderRadius: 2,\n MozBorderRadius: 2,\n msBorderRadius: 2,\n OBorderRadius: 2,\n WebkitTransition: '400ms',\n MozTransition: '400ms',\n OTransition: '400ms',\n msTransition: '400ms',\n }\n };\n\n export const Title = styled.h1\\`\n ${'${cover}'}\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('inlines array styles as CSS string', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n\n const styles = [\n { flex: 1 },\n { display: 'block', height: 24 },\n ];\n\n export const Title = styled.h1\\`\n ${'${styles}'}\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('handles interpolation followed by unit', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n\n const padding = 10;\n\n const size = () => 100;\n const shadow = () => 5;\n const unit = () => 1;\n\n export const Title = styled.h1\\`\n font-size: ${'${size}'}em;\n text-shadow: black 1px ${'${shadow}'}px, white -2px -2px;\n margin: ${'${size}'}px;\n width: calc(2 * ${'${props => props.width}'}vw);\n height: ${'${props => { if (true) { return props.height } else { return 200 } }}'}px;\n grid-template-columns: ${'${unit}'}fr 1fr 1fr ${'${unit}'}fr;\n border-radius: ${'${function(props) { return 200 }}'}px;\n padding: ${'${padding}'}px;\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('handles interpolation in css function followed by unit', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/atomic';\n\n const size = 200;\n\n export const Container = styled.div\\`\n transform: rotate(${'${props => props.$rotateDeg}'}deg);\n width: ${'${size}'}px;\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('uses the same custom property for the same identifier', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n\n const size = () => 100;\n\n export const Box = styled.div\\`\n height: ${'${size}'}px;\n width: ${'${size}'}px;\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('uses the same custom property for the same expression', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n\n export const Box = styled.div\\`\n height: ${'${props => props.size}'}px;\n width: ${'${props => props.size}'}px;\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('do not include in dependencies expressions from interpolation functions bodies', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n import constant from './broken-dependency-1';\n import modifier from './broken-dependency-2';\n\n export const Box = styled.div\\`\n height: ${'${props => props.size + constant}'}px;\n width: ${'${props => modifier(props.size)}'}px;\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('handles nested blocks', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n\n const regular = () => \"arial\";\n\n export const Button = styled.button\\`\n font-family: ${'${regular}'};\n\n &:hover {\n border-color: blue;\n }\n\n @media (max-width: 200px) {\n width: 100%;\n }\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('prevents class name collision', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n\n const size = () => 100;\n const regular = () => \"arial\";\n\n export const Title = styled.h1\\`\n font-size: ${'${size}'}px;\n color: ${'${props => props.color}'}\n \\`;\n\n export function Something() {\n const Title = styled.h1\\`\n font-family: ${'${regular}'};\n \\`;\n\n return <Title />;\n }\n `,\n [evaluator, {}, 'jsx']\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('does not output CSS if none present', async () => {\n const { code, metadata } = await transform(\n dedent`\n const number = 42;\n\n const title = String.raw\\`This is something\\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('does not output CSS property when value is a blank string', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { css } from '@linaria/core';\n\n export const title = css\\`\n font-size: ${''};\n margin: 6px;\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('transpiles css template literal', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { css } from '@linaria/core';\n\n export const title = css\\`\n font-size: 14px;\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('handles css template literal in object property', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { css } from '@linaria/core';\n\n const components = {\n title: css\\`\n font-size: 14px;\n \\`\n };\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('handles css template literal in JSX element', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { css } from '@linaria/core';\n\n <Title class={css\\` font-size: 14px; \\`} />\n `,\n [evaluator, {}, 'jsx']\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('throws when contains unsupported expression', async () => {\n expect.assertions(1);\n\n try {\n await transform(\n dedent`\n import { css } from '@linaria/core';\n\n const size = 100;\n\n const title = css\\`\n font-size: ${'${() => size}'}px;\n \\`;\n `,\n [evaluator]\n );\n } catch (e) {\n expect(\n stripAnsi(\n (e as { message: string }).message.replace(\n dirName + sep,\n '<<DIRNAME>>/'\n )\n )\n ).toMatchSnapshot();\n }\n });\n\n it('supports both css and styled tags', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { css } from '@linaria/core';\n import { styled } from '@linaria/react';\n\n export const Title = styled.h1\\`\n font-size: 14px;\n \\`;\n\n export const title = css\\`\n color: blue;\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('does not include styles if not referenced anywhere', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { css } from '@linaria/core';\n import { styled } from '@linaria/react';\n\n const Title = styled.h1\\`\n font-size: 14px;\n \\`;\n\n const title = css\\`\n color: blue;\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('includes unreferenced styles for :global', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { css } from '@linaria/core';\n import { styled } from '@linaria/react';\n\n const a = css\\`\n :global() {\n .title {\n font-size: 14px;\n }\n }\n \\`;\n\n const B = styled.div\\`\n :global(.title) {\n font-size: 14px;\n }\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('handles objects with numeric keys', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { css } from '@linaria/core';\n\n export const object = {\n stringKey: css\\`\\`,\n 42: css\\`\\`,\n }\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('handles objects with enums as keys', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { css } from '@linaria/core';\n import { TestEnum } from './__fixtures__/ts-data.ts';\n\n export const object = {\n [TestEnum.FirstValue]: css\\`\\`,\n [TestEnum.SecondValue]: css\\`\\`,\n }\n `,\n [evaluator, {}, 'ts']\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('compiles atomic css', async () => {\n const { code, metadata } = await transform(\n dedent`\n /* @flow */\n\n import { css } from '@linaria/atomic';\n\n const x = css\\`\n background: red;\n height: 100px;\n \\`;\n\n console.log(x);\n\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('compiles atomic css with property priorities', async () => {\n const { code, metadata } = await transform(\n dedent`\n /* @flow */\n\n import { css } from '@linaria/atomic';\n\n const y = css\\`\n margin-left: 5px;\n \\`;\n\n const x = css\\`\n margin: 0;\n \\`;\n\n console.log(x, y);\n\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('compiles atomic css with at-rules and pseudo classes', async () => {\n const { code, metadata } = await transform(\n dedent`\n /* @flow */\n\n import { css } from '@linaria/atomic';\n\n const x = css\\`\n @media (max-width: 500px) {\n background: blue;\n }\n @media (min-width: 300px) {\n &:hover {\n background: purple;\n }\n }\n &:enabled {\n width: 100%;\n }\n background: red;\n height: 100px;\n \\`;\n\n console.log(x);\n\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('compiles atomic css with at-rules and property priorities', async () => {\n const { code, metadata } = await transform(\n dedent`\n /* @flow */\n\n import { css } from '@linaria/atomic';\n\n const x = css\\`\n @media (max-width: 500px) {\n padding: 0;\n }\n @media (min-width: 300px) {\n &:hover {\n padding-top: 5px;\n }\n }\n &:enabled {\n padding-left: 6px;\n }\n padding-bottom: 7px;\n \\`;\n\n console.log(x);\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('compiles css with keyframes', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { css } from '@linaria/core';\n\n const x = css\\`\n @keyframes fade {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n animation: fade 1s infinite;\n\n background: red;\n height: 100px;\n \\`;\n\n console.log(x);\n\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('compiles atomic css with keyframes', async () => {\n const { code, metadata } = await transform(\n dedent`\n /* @flow */\n\n import { css } from '@linaria/atomic';\n\n const x = css\\`\n @keyframes fade {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n animation: fade 1s infinite;\n\n background: red;\n height: 100px;\n \\`;\n\n console.log(x);\n\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('compiles atomic styled with static css', async () => {\n const { code, metadata } = await transform(\n dedent`\n /* @flow */\n\n import { styled } from '@linaria/atomic';\n\n const Component = styled.div\\`\n color: blue;\n height: 100px;\n \\`;\n\n console.log(Component);\n\n `,\n [evaluator]\n );\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('compiles atomic css with unique atoms based on key value pairs', async () => {\n const { code, metadata } = await transform(\n dedent`\n /* @flow */\n import { css } from '@linaria/atomic';\n const x = css\\`\n height: 100px;\n \\`;\n const y = css\\`\n height: 99px\n \\`;\n console.log(x, y);\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('compiles atomic styled with plain css, static and dynamic interpolations', async () => {\n const { code, metadata } = await transform(\n dedent`\n /* @flow */\n\n import { styled } from '@linaria/atomic';\n\n const Component = styled.div\\`\n color: blue;\n height: 100px;\n margin: ${'${100 / 2}'}px;\n background-color: ${'${props => props.color}'};\n \\`;\n\n console.log(Component);\n\n `,\n [evaluator]\n );\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('compiles atoms that are shared between css and styled templates', async () => {\n const { code, metadata } = await transform(\n dedent`\n /* @flow */\n\n import { css } from '@linaria/atomic';\n import { styled } from '@linaria/atomic';\n\n const x = css\\`\n background: red;\n height: 100px;\n \\`\n\n const Component = styled.div\\`\n background: red;\n height: ${'${200 / 2}'}px;\n margin: 10px;\n color: ${'${props => props.color}'};\n \\`;\n\n console.log(x, Component);\n\n `,\n [evaluator]\n );\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('compiles atomic styled wrapping other components with extra priority', async () => {\n const { code, metadata } = await transform(\n dedent`\n /* @flow */\n\n import { styled } from '@linaria/atomic';\n\n const Component = styled.div\\`\n background-color: blue;\n height: 100px;\n \\`;\n\n const ComponentCompositing = styled(Component)\\`\n background: red;\n height: 105px;\n \\`;\n\n console.log(ComponentCompositing);\n\n `,\n [evaluator]\n );\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('compiles atomic styled without colliding by property', async () => {\n const { code, metadata } = await transform(\n dedent`\n /* @flow */\n\n import { styled } from '@linaria/atomic';\n\n export const Component = styled.ul\\`\n display: flex;\n padding: 0;\n \\`;\n\n export const Component2 = styled.ul\\`\n display: block;\n padding: 0;\n \\`;\n\n `,\n [evaluator]\n );\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('compiles atomic styled with dynamic interpolations as unique variables based on the interpolation text', async () => {\n const { code, metadata } = await transform(\n dedent`\n /* @flow */\n\n import { styled } from '@linaria/atomic';\n\n const Component = styled.div\\`\n color: ${'${props => props.color}'};\n border-color: ${'${props => props.color}'};\n background-color: ${'${props => props.backgroundColor}'};\n \\`;\n\n const Component2 = styled.div\\`\n color: ${'${props => props.color}'};\n border-color: ${'${props => props.color || \"black\"}'};\n \\`;\n\n console.log(Component, Component2);\n\n `,\n [evaluator]\n );\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('evaluates identifier in scope', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n\n const answer = 42;\n const foo = () => answer;\n const days = foo() + ' days';\n\n export const Title = styled.h1\\`\n &:before {\n content: \"${'${days}'}\"\n }\n \\`;\n `,\n [evaluator]\n );\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('hoistable identifiers', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n\n {\n var days = 42;\n }\n\n export const Title = styled.h1\\`\n &:before {\n content: \"${'${days}'}\"\n }\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('non-hoistable identifiers', async () => {\n expect.assertions(1);\n\n try {\n await transform(\n dedent`\n import { styled } from '@linaria/react';\n\n {\n const days = 42;\n }\n\n export const Title = styled.h1\\`\n &:before {\n content: \"${'${days}'}\"\n }\n \\`;\n `,\n [evaluator]\n );\n } catch (e) {\n expect(\n stripAnsi(\n (e as { message: string }).message.replace(\n dirName + sep,\n '<<DIRNAME>>/'\n )\n )\n ).toMatchSnapshot();\n }\n });\n\n it('evaluates imported typescript enums', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n import { Colors } from './__fixtures__/enums';\n\n export const Title = styled.h1\\`\n color: ${'${Colors.BLUE}'};\n \\`;\n `,\n [evaluator, {}, 'ts']\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('evaluates local expressions', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n\n const answer = 42;\n const foo = () => answer;\n\n export const Title = styled.h1\\`\n &:before {\n content: \"${\"${foo() + ' days'}\"}\"\n }\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('evaluates functions with nested identifiers', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n\n const objects = { key: { fontSize: 12 } };\n const foo = (k) => {\n const obj = objects[k];\n return obj;\n };\n\n export const Title = styled.h1\\`\n ${\"${foo('key')}\"}\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('evaluates expressions with dependencies', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n import slugify from './__fixtures__/slugify';\n\n export const Title = styled.h1\\`\n &:before {\n content: \"${\"${slugify('test')}\"}\"\n }\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('evaluates expressions with expressions depending on shared dependency', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n const slugify = require('./__fixtures__/slugify').default;\n\n const boo = t => slugify(t) + 'boo';\n const bar = t => slugify(t) + 'bar';\n\n export const Title = styled.h1\\`\n &:before {\n content: \"${\"${boo('test') + bar('test')}\"}\"\n }\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('evaluates multiple expressions with shared dependency', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n const slugify = require('./__fixtures__/slugify').default;\n\n const boo = t => slugify(t) + 'boo';\n const bar = t => slugify(t) + 'bar';\n\n export const Title = styled.h1\\`\n &:before {\n content: \"${\"${boo('test')}\"}\"\n content: \"${\"${bar('test')}\"}\"\n }\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('evaluates interpolations with sequence expression', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n let external = 0;\n export const Title = styled.h1\\`\n color: ${'${(external, () => \"blue\")}'};\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('evaluates dependencies with sequence expression', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n let external = 0;\n const color = (external, () => 'blue');\n\n export const Title = styled.h1\\`\n color: ${'${color}'};\n \\`;\n `,\n [evaluator]\n );\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('evaluates component interpolations', async () => {\n const { code, metadata } = await transform(\n dedent`\n const { styled } = require('@linaria/react');\n\n export const Title = styled.h1\\`\n color: red;\n \\`;\n\n export const Paragraph = styled.p\\`\n ${'${Title}'} {\n color: blue;\n }\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('throws when interpolation evaluates to undefined', async () => {\n expect.assertions(1);\n\n try {\n await transform(\n dedent`\n const { styled } = require('@linaria/react');\n\n let fontSize;\n\n export const Title = styled.h1\\`\n font-size: ${'${fontSize}'};\n \\`;\n `,\n [evaluator]\n );\n } catch (e) {\n expect(\n stripAnsi(\n (e as { message: string }).message.replace(\n dirName + sep,\n '<<DIRNAME>>/'\n )\n )\n ).toMatchSnapshot();\n }\n });\n\n it('throws when interpolation evaluates to null', async () => {\n expect.assertions(1);\n\n try {\n await transform(\n dedent`\n const { styled } = require('@linaria/react');\n\n const color = null;\n\n export const Title = styled.h1\\`\n color: ${'${color}'};\n \\`;\n `,\n [evaluator]\n );\n } catch (e) {\n expect(\n stripAnsi(\n (e as { message: string }).message.replace(\n dirName + sep,\n '<<DIRNAME>>/'\n )\n )\n ).toMatchSnapshot();\n }\n });\n\n it('throws when interpolation evaluates to NaN', async () => {\n expect.assertions(1);\n\n try {\n await transform(\n dedent`\n const { styled } = require('@linaria/react');\n\n const height = NaN;\n\n export const Title = styled.h1\\`\n height: ${'${height}'}px;\n \\`;\n `,\n [evaluator]\n );\n } catch (e) {\n expect(\n stripAnsi(\n (e as { message: string }).message.replace(\n dirName + sep,\n '<<DIRNAME>>/'\n )\n )\n ).toMatchSnapshot();\n }\n });\n\n it('handles wrapping another styled component', async () => {\n const { code, metadata } = await transform(\n dedent`\n const { styled } = require('@linaria/react');\n\n const Title = styled.h1\\`\n color: red;\n \\`;\n\n export const BlueTitle = styled(Title)\\`\n font-size: 24px;\n color: blue;\n \\`;\n\n export const GreenTitle = styled(BlueTitle)\\`\n color: green;\n \\`;\n `,\n [evaluator]\n );\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('handles indirect wrapping another styled component', async () => {\n const { code, metadata } = await transform(\n dedent`\n const { styled } = require('@linaria/react');\n\n const Title = styled.h1\\`\n color: red;\n \\`;\n\n const hoc = Cmp => Cmp;\n\n export const CustomTitle = styled(hoc(Title))\\`\n font-size: 24px;\n color: blue;\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('inlines object styles as CSS string', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n\n const fill = (top = 0, left = 0, right = 0, bottom = 0) => ({\n position: 'absolute',\n top,\n right,\n bottom,\n left,\n });\n\n export const Title = styled.h1\\`\n ${'${fill(0, 0)}'}\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('inlines array styles as CSS string', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n\n const fill = (top = 0, left = 0, right = 0, bottom = 0) => [\n { position: 'absolute' },\n {\n top,\n right,\n bottom,\n left,\n }\n ];\n\n export const Title = styled.h1\\`\n ${'${fill(0, 0)}'}\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('ignores inline arrow function expressions', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n\n export const Title = styled.h1\\`\n &:before {\n content: \"${'${props => props.content}'}\"\n }\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('simplifies react components', async () => {\n const div = '<div>{props.children + constant}</div>';\n const { code, metadata } = await transform(\n dedent`\n import React from 'react';\n import { styled } from '@linaria/react';\n import constant from './broken-dependency';\n\n const FuncComponent = (props) => ${div};\n\n class ClassComponent extends React.PureComponent {\n method() {\n return constant;\n }\n\n render() {\n return ${div};\n }\n }\n\n const ComplexFunctionComponent = (props) => {\n if (import.meta.env.PROD) {\n return ${div};\n }\n\n return null;\n }\n\n export const StyledFunc = styled(FuncComponent)\\`\n color: red;\n \\`;\n export const StyledClass = styled(ClassComponent)\\`\n color: blue;\n \\`;\n `,\n [evaluator, {}, 'jsx']\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('simplifies transpiled react components', async () => {\n const { code, metadata } = await transform(\n dedent`\n import * as ReactNS from 'react';\n import React from 'react';\n import { createElement } from 'react';\n import { styled } from '@linaria/react';\n import constant from './broken-dependency';\n\n const A = () => ReactNS.createElement('div', {}, constant);\n\n const B = () => createElement(A, {}, constant);\n\n const C = () => React.createElement(FuncComponent, {}, constant);\n\n export const D = styled(C)\\`\n color: red;\n \\`;\n `,\n [evaluator, {}, 'jsx']\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('simplifies transpiled react components CJS', async () => {\n const { code, metadata } = await transform(\n dedent`\n var _interopRequireWildcard = require(\"@babel/runtime/helpers/interopRequireWildcard\").default;\n var React = _interopRequireWildcard(require(\"react\"));\n var styled = require('@linaria/react').styled;\n var constant = require('./broken-dependency').default;\n\n const A = () => React.createElement('div', {}, constant);\n\n const B = () => React.createElement(A, {}, constant);\n\n const C = () => React.createElement(FuncComponent, {}, constant);\n\n exports.D = styled(C)\\`\n color: red;\n \\`;\n `,\n [evaluator, {}, 'jsx']\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('ignores inline vanilla function expressions', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n\n export const Title = styled.h1\\`\n &:before {\n content: \"${'${function(props) { return props.content }}'}\"\n }\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('ignores external expressions', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n\n const generate = props => props.content;\n\n export const Title = styled.h1\\`\n &:before {\n content: \"${'${generate}'}\"\n }\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('throws codeframe error when evaluation fails', async () => {\n expect.assertions(1);\n\n try {\n await transform(\n dedent`\n import { styled } from '@linaria/react';\n\n const foo = props => { throw new Error('This will fail') };\n\n export const Title = styled.h1\\`\n font-size: ${'${foo()}'}px;\n \\`;\n `,\n [evaluator]\n );\n } catch (e) {\n expect(\n stripAnsi(\n (e as { message: string }).message.replace(\n dirName + sep,\n '<<DIRNAME>>/'\n )\n )\n ).toMatchSnapshot();\n }\n });\n\n it('generates stable class names', async () => {\n const { code, metadata } = await transformFile(\n resolve(__dirname, './__fixtures__/components-library.js'),\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('derives display name from filename', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n\n export default styled.h1\\`\n font-size: 14px;\n \\`;\n `,\n [evaluator, {}, 'js', join(dirName, 'FancyName.js')]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('derives display name from parent folder name', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n\n export default styled.h1\\`\n font-size: 14px;\n \\`;\n `,\n [evaluator, {}, 'js', join(dirName, 'FancyName/index.js')]\n )!;\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it(\"throws if couldn't determine a display name\", async () => {\n expect.assertions(1);\n\n try {\n await transform(\n dedent`\n import { styled } from '@linaria/react';\n\n export default styled.h1\\`\n font-size: 14px;\n \\`;\n `,\n [\n evaluator,\n {\n extensions: [''],\n },\n 'js',\n join(dirName, '/.js'),\n ]\n );\n } catch (e) {\n expect(\n stripAnsi(\n (e as { message: string }).message.replace(\n dirName + sep,\n '<<DIRNAME>>/'\n )\n )\n ).toMatchSnapshot();\n }\n });\n\n it('does not strip istanbul coverage sequences', async () => {\n const cwd =\n process.platform === 'win32'\n ? 'C:\\\\Users\\\\project'\n : '/home/user/project';\n const withIstanbul = await babel.transformAsync(\n dedent`\n import { css } from './custom-css-tag';\n const a = 42;\n\n export const titleClass = css\\`\n height: ${'${a}'}px;\n \\`;\n `,\n {\n cwd,\n filename: 'file.js',\n plugins: [\n [\n // eslint-disable-next-line import/no-extraneous-dependencies\n require('babel-plugin-istanbul').default({\n ...babel,\n assertVersion: () => {},\n }),\n { cwd },\n ],\n ],\n }\n );\n\n if (!withIstanbul?.code) {\n return;\n }\n\n const { code, metadata } = await transform(withIstanbul.code, [\n evaluator,\n {\n tagResolver: (source, tag) => {\n if (source === './custom-css-tag' && tag === 'css') {\n return require.resolve('@linaria/core/processors/css');\n }\n\n return null;\n },\n },\n ]);\n\n // The output is different on Windows & POSIX-like system\n const normalizedCode = code\n .replace(/(cov_)\\w+([\\s(])/g, `$1__HASH__$2`)\n .replace(/(hash\\s?[:=]\\s\")\\w+(\")/g, `$1__HASH__$2`)\n .replace(/(path\\s?[:=]\\s\")[\\w:\\\\/.]+(\")/g, `$1__PATH__$2`);\n\n expect(normalizedCode).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n // PR #524\n it('should work with String and Number object', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { css } from '@linaria/core';\n\n export const style = css\\`\n width: ${'${new String(\"100%\")}'};\n opacity: ${'${new Number(0.75)}'};\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('should work with generated classnames as selectors', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { css } from \"@linaria/core\";\n\n export const text = css\\`\\`;\n\n export const square = css\\`\n .${'${text}'} {\n color: red;\n }\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('should process `css` calls inside components', async () => {\n const { code, metadata } = await transform(\n dedent`\n import React from 'react'\n import {css} from '@linaria/core'\n\n export function Component() {\n const opacity = 0.2;\n const className = css\\`\n opacity: ${'${opacity}'};\n \\`;\n\n return React.createElement(\"div\", { className });\n }\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('should process `styled` calls inside components', async () => {\n const { code, metadata } = await transform(\n dedent`\n import React from 'react'\n import { styled } from '@linaria/react'\n\n export function Component() {\n const opacity = 0.2;\n const MyComponent = styled.h1\\`\n opacity: ${'${opacity}'};\n \\`;\n\n return React.createElement(MyComponent);\n }\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('should process `css` calls with complex interpolation inside components', async () => {\n const { code, metadata } = await transform(\n dedent`\n import React from 'react'\n import {css} from '@linaria/core'\n import externalDep from './__fixtures__/sample-script';\n const globalObj = {\n opacity: 0.5,\n };\n\n export function Component() {\n const classes = {\n value: 0.2,\n cell: css\\`\n opacity: 0;\n \\`,\n };\n\n const classes2 = classes;\n const referencedExternalDep = externalDep\n\n const className = css\\`\n opacity: ${'${globalObj.opacity}'};\n font-size: ${'${externalDep}'}\n font-size: ${'${referencedExternalDep}'}\n\n &:hover .${'${classes2.cell}'} {\n opacity: ${'${classes.value}'};\n }\n \\`;\n\n return React.createElement(\"div\", { className });\n }\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('should process `css` calls referencing other `css` calls inside components', async () => {\n const { code, metadata } = await transform(\n dedent`\n import React from 'react'\n import {css} from '@linaria/core'\n\n export function Component() {\n const outer = css\\`\n color: red;\n \\`;\n\n const inner = css\\`\n color: green;\n .${'${outer}'}:hover & {\n color: blue;\n }\n \\`;\n\n return React.createElement(\"div\", { className: outer },\n \"outer\",\n React.createElement(\"div\", { className: inner },\n \"inner\"\n )\n );\n }\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('should process `styled` calls with complex interpolation inside components', async () => {\n const { code, metadata } = await transform(\n dedent`\n import React from 'react'\n import {css} from '@linaria/core'\n import {styled} from '@linaria/react'\n\n const globalObj = {\n opacity: 0.5,\n };\n\n const Styled1 = styled.p\\`\n opacity: ${'${globalObj.opacity}'}\n \\`\n\n export function Component() {\n const classes = {\n value: 0.2,\n cell: css\\`\n opacity: 0;\n \\`,\n };\n\n const classes2 = classes;\n\n const MyComponent = styled.h1\\`\n opacity: ${'${globalObj.opacity}'};\n\n &:hover .${'${classes2.cell}'} {\n opacity: ${'${classes.value}'};\n }\n ${'${Styled1}'} {\n font-size: 1;\n }\n \\`;\n\n return React.createElement(MyComponent);\n }\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('should handle shadowed identifier inside components', async () => {\n const { code, metadata } = await transform(\n dedent`\n import React from 'react'\n import {css} from '@linaria/core'\n\n const color = 'red';\n\n export default function Component() {\n const color = 'blue'\n const val = { color };\n return React.createElement('div', {className: css\\`background-color:${'${val.color}'};\\`});\n }\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('it should not throw location error for hoisted identifier', async () => {\n const { code, metadata } = await transform(\n dedent`\n import React from 'react'\n import {css} from '@linaria/core'\n\n const size = () => 5\n export default function Component() {\n const color = size()\n return css\\`opacity:${'${color}'};\\`\n }\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('should wrap memoized components', async () => {\n const { code, metadata } = await transform(\n dedent`\n import React from 'react';\n import { styled } from '@linaria/react';\n\n const MyComponent = React.memo(() => <div />);\n\n export default styled(MyComponent)\\`\n color: red;\n \\`\n `,\n [evaluator, {}, 'jsx']\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('handles escapes properly', async () => {\n const { code, metadata } = await transformFile(\n resolve(__dirname, './__fixtures__/escape-character.js'),\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('evaluates babel helpers', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n\n function copyAndExtend(a, b) {\n return { ...a, ...b };\n }\n\n const obj = copyAndExtend({ a: 1 }, { a: 2 });\n\n export const Title = styled.h1\\`\n &:before {\n content: \"${'${obj.a}'}\"\n }\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('uses values from json', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { css } from '@linaria/core';\n import sample from './__fixtures__/sample-data.json';\n\n export const eyeColorClass = css\\`\n color: ${'${sample.eye_color}'};\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('evaluates complex styles with functions and nested selectors', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { css } from '@linaria/core';\n export const bareIconClass = css\\`\\`;\n\n const getSizeStyles = (fs) => ({\n [\\`${'&.${bareIconClass}'}\\`]: {\n fontSize: fs * 1.5,\n },\n });\n\n export const SIZES = {\n XS: css\\`${'${getSizeStyles(11)}'}\\`,\n };\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('should work with wildcard imports', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { css } from \"@linaria/core\";\n import * as mod from \"./__fixtures__/complex-component\";\n\n const color = mod[\"whiteColor\"];\n\n export const square = css\\`\n ${'${mod.Title}'} {\n color: ${'${color}'};\n }\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('assigning to exports', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { css } from \"@linaria/core\";\n import { Padding } from \"./__fixtures__/assignToExport\";\n\n export const square = css\\`\n div {\n padding: ${'${Padding}'}px;\n }\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('exporting objects', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { css } from \"@linaria/core\";\n import object from \"./__fixtures__/objectExport\";\n\n export const square = css\\`\n div {\n margin: ${'${object.margin}'}px;\n }\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('exporting objects with computed keys', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { css } from \"@linaria/core\";\n import { object } from \"./__fixtures__/computedKeys\";\n\n export const square = css\\`\n div {\n color: ${'${object.blue}'};\n }\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('exporting sequence expressions', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { css } from \"@linaria/core\";\n import number from \"./__fixtures__/sequenceExport\";\n\n export const square = css\\`\n div {\n height: ${'${number}'}px;\n }\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('should work with wildcard reexports', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { css } from \"@linaria/core\";\n import { foo1 } from \"./__fixtures__/reexports\";\n\n export const square = css\\`\n color: ${'${foo1}'};\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('should ignore unused wildcard reexports', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { css } from \"@linaria/core\";\n import { foo1 } from \"./__fixtures__/reexports\";\n\n export const square = css\\`\n color: ${'${foo1}'};\n \\`;\n `,\n [evaluator],\n undefined,\n emitter\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n\n const reexports = resolve(__dirname, './__fixtures__/reexports.js');\n const unusedFile = resolve(__dirname, './__fixtures__/bar.js');\n expect(onEntrypointEvent).toHaveBeenCalledWith(\n expect.any(Number),\n expect.any(Number),\n expect.objectContaining({ filename: reexports, type: 'created' })\n );\n\n hasNotBeenProcessed(unusedFile);\n });\n\n it('should not drop exported vars of renamed imports', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { css } from \"@linaria/core\";\n import { foo3 } from \"./__fixtures__/reexports\";\n\n export const bar3 = foo3;\n\n export const square = css\\`\n color: ${'${bar3(\"thing\")}'};\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('should process unary expressions in interpolation', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { css } from \"@linaria/core\";\n\n let size = 1337;\n size += 0;\n\n export const class1 = css\\`width:${'${+size}'}px;\\`;\n export const class2 = css\\`width:${'${size}'}px;\\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n xit('should process bindings in interpolation', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { css } from \"@linaria/core\";\n\n let size = 1337;\n\n export const class1 = css\\`width:${'${size = 1}'}px;\\`;\n export const class2 = css\\`width:${'${size}'}px;\\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('should interpolate imported components', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { css } from \"@linaria/core\";\n import { Title } from \"./__fixtures__/complex-component\";\n\n export const square = css\\`\n ${'${Title}'} {\n color: red;\n }\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('should interpolate imported variables', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { css } from \"@linaria/core\";\n import { whiteColor } from \"./__fixtures__/complex-component\";\n\n export const square = css\\`\n color: ${'${whiteColor}'}\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('evaluates typescript enums', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n\n enum Colors {\n BLUE = '#27509A'\n }\n\n export const Title = styled.h1\\`\n color: ${'${Colors.BLUE}'};\n \\`;\n `,\n [evaluator, {}, 'ts']\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('understands satisfies keyword', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { css } from \"@linaria/core\"\n\n interface ColorTokenMap {\n primary: string\n secondary: string\n }\n\n const lightTokens = {\n primary: \"#111\",\n secondary: \"#09f\",\n } satisfies ColorTokenMap\n\n export const text = css\\`\n color: ${'${lightTokens.primary}'};\n \\`;\n `,\n [evaluator, {}, 'ts']\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('should process circular imports', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n import { fooStyles } from \"./__fixtures__/circular-imports\";\n\n const value = fooStyles.constBar;\n\n export const H1 = styled.h1\\`\n color: ${'${value}'};\n \\`\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('evaluates chain of reexports', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from '@linaria/react';\n import { fooStyles } from \"./__fixtures__/re-exports\";\n\n const value = fooStyles.foo;\n\n export const H1 = styled.h1\\`\n color: ${'${value}'};\n \\`\n `,\n [evaluator],\n undefined,\n emitter\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n\n hasNotBeenProcessed(resolve(__dirname, './__fixtures__/bar.js'));\n hasNotBeenProcessed(\n resolve(__dirname, './__fixtures__/re-exports/empty.js')\n );\n });\n\n it('should fail because babelrc options is disabled', async () => {\n const fn = () =>\n transformFile(\n resolve(__dirname, './__fixtures__/with-babelrc/index.js'),\n [\n evaluator,\n {\n features: {\n useBabelConfigs: false,\n },\n },\n ]\n );\n\n expect(fn).rejects.toThrowError(`Cannot find module '_/re-exports'`);\n });\n\n it('respects module-resolver plugin and show waring', async () => {\n const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});\n\n const { code, metadata } = await transformFile(\n resolve(__dirname, './__fixtures__/with-babelrc/index.js'),\n [evaluator]\n );\n\n expect(warn).toHaveBeenCalledWith(\n expect.stringContaining(\n 'This works for now but will be an error in the future'\n )\n );\n warn.mockRestore();\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it(\"respects module-resolver plugin and don't show waring\", async () => {\n const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});\n\n const { code, metadata } = await transformFile(\n resolve(__dirname, './__fixtures__/with-babelrc/index.js'),\n [\n evaluator,\n {\n babelOptions: {\n plugins: [\n [\n 'module-resolver',\n {\n alias: {\n _: './src/__fixtures__',\n },\n },\n ],\n ],\n },\n },\n ]\n );\n\n expect(warn).toHaveBeenCalledTimes(0);\n warn.mockRestore();\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('handles complex component', async () => {\n const { code, metadata } = await transformFile(\n resolve(__dirname, './__fixtures__/complex-component.js'),\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('should eval component from a linaria library', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from \"@linaria/react\";\n import { Title } from \"./__fixtures__/linaria-ui-library/components/index\";\n\n export const StyledTitle = styled(Title)\\`\\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('should not eval components from a non-linaria library', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from \"@linaria/react\";\n import { Title } from \"./__fixtures__/non-linaria-ui-library/index\";\n\n export const StyledTitle = styled(Title)\\`\\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('should not eval non-linaria component from a linaria library', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from \"@linaria/react\";\n import { Title } from \"./__fixtures__/linaria-ui-library/non-linaria-components\";\n\n export const StyledTitle = styled(Title)\\`\\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('should eval wrapped component from a linaria library', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from \"@linaria/react\";\n import { connect } from \"./__fixtures__/linaria-ui-library/hocs\";\n import { Title } from \"./__fixtures__/linaria-ui-library/components/index\";\n\n export const StyledTitle = styled(connect(Title))\\`\\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('should not eval wrapped component from a non-linaria library', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from \"@linaria/react\";\n import { connect } from \"./__fixtures__/linaria-ui-library/hocs\";\n import { Title } from \"./__fixtures__/non-linaria-ui-library/index\";\n\n export const StyledTitle = styled(connect(Title))\\`\\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('should not import types', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from \"@linaria/react\";\n import { Title } from \"./__fixtures__/linaria-ui-library/components/index\";\n import { ComponentType } from \"./__fixtures__/linaria-ui-library/types\";\n\n const map = new Map<string, ComponentType>()\n .set('Title', Title);\n\n const Gate = (props: { type: ComponentType, className: string }) => {\n const { className, type } = props;\n const Component = map.get(type);\n return <Component className={className}/>;\n };\n\n export const StyledTitle = styled(Gate)\\`\\`;\n `,\n [evaluator, {}, 'tsx']\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('should shake out identifiers that are referenced only in types', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from \"@linaria/react\";\n import * as yup from \"yup\";\n import { Form } from \"./__fixtures__/linaria-ui-library/components/index\";\n\n const validationSchema = yup.object();\n type IModel = yup.InferType<typeof validationSchema>;\n\n const Editor = () => {\n const initial: IModel = {};\n return <Form schema={validationSchema} data={initial} />;\n };\n\n export const StyledEditor = styled(Editor)\\`\\`;\n `,\n [evaluator, {}, 'tsx']\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('should process dynamic require', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { css } from \"@linaria/core\";\n\n const url = \"./__fixtures__/FOO\";\n const foo2 = require(url.toLowerCase()).foo2;\n\n export const square = css\\`\n div:before {\n content: ${'${foo2}'};\n }\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('should work with built-in modules', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { css } from \"@linaria/core\";\n import { URL } from \"url\";\n\n const url = (new URL(\"https://example.com\")).toString();\n\n export const square = css\\`\n background: url(${'${url}'});\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('should process module.exports = require(…)', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { css } from \"@linaria/core\";\n\n const mod = require(\"./__fixtures__/module-reexport\");\n\n export const square = css\\`\n div:before {\n content: ${'${mod.foo}'};\n }\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('should import react as namespace', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { styled } from \"@linaria/react\";\n import * as React from \"react\";\n\n const Cmp = React.memo(() => null);\n\n export const StyledTitle = styled(Cmp)\\`\\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('should work with short-circuit imports', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { css } from \"@linaria/core\";\n import { stringConstant } from \"./__fixtures__/self-import\";\n\n export const StyledTitle = css\\`\n content: \"${'${stringConstant}'}\";\n \\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n xit('should shake out side effect because its definition uses DOM API', async () => {\n const { code, metadata } = await transform(\n dedent`\n import { css } from \"@linaria/core\";\n import { runNearFramePaint } from \"./__fixtures__/runNearFramePaint\";\n\n runNearFramePaint(() => {\n // Do something\n });\n\n export const text = css\\`\\`;\n `,\n [evaluator]\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n describe('cache', () => {\n const getCachedExports = (\n cache: TransformCacheCollection,\n filename: string\n ) => {\n const cachedFoo = cache.get('entrypoints', filename);\n if (!cachedFoo?.evaluated) {\n throw new Error('Expected entrypoint to be evaluated');\n }\n\n const result: Record<string | symbol, unknown> = {};\n Object.keys(cachedFoo.exports).forEach((key) => {\n result[key] = cachedFoo.exports[key];\n });\n\n return result;\n };\n\n it('should cache evaluation', async () => {\n const filename = require.resolve(\n join(dirName, './__fixtures__/foo-nonstatic')\n );\n const cache = new TransformCacheCollection();\n const { code, metadata } = await transform(\n dedent`\n import { css } from \"@linaria/core\";\n import { foo1, foo2 } from \"./__fixtures__/foo-nonstatic\";\n\n export const text = css\\`font-size: ${'${foo1}'}\\`;\n `,\n [evaluator],\n cache\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n\n const exports = getCachedExports(cache, filename);\n expect(exports.foo1).toBe('foo1');\n expect(exports.foo2).toBe(undefined);\n });\n\n it('promotes statically evaluatable modules to \"*\"', async () => {\n const filename = require.resolve(join(dirName, './__fixtures__/foo'));\n const cache = new TransformCacheCollection();\n\n await transform(\n dedent`\n import { css } from \"@linaria/core\";\n import { foo1 } from \"./__fixtures__/foo\";\n\n export const text = css\\`font-size: ${'${foo1}'}\\`;\n `,\n [evaluator],\n cache\n );\n\n const cachedFoo = cache.get('entrypoints', filename);\n expect(cachedFoo?.evaluatedOnly).toContain('*');\n\n const exports = getCachedExports(cache, filename);\n expect(exports.foo2).toBe('foo2');\n });\n\n const createCacheFor = async (\n filename: string,\n exports: Record<string, string>\n ) => {\n const fooContent = readFileSync(filename, 'utf-8');\n const cache = new TransformCacheCollection();\n cache.invalidateIfChanged(filename, fooContent);\n\n const only = Object.keys(exports);\n const exportsProxy = Entrypoint.createExports(logger);\n only.forEach((key) => {\n exportsProxy[key] = exports[key];\n });\n\n cache.add('entrypoints', filename, {\n dependencies: new Map(),\n evaluated: true,\n evaluatedOnly: only,\n generation: 1,\n exports: exportsProxy,\n ignored: false,\n log: logger,\n only,\n });\n\n return cache;\n };\n\n it('should use cached value', async () => {\n const filename = require.resolve(\n join(dirName, './__fixtures__/foo-nonstatic')\n );\n const cache = await createCacheFor(filename, { foo1: 'cached-foo1' });\n\n const { code, metadata } = await transform(\n dedent`\n import { css } from \"@linaria/core\";\n import { foo1 } from \"./__fixtures__/foo-nonstatic\";\n\n export const text = css\\`font-size: ${'${foo1}'}\\`;\n `,\n [evaluator],\n cache\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n\n it('should reprocess module when cached exports are incomplete', async () => {\n const filename = require.resolve(\n join(dirName, './__fixtures__/foo-nonstatic')\n );\n const cache = await createCacheFor(filename, { foo1: 'cached-foo1' });\n\n const { code, metadata } = await transform(\n dedent`\n import { css } from \"@linaria/core\";\n import { foo1, foo2 } from \"./__fixtures__/foo-nonstatic\";\n\n export const text = css\\`font-size: ${'${foo1 + foo2}'}\\`;\n `,\n [evaluator],\n cache\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n\n const exports = getCachedExports(cache, filename);\n expect(exports.foo1).toBe('foo1');\n expect(exports.foo2).toBe('foo2');\n });\n\n it('should use cached value even if only part is required', async () => {\n const filename = require.resolve(\n join(dirName, './__fixtures__/foo-nonstatic')\n );\n const cache = await createCacheFor(filename, {\n foo1: 'cached-foo1',\n foo2: 'cached-foo2',\n });\n\n const { code, metadata } = await transform(\n dedent`\n import { css } from \"@linaria/core\";\n import { foo1 } from \"./__fixtures__/foo-nonstatic\";\n\n export const text = css\\`font-size: ${'${foo1}'}\\`;\n `,\n [evaluator],\n cache\n );\n\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n });\n });\n\n describe('concurrent', () => {\n it('two parallel chains of reexports', async () => {\n const cache = new TransformCacheCollection();\n\n const files = {\n 'source-1': dedent`\n import { styled } from '@linaria/react';\n import { fooStyles } from \"./__fixtures__/re-exports\";\n\n const value = fooStyles.foo;\n\n export const H1 = styled.h1\\`\n color: ${'${value}'};\n \\`\n `,\n 'source-2': dedent`\n import { styled } from '@linaria/react';\n import { bar2 } from \"./__fixtures__/re-exports\";\n\n export const H1 = styled.h1\\`\n color: ${'${bar2}'};\n \\`\n `,\n };\n\n const results = await Promise.all(\n Object.entries(files).map(([filename, content]) =>\n transform(content, [evaluator], cache, emitter, filename)\n )\n );\n\n for (const { code, metadata } of results) {\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n }\n\n hasNotBeenProcessed(\n resolve(__dirname, './__fixtures__/re-exports/empty.js')\n );\n });\n\n it('multiple parallel chains of reexports', async () => {\n const cache = new TransformCacheCollection();\n\n const tokens = ['foo', 'bar', 'bar1', 'bar2'];\n\n const results = await Promise.all(\n tokens.map((token) =>\n transform(\n dedent`\n import { styled } from '@linaria/react';\n import { ${token} } from \"./__fixtures__/re-exports\";\n\n export const H1${token} = styled.h1\\`\n color: ${`\\${${token}}`};\n \\`\n `,\n [evaluator],\n cache,\n emitter,\n token\n )\n )\n );\n\n for (const { code, metadata } of results) {\n expect(code).toMatchSnapshot();\n expect(metadata).toMatchSnapshot();\n }\n });\n\n it('loop in evaluated files', async () => {\n const cache = new TransformCacheCollection();\n\n await expect(() =>\n Promise.all(\n ['AB', 'BA'].map((token) =>\n transform(\n dedent`\n import { styled } from '@linaria/react';\n import { ${token} } from \"./__fixtures__/loop/${token.toLowerCase()}\";\n\n export const H1${token} = styled.h1\\`\n color: ${`\\${${token}}`};\n \\`\n `,\n [evaluator],\n cache,\n emitter,\n token\n )\n )\n )\n ).rejects.toThrowError(/reading 'toLowerCase'/);\n });\n });\n});\n" }, { "path": "packages/testkit/src/transform.test.ts", "content": "/* eslint-disable no-template-curly-in-string */\n\nimport path from 'path';\n\nimport { asyncResolveFallback } from '@wyw-in-js/shared';\nimport { shaker, transform, transformUrl } from '@wyw-in-js/transform';\nimport dedent from 'dedent';\n\nconst outputFilename = './.linaria-cache/test.css';\n\nconst rules = [\n {\n test: () => true,\n action: shaker,\n },\n];\n\nconst basePluginOptions = {\n features: {\n happyDOM: false,\n },\n rules,\n};\n\ndescribe('transformUrl', () => {\n type TransformUrlArgs = Parameters<typeof transformUrl>;\n const dataset: Record<string, TransformUrlArgs> = {\n '../assets/test.jpg': [\n './assets/test.jpg',\n './.linaria-cache/test.css',\n './test.js',\n ],\n '../a/b/test.jpg': [\n '../a/b/test.jpg',\n './.linaria-cache/test.css',\n './a/test.js',\n ],\n };\n\n it('should work with posix paths', () => {\n Object.keys(dataset).forEach((result) => {\n expect(transformUrl(...dataset[result])).toBe(result);\n });\n });\n\n it('should work with win32 paths', () => {\n const toWin32 = (p: string) => p.split(path.posix.sep).join(path.win32.sep);\n const win32Dataset = Object.keys(dataset).reduce(\n (acc, key) => ({\n ...acc,\n [key]: [\n dataset[key][0],\n toWin32(dataset[key][1]),\n toWin32(dataset[key][2]),\n path.win32,\n ] as TransformUrlArgs,\n }),\n {} as Record<string, TransformUrlArgs>\n );\n\n Object.keys(win32Dataset).forEach((result) => {\n expect(transformUrl(...win32Dataset[result])).toBe(result);\n });\n });\n});\n\nit('rewrites a relative path in url() declarations', async () => {\n const { cssText } = await transform(\n {\n options: {\n filename: './test.js',\n outputFilename: './.linaria-cache/test.css',\n pluginOptions: {\n ...basePluginOptions,\n },\n },\n },\n dedent`\n import { css } from '@linaria/core';\n\n export const title = css\\`\n background-image: url(./assets/test.jpg);\n background-image: url(\"./assets/test.jpg\");\n background-image: url('./assets/test.jpg');\n \\`;\n `,\n asyncResolveFallback\n );\n\n expect(cssText).toMatchSnapshot();\n});\n\nit('rewrites multiple relative paths in url() declarations', async () => {\n const { cssText } = await transform(\n {\n options: {\n filename: './test.js',\n outputFilename,\n pluginOptions: {\n ...basePluginOptions,\n },\n },\n },\n dedent`\n import { css } from '@linaria/core';\n\n export const title = css\\`\n @font-face {\n font-family: Test;\n src: url(./assets/font.woff2) format(\"woff2\"), url(./assets/font.woff) format(\"woff\");\n }\n \\`;\n `,\n asyncResolveFallback\n );\n\n expect(cssText).toMatchSnapshot();\n});\n\nit(\"doesn't rewrite an absolute path in url() declarations\", async () => {\n const { cssText } = await transform(\n {\n options: {\n filename: './test.js',\n outputFilename,\n pluginOptions: {\n ...basePluginOptions,\n },\n },\n },\n dedent`\n import { css } from '@linaria/core';\n\n export const title = css\\`\n background-image: url(/assets/test.jpg);\n \\`;\n `,\n asyncResolveFallback\n );\n\n expect(cssText).toMatchSnapshot();\n});\n\nit('respects passed babel options', async () => {\n expect.assertions(2);\n\n await expect(() =>\n transform(\n {\n options: {\n filename: './test.js',\n outputFilename,\n pluginOptions: {\n ...basePluginOptions,\n babelOptions: {\n babelrc: false,\n configFile: false,\n presets: [['@babel/preset-env', { loose: true }]],\n },\n },\n },\n },\n dedent`\n import { css } from '@linaria/core';\n\n export const error = <jsx />;\n `,\n asyncResolveFallback\n )\n ).rejects.toThrow(\n /Support for the experimental syntax 'jsx' isn't currently enabled/\n );\n\n await expect(() =>\n transform(\n {\n options: {\n filename: './test.js',\n outputFilename,\n pluginOptions: {\n ...basePluginOptions,\n babelOptions: {\n babelrc: false,\n configFile: false,\n presets: [\n ['@babel/preset-env', { loose: true }],\n '@babel/preset-react',\n ],\n },\n },\n },\n },\n dedent`\n import { css } from '@linaria/core';\n\n export const error = <jsx />;\n export const title = css\\`\n background-image: url(/assets/test.jpg);\n \\`;\n `,\n asyncResolveFallback\n )\n ).not.toThrow('Unexpected token');\n});\n\nit(\"doesn't throw due to duplicate preset\", async () => {\n expect.assertions(1);\n\n expect(() =>\n transform(\n {\n options: {\n filename: './test.js',\n outputFilename,\n pluginOptions: {\n ...basePluginOptions,\n babelOptions: {\n babelrc: false,\n configFile: false,\n presets: [require.resolve('@linaria/babel-preset')],\n plugins: [\n require.resolve('@babel/plugin-transform-modules-commonjs'),\n ],\n },\n },\n },\n },\n dedent`\n import { styled } from '@linaria/react';\n\n const Title = styled.h1\\` color: blue; \\`;\n\n const Article = styled.article\\`\n ${'${Title}'} {\n font-size: 16px;\n }\n \\`;\n `,\n asyncResolveFallback\n )\n ).not.toThrow('Duplicate plugin/preset detected');\n});\n\nit('should return transformed code even when file only contains unused linaria code', async () => {\n const { code } = await transform(\n {\n options: {\n filename: './test.js',\n outputFilename,\n pluginOptions: {\n ...basePluginOptions,\n },\n },\n },\n dedent`\n import { css } from '@linaria/core';\n\n const title = css\\`\n color: red;\n \\`;\n `,\n asyncResolveFallback\n );\n\n expect(code).not.toContain('css`');\n});\n" }, { "path": "packages/testkit/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.json\",\n \"exclude\": [\n // Contains broken code that should not be type-checked\n \"src/__fixtures__/prepare-code-test-cases/dynamic-import/input.ts\",\n \"src/__fixtures__/prepare-code-test-cases/dynamic-import-param/input.ts\",\n \"src/__fixtures__/prepare-code-test-cases/for-debug/input.ts\",\n \"src/__fixtures__/linaria-ui-library/types.ts\",\n\n \"node_modules\"\n ],\n \"compilerOptions\": {\n \"paths\": {},\n \"rootDir\": \"src/\",\n \"types\": [\"jest\", \"node\"]\n },\n \"references\": [{ \"path\": \"../core\" }, { \"path\": \"../react\" }]\n}\n" }, { "path": "pnpm-workspace.yaml", "content": "packages:\n - 'packages/*'\n - 'website'\n - 'examples/**'\n - '!examples/gatsby/**' # too many dependencies, possible outdated\n - '!examples/webpack4' # legacy since node 17\n" }, { "path": "react/package.json", "content": "{\n \"main\": \"../lib/react/index.js\",\n \"module\": \"../esm/react/index.js\",\n \"types\": \"../lib/react/index.d.ts\"\n}\n" }, { "path": "tsconfig.eslint.json", "content": "{\n \"extends\": \"./tsconfig.json\",\n \"exclude\": [\"node_modules\"],\n \"include\": [\"packages/**/*.ts\", \"packages/**/*.js\", \"packages/**/*.tsx\"]\n}\n" }, { "path": "tsconfig.json", "content": "{\n \"exclude\": [\n \"node_modules\",\n \"packages/**/__dtslint__/**\",\n \"packages/**/__tests__/**\",\n \"packages/**/__fixtures__/**\",\n \"packages/**/__utils__/**\",\n \"packages/**/dist/**\",\n \"packages/**/types/**\"\n ],\n \"compilerOptions\": {\n \"baseUrl\": \".\",\n \"composite\": true,\n \"paths\": {\n \"@linaria/*\": [\"./packages/*/src\"]\n },\n \"jsx\": \"react\",\n \"lib\": [\"es6\", \"es2017\", \"es2018\", \"es2022\", \"ES2019.Array\", \"dom\", \"esnext.disposable\"],\n \"module\": \"es6\",\n \"moduleResolution\": \"node\",\n \"strict\": true,\n \"target\": \"es2022\",\n \"allowSyntheticDefaultImports\": true,\n \"esModuleInterop\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"declaration\": true,\n \"typeRoots\": [\"node_modules/@types\", \"typings\"],\n \"skipLibCheck\": true,\n \"skipDefaultLibCheck\": true,\n \"preserveWatchOutput\": true,\n }\n}\n" }, { "path": "tsconfig.prod.json", "content": "{\n \"extends\": \"./tsconfig.json\",\n \"include\": [\"src/core/*.ts\", \"src/react/*.ts\"]\n}\n" }, { "path": "tslint.json", "content": "{\n \"extends\": \"dtslint/dtslint.json\",\n \"rules\": {\n \"file-name-casing\": false,\n \"interface-over-type-literal\": false,\n \"strict-export-declare-modifiers\": false\n },\n \"linterOptions\": {\n \"exclude\": [\"node_modules/**\", \"packages/*/types\"]\n }\n}\n" }, { "path": "turbo.json", "content": "{\n \"$schema\": \"https://turborepo.org/schema.json\",\n \"pipeline\": {\n \"build\": {\n \"dependsOn\": [\"^build\"],\n \"outputs\": [\"dist/**\", \"esm/**\", \"lib/**\", \"types/**\"]\n },\n \"build:declarations\": {\n \"dependsOn\": [\"^build:declarations\"],\n \"outputs\": [\"types/**\"]\n },\n \"check:all\": {\n \"dependsOn\": [\"test:dts\", \"typecheck\", \"test\"]\n },\n \"lint\": {},\n \"test\": {\n \"dependsOn\": [],\n \"outputs\": [],\n \"cache\": false\n },\n \"@linaria/atomic#test\": {\n \"dependsOn\": [\"@linaria/core#build\", \"@linaria/react#build\"]\n },\n \"@linaria/react#test\": {\n \"dependsOn\": [\"@linaria/core#build\"]\n },\n \"@linaria/postcss-linaria#test\": {\n \"dependsOn\": [\"@linaria/postcss-linaria#build\"]\n },\n \"@linaria/testkit#test\": {\n \"dependsOn\": [\"^build\"]\n },\n \"test:dts\": {\n \"dependsOn\": [\"build:declarations\", \"^build:declarations\"],\n \"cache\": false\n },\n \"typecheck\": {\n \"dependsOn\": [\"build:declarations\", \"^build:declarations\"]\n }\n }\n}\n" }, { "path": "website/.eslintrc", "content": "{\n \"settings\": {\n \"import/core-modules\": []\n }\n}\n" }, { "path": "website/CHANGELOG.md", "content": "# Change Log\n\n## 6.3.2\n\n### Patch Changes\n\n- Updated dependencies [b3331e45]\n - @linaria/react@7.0.1\n - @linaria/atomic@7.0.1\n\n## 6.3.1\n\n### Patch Changes\n\n- Updated dependencies [ab11ebb7]\n- Updated dependencies [654d8590]\n - @linaria/atomic@7.0.0\n - @linaria/core@7.0.0\n - @linaria/react@7.0.0\n - @linaria/server@7.0.0\n\n## 6.3.0\n\n### Minor Changes\n\n- 281ca4f5: The new version of wyw-in-js, with the support of a configurable code remover, can help prevent compilation errors and improve build time.\n\n### Patch Changes\n\n- Updated dependencies [bd8d45fd]\n- Updated dependencies [281ca4f5]\n - @linaria/react@6.3.0\n - @linaria/atomic@6.3.0\n - @linaria/core@6.3.0\n - @linaria/server@6.3.0\n\n## 6.2.0\n\n### Minor Changes\n\n- a3dcee2e: Update wyw-in-js to 0.5.3\n\n### Patch Changes\n\n- Updated dependencies [a3dcee2e]\n - @linaria/atomic@6.2.0\n - @linaria/core@6.2.0\n - @linaria/server@6.2.0\n - @linaria/react@6.2.1\n\n## 6.1.1\n\n### Patch Changes\n\n- Updated dependencies [fd60b5de]\n - @linaria/react@6.2.0\n - @linaria/atomic@6.1.1\n\n## 6.1.0\n\n### Minor Changes\n\n- 8ba655d3: Bump wyw-in-js to 0.4.0. The full list of changes https://github.com/Anber/wyw-in-js/compare/%40wyw-in-js/transform%400.2.3...%40wyw-in-js/transform%400.4.0\n\n### Patch Changes\n\n- 8d4ebd33: chore: bump @wyw-in-js/\\* packages\n- Updated dependencies [8d4ebd33]\n- Updated dependencies [8ba655d3]\n - @linaria/atomic@6.1.0\n - @linaria/core@6.1.0\n - @linaria/react@6.1.0\n - @linaria/server@6.1.0\n\n## 6.0.0\n\n### Major Changes\n\n- 2ac94b99: BREAKING CHANGE: Linaria has been migrated to wyw-in-js.\n\n # Migration Guide\n\n ## For Users\n\n The main breaking change is that all tooling has been moved from the `@linaria` scope to the `@wyw-in-js` scope. This means that you will need to update your dependencies as follows:\n\n | Old | New |\n | ------------------------ | ------------------------- |\n | @linaria/babel-preset | @wyw-in-js/babel-preset |\n | @linaria/cli | @wyw-in-js/cli |\n | @linaria/esbuild | @wyw-in-js/esbuild |\n | @linaria/rollup | @wyw-in-js/rollup |\n | @linaria/shaker | discontinued |\n | @linaria/vite | @wyw-in-js/vite |\n | @linaria/webpack4-loader | discontinued |\n | @linaria/webpack5-loader | @wyw-in-js/webpack-loader |\n\n There is no longer a need to install `@linaria/shaker` as it is now part of `@wyw-in-js/transform`, which will be installed automatically with the bundler plugins.\n\n The configuration file has been renamed from `linaria.config.js` (`linariarc`) to `wyw-in-js.config.js` (`.wyw-in-jsrc`).\n\n ## For Custom Processor Developers\n\n Base classes for processors and most helpers have been moved to `@wyw-in-js/processor-utils`.\n\n All APIs that had `linaria` in their names have been renamed:\n\n - The field that stores meta information in runtime has been renamed from `__linaria` to `__wyw_meta`\n - The export with all interpolated values has been renamed from `__linariaPreval` to `__wywPreval`\n - The caller name in Babel has been renamed from `linaria` to `wyw-in-js`\n\n For additional information, please visit the [wyw-in-js.dev](https://wyw-in-js.dev).\n\n### Patch Changes\n\n- Updated dependencies [60e6b7e2]\n- Updated dependencies [2ac94b99]\n - @linaria/atomic@6.0.0\n - @linaria/core@6.0.0\n - @linaria/react@6.0.0\n - @linaria/server@6.0.0\n\n## 5.0.3\n\n### Patch Changes\n\n- Updated dependencies [4b083b7c]\n - @linaria/react@5.0.3\n - @linaria/atomic@5.0.3\n\n## 5.0.2\n\n### Patch Changes\n\n- Updated dependencies [1e889937]\n - @linaria/react@5.0.2\n - @linaria/atomic@5.0.2\n - @linaria/core@5.0.2\n\n## 5.0.1\n\n### Patch Changes\n\n- @linaria/atomic@5.0.1\n- @linaria/core@5.0.1\n- @linaria/react@5.0.1\n\n## 5.0.0\n\n### Major Changes\n\n- 88e07613: Rewritten dependecny tree processing with support for wildcard re-exports.\n- cb853e14: All processing stages were merged into one generators-based processor. It allows the implementation of more complex workflows to support features like dynamic imports and re-exports.\n\n### Patch Changes\n\n- 2a1e24a0: Upgrade TypeScript to 5.2\n- Updated dependencies [9cb4143d]\n- Updated dependencies [88e07613]\n- Updated dependencies [2a1e24a0]\n- Updated dependencies [cb853e14]\n - @linaria/atomic@5.0.0\n - @linaria/core@5.0.0\n - @linaria/react@5.0.0\n - @linaria/server@5.0.0\n\n## 4.5.4\n\n### Patch Changes\n\n- @linaria/atomic@4.5.4\n- @linaria/core@4.5.4\n- @linaria/react@4.5.4\n\n## 4.5.3\n\n### Patch Changes\n\n- e59bf809: Shaker mistakenly counts references in types as valuable and keeps referenced variables alive.\n- 520ba8da: Debug mode for CLI, Webpack 5 and Vite. When enabled, prints brief perf report to console and information about processed dependency tree to the specified file.\n- Updated dependencies [79557248]\n- Updated dependencies [e59bf809]\n - @linaria/atomic@4.5.3\n - @linaria/core@4.5.3\n - @linaria/react@4.5.3\n\n## 4.5.2\n\n### Patch Changes\n\n- 1bf5c5b8: The cache has been improved, which should address the build time issues for Webpack 4/5 and resolve HMR-related problems for Vite. Fixes #1199, #1265 and maybe some more.\n - @linaria/atomic@4.5.2\n - @linaria/core@4.5.2\n - @linaria/react@4.5.2\n\n## 4.5.1\n\n### Patch Changes\n\n- Updated dependencies [ceca1611]\n- Updated dependencies [13258306]\n - @linaria/react@4.5.1\n - @linaria/atomic@4.5.1\n - @linaria/core@4.5.1\n\n## 4.5.0\n\n### Minor Changes\n\n- 16c057df: Breaking Change: Performance Optimization for `styled`\n\n When a component is wrapped in `styled`, Linaria needs to determine if that component is already a styled component. To accomplish this, the wrapped component is included in the list of variables for evaluation, along with the interpolated values used in styles. The issue arises when a wrapped component, even if it is not styled, brings along a substantial dependency tree. This situation is particularly evident when using `styled` to style components from third-party UI libraries.\n\n To address this problem, Linaria will now examine the import location of the component and check if there is an annotation in the `package.json` file of the package containing the components. This annotation indicates whether the package includes other Linaria components. If there is no such annotation, Linaria will refrain from evaluating the component.\n\n Please note that this Breaking Change solely affects developers of component libraries. In order for users to style components from your library, you must include the `linaria.components` property in the library's `package.json` file. This property should have a mask that covers all imported files with components. Here's an example of how to specify it:\n\n ```json\n \"linaria\": {\n \"components\": \"**/*\"\n }\n ```\n\n### Patch Changes\n\n- af5bb92d: The end of support for Node.js 14. Migration to pnpm 8.\n- Updated dependencies [16c057df]\n- Updated dependencies [af5bb92d]\n- Updated dependencies [10859924]\n - @linaria/react@4.5.0\n - @linaria/atomic@4.5.0\n - @linaria/core@4.5.0\n - @linaria/server@4.5.0\n\n## 4.1.16\n\n### Patch Changes\n\n- Updated dependencies [54ab61b2]\n - @linaria/react@4.3.8\n - @linaria/atomic@4.2.10\n - @linaria/core@4.2.10\n\n## 4.1.15\n\n### Patch Changes\n\n- Updated dependencies [1c3f309d]\n- Updated dependencies [34029088]\n - @linaria/react@4.3.7\n - @linaria/atomic@4.2.9\n - @linaria/core@4.2.9\n\n## 4.1.14\n\n### Patch Changes\n\n- Updated dependencies [a3ad617f]\n - @linaria/react@4.3.6\n - @linaria/atomic@4.2.8\n - @linaria/core@4.2.8\n\n## 4.1.13\n\n### Patch Changes\n\n- Updated dependencies [a2b618bc]\n - @linaria/atomic@4.2.7\n - @linaria/core@4.2.7\n - @linaria/react@4.3.5\n\n## 4.1.12\n\n### Patch Changes\n\n- @linaria/atomic@4.2.6\n- @linaria/core@4.2.6\n- @linaria/react@4.3.4\n\n## 4.1.11\n\n### Patch Changes\n\n- Updated dependencies [61fe2560]\n- Updated dependencies [77bcf2e7]\n - @linaria/atomic@4.2.5\n - @linaria/server@4.1.0\n - @linaria/core@4.2.5\n - @linaria/react@4.3.3\n\n## 4.1.10\n\n### Patch Changes\n\n- @linaria/atomic@4.2.4\n- @linaria/core@4.2.4\n- @linaria/react@4.3.2\n\n## 4.1.9\n\n### Patch Changes\n\n- 6b8bff49: Switch website to pnpm\n- 5edde648: Upgrade Babel to support TypeScript 4.9. Fixes #1133.\n- Updated dependencies [922f20d6]\n- Updated dependencies [5edde648]\n - @linaria/react@4.3.1\n - @linaria/atomic@4.2.3\n - @linaria/core@4.2.3\n\n## 4.1.8\n\n### Patch Changes\n\n- Updated dependencies [63f56d47]\n- Updated dependencies [c26d4667]\n - @linaria/react@4.3.0\n - @linaria/atomic@4.2.2\n - @linaria/core@4.2.2\n\n## 4.1.7\n\n### Patch Changes\n\n- Updated dependencies [6de22792]\n - @linaria/react@4.2.1\n - @linaria/atomic@4.2.1\n - @linaria/core@4.2.1\n\n## 4.1.6\n\n### Patch Changes\n\n- Updated dependencies [1e88e95d]\n - @linaria/atomic@4.2.0\n - @linaria/core@4.2.0\n - @linaria/react@4.2.0\n\n## 4.1.5\n\n### Patch Changes\n\n- Updated dependencies [87ffe61c]\n - @linaria/atomic@4.1.5\n - @linaria/core@4.1.4\n - @linaria/react@4.1.5\n\n## 4.1.4\n\n### Patch Changes\n\n- @linaria/atomic@4.1.4\n- @linaria/core@4.1.3\n- @linaria/react@4.1.4\n\n## 4.1.3\n\n### Patch Changes\n\n- Updated dependencies [c0bd271a]\n - @linaria/react@4.1.3\n - @linaria/atomic@4.1.3\n - @linaria/core@4.1.2\n\n## 4.1.2\n\n### Patch Changes\n\n- @linaria/atomic@4.1.2\n- @linaria/core@4.1.1\n- @linaria/react@4.1.2\n\n## 4.1.1\n\n### Patch Changes\n\n- Updated dependencies [2abc55b3]\n - @linaria/react@4.1.1\n - @linaria/atomic@4.1.1\n\n## 4.1.0\n\n### Patch Changes\n\n- @linaria/atomic@4.1.0\n- @linaria/core@4.1.0\n- @linaria/react@4.1.0\n\n## 4.0.0\n\n### Major Changes\n\n- bc0cbeea: A completely new async mode with native support for Vite, Rollup, esbuild and Webpack resolvers.\n\n BREAKING CHANGES: Despite the fact, that it should be fully compatible with 3.0 and 2.0 branches, the new version of styles evaluator can have some serious bugs which can make your project unbuildable (however, since there is no runtime, if the build is finished successfully, everything will continue work as it was on 2.0 and 3.0). If you face some problems please let us know and we will fix it as soon as possible.\n\n### Patch Changes\n\n- 8be5650d: The repo has been migrated to PNPM and Turborepo\n- ea41d440: New package @linaria/tags that contains all abstract logic for tags processors.\n- Updated dependencies [f0cddda4]\n - @linaria/atomic@4.0.0\n - @linaria/core@4.0.0\n - @linaria/react@4.0.0\n - @linaria/server@4.0.0\n\n## 3.0.0-beta.21\n\n### Patch Changes\n\n- Updated dependencies [17c83e34]\n - @linaria/react@3.0.0-beta.21\n - @linaria/core@3.0.0-beta.21\n - @linaria/atomic@3.0.0-beta.21\n\n## 3.0.0-beta.20\n\n### Patch Changes\n\n- 8be5650d: The repo has been migrated to PNPM and Turborepo\n- Updated dependencies\n - @linaria/atomic@3.0.0-beta.20\n - @linaria/core@3.0.0-beta.20\n - @linaria/react@3.0.0-beta.20\n - @linaria/server@3.0.0-beta.20\n\n# [3.0.0-beta.19](https://github.com/callstack/linaria/compare/v3.0.0-beta.18...v3.0.0-beta.19) (2022-06-03)\n\n### Features\n\n- **atomic:** add support for atomic using styled API ([#966](https://github.com/callstack/linaria/issues/966)) ([f59860b](https://github.com/callstack/linaria/commit/f59860b09c5f91b0423dbf188e5f8aaaef38a6b5))\n- **babel:** api for custom tags ([#976](https://github.com/callstack/linaria/issues/976)) ([3285ccc](https://github.com/callstack/linaria/commit/3285ccc1d00449b78b3fc74087528cd38cbdd116))\n- **babel:** new way for detecting tag imports ([#974](https://github.com/callstack/linaria/issues/974)) ([3305cfb](https://github.com/callstack/linaria/commit/3305cfb0c0f65abdacceeb7e6bad118c59f7d551))\n- **core:** allow renaming of css template literals ([#973](https://github.com/callstack/linaria/issues/973)) ([8f59a82](https://github.com/callstack/linaria/commit/8f59a82400143ef35b6ffc7f024ad5e6a16552d8))\n\n# [3.0.0-beta.18](https://github.com/callstack/linaria/compare/v3.0.0-beta.17...v3.0.0-beta.18) (2022-04-01)\n\n### Features\n\n- **atomic:** add support for at-rules, keyframes and pseudo classes ([#913](https://github.com/callstack/linaria/issues/913)) ([dee7fa1](https://github.com/callstack/linaria/commit/dee7fa14ea912224cac9f0673be7464e93571a73))\n\n# [3.0.0-beta.17](https://github.com/callstack/linaria/compare/v3.0.0-beta.16...v3.0.0-beta.17) (2021-12-27)\n\n### Features\n\n- **resolver:** add custom resolver option to support re-exporting of linaria libs ([#882](https://github.com/callstack/linaria/issues/882)) ([ad4a368](https://github.com/callstack/linaria/commit/ad4a36857faceec19fa083b28d43af01d5f48f11))\n\n# [3.0.0-beta.16](https://github.com/callstack/linaria/compare/v3.0.0-beta.15...v3.0.0-beta.16) (2021-12-01)\n\n**Note:** Version bump only for package linaria-website\n\n# [3.0.0-beta.15](https://github.com/callstack/linaria/compare/v3.0.0-beta.14...v3.0.0-beta.15) (2021-11-29)\n\n### Features\n\n- **atomic:** create an atomic package for the css API ([#867](https://github.com/callstack/linaria/issues/867)) ([4773bcf](https://github.com/callstack/linaria/commit/4773bcf4b14f08cdc4d2b612654b962cdfc97eaa))\n\n# [3.0.0-beta.14](https://github.com/callstack/linaria/compare/v3.0.0-beta.13...v3.0.0-beta.14) (2021-11-05)\n\n**Note:** Version bump only for package linaria-website\n\n# [3.0.0-beta.13](https://github.com/callstack/linaria/compare/v3.0.0-beta.12...v3.0.0-beta.13) (2021-09-13)\n\n**Note:** Version bump only for package linaria-website\n\n# [3.0.0-beta.12](https://github.com/callstack/linaria/compare/v3.0.0-beta.11...v3.0.0-beta.12) (2021-08-31)\n\n**Note:** Version bump only for package linaria-website\n\n# [3.0.0-beta.11](https://github.com/callstack/linaria/compare/v3.0.0-beta.10...v3.0.0-beta.11) (2021-08-08)\n\n**Note:** Version bump only for package linaria-website\n\n# [3.0.0-beta.7](https://github.com/callstack/linaria/compare/v3.0.0-beta.6...v3.0.0-beta.7) (2021-06-24)\n\n**Note:** Version bump only for package linaria-website\n\n# [3.0.0-beta.6](https://github.com/callstack/linaria/compare/v3.0.0-beta.5...v3.0.0-beta.6) (2021-06-06)\n\n**Note:** Version bump only for package linaria-website\n\n# [3.0.0-beta.5](https://github.com/callstack/linaria/compare/v3.0.0-beta.4...v3.0.0-beta.5) (2021-05-31)\n\n**Note:** Version bump only for package linaria-website\n\n# [3.0.0-beta.4](https://github.com/callstack/linaria/compare/v3.0.0-beta.3...v3.0.0-beta.4) (2021-05-07)\n\n**Note:** Version bump only for package linaria-website\n\n# [3.0.0-beta.3](https://github.com/callstack/linaria/compare/v3.0.0-beta.2...v3.0.0-beta.3) (2021-04-20)\n\n**Note:** Version bump only for package linaria-website\n\n# [3.0.0-beta.2](https://github.com/callstack/linaria/compare/v3.0.0-beta.1...v3.0.0-beta.2) (2021-04-11)\n\n**Note:** Version bump only for package linaria-website\n" }, { "path": "website/babel.config.js", "content": "module.exports = {\n presets: ['@babel/preset-env', '@babel/preset-react'],\n env: {\n server: {\n presets: [\n require.resolve('@wyw-in-js/babel-preset'),\n ['@babel/preset-env', { targets: { node: 12 } }],\n ],\n plugins: [\n [\n 'file-loader',\n {\n publicPath: '/dist',\n outputPath: '/dist',\n },\n ],\n ],\n },\n },\n};\n" }, { "path": "website/index.html", "content": "<!doctype html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n <title>Linaria – zero-runtime CSS in JS library\n\n \n\n\n\n
\n\n \n\n\n\n" }, { "path": "website/linaria.config.js", "content": "module.exports = {\n displayName: process.env.NODE_ENV !== 'production',\n};\n" }, { "path": "website/package.json", "content": "{\n \"name\": \"linaria-website\",\n \"version\": \"6.3.2\",\n \"private\": true,\n \"description\": \"Linaria website\",\n \"exports\": {\n \".\": \"./src/index.jsx\",\n \"./*\": \"./src/*.jsx\"\n },\n \"main\": \"./src/index.jsx\",\n \"scripts\": {\n \"build\": \"pnpm build:client && pnpm build:server\",\n \"build:client\": \"cross-env NODE_ENV=production webpack\",\n \"build:server\": \"cross-env NODE_ENV=production BABEL_ENV=server babel src --out-dir build\",\n \"clean\": \"pnpm clean:client && pnpm clean:server\",\n \"clean:client\": \"del dist\",\n \"clean:server\": \"del build\",\n \"lint:css\": \"stylelint src/**/*.jsx\",\n \"prebuild\": \"pnpm clean\",\n \"prestart\": \"pnpm -w prepare\",\n \"server\": \"node build/server\",\n \"start\": \"webpack serve\"\n },\n \"dependencies\": {\n \"@babel/runtime\": \"^7.23.5\",\n \"@linaria/atomic\": \"workspace:^\",\n \"@linaria/core\": \"workspace:^\",\n \"@linaria/react\": \"workspace:^\",\n \"@linaria/server\": \"workspace:^\",\n \"babel-plugin-file-loader\": \"^1.1.1\",\n \"dedent\": \"^1.5.1\",\n \"escape-html\": \"^1.0.3\",\n \"ignore-styles\": \"^5.0.1\",\n \"koa\": \"^2.7.0\",\n \"koa-compress\": \"^3.0.0\",\n \"koa-router\": \"^7.4.0\",\n \"koa-send\": \"^5.0.0\",\n \"react\": \"^16.14.0\",\n \"react-dom\": \"^16.14.0\"\n },\n \"devDependencies\": {\n \"@babel/cli\": \"^7.23.4\",\n \"@babel/core\": \"^7.23.5\",\n \"@linaria/stylelint\": \"workspace:^\",\n \"@wyw-in-js/babel-preset\": \"^1.0.6\",\n \"@wyw-in-js/webpack-loader\": \"^1.0.6\",\n \"babel-loader\": \"^8.2.5\",\n \"babel-plugin-module-resolver\": \"^4.1.0\",\n \"cross-env\": \"^7.0.3\",\n \"css-hot-loader\": \"^1.4.4\",\n \"css-loader\": \"^6.7.1\",\n \"del-cli\": \"^1.1.0\",\n \"html-webpack-plugin\": \"^5.5.3\",\n \"mini-css-extract-plugin\": \"^2.6.0\",\n \"stylelint\": \"^14.11.0\",\n \"stylelint-config-recommended\": \"^3.0.0\",\n \"url\": \"^0.11.0\",\n \"webpack\": \"^5.94.0\",\n \"webpack-cli\": \"^4.9.2\",\n \"webpack-dev-server\": \"^4.9.1\"\n }\n}\n" }, { "path": "website/serve.config.js", "content": "const path = require('path');\n\nmodule.exports = {\n port: 3242,\n content: path.resolve(__dirname),\n devMiddleware: {\n publicPath: '/dist/',\n },\n};\n" }, { "path": "website/src/.eslintrc", "content": "{\n \"env\": {\n \"browser\": true\n }\n}\n" }, { "path": "website/src/api/index.js", "content": "" }, { "path": "website/src/api/react/index.js", "content": "export * from '@linaria/react';\n" }, { "path": "website/src/components/App.jsx", "content": "import React from 'react';\nimport { css, cx } from '@linaria/atomic';\nimport Header from './Header';\nimport Hero from './Hero';\n\nconst Page = css`\n background: linear-gradient(to bottom right, #b24592, #f15f79);\n color: #fff;\n min-height: 100vh;\n text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.08);\n`;\n\nexport default function Index() {\n return (\n
\n
\n \n
\n );\n}\n" }, { "path": "website/src/components/Container.js", "content": "import { styled } from '@linaria/react';\n\nconst Container = styled.div`\n max-width: 1140px;\n padding: 16px 24px;\n margin: 0 auto;\n`;\n\nexport default Container;\n" }, { "path": "website/src/components/Example.js", "content": "import { css } from '@linaria/core';\nimport { css as atomicCss } from '@linaria/atomic';\n\nexport const Page = css`\n background: linear-gradient(to bottom right, #b24592, #f15f79);\n color: #fff;\n min-height: 100vh;\n text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.08);\n`;\n\nexport const AtomicPage = atomicCss`\n background: linear-gradient(to bottom right, #b24592, #f15f79);\n color: #fff;\n min-height: 100vh;\n text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.08);\n`;\n" }, { "path": "website/src/components/Header.jsx", "content": "import { styled } from '@linaria/react';\nimport React from 'react';\nimport constants from '../styles/constants';\nimport { media } from '../styles/utils';\nimport Container from './Container';\n\nimport logo from '../../assets/linaria-logo.svg';\n\nexport default function Header() {\n return (\n \n \n \n
  • \n \n Features\n \n
    • \n
  • \n \n Docs\n \n
    • \n
  • \n \n GitHub\n \n
    • \n     \n     \n );\n}\n\nconst NavBar = styled(Container)`\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n\n ${media.medium} {\n flex-direction: row;\n }\n`;\n\nconst LogoImage = styled.img`\n height: 64px;\n margin: 16px auto;\n display: block;\n\n ${media.medium} {\n height: 48px;\n margin: 0;\n display: inline-block;\n vertical-align: middle;\n }\n`;\n\nconst Links = styled.ul`\n display: flex;\n padding: 0;\n margin: 0;\n list-style: none;\n align-items: center;\n`;\n\nconst LinkItem = styled.a`\n display: block;\n font-size: 1.2em;\n font-weight: 700;\n padding: 24px 16px;\n text-decoration: none;\n color: inherit;\n transition: color 0.2s;\n transition: 200ms;\n\n &:hover {\n color: inherit;\n }\n\n @supports (-webkit-background-clip: text) {\n background-image: ${constants.gradient};\n /* stylelint-disable-next-line property-no-vendor-prefix */\n -webkit-background-clip: text;\n\n &:hover {\n color: transparent;\n }\n }\n`;\n" }, { "path": "website/src/components/Hero.jsx", "content": "import { styled } from '@linaria/react';\nimport React from 'react';\nimport { media } from '../styles/utils';\nimport Container from './Container';\n\nimport codeSample from '../../assets/code-sample-v4.png';\nimport linariaLogomark from '../../assets/linaria-logomark.svg';\n\nexport default function Hero() {\n return (\n \n \n \n \n Zero-Runtime CSS in JS\n \n Write CSS in JS and get real CSS files during build. Use dynamic\n prop based styles with the React bindings and have them transpiled\n to CSS variables automatically. Great productivity with source\n maps and linting support.\n \n \n Get Started\n \n \n \n \n \n \n \n \n );\n}\n\nconst HeroContainer = styled.main`\n position: relative;\n\n ${media.large} {\n padding: 64px 0;\n background-image: url(${linariaLogomark});\n background-repeat: no-repeat;\n background-position: bottom right;\n }\n`;\n\nconst Row = styled.div`\n ${media.large} {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n`;\n\nconst LeftColumn = styled.div`\n text-align: center;\n flex: 3;\n\n ${media.large} {\n text-align: left;\n }\n`;\n\nconst RightColumn = styled.div`\n text-align: center;\n flex: 2;\n z-index: 1;\n`;\n\nconst Heading = styled.h1`\n font-weight: 700;\n font-size: 56px;\n`;\n\nconst Description = styled.p`\n margin-bottom: 60px;\n`;\n\nconst Button = styled.button`\n display: inline-block;\n appearance: none;\n background: none;\n border: 0;\n padding: 16px 24px;\n color: inherit;\n font-size: inherit;\n font-weight: 700;\n font-family: inherit;\n text-transform: uppercase;\n text-decoration: none;\n box-shadow: inset 0 0 0 2px currentColor, 1px 1px 1px rgba(0, 0, 0, 0.08);\n border-radius: 30px;\n cursor: pointer;\n transition: color 200ms, background 200ms;\n\n &:hover {\n color: #d2356d;\n box-shadow: inset 0 0 0 2px transparent, 1px 1px 1px rgba(0, 0, 0, 0.08);\n background: linear-gradient(\n to right,\n hsl(180, 100%, 70%),\n hsl(64, 57%, 82%),\n hsl(0, 100%, 84%)\n );\n }\n`;\n\nconst CodeSample = styled.img`\n width: 100%;\n height: auto;\n margin: 64px 24px;\n padding: 20px;\n border-radius: 5px;\n max-width: calc(100% - 48px);\n box-shadow: 3px 3px 32px rgba(0, 0, 0, 0.32);\n background-color: #272727;\n\n ${media.large} {\n margin: 24px;\n }\n`;\n" }, { "path": "website/src/index.jsx", "content": "import { css } from '@linaria/core';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './components/App';\nimport constants from './styles/constants';\n\nReactDOM.render(, document.getElementById('root'));\n\n// eslint-disable-next-line import/prefer-default-export\nexport const globals = css`\n :global() {\n html {\n box-sizing: border-box;\n height: 100%;\n width: 100%;\n }\n\n body {\n margin: 0;\n padding: 0;\n height: 100%;\n width: 100%;\n font-family: ${constants.fontFamily};\n font-size: 20px;\n line-height: 1.42857;\n }\n\n *,\n *:before,\n *:after {\n box-sizing: inherit;\n }\n }\n`;\n" }, { "path": "website/src/server.jsx", "content": "import 'ignore-styles';\n\nimport fs from 'fs';\nimport path from 'path';\nimport crypto from 'crypto';\nimport { collect } from '@linaria/server';\nimport Koa from 'koa';\nimport Router from 'koa-router';\nimport compress from 'koa-compress';\nimport send from 'koa-send';\nimport dedent from 'dedent';\nimport React from 'react';\nimport ReactDOMServer from 'react-dom/server';\nimport config from '../serve.config';\nimport App from './components/App';\n\nconst cache = {};\nconst css = fs.readFileSync(path.join(__dirname, '../dist/styles.css'), 'utf8');\nconst app = new Koa();\nconst router = new Router();\n\napp.use(compress());\n\nrouter.get('/', async (ctx) => {\n const html = ReactDOMServer.renderToStaticMarkup();\n\n const { critical, other } = collect(html, css);\n const slug = crypto.createHash('md5').update(other).digest('hex');\n\n cache[slug] = other;\n\n ctx.type = 'html';\n ctx.body = dedent`\n \n \n \n \n \n\n Linaria – zero-runtime CSS in JS library\n\n \n \n\n \n \n \n
    ${html}
    \n\n \n \n \n \n `;\n});\n\nrouter.get('/dist/:path+', async (ctx) => {\n await send(ctx, path.join('dist', ctx.params.path));\n});\n\nrouter.get('/styles/:slug', async (ctx) => {\n ctx.type = 'text/css';\n ctx.body = cache[ctx.params.slug];\n});\n\napp.use(router.routes());\n\napp.listen(config.port);\n\n// eslint-disable-next-line no-console\nconsole.log(`Listening on http://localhost:${config.port}`);\n" }, { "path": "website/src/styles/constants.js", "content": "export default {\n fontFamily:\n '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", Helvetica, sans-serif',\n gradient:\n 'linear-gradient(to right, hsl(180, 100%, 70%), hsl(64, 57%, 82%), hsl(0, 100%, 90%))',\n};\n" }, { "path": "website/src/styles/utils.js", "content": "export const breakpoints = {\n medium: 640,\n large: 1024,\n};\n\nexport const media = Object.keys(breakpoints).reduce((acc, item) => {\n acc[item] = `@media screen and (min-width: ${breakpoints[item]}px)`;\n return acc;\n}, {});\n" }, { "path": "website/stylelint.config.js", "content": "module.exports = {\n extends: [\n 'stylelint-config-recommended',\n require.resolve('@linaria/stylelint'),\n ],\n};\n" }, { "path": "website/webpack.config.js", "content": "const MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst { join } = require('path'); // eslint-disable-line import/no-extraneous-dependencies\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst { WYWinJSDebugPlugin } = require('@wyw-in-js/webpack-loader');\n\nconst dev = process.env.NODE_ENV !== 'production';\n\nmodule.exports = {\n mode: dev ? 'development' : 'production',\n devtool: 'source-map',\n entry: {\n app: './src/index',\n },\n output: {\n path: join(__dirname, 'dist'),\n filename: '[name].bundle.js',\n },\n optimization: {\n emitOnErrors: false,\n },\n plugins: [\n new WYWinJSDebugPlugin({\n dir: 'wyw-debug',\n print: true,\n }),\n new MiniCssExtractPlugin({ filename: 'styles.css' }),\n new HtmlWebpackPlugin({\n title: 'Linaria – zero-runtime CSS in JS library',\n templateContent: `\n \n \n \n \n \n \n
    \n \n \n `,\n }),\n ],\n resolve: {\n extensions: ['.js', '.jsx'],\n },\n module: {\n rules: [\n {\n test: /\\.jsx?$/,\n exclude: /node_modules/,\n use: [\n { loader: 'babel-loader' },\n {\n loader: require.resolve('@wyw-in-js/webpack-loader'),\n options: { sourceMap: dev },\n },\n ],\n },\n {\n test: /\\.css$/,\n use: [\n 'css-hot-loader',\n MiniCssExtractPlugin.loader,\n {\n loader: 'css-loader',\n options: { sourceMap: dev },\n },\n ],\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n type: 'asset/resource',\n },\n ],\n },\n devServer: {\n static: {\n directory: join(__dirname, 'dist'),\n },\n hot: true,\n historyApiFallback: {\n index: 'index.html',\n },\n },\n};\n" } ]