init

.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

.npmignore

@@ -0,0 +1,3 @@
+.rpt2_cache
+rollup.config.js
+src

.npmrc

@@ -0,0 +1 @@
+package-lock=false

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);
+```

dist/index.d.ts

@@ -0,0 +1 @@
+export declare function injectStyles(shadowRootElement: HTMLElement, insertBeforeSelector: string, styles: string): void;

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};

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;;;;"}

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"
+  }
+}

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
+    }
+}

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));
+		}
+	});
+}

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"
+  ]
+}