{"_id":"@atomico/inject-style","_rev":"2-6cb5f0d25e36ed3d4158255222777240","name":"@atomico/inject-style","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@atomico/inject-style","version":"1.0.0","description":"Improves the extensibility of the CSS of your webcomponents","module":"./src/inject-style.js","exports":{".":"./src/inject-style.js"},"scripts":{"types":"tsc","test":"wtr tests/**/*.test.js --node-resolve","prepack":"npm run test && npm run types"},"keywords":["webcomponents","shadowdom","css"],"author":{"name":"UpperCod"},"license":"ISC","bugs":{"url":"https://github.com/atomicojs/inject-style/issues"},"homepage":"https://github.com/atomicojs/inject-style#readme","publishConfig":{"access":"public"},"devDependencies":{"@esm-bundle/chai":"^4.3.4","@web/test-runner":"^0.13.3","typescript":"^4.2.4"},"gitHead":"a7205704957196a2bb2cee82717e2810f4c9a0e1","_id":"@atomico/inject-style@1.0.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-TT1oFk6Gr4r9pxhKr36SIs7R2WXkvxnH3BSKt0X4mBnlqxAE1dPyf/lvzwT4Hb9msTOCS//To8DGpCI3uKtgOA==","shasum":"3ef756a1b49bebf56878a267515cde8107345738","tarball":"https://registry.npmjs.org/@atomico/inject-style/-/inject-style-1.0.0.tgz","fileCount":4,"unpackedSize":4640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkBvwCRA9TVsSAnZWagAArk0P/i2MfRgcIrDmvtPXgLj7\n1A0hCTjarPe44Zh1WRVWp+NvJO2X5aNlHtrWU1uV5UetLrZI5H8Q1/GlzLVi\nKpiv/RLZg3Oqrp8e4aWZs13ljKRIYwzjVRsvNVCgxS7DGDtwdRLMm2tvZLnu\nVyJdH7Y/y8lFXYUQ+JEpkur1y/qwj2s1+i2/RCQpqoLeEbJ0CqH2EyY5Q6l6\nTE1VoZ7R5kcuUd5L8t1HJZc7k8n7IzHwwpl9zPA3N7NGfax3jGHj2nNXNfSN\ngyiXwzvWLYynuDVmtfyp4YrCIeHNUH9uwcq7SL7SwwQBOX77HbNgOaTylyiL\n/CJJqX3E5bNv1Uhc+eiB41PNiM8BsZ8hg+5ERVPkPkrzZWqg1ZuhHgx5RG+L\nYUl2Wh+fIKWP8ZflUSRHIF1RzztDbu09hXIudhsptbU4Z+zwGu3c1JkhvNNw\n85fOlDHIjQiUalgjiwmyzlM7di3eanK2cgGLe+lWiq+tvne1MxyQ9WU8HO0g\nfzamUATHaiLDgcqdUH4NNNiIqBXAruHiJJB2Epb7mkPRE9s7sqH7O8cso6v8\nyQtmlHEbI4RxVcbfOS2zPve8e+F8GFJmZosiT5Y3z59CSnYD2baMyGiuGauT\nZeX6k08lcv8/ctTf8sJkhIekZvg4791M58q9eyFJdnhZW90Ls3mLW0LdO7z+\njnnS\r\n=B3WO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDp/RoJO8NG2DamHKGjN8EpCoP8wcns/w5HLE8jrMin7AIhANLGr1isnCwlKJEkyHWNhiUvlN5h2v4fjg3o6QWZsf0b"}]},"_npmUser":{"name":"uppercod","email":"mtrujillo@outlook.cl"},"directories":{},"maintainers":[{"name":"uppercod","email":"mtrujillo@outlook.cl"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/inject-style_1.0.0_1620057071875_0.023191847852726433"},"_hasShrinkwrap":false},"1.0.1":{"name":"@atomico/inject-style","version":"1.0.1","description":"Improves the extensibility of the CSS of your webcomponents","module":"./src/inject-style.js","exports":{".":"./src/inject-style.js"},"scripts":{"types":"tsc","test":"wtr tests/**/*.test.js --node-resolve","prepack":"npm run test && npm run types"},"keywords":["webcomponents","shadowdom","css"],"author":{"name":"UpperCod"},"license":"ISC","bugs":{"url":"https://github.com/atomicojs/inject-style/issues"},"homepage":"https://github.com/atomicojs/inject-style#readme","publishConfig":{"access":"public"},"devDependencies":{"@esm-bundle/chai":"^4.3.4","@web/test-runner":"^0.13.3","typescript":"^4.2.4"},"gitHead":"5941eda94dfad2135829936fb64df54d78bf82f6","_id":"@atomico/inject-style@1.0.1","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-5H7iCfPMlPVW8K02ou35PN1wR8rqQutuF0uNPnZTCdSD3guanjPDy7dq+0X/azJJvNM0wfIi6XxXjb5nsvgsMw==","shasum":"12ad9cfd8257bf645ecd0dc8ebae2fe861969fed","tarball":"https://registry.npmjs.org/@atomico/inject-style/-/inject-style-1.0.1.tgz","fileCount":4,"unpackedSize":5403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkCLNCRA9TVsSAnZWagAAvxwQAJ5I+78lw/s/hnFeaMo2\nGh5BhVlREdr9/mPxUWquDlZURtMt0Yp7N2pe2EaC8wAqqnioMb6vMdML2x2k\ngs3dEC0IpWRdVnWxKXpTZ0cbsvcV9aT2qu48B6DPYhIw5ti4dJa39Rau31Sy\nLED9ylSK+5LcVXwbhPmmAQToQ4frTTaG9eXh8rzwj3T2Mj/YPS7iMkce+pz8\nA+kOOkOubw2spjUXzLLoJLrOtM46iSRrmCtn/bKyzpOoF+IGv9fAytZVwYB+\n2Aip5kAjpm7+DZjy3R6iwEggfJVyvnQb+8lG9+vSJi4NXbDu1MNF2MXMXtVl\nxu7fwCjjcwJscKDESd5I/dxskwPOsZ+jZQtcE6NnHLQ6su/YzjBsjQ2oaM5d\nhInxotXFepC26WJO3uq4Mt9SlxZJkeYzM5WfMFDsU0aN9uqwwTvgyG96dMAO\njsoJ3H9zLxZ7Cme0B0pGG0BMSRh+GZTfFdkOErmftJmNsDEjIMtrqulo6Kw3\nqbltAF1GJIjZJLvPboxdPRzfPyVjWFP9j+AYZCu7tjKg+uMQb5loyJ57R6Q9\nOPsrJsRAz5JuiAK5z56gLbDW3gG7COO+4SjxjJ0K+X8sWo8Aj8o7dTxbd/bj\ny73lY6YJl/4LsarWql8F239vWuk9zQaZQbpyrrwgIPbfGcbeubxI3YKuSKWn\ny0MV\r\n=xvHD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBQDOriUTgD3UWHLkO+DIEvtIWmaC6v8kTWV+vsNLCXXAiEAoEl9jDrU128J6K7epP79JmH3z377dQOPsbBeHr/G1xQ="}]},"_npmUser":{"name":"uppercod","email":"mtrujillo@outlook.cl"},"directories":{},"maintainers":[{"name":"uppercod","email":"mtrujillo@outlook.cl"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/inject-style_1.0.1_1620058828538_0.417114192001413"},"_hasShrinkwrap":false}},"time":{"created":"2021-05-03T15:51:11.673Z","1.0.0":"2021-05-03T15:51:11.979Z","modified":"2022-04-04T16:15:15.549Z","1.0.1":"2021-05-03T16:20:28.663Z"},"maintainers":[{"name":"uppercod","email":"mtrujillo@outlook.cl"}],"description":"Improves the extensibility of the CSS of your webcomponents","homepage":"https://github.com/atomicojs/inject-style#readme","keywords":["webcomponents","shadowdom","css"],"author":{"name":"UpperCod"},"bugs":{"url":"https://github.com/atomicojs/inject-style/issues"},"license":"ISC","readme":"# @atomico/inject-style\n\nCreated by [@uppercod](https://twitter.com/uppercod) with reference to [@jouni](https://twitter.com/jouni)'s work.\n\nThis webcomponent is an alternative to `::part` and allows to inject CSS outside the shadowDOM into the shadowDOM of the parent who uses this webcomponent, consider:\n\n1. The CSS must be inside an at-rule rule `@media `.\n2. The reading is static, if you want to execute dynamic effects, declare customProperty inside the `at-media` referenced by this webcomponent.\n3. Safe, as the rules are injected via `insertRule`.\n4. This component must be nested within shadowDOM depth 0, example `#shadow-root > inject-style`.\n5. The search for css rules is limited by the `host` just like `::part`.\n\n```xml\n\n\n #shadow-root\n \n \n\n```\n\nthe css inside the at-rule `@media my-example` will exist inside my-example only if they share the tagName or a custom namespace.\n\n## Install\n\n```bash\nnpm i @atomico/inject-style\n```\n\n## Usage\n\n### [Atomico](https://atomicojs.github.io/)\n\n```jsx\nimport { c } from \"atomico\";\nimport \"@atomico/inject-style\";\n\nfunction component() {\n return (\n \n \n ...DOM\n \n );\n}\n\ncustomElements.define(\"my-component\", c(component));\n```\n\nRemember in Atomico you can also use Constructors to instantiate the webcomponent, example ``.\n\n### Vinilla JS\n\n```js\nimport \"@atomico/inject-style\";\n\nclass Component extends HTMLElement {\n constructor() {\n super();\n this.attachShadow({ mode: \"open\" });\n }\n connectedCallback() {\n this.shadowRoot.innerHTML = `\n \n ...DOM\n `;\n }\n}\n```\n\n## Properties\n\n| Property | Type | Description |\n| --------- | ------ | ------------------------------------------------------------ |\n| namespace | String | Permite añadir un namespace adicional a la catura de at-rule |\n","readmeFilename":"README.md"}