npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

lit-scss-loader

v2.0.1

Published

Automatically generate the style-wrapper that is required for LitElement, simply by importing the CSS/SCSS file

Downloads

15,392

Readme

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.

Install:

npm i -D lit-scss-loader extract-loader

Requirements

  • Lit
  • Webpack 4/5 ('extract-loader', 'css-loader', 'sass-loader')

How this works:

  1. Include it in your Webpack Config. Include it "last" (webpack loader order!) or after all other loaders have been applied. You will need to use extract-loader if you're using sass-loader, less-loader and/or css-loader
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'],
            },
        ],
    },
};
  1. Include your .css or .scss or .less file in your JavaScript:
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>
    `;
    }
}

customElements.define('lit-test-component', LitTestComponent);

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.

{
  "compilerOptions": {
    "...": "..."
  },
  "include": [
    "node_modules/lit-scss-loader/types.d.ts"
  ]
}

Options

| Name | Type | Default | Description | |------|------|---------|-------------| |minify|{Boolean}|false|When true, it will minify both the CSS and JavaScript output. |~~defaultSkip~~|{Boolean}|false| (dep.) When true, will skip all imports except those explicilty marked.

Files Parameters (obsolete)

These were applicable when using Polymer 3. With lit, everything is better.

They are appended at the end of the CSS imports in your JavaScript file (Where the component is declared); E.g:

import './style-2.css?include';
import './style-1.css?skip';

| Name | Type | Default | Description | |------|------|---------|-------------| |skip| {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 | {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?

First build lit-scss-loader with npm run build inside the root, then navigate to 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 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 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! 😊