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

cssthemes-loader

v1.0.2

Published

Webpack 2 loader for making cool themes

Downloads

7

Readme

CSSthemes-loader

A webpack loader for creating themes in css by using css-modules.

Why?

The current scenario force us to update our components to make them aware of themes. Sometimes this is what you want, because themes are a dynamic part of your system. But sometimes, you want to create different builds for different apps; think about creating different layouts for android or ios, or creating different themes and do some AB testing with them.

This is where this loader comes handy, the idea is to create the themes in our css or sass file, and then the loader will take care of including the correct css rules

Setup in 3 steps

Let's assume you have 3 different builds: css, android, web. From the component side, no change to be made, just use it as you regular use css-modules.

Step 0: install it

You can clone the repository or just use npm:

npm install cssthemes-loader --save-dev

Step 1: setup webpack's config file

You've to include the loader before (in webpack's logic) sass-loader or css-loader. For this particular configuration we're ignoring the :ios selector, and including the :android selector as the main one.

{
  ...
  module: {
    rules: [
        ...
        {
            test: /\.s?css$/,
            use: [
                {
                    loader: 'style-loader'
                },
                {
                    loader: 'css-loader'
                },
                {
                    loader: 'sass-loader'
                },
                {
                    loader: 'cssthemes-loader',
                    options: {
                        target: ':android',
                        ignore: [':ios']
                    }
                },
            ],
            exclude: /node_modules/,
        }
    ],
}
}

This example is for running with hot reloading so we're using style-loader, but you can also use extract-text-webpack-plugin or any other, this loader just clean up the initial styling rules.

Step 2: write your css

Lets say you've this sass file


.elem {
  color: white;
  font-size:10px;

  .subelem {
    color: green;
  }
}

.elem2 {
  font-size: 16px;
}

:android {
  .elem {
    color: blue;
    text-align: center;
  }
}

:ios {
  .elem {
    color: red;
  }

  .elem2 {
    font-size: 12px;
  }
}

As in the configuration, we setup :android to be the target and :ios to be ignored, the loader will take all styles under the :android selector and replace with them the default ones. Note that this extends the default ones, so if you want to rewrite the default styles you have to rewrite the rule.

Now, when you run webpack, the css will result in this:


.elem {
  color: blue;
  font-size: 10px;
  text-align: center;

  .subelem {
    color: green;
  }
}

.elem2 {
  font-size: 16px;
}

And that's it!