{"id":16117882,"url":"https://github.com/aelbore/rollup-plugin-inline-lit-element","last_synced_at":"2025-03-17T18:30:43.737Z","repository":{"id":34637219,"uuid":"179613823","full_name":"aelbore/rollup-plugin-inline-lit-element","owner":"aelbore","description":"Rollup plugin to inline external styles in lit-element","archived":false,"fork":false,"pushed_at":"2022-12-11T19:18:12.000Z","size":1740,"stargazers_count":12,"open_issues_count":17,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-10T20:47:19.903Z","etag":null,"topics":["css","inline-css","inline-styles","lit-element","lit-html","plugin","rollup","styles"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aelbore.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-05T03:29:30.000Z","updated_at":"2023-08-24T03:05:34.000Z","dependencies_parsed_at":"2023-01-15T08:13:48.791Z","dependency_job_id":null,"html_url":"https://github.com/aelbore/rollup-plugin-inline-lit-element","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aelbore%2Frollup-plugin-inline-lit-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aelbore%2Frollup-plugin-inline-lit-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aelbore%2Frollup-plugin-inline-lit-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aelbore%2Frollup-plugin-inline-lit-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aelbore","download_url":"https://codeload.github.com/aelbore/rollup-plugin-inline-lit-element/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221698866,"owners_count":16865935,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","inline-css","inline-styles","lit-element","lit-html","plugin","rollup","styles"],"created_at":"2024-10-09T20:47:30.820Z","updated_at":"2024-10-27T15:29:24.081Z","avatar_url":"https://github.com/aelbore.png","language":"TypeScript","readme":"[![npm version](https://badge.fury.io/js/rollup-plugin-inline-lit-element.svg)](https://www.npmjs.com/package/rollup-plugin-inline-lit-element)\n[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n\n# rollup-plugin-inline-lit-element\nRollup plugin to inline external styles in lit-element, transpile decorators to native javascript (see [Decorators](https://github.com/aelbore/rollup-plugin-inline-lit-element/tree/master/demo/decorators))\n\n\nGetting Started\n------------\n  ```\n  git clone https://github.com/aelbore/rollup-plugin-inline-lit-element.git\n  npm install\n  ```\n\nInstallation\n------------\n  ```\n    npm install --save-dev rollup-plugin-inline-lit-element\n  ```\n\n## Examples\n* [ Hello World ](https://github.com/aelbore/inline-styles-lit-element)\n* [ Todo App ](https://github.com/aelbore/inline-styles-lit-element/tree/todo-lit-element)\n* [ Decorators ](https://github.com/aelbore/rollup-plugin-inline-lit-element/tree/master/demo/decorators)\n\n## Setup\n* `hello-world.css`\n  ```css\n  h1 {\n    color: red;\n  }\n  ```\n\n* `hello-world.js`\n  ```javascript\n  import { LitElement, html } from 'lit-element'\n  import './hello-world.css'\n\n  class HelloWorld extends LitElement {\n\n    static get properties() {\n      return {\n        message: { type: String }\n      }\n    }\n\n    render() {\n      return html `\u003ch1\u003eHello ${this.message}\u003c/h1\u003e`\n    }\n\n  }\n\n  customElements.define('hello-world', HelloWorld)  \n  ```\n\n* `rollup.config.js`\n  ```javascript\n  import minifyHTML from 'rollup-plugin-minify-html-literals';\n  import resolve from 'rollup-plugin-node-resolve'\n\n  import { terser } from 'rollup-plugin-terser'\n  import { inlineLitElement } from 'rollup-plugin-inline-lit-element'\n\n  export default {\n    treeshake: true,\n    input: 'src/hello-world.js',\n    external: [],\n    plugins: [\n      minifyHTML(),\n      inlineLitElement(),\n      resolve(),\n      terser()\n    ],\n    output: {\n      sourcemap: true,\n      globals: {},\n      file: 'dist/hello-world.js',\n      format: 'esm'\n    }\n  }  \n  ```\n \n * output of your `hello-world.js`\n   ```javascript\n    import { LitElement, html, css } from 'lit-element'\n\n    class HelloWorld extends LitElement {\n\n      static get styles() {\n        return css `h1 { color: red; }`\n      }\n\n      static get properties() {\n        return {\n          message: { type: String }\n        }\n      }\n\n      render() {\n        return html `\u003ch1\u003eHello ${this.message}\u003c/h1\u003e`\n      }\n\n    }\n\n    customElements.define('hello-world', HelloWorld)  \n   ```\n\u003cbr /\u003e\n\n## Support Sass\n  ```\n    npm install --save-dev node-sass\n  ```\n\u003cbr /\u003e\n\n## Use Lit-Element-Transpiler\n  ```\n  git submodule init\n  git submodule update --remote\n\n  npm run link.transpiler\n  ```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faelbore%2Frollup-plugin-inline-lit-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faelbore%2Frollup-plugin-inline-lit-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faelbore%2Frollup-plugin-inline-lit-element/lists"}