diff --git a/.gitignore b/.gitignore index ad46b30..aecfe24 100644 --- a/.gitignore +++ b/.gitignore @@ -1,61 +1,7 @@ -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* - -# Runtime data -pids -*.pid -*.seed -*.pid.lock - -# Directory for instrumented libs generated by jscoverage/JSCover -lib-cov - -# Coverage directory used by tools like istanbul -coverage - -# nyc test coverage -.nyc_output - -# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) -.grunt - -# Bower dependency directory (https://bower.io/) -bower_components - -# node-waf configuration -.lock-wscript - -# Compiled binary addons (https://nodejs.org/api/addons.html) -build/Release +# Webstorm +.idea # Dependency directories node_modules/ -jspm_packages/ -# TypeScript v1 declaration files -typings/ - -# Optional npm cache directory -.npm - -# Optional eslint cache -.eslintcache - -# Optional REPL history -.node_repl_history - -# Output of 'npm pack' -*.tgz - -# Yarn Integrity file -.yarn-integrity - -# dotenv environment variables file -.env - -# next.js build output -.next +.rpt2_cache \ No newline at end of file diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..bbe4f03 --- /dev/null +++ b/.npmignore @@ -0,0 +1,3 @@ +.rpt2_cache +rollup.config.js +src \ No newline at end of file diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..43c97e7 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +package-lock=false diff --git a/README.md b/README.md index 047eb9b..4549356 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,15 @@ # Shadow-DOM-inject-styles A helper function to easily modify Shadow DOM CSS. + +```ts +const toolbar = (this.el.querySelector('ion-header > ion-toolbar') as HTMLElement); + +// language=CSS +const styles = ` + .toolbar-background { + background: red !important;; + } +`; + +injectStyles(toolbar, '.toolbar-background', styles); +``` \ No newline at end of file diff --git a/dist/index.d.ts b/dist/index.d.ts new file mode 100644 index 0000000..0d95d4f --- /dev/null +++ b/dist/index.d.ts @@ -0,0 +1 @@ +export declare function injectStyles(shadowRootElement: HTMLElement, insertBeforeSelector: string, styles: string): void; diff --git a/dist/index.js b/dist/index.js new file mode 100644 index 0000000..ec55cb6 --- /dev/null +++ b/dist/index.js @@ -0,0 +1 @@ +function injectStyles(e,t,r){let l=e.shadowRoot,n=!1,o=Array.from(l.querySelectorAll("style"));o.forEach((e,c)=>{if(e.innerHTML==r&&(n=!0),o.length-1==c&&0==n){let e=document.createElement("style");e.innerHTML=r,l.insertBefore(e,l.querySelector(t))}})}export{injectStyles}; \ No newline at end of file diff --git a/dist/index.js.map b/dist/index.js.map new file mode 100644 index 0000000..55128d6 --- /dev/null +++ b/dist/index.js.map @@ -0,0 +1 @@ +{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["export function injectStyles(shadowRootElement: HTMLElement, insertBeforeSelector: string, styles: string) {\n\tlet root = shadowRootElement.shadowRoot;\n\tlet styleAlreadyAdded = false;\n\tlet currentStyleTags = Array.from(root.querySelectorAll('style'));\n\tcurrentStyleTags.forEach((element: HTMLStyleElement, index) => {\n\t\tif (element.innerHTML == styles) {\n\t\t\tstyleAlreadyAdded = true;\n\t\t}\n\t\tif ((currentStyleTags.length - 1) == index && styleAlreadyAdded == false) {\n\t\t\tlet newStyleTag = document.createElement('style');\n\t\t\tnewStyleTag.innerHTML = styles;\n\t\t\troot.insertBefore(newStyleTag, root.querySelector(insertBeforeSelector));\n\t\t}\n\t});\n}"],"names":[],"mappings":"sBAA6B,iBAA8B,EAAE,oBAA4B,EAAE,MAAc;IACxG,IAAI,IAAI,GAAgB,iBAAiB,CAAC,UAAU,CAAC;IACrD,IAAI,iBAAiB,GAAG,KAAK,CAAC;IAC9B,IAAI,gBAAgB,GAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC;IACnE,gBAAgB,CAAC,OAAO,CAAC,CAAC,OAAyB,EAAE,KAAK;QACzD,IAAI,OAAO,CAAC,SAAS,IAAI,MAAM,EAAE;YAChC,iBAAiB,GAAG,IAAI,CAAC;SACzB;QACD,IAAI,CAAC,gBAAgB,CAAC,MAAM,GAAG,CAAC,KAAK,KAAK,IAAI,iBAAiB,IAAI,KAAK,EAAE;YACzE,IAAI,WAAW,GAAS,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACxD,WAAW,CAAC,SAAS,GAAG,MAAM,CAAC;YAC/B,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC,CAAC;SACzE;KACD,CAAC,CAAC;CACH;;;;"} \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..b571c16 --- /dev/null +++ b/package.json @@ -0,0 +1,32 @@ +{ + "name": "shadow-dom-inject-styles", + "version": "1.0.0", + "description": "A helper function to easily modify shadow dom css.", + "module": "./dist/index.js", + "main": "./dist/index.js", + "types": "./dist/index.d.ts", + "scripts": { + "build": "npm run rollup && npm run uglify", + "rollup": "rollup -c", + "uglify": "uglifyjs --compress --mangle -o ./dist/index.js -- ./dist/index.js", + "lint": "tslint --project tsconfig.json" + }, + "author": "Adam LaCombe", + "license": "MIT", + "devDependencies": { + "@studio/changes": "^1.5.2", + "@types/jasmine": "^2.8.8", + "@types/node": "^8.5.1", + "rollup": "^0.56.2", + "rollup-plugin-commonjs": "^9.1.4", + "rollup-plugin-node-builtins": "^2.1.2", + "rollup-plugin-node-globals": "^1.2.1", + "rollup-plugin-node-resolve": "^3.3.0", + "rollup-plugin-typescript2": "^0.16.1", + "tcs": "^10.0.0", + "tslint": "^5.10.0", + "tslint-ionic-rules": "0.0.14", + "typescript": "2.9.1", + "uglify-es": "^3.3.9" + } +} diff --git a/rollup.config.js b/rollup.config.js new file mode 100644 index 0000000..63f313c --- /dev/null +++ b/rollup.config.js @@ -0,0 +1,29 @@ +import builtins from 'rollup-plugin-node-builtins'; +import globals from 'rollup-plugin-node-globals'; +import resolve from 'rollup-plugin-node-resolve'; +import typescript from 'rollup-plugin-typescript2'; + +export default { + input: 'src/index.ts', + plugins: [ + typescript({ + tsconfigOverride: { + compilerOptions: { + module: 'esnext', + declaration: true + } + } + }), + resolve({ + browser: true, + }), + globals(), + builtins() + ], + output: { + extend: true, + file: `dist/index.js`, + format: 'es', + sourcemap: true + } +} \ No newline at end of file diff --git a/src/index.ts b/src/index.ts new file mode 100644 index 0000000..1091649 --- /dev/null +++ b/src/index.ts @@ -0,0 +1,15 @@ +export function injectStyles(shadowRootElement: HTMLElement, insertBeforeSelector: string, styles: string) { + let root = shadowRootElement.shadowRoot; + let styleAlreadyAdded = false; + let currentStyleTags = Array.from(root.querySelectorAll('style')); + currentStyleTags.forEach((element: HTMLStyleElement, index) => { + if (element.innerHTML == styles) { + styleAlreadyAdded = true; + } + if ((currentStyleTags.length - 1) == index && styleAlreadyAdded == false) { + let newStyleTag = document.createElement('style'); + newStyleTag.innerHTML = styles; + root.insertBefore(newStyleTag, root.querySelector(insertBeforeSelector)); + } + }); +} \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..2810dce --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,33 @@ +{ + "compilerOptions": { + "module": "esnext", + "target": "es2017", + "declaration": true, + "sourceMap": true, + "outDir": "dist", + "typeRoots": [ + "node_modules/@types", + "src/utils" + ], + "lib": [ + "dom", + "es2017" + ], + "noUnusedLocals": false, + "noUnusedParameters": false, + "noImplicitAny": false, + "allowSyntheticDefaultImports": true, + "allowUnreachableCode": false, + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "isolatedModules": false, + "moduleResolution": "node" + }, + "include": [ + "src" + ], + "exclude": [ + "node_modules", + "dist" + ] +} \ No newline at end of file