When the build process (babel) quits and the transform was used it leaves a child process running which causes CI build to hang and eventually fail.

Code to reproduce:

const babel = require("babel-core");

const babelOpts = {
  plugins: [
    ['transform-postcss', {
      config: 'path/to/postcss.config.js'
    }]
  ]
};

const source = 'const s = require("./path/to/postcss/file.css");';

const res = babel.transform(source, babelOpts);
console.log(res.code);

postcss.config.js:

module.exports = ctx => ({
  plugins: []
});

CSS file:

.link {
  color: red;
}

The transpiled code is correct the only problem is orphaned child process.

After looking for details I found in MacOS's Activity Monitor that this process is using /tmp/bptp-<projectname>.sock file.

Performance may be impacted by PostCSS compilation, the client-server setup (including launching a node process for the client on each compiled file). The following are ideas on how to make things faster.

Synchronous Promise Resolution

The client-server model could be removed entirely if the PostCSS compilation was able to be done synchronously (i.e., resolve a promise synchronously).

In order to accomplish this, a bit of native code would need to be written to run the event loop. For reference, node's event loop is basically just a uv_run(env.event_loop(), UV_RUN_ONCE);. A small bit of native code (similar to deasync… or even use deasync) and a bit of JS code to invoke this could be sufficient. The JS would be something like:

let error, result;
let done = false;
const runner = postcss(plugins);

runner.process(source, opts).then(
  (res) => { done = true; result = res; },
  (err) => { done = true; error = err; }
);

while (!done) {
  binding.runLoop();
}

Besides the fact that a bit of native code would be introduced (making things a little harder to maintain), this actually simplifies the code significantly.

Caching PostCSS Compilation

Since the server remains active while the main process continues, it would be beneficial for various situations to cache the results of a compile. It's important to realize that the cache would likely be in memory, so it would only apply when babel & the plugin remain active in memory while the CSS file is encountered multiple times. This would happen for:

1. Watched builds
2. Builds that include the same CSS file from multiple different JS files

Re-write the postcss-client in C++ using node-gyp

The client that we launch is written in Node and is as minimal as possible, but launching a minimal Node process is still nearly 30x slower (on my machine) than launching a native executable.

Creating a binding.gyp with the type set to executable seems to work:

{
  "targets": [
    {
      "target_name": "postcss-client",
      "type": "executable",
      "sources": [ "src/postcss-client.cc" ]
    }
  ]
}

node-gyp rebuild

There's overhead in the client-server communication, too, so this may or may not provide significant performance gains. The best way to find out, though, may be to try it and see. The synchronous promise resolution seems to be a much easier option to avoid this, though.

Version 10 of Node.js (code name Dubnium) has been released! 🎊

To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:

• Added the new Node.js version to your .travis.yml

If you’re interested in upgrading this repo to Node.js 10, you can open a PR with these changes. Please note that this issue is just intended as a friendly reminder and the PR as a possible starting point for getting your code running on Node.js 10.

Your Greenkeeper Bot 🌴

Version 10.1.0 of nyc just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As nyc is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Version 4.14.0 of eslint was just published.

This version is covered by your current version range and after updating it in your project the build failed.

eslint is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

We generate Webpack builds by hitting one Express route, which triggers a CLI command to build with Webpack. That way, this plugin hangs the process and the route never returns.

I'm pretty sure the problem is with sockets, cause killing the .sock process created by the plugin makes the route respond.

It only happens when we use the route, running the build command on the terminal works. Not using the plugin also works.

It appears that the plugin searches for a PostCSS config file to load in the same directory that the imported CSS file resides, or in the root directory of the project.

There should be an option in the plugin to specify where to find the project's PostCSS config file.

I'm currently trying to figure this out since the babel-plugin-css-modules didn't cover my requirements . At a glance, it looks like the preprocessor has to be ran entirely before babel which will then pick up the built .css files. Is there no way to do it all together? I'd prefer not to build intermediate .css files.

Version 3.4.0 of mocha just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As mocha is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Hello,

I get the following error when I try to build my files:

> babel src --ignore  __tests__,__mocks__ --out-dir lib

