Bumped version, added new option to the code to determine how to generate styles

Author: Tom Maton

README.md

@@ -19,14 +19,15 @@ $ yarn add gulp-css-to-polymer
 ## Examples
 
 ```js
-var stylemod = require('gulp-css-to-polymer');
+const polymerizeCSS = require('gulp-css-to-polymer');
 
 // Wrap css files
 gulp.task("polymerize", () => {
     gulp.src("./src/**/*.css")
-        .pipe(stylemod({
+        .pipe(polymerizeCSS({
             prefix: 'tg-',
-            suffix: '-styles'
+            suffix: '-styles',
+            pwa: true
         }))
         .pipe(gulp.dest("./dist"));
 }
@@ -40,7 +41,9 @@ gulp.task("polymerize", () => {
     // string to be used for the beginning of the file name & module ids.
     prefix: 'tg-',
     // string to be used for the end of the file name & module ids.
-    suffix: '-styles'
+    suffix: '-styles',
+    // boolean, determines how the styles are generated as differentate between Polymer and Polymer PWA
+    pwa: true // default is false
 }
 ```
 

index.js

@@ -4,9 +4,38 @@ const gutil = require('gulp-util');
 
 const PLUGIN_NAME = 'gulp-css-to-polymer';
 
-function generateModuleName(options, file) {
-    return `${options.prefix}${path.basename(file.path, path.extname(file.path))}${options.suffix}`;
-}
+const camelCaseModuleId = (moduleId) => {
+    return moduleId.replace(/^([A-Z])|[\s-_]+(\w)/g, (match, p1, p2) => {
+        if (p2) return p2.toUpperCase();
+        return p1.toLowerCase();
+    });
+};
+
+const generateModuleName = (options, file) => `${options.prefix}${path.basename(file.path, path.extname(file.path))}${options.suffix}`;
+
+const generatePolymerStyle = (styles, moduleId) => (`import '@polymer/polymer/polymer-element';
+
+            const $_documentContainer = document.createElement('template');
+            $_documentContainer.innerHTML = \`<dom-module id="${moduleId}">
+                <template>
+                    <style>
+                    ${styles.toString('utf8')}
+                    </style>
+                </template>
+            </dom-module>\`;
+
+            document.head.appendChild($_documentContainer.content);
+        `
+);
+
+const generatePWAStyle = (styles, moduleId) => (`import { html } from '@polymer/lit-element';
+
+            export const ${camelCaseModuleId(moduleId)} = html \`
+            <style>
+                ${styles.toString('utf8')}
+            </style>\`;
+            `
+);
 
 module.exports = opts => through.obj((file, enc, cb) => {
     const fileObj = file;
@@ -20,19 +49,11 @@ module.exports = opts => through.obj((file, enc, cb) => {
 
     const moduleId = generateModuleName(opts, file);
     const dirname = path.dirname(file.path);
+    const isPWA = !!opts.pwa;
 
-    const res = `import '@polymer/polymer/polymer-element';
-
-    const $_documentContainer = document.createElement('template');
-    $_documentContainer.innerHTML = \`<dom-module id=${moduleId}>
-        <template>
-            <style>
-            ${file.contents.toString('utf8')}
-            </style>
-        </template>
-    </dom-module>\`;
-
-    document.head.appendChild($_documentContainer.content);`;
+    const res = (isPWA)
+        ? generatePWAStyle(file.contents, moduleId)
+        : generatePolymerStyle(file.contents, moduleId);
 
     fileObj.contents = Buffer.from(res);
     fileObj.path = `${path.join(dirname, moduleId)}.js`;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gulp-css-to-polymer",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Converting CSS to a ES6 Module for Polymer V3.x.x",
   "main": "index.js",
   "scripts": {