{"id":21706350,"url":"https://github.com/samiahmedsiddiqui/append-files","last_synced_at":"2025-03-20T17:17:49.466Z","repository":{"id":57182762,"uuid":"211013038","full_name":"samiahmedsiddiqui/append-files","owner":"samiahmedsiddiqui","description":"Append CSS files and inline CSS in head tag whereas JS files and embed JS in body tag.","archived":false,"fork":false,"pushed_at":"2019-09-26T11:38:49.000Z","size":4,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-09-29T09:22:31.726Z","etag":null,"topics":["add-stylesheets","inline-css","inline-script","inline-styles","react","stylesheet-files"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/append-files","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/samiahmedsiddiqui.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-26T06:11:00.000Z","updated_at":"2020-01-27T07:33:08.000Z","dependencies_parsed_at":"2022-09-11T23:50:34.440Z","dependency_job_id":null,"html_url":"https://github.com/samiahmedsiddiqui/append-files","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samiahmedsiddiqui%2Fappend-files","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samiahmedsiddiqui%2Fappend-files/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samiahmedsiddiqui%2Fappend-files/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samiahmedsiddiqui%2Fappend-files/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/samiahmedsiddiqui","download_url":"https://codeload.github.com/samiahmedsiddiqui/append-files/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244656734,"owners_count":20488640,"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":["add-stylesheets","inline-css","inline-script","inline-styles","react","stylesheet-files"],"created_at":"2024-11-25T22:12:32.802Z","updated_at":"2025-03-20T17:17:49.446Z","avatar_url":"https://github.com/samiahmedsiddiqui.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# append-files\n\nAppend CSS files and inline CSS in `head` tag whereas JS files and embed JS in `body` tag.\n\n## Install\n\nVia `npm`\n```\nnpm install append-files\n```\n\nVia Yarn\n```\nyarn add append-files\n```\n\n## Usage\n\nIf like to add the styles and script files only without defining any other attributes then you can do this:\n\n\n### Add Script Files:\n```\nimport { appendScripts } from 'append-files';\n\nvar addScripts = [\n  '/js/script.js',\n  'http://example.com/test.js'\n];\n\nappendScripts(addScripts);\n```\n\n**NOTE:** In this way, you can only add the script files, not applicable for inline script. To add inline scripts or add attibutes on script tags, like id, async, nomodule etc pass them as an object as shown in the example below. \n\n### Add Script Files with its dependency:\n\nIf you need to append 2 or more script files and the second script is dependent on the first script then you can define add the dependent script like this: \n```\nimport { appendScripts } from 'append-files';\n\nvar addScripts = [{\n  'id': 'test-forms',\n  'url': 'http://example.com/test.js',\n  'dependentScripts': [{\n    'url': '/js/script.js',\n    'async': true,\n  }]\n}];\n\nappendScripts(addScripts);\n```\n\n**NOTE:** In this case, `id` attribute **MUST** be defined otherwise, dependent scripts not appended as it is suppose to be.\n\n### Add Inline Script:\n\nPass the script to be added as inline:\n```\nimport { appendScripts } from 'append-files';\n\nvar addScripts = [{\n  'inline': 'alert(1);'\n}];\n\nappendScripts(addScripts);\n```\n\n### Add Stylesheets:\n```\nimport { appendStylesheets } from 'append-files';\n\nvar addStyles = [\n  'http://example.com/test.css',\n  '/css/style.css'\n];\n\nappendStylesheets(addStyles);\n```\n\n**NOTE:** In this way, you can only add the stylesheet files, not applicable for inline styles. To add inline styles, pass them as an object as shown in the example below. \n\n### Add Stylesheets and Inline Style:\n\nThis is the example by which you can add inline CSS and/or stylesheet files.\n```\nimport { appendStylesheets } from 'append-files';\n\nvar addStyles = [\n  {\n    'href': 'http://example.com/test.css'\n  },\n  {\n    'href': '/css/style.css'\n  },\n  {\n    'inline': 'h1 { color: red; }'\n  }\n];\n\nappendStylesheets(addStyles);\n```\n\n## Supported Script Attributes\n\n| Attributes | Type | Required | Description |\n| ----------- | ----- | ----------- | ------------- |\n| url | URL | Yes | URI of an script.\u003cbr\u003e\u003cbr\u003e Either url or inline is required. |\n| inline | String | Yes | script which is not loaded from the file, but embedded inside script tag. For example: \u003cscript\u003ealert(1);\u003c/script\u003e.\u003cbr\u003e\u003cbr\u003e Either url or inline is required. |\n| async | Boolean | No | Indicating that the browser should load the script asynchronously and then execute it as soon as it's downloaded. |\n| referrerPolicy | String | No | Indicates which referrer to send when fetching the script, or resources fetched by the script. |\n| id  | String | No | unique id for an Script Tag. Required when using  `dependentScripts` attribute. |\n| nomodule | Boolean | No | Indicate that the script should not be executed in browsers that support ES2015 modules. |\n| dependentScripts | Object | No | If you have 2 script Files and the first file has the dependency on the second file then you can use this attribute to define the dependent script.\u003cbr\u003e\u003cbr\u003eIn this case, `id` attribute is required with the dependency. For further information, refer to the [Add Script Files with its dependency:](#add-script-files-with-its-dependency) example. | \n\n## Supported Style Attributes\n\n| Attributes | Type | Required | Description |\n| ----------- | ----- | ----------- | ------------- |\n| url | URL | Yes | URI of an stylesheet.\u003cbr\u003e\u003cbr\u003e Either url or inline is required. |\n| inline | String | Yes | style which is not loaded from the file, but embedded inside style tag. For example: \u003cstyle\u003eh1 { color: red; }\u003c/style\u003e.\u003cbr\u003e\u003cbr\u003e Either url or inline is required. |\n\n\n## Tested\n\nThis package is tested with the React Application. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamiahmedsiddiqui%2Fappend-files","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamiahmedsiddiqui%2Fappend-files","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamiahmedsiddiqui%2Fappend-files/lists"}