diff --git a/.npmignore b/.npmignore
index 457f73f..bc50836 100644
--- a/.npmignore
+++ b/.npmignore
@@ -1 +1,2 @@
-test-app
\ No newline at end of file
+test-app
+.idea
diff --git a/README.md b/README.md
index d38f521..82aa4cf 100644
--- a/README.md
+++ b/README.md
@@ -10,98 +10,108 @@
-It is a fork of polymer-css-loader! 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 polymer-css-loader! But since the loader was only developed for polymer, I adopted it for lit-element, now lit. 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.
# 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`
- This is the test component
- This is the propertie's value: ${this.prop1}
- This font size should be bigger
+ constructor() {
+ super();
+ this.prop1 = '🔥-app';
+ }
+
+ static get properties() {
+ return {
+ prop1: {
+ type: String
+ }
+ };
+ }
+
+ static get styles() {
+ return [Style1, Style2];
+ }
+
+ render() {
+ return html`
+ This is the test component
+ This is the propertie's value: ${this.prop1}
+ This font size should be bigger
`;
- }
+ }
}
-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 `
+render()
+{
+
}
```
### 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
index 77304b5..6cc14b0 100644
--- 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
index 2a7596b..57b1201 100644
--- 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": [