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

@joblift/babel-plugin-transform-postcss

v0.2.5

Published

PostCSS Babel Transform

Downloads

92

Readme

- FORKED -

This is a fork from https://github.com/wbyoung/babel-plugin-transform-postcss, which seems currently unmaintained. Why? We needed to update dependencies and include the latest unpublished fixes from that library. Fork updates include:

  • supports PostCss 7.x
  • supports post-css-loader 2.x
  • supports other filename extensions, e.g. *.scss

Thanks to the original authors. Have fun.

Babel PostCSS Transform

A Babel plugin to process CSS files via PostCSS.

Using PostCSS Modules, it can transform:

import styles from "./styles";
.example {
  color: cyan;
}

Into an object that has properties mirroring the style names:

var styles = { example: "_example_amfqe_1" };

Configuration

Install the transform as well as postcss and any PostCSS plugins you want to use:

# using yarn
yarn add -D @joblift/babel-plugin-transform-postcss
# using npm
npm install --save-dev @joblift/babel-plugin-transform-postcss

Add the transform to your babel configuration, i.e. .babelrc:

{
  "presets": [["env", { "targets": { "node": "current" } }]],
  "plugins": ["transform-postcss"]
}

Create a postcss.config.js:

module.exports = (ctx) => ({
  plugins: [
    require("postcss-modules")({
      getJSON: ctx.extractModules || (() => {}),
    }),
  ],
});

You can also specify a location to load your postcss.config.js from in the options in your Babel configuration, i.e. .babelrc:

{
  "plugins": [
    [
      "transform-postcss",
      {
        "config": "configuration/postcss.config.js"
      }
    ]
  ]
}

By default we look for .css files, but you can also specify the extensions we should look for:

{
  "plugins": [
    [
      "transform-postcss",
      {
        "config": "configuration/postcss.config.js",
        "extensions": [".scss"]
      }
    ]
  ]
}

Details

The transform will transform all imports & require statements that have a .css extension and run them through postcss. To determine the PostCSS config, it uses postcss-load-config with additional context values. One of those config values, extractModules should be invoked in order to define the value of the resulting import.

No CSS is actually included in the resulting JavaScript. It is expected that you transform your CSS using the same postcss.config.js file as the one used by this transform. We recommend:

Finally, it's worth noting that this transform also adds a comment to the generated code indicating the related CSS file so that it can be processed by other tools, i.e. relateify.

PostCSS Load Config Context

extractModules(_: any, modules: object)

This option is a function that may be passed directly on to postcss-modules as the getJSON argument. Other uses, while unlikely, are permittable, as well.

The function accepts two arguments. The transform uses only the second value passed to the function. That value is the object value that replaces the import/require.

Using with Browserify & Watchify

This will work well with the babelify transform, but if you're using watchify, you will want to add the relateify transform in order to ensure that changes to CSS files rebuild the appropriate JS files.

Caching

This module caches the results of the compilation of CSS files and stores the cache in a directory under /tmp/bptp-UNIQUE_ID. The cache is only invalidated when the CSS file contents change and not when the postcss.config.js file changes (due to limitations at the time of implementation). Try removing the cache if you're not seeing expected changes.

Prior Art

This plugin is based of the work of:

Unlike the above, it supports both synchronous and asynchronous PostCSS plugins.

License

This project is distributed under the MIT license.