chore: updated README

drdreo · May 20, 2021 · d5d3c16 · d5d3c16
1 parent 60d175d
commit d5d3c16
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 77 deletions.
diff --git a/.npmignore b/.npmignore
@@ -1 +1,2 @@
-test-app
+test-app
+.idea
diff --git a/README.md b/README.md
@@ -10,98 +10,108 @@
 </div>
 
 <blockquote>
-It is a fork of <a href="https://github.com/superjose/polymer-css-loader">polymer-css-loader</a>! But since the loader was only developed for polymer. I adopted it for lit-element. This is still a work in progress. While this may have worked well on my windows machine, there may still be unforeseen bugs and the API may change in the future.
+It is a fork of <a href="https://github.com/superjose/polymer-css-loader">polymer-css-loader</a>! But since the loader was only developed for polymer, I adopted it for lit-element, now <a href="https://lit.dev/">lit</a>. This is still a work in progress. While this may have worked well on my windows machine, there may still be unforeseen bugs and the API may change in the future.
 </blockquote>
 
 # lit-scss-loader
-A loader for webpack that lets you import the CSS/SCSS into your lit-element and automatically creates the styling JavaScript for you.
+
+A loader for webpack that lets you import the CSS/SCSS into your lit-element and automatically creates the styling
+JavaScript for you.
 
 ## Install:
+
 ```
 npm i -D lit-scss-loader extract-loader
 ```
 
-
 ## Requirements
-* LitElement
-* Webpack 4 ('extract-loader', 'css-loader', 'sass-loader')
+
+* Lit
+* Webpack 4/5 ('extract-loader', 'css-loader', 'sass-loader')
 
 # How this works:
-1. Include it in your Webpack Config. Include it "last" or after all the loaders. You will need to use extract-loader if you're using sass-loader, less-loader and/or css-loader
+
+1. Include it in your Webpack Config. Include it "last" or after all the loaders. You will need to use extract-loader if
+   you're using sass-loader, less-loader and/or css-loader
 
 ```javascript
 module.exports = {
-  entry: './src/index.js',
-  module: {
-    rules: [
-     {
-        test: /\.css|\.s(c|a)ss$/,
-        use: [{
-          loader: 'lit-scss-loader',
-          options: {
-            minify: true, // defaults to false
-          },
-        }, 'extract-loader', 'css-loader', 'sass-loader'],
-      },
-    ],
-  },
+    entry: './src/index.js',
+    module: {
+        rules: [
+            {
+                test: /\.css|\.s(c|a)ss$/,
+                use: [{
+                    loader: 'lit-scss-loader',
+                    options: {
+                        minify: true, // defaults to false
+                    },
+                }, 'extract-loader', 'css-loader', 'sass-loader'],
+            },
+        ],
+    },
 };
 ```
+
 2. Include your .css or .scss or .less file in your JavaScript:
+
 ```javascript
-import { html, LitElement } from 'lit';
+import {html, LitElement} from 'lit';
 
 import Style1 from './style-1.scss';
 import Style2 from './style-2.css';
 
 class LitTestComponent extends LitElement {
 
-  constructor(){
-    super();
-    this.prop1 = '🔥-app';
-  }
-
-  static get properties() {
-    return {
-      prop1: {
-        type: String
-      },
-    };
-  }
-
-  static get styles() {
-		return [Style1, Style2];
-  }
-
-  render() {
-    return html`
-      <p>This is the test component</p>
-      <p>This is the propertie's value: ${this.prop1} </p>
-      <div id="test">This font size should be bigger</div>
+    constructor() {
+        super();
+        this.prop1 = '🔥-app';
+    }
+
+    static get properties() {
+        return {
+            prop1: {
+                type: String
+            }
+        };
+    }
+
+    static get styles() {
+        return [Style1, Style2];
+    }
+
+    render() {
+        return html`
+           <p>This is the test component</p>
+           <p>This is the propertie's value: ${this.prop1} </p>
+           <div id="test">This font size should be bigger</div>
     `;
-  }
+    }
 }
 
-window.customElements.define('lit-test-component', LitTestComponent);
+customElements.define('lit-test-component', LitTestComponent);
 ```
-3. Use the base name of the file as the name for `<style include="">`.
-Example, if you imported a filename called my-polymer-3.scss, you'd do it like this:
+
+3. Use the base name of the file as the name for `<style include="">`. Example, if you imported a filename called
+   my-polymer-3.scss, you'd do it like this:
 
 ```javascript
-static get template() {
-  <style include="my-polymer-3">
-  </style>
+render()
+{
+    <style include="my-polymer-3"></style>
 }
 ```
 
 ### Typescript
 
-If you're using this loader in a Typescript project, you will also need to inform the compiler that it has the ability to load CSS/SCSS files.  This project already provides the module declarations, so all you need to do is include the type declaration file in your `tsconfig.json` file.
+If you're using this loader in a Typescript project, you will also need to inform the compiler that it has the ability
+to load CSS/SCSS files. This project already provides the module declarations, so all you need to do is include the type
+declaration file in your `tsconfig.json` file.
 
 ```json
 {
   "compilerOptions": {
-    "...": "...."
+    "...": "..."
   },
   "include": [
     "node_modules/lit-scss-loader/types.d.ts"
@@ -111,35 +121,48 @@ If you're using this loader in a Typescript project, you will also need to infor
 
 # Options
 
-|Name|Type|Default|Description|
-|:--:|:--:|:-----:|:----------|
-|**[`minify`](#minify)**|`{Boolean}`|`false`|When true, it will minify both the CSS and JavaScript output.
-|**[`defaultSkip`](#minify)**|`{Boolean}`|`false`|When true, will skip all imports except those explicilty marked.
+|Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| |**[`minify`](#minify)**|`{Boolean}`|`false`|When true,
+it will minify both the CSS and JavaScript output. |~~**[`defaultSkip`](#defaultSkip)**~~|`{Boolean}`|`false`|When true, will
+skip all imports except those explicitly marked.
 
-# Files Parameters
-These are appended at the end of the CSS imports in your JavaScript file (Where the component is declared);
-E.g:
+# Files Parameters (obsolete)
+_These were applicable when using Polymer 3. With lit, everything is better._
+
+These are appended at the end of the CSS imports in your JavaScript file (Where the component is declared); E.g:
 
 ```javascript
-import './style-2.css?name=maria';
+import './style-2.css?include';
 import './style-1.css?skip';
 ```
 
-|Name|Type|Default|Description|
-|:--:|:--:|:-----:|:----------|
-|**[`skip`](#minify)**|`{boolean}`|`N/A`|Setting this parameter will skip the import altogether. This may be useful if you're using React and Lit or you'd like to include the CSS without. E.g: `import './style-2.css?skip'`
-|**[`include`](#minify)**|`{boolean}`|`N/A`|Just setting this parameter will include the css even when defaultSkip is on. This may be useful if you just want to "litify" or "web-componentize" a .css/.scss/.less file. E.g:  `import './style-2.css?include'`. **Note**: `include` will take preference over `skip`.
+|Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| 
+|**[`skip`](#minify)**|`{boolean}`|`N/A`|Setting this parameter will skip the import altogether. This may be useful if you're using React and Lit or you'd like to include the
+CSS without. E.g: `import './style-2.css?skip'`
+|**[`include`](#minify)**|`{boolean}`|`N/A`|Just setting this parameter will include the css even when defaultSkip is
+on. This may be useful if you just want to "litify" or "web-componentize" a .css/.scss/.less file.
+E.g:  `import './style-2.css?include'`. **Note**: `include` will take preference over `skip`.
+
+# Need an example?
 
-# Need an example? 
-Build lit-scss-loader with `npm run build`, then navigate to [test-app](./test-app) and execute: `npm start`. It will launch an express server @ localhost:3000. Then, run `webpack`. (Remember to have webpack-cli installed)
+First build lit-scss-loader with `npm run build` inside the root, then navigate to [test-app](./test-app) and execute: `npm start`. It will
+launch an express server @ localhost:3000.
 
 # Legacy Support
-The loader automatically injects code (e.g. `import {css} from 'lit';`) into your files, therefore, pay attention if you need es5 / legacy browsers support. As [LambyPants](https://github.com/drdreo/lit-scss-loader/issues/3) mentioned, you might have to adopt your loaders configuration to also test for ```/\.js$|\.ts$|\.s(c|a)ss$/``` and transform it to your needed language support.
+
+The loader automatically injects code (e.g. `import {css} from 'lit';`) into your files, therefore, pay attention if you
+need es5 / legacy browsers support. As [LambyPants](https://github.com/drdreo/lit-scss-loader/issues/3) mentioned, you
+might have to adopt your loaders configuration to also test for ```/\.js$|\.ts$|\.s(c|a)ss$/``` and transform it to your
+needed language support.
 
 # Why this loader
-When using css for components inline or inside of a javascript file we will loose autocompletion or any analysis tools that are already out there for plain CSS/SCSS files. Also, designer may don't want to work inside .js files. Let them work with what they are used to.
 
-With this, you just import your .css in your lit-component, add the style-variable to the static get styles() and you're set! The loader takes care for creating the content of that variable!
+When using css for components inline or inside a javascript file we will lose auto-completion or any analysis tools
+that are already out there for plain CSS/SCSS files. Also, designer may don't want to work inside .js files. Let them
+work with what they are used to.
+
+With this, you just import your .css in your lit-component, add the style-variable to the static get styles() and you're
+set! The loader takes care for creating the content of that variable!
 
 # Ideas? Feedback?
-Open a Github issue now! 😊
+
+Open a GitHub issue now! 😊
diff --git a/index.js b/index.js
@@ -1,7 +1,6 @@
 // See an explanation: https://webpack.js.org/api/loaders/#examples
 const getOptions = require('./src/getOptions');
 const { skip, include } = require('./src/skipParser');
-// const nameParser = require('./src/nameQueryParser');
 const template = require('./src/template');
 
 
@@ -12,19 +11,19 @@ module.exports = function (source) {
   // Get the options from webpack.config.js
   const options = getOptions(this) || {};
   const query = this.resourceQuery;
-  
+
   // If the user has set the defaultSkip as true,
   // then the source will be skipped unless he explicitly
   // says to include it. Or, if he has specified to skip it,
   // it will get skipped.
-  
-  // && !include(query)) 
+
+  // && !include(query))
   if ((options.defaultSkip && !include(query)) || skip(query) ){
-    return JSON.stringify(source); 
+    return JSON.stringify(source);
   }
 
   const temp = template(source, options);
-  
+
   // Generates the JavaScript required for Web Components
   return temp;
 };
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
   "scripts": {
     "test": "jasmine-ts \"./tests/**/*.spec.ts\" ",
     "build": "webpack",
+    "preversion": "npm run test",
     "prepublish": "npm run test && npm run build"
   },
   "keywords": [