Error: ENOENT: no such file or directory, mkdir 'C:\tmp\bptp-cgitfrontendcomponents'
    at Object.fs.mkdirSync (fs.js:890:18)
    at main (C:\GIT\frontend-components\node_modules\babel-plugin-transform-postcss\dist\postcss-server.js:59:18)
    at __dirname (C:\GIT\frontend-components\node_modules\babel-plugin-transform-postcss\dist\postcss-server.js:166:13)
    at Object.<anonymous> (C:\GIT\frontend-components\node_modules\babel-plugin-transform-postcss\dist\postcss-server.js:170:5)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Function.Module.runMain (module.js:605:10)

So I added manually tmp dir in C: but now I get:

Error: listen EACCES \tmp\bptp-cgitfrontendcomponents.sock
    at Object.exports._errnoException (util.js:1022:11)
    at exports._exceptionWithHostPort (util.js:1045:20)
    at Server.setupListenHandle [as _listen2] (net.js:1298:19)
    at listenInCluster (net.js:1363:12)
    at Server.listen (net.js:1474:5)
    at Promise (C:\GIT\frontend-components\node_modules\babel-plugin-transform-postcss\dist\postcss-server.js:154:12)
    at Promise (<anonymous>)
    at main (C:\GIT\frontend-components\node_modules\babel-plugin-transform-postcss\dist\postcss-server.js:134:9)
    at __dirname (C:\GIT\frontend-components\node_modules\babel-plugin-transform-postcss\dist\postcss-server.js:166:13)
    at Object.<anonymous> (C:\GIT\frontend-components\node_modules\babel-plugin-transform-postcss\dist\postcss-server.js:170:5)

Tried also running cmd with admin rights - still same error. Did anyone have similar issue?

Using:
node v8.1.3
npm v5.3.0
bptp v0.2.1

.babelrc

{
  "presets": [
    ["es2015", {"modules": false}],
    "react"
  ],
  "plugins": [
    "transform-class-properties",
    "transform-object-rest-spread",
    "transform-postcss"
  ]
}

Version 3.16.0 of eslint just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As eslint is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Version 6.0.12 of postcss just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As postcss is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Hello!

I've been trying to use babel-plugin-transform-postcss but I keep having ENOENT due to the path used in the project. I didn't want to end up with ../../grid.css so I added in my webpack configuration my src folder in the resolve module array.

resolve: {
    modules: [
      'node_modules',
      'src'
    ],
    ...
    }
  },

How can I do the same here?

Thanks!

Version 8.2.5 of babel-eslint was just published.

This version is covered by your current version range and after updating it in your project the build failed.

babel-eslint is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

There should be an option to disable caching, and perhaps have it disabled by default. I was really confused about the behavior of the plugin until I realized that there was caching involved.

Version 5.2.15 of postcss just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As postcss is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Code of my component

myproject/components/super-component/index.jsx

import 'external-module/styles.css';
import styles from './my-local-styles.css';

// ...

Babel config

.babelrc

{
    "presets": ["es2017-node7", "react"],
    "plugins": ["transform-postcss"],
    "ignore": ["node_modules"]
}

And I get an error:

babel-plugin-transform-postcss: Error: ENOENT: no such file or directory, open '/Users/frux/myproject/components/super-component/external-module/external-module/styles.css'
    at Object.fs.openSync (fs.js:583:18)
    at Object.fs.readFileSync (fs.js:490:33)
    at Socket.connection.on (/Users/frux/myproject/node_modules/babel-plugin-transform-postcss/dist/postcss-server.js:81:22)
    at emitNone (events.js:91:20)
    at Socket.emit (events.js:188:7)
    at endReadableNT (_stream_readable.js:974:12)
    at _combinedTickCallback (internal/process/next_tick.js:80:11)
    at process._tickCallback (internal/process/next_tick.js:104:9)

Why does plugin try to find external styles at relative path?

When I try using the transform I get the following when running with Node 6:

/node_modules/babel-plugin-transform-postcss/dist/postcss-server.js:56
const main = async function main(socketPath, tmpPath) {
                   ^^^^^^^^
SyntaxError: Unexpected token function

I don't have any issues when running with Node 7, but our current architecture doesn't quite support 7 yet. Any thoughts on how I can get around this?

My .babelrc:

{
  "plugins": [
    ["babel-plugin-transform-builtin-extend", {
        "globals": ["Error"]
    }],
    ["transform-runtime", {
      "polyfill": false
    }],
    "transform-decorators-legacy",
    "transform-export-extensions",
    "transform-object-rest-spread",
    "lodash"
  ],
  "presets": [
    "es2015",
    ["env", {
      "targets": {
        "node": "current"
      }
    }]
  ]
}

Hi, I'd like to use this plugin but it doesn't seem to support the .sss extension (SugarSS).

Any chance to see this supported? I'd be happy to create a PR to add support if you like the idea.

I think I'm missing something on how we are supposed to use this plugin and CSS Modules.

If I make this plugin generate CSS modules, or better, transform my classes (.foo) into random names (.foo_xyz123).

How can I then process my PostCSS to compile it into valid CSS having the classes transformed the same way? (.foo to .foo_xyz123)

Wouldn't be easier to support an extract option like babel-plugin-css-modules-transform?

Hello,

Thanks for this plugin! I'm sorry I must be confused but I just can't make it work. Between the magic cache and the socket servers that I can't stop on exit, it's really hard tu use.. But that's not the (main) issue here.

I'd like to understand exactly how to use postCSS plugins. I created a postcss.config.js that I used from a server.js file

...
require('babel-register')({
  "plugins": [
    [
      "transform-postcss", {
        "config": 'config/postcss.config.js',
      }
    ]
  ]
});
...

var paths = require('./paths');

var postcssModules = require('postcss-modules')
var cssnext = require('postcss-cssnext');
var smartImport = require("postcss-smart-import");
var postcssImport = require('postcss-import');
var postcssSimpleVars = require('postcss-simple-vars');
var postcssMixins = require('postcss-mixins');
var postcssExtend = require('postcss-extend');
var postcssNested = require('postcss-nested');
var postcssFor = require('postcss-for');
var postcssMath = require('postcss-math');
var postcssTextTransform = require('postcss-text-transform');
var postcssConditionals = require('postcss-conditionals');
var cssVars = require(paths.appSrc + '/base/vars/index.js');

module.exports = (ctx) => ({
    plugins: [
      postcssModules({
        generateScopedName: '[name]__[local]___[hash:base64:5]',
        getJSON: ctx.extractModules || (() => {})
      }),
      postcssImport({
        path: paths.appSrc + '/'
      }),
      postcssFor(),
      postcssMixins(),
      postcssTextTransform(),
      postcssConditionals(),
      postcssSimpleVars({
        variables: () => cssVars,
        unknown: (node, name, result) => node.warn(result, 'Unknown CSS variable ', name),
      }),
      postcssExtend(),
      postcssNested(),
      postcssMath(),
      cssnext({ // Allow future CSS features to be used, also auto-prefixes the CSS...
        browsers: ['last 2 versions', 'iOS >= 8', 'not IE <= 10'], // ...based on this browser list
      })
    ]
  });

After taking a while to compile, I don't really have any change.. Is this the correct way to use it?

Thanks!

Hi. In another similar package called babel-plugin-css-modules-transform, one day, I've added the feature keepImport, which allows do not remove the import declaration, after all transformations. It was a good time, until I found your package more useful. But your package also has no opportunity to keep import declaration. Therefor, I'm going to perform that for you.

Here's description of the coming feature. I hope you will found it useful.

Keeping import

By default, original import declaration in javascript code will be replaced with an object with styles. But you may keep import declarations by turning the option keepImport to true.

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

In this case, you will still get the required objects with styles, but import declarations (or require expressions) will be kept above without any assignment expression.

For example, this code:

import styles from './styles';

.example { color: cyan; }

Will be transformed to:

import './styles';
var styles = {"example":"_example_amfqe_1"};

Version 1.1.9 of babel-preset-env just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As babel-preset-env is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

☝️ Greenkeeper’s updated Terms of Service will come into effect on April 6th, 2018.

Version 2.46.1 of eslint-plugin-flowtype was just published.

This version is covered by your current version range and after updating it in your project the build failed.

eslint-plugin-flowtype is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

The current babel visitor is only looking for require('foo.css') statements, which misses the import statements when modules are disabled.

Should be simple enough to add in a ImportDeclaration visitor to handle all imports and not just the ones transpiled to require statements.

Did plugin remove import statement from code? How I can leave my extracting logic?

Maybe I'm just too dumb but I'm having problems to install this package.
Here's what happens:

1. Npm says the newest version is 0.3.0 (published a year ago)
2. When referencing the master branch I'm basically lacking ALL src files and just get an index.js, requireing the (also not available) dist folder.

Am I missing something? Would really like to have the extensions fix.

Version 5.1.1 of mocha was just published.

This version is covered by your current version range and after updating it in your project the build failed.

mocha is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