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

@stylable/webpack-extensions

v6.1.1

Published

Experimental Stylable webpack plugins

Downloads

430

Readme

@stylable/webpack-extension

npm version

@stylable/webpack-extensions contains experimental Stylable webpack plugins for various use cases.

Installation

yarn add --dev @stylable/webpack-extensions

remove-unused-css-modules

Remove all css modules that are not being used by any javascript file.

stylable-metadata-plugin

Generate component metadata for tooling.

stylable-forcestates-plugin

Generate css that allow to force css state on dom node.

stylable-metadata-loader

Use this loader to generates a mapping of imported stylesheets that contains imported .st.css files (dependencies) mapped by a hash of their content. It also remaps any imports within the content to use the files content hash as the imported filepath.

This structure is used to create an in-memory file system representation for Stylable to transpile overrides apart from the main build process.

Loader options

interface LoaderOptions {
  exposeNamespaceMapping: boolean;
  resolveNamespace(namespace: string, filePath: string): string;
}

Notes

  1. JS imports are currently not supported (mixins and formatters)
  2. Namespaces can be different if not taken into account during the in memory transpilation (for path based namespace resolvers)

Use exposeNamespaceMapping to expose original namespaces from the metadata build

Example output

{
    entry: "<entry_hash>",
    stylesheetMapping: {
        "/<entry_hash>.st.css": ":import { -st-from: '/<imported_hash>.st.css' } <rest_of_entry_content>",
        "/<imported_hash>.st.css": "<imported_content>"
    },
    namespaceMapping: {
        "/<entry_hash>.st.css": "<entry_namespace>",
        "/<imported_hash>.st.css": "<imported_namespace>"
    }
}

Usage in webpack

The config below shows an inline loader alias configuration, any other webpack config (using module.rules) can also be used.

// webpack.config.js
import { metadataLoaderLocation } from "@stylable/webpack-extensions"

const webpackConfig = {
    ...
    resolveLoader: {
        alias: { 'stylable-metadata': metadataLoaderLocation },
    }
    ...
}

Metadata consumption usage

To use this loader, import the stylesheet using the previously configured loader.

import metadata from "stylable-metadata!./path-to-stylesheet.st.css";

Note: when using an inline loader configuration it is possible to configure the loader via the stylable.config.js configuration file

// stylable.config.js
module.exports.metadataLoader = {
    exposeNamespaceMapping: true    
}

Typescript types

The definition for typings for this loader depends on the loader configuration used, but you can declare modules with one of the following loader interfaces:

// globals.d.ts

// when exposing namespaceMapping
declare module 'stylable-metadata?exposeNamespaceMapping=true!*.st.css' {
    const stylesheetMetadata: {
        entry: string;
        stylesheetMapping: Record<string, string>;
        namespaceMapping: Record<string, string>;
    };
    export = stylesheetMetadata;
}

// when not exposing namespaceMapping
declare module 'stylable-metadata!*.st.css' {
    const stylesheetMetadata: {
        entry: string;
        stylesheetMapping: Record<string, string>;
    };
    export = stylesheetMetadata;
}

Contributing

Read our contributing guidelines for details on our code of conduct, and the process for submitting pull requests.

License

Copyright (c) 2017 Wix.com Ltd. All Rights Reserved. Use of this source code is governed by an MIT license.