complexRequires (prepend) and specifics options

[Hadrien-DELAITRE]

Hi again!

Today, i tested new released tag 0.0.8, with my prepend config:

"prepend": ["postcss-cssnext"], 

It Works 👍

But, currently i can't pass specific opts for postcss-cssnext :

features: {
  customProperties: {
    variables: $properties,
  },
}

I don't know if your plugin is designed in order to do specifics configuration.
And i got some troubles with 'postcss-import' module because it seems to be async :
css-modules/css-modules-require-hook#58

[michalkvasnicak]

Can you please provide whole .babelrc configuration file?

Ad 2) I am afraid that I can't resolve your problem with postcss-import because this plugin uses css-modules-require-hook under the hood, so if it is incompatible with it I can't do anything.

[Hadrien-DELAITRE]

My .babelrc:

module.exports = {
only: /\.jsx$/,
plugins: [
  'babel-plugin-syntax-async-generators',
  'babel-plugin-syntax-trailing-function-commas',
  'babel-plugin-transform-async-to-module-method',
  'babel-plugin-transform-class-properties',
  'babel-plugin-transform-decorators-legacy',
  'babel-plugin-transform-runtime',
  'babel-plugin-transform-es2015-destructuring',
  'babel-plugin-transform-es2015-function-name',
  'babel-plugin-transform-es2015-modules-commonjs',
  'babel-plugin-transform-es2015-parameters',
  'babel-plugin-transform-es2015-sticky-regex',
  'babel-plugin-transform-es2015-unicode-regex',
  'babel-plugin-transform-eval',
  'babel-plugin-transform-object-assign',
  'babel-plugin-transform-object-rest-spread',
  'babel-plugin-transform-proto-to-assign',
  'babel-plugin-transform-react-display-name',
  'babel-plugin-transform-react-jsx',
  'babel-plugin-transform-undefined-to-void',
  ['babel-plugin-transform-async-to-module-method', {
    'module': 'bluebird',
    'method': 'coroutine',
  }],
  'babel-plugin-transform-react-jsx',
  ['babel-plugin-css-modules-transform', {
    'prepend': ['postcss-cssnext'],
  }],
],
sourceMaps: 'both',
retainLines: true,
};

[michalkvasnicak]

Thank you. One more question, you mentioned that you want to pass specific options to postcss-cssnext. Can you please provide an example of configuration file? How it should look?

[Hadrien-DELAITRE]

With postcss-cssnext, i can provide custom-properties & custom-media like :

// postcssConfig.js
import postcssCssnext from 'postcss-cssnext';

import constants from './lib/css/constants';

const { properties, media } = constants;

export default {
  postcssCssnext: postcssCssnext({
    features: {
      customProperties: {
        variables: properties,
      },
      customMedia: {
        extensions: media,
      },
    },
  }),
};

And i use this file with webpack (in order to build my front bundle):

// webpackConfig.js
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import postcssConfig from './postcssConfig';

const { postcssCssnext } = postcssConfig;

export default {
  ...
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract(
          'style-loader',
          'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'),
      }
    ],
  },
  postcss: () => [postcssCssnext],
  plugins: [
    new ExtractTextPlugin(path.resolve(__dirname, '/path/to/bundle/c.css'), {
      allChunks: true,
    }),
  ],
}

[michalkvasnicak]

You can do it already. Only thing you need to do is to create javascript file, where you import postcss-cssnext plugin and export function that will configure this plugin.

You can try this:

// postcss.js

import postcssCssnext from 'postcss-cssnext';

import constants from './lib/css/constants';

const { properties, media } = constants;

export default () => postcssCssnext({
  features: {
      customProperties: {
        variables: properties,
      },
      customMedia: {
        extensions: media,
      },
    },
});

and then set prepend to something like "prepend": ["./postcss.js"]

I am writing this on the fly, so it's not tested.

[Hadrien-DELAITRE]

Hmmm, when css-modules-transform try to resolve the prepend path here:
https://github.com/michalkvasnicak/babel-plugin-css-modules-transform/blob/master/src/index.js#L107
It fails with plugin = './postcss.js'.

Then it try a second time here:
https://github.com/michalkvasnicak/babel-plugin-css-modules-transform/blob/master/src/index.js#L110
But it fails again.

I think its because of path value: its a NodePath, not a regular path like: /foo/bar/qux.js

[michalkvasnicak]

Is this path to a plugin relative to the process.cwd() ? Does result of resolve exist on your filesystem?

[Hadrien-DELAITRE]

process.cwd() refers to my working directory:
/foo/bar/www

my JS file postcss.js is located here: /foo/bar/www/postcss.js.

and i run my gulp task at /foo/bar/www.

But value of path is weird, it's not a string, it's a Object[NodePath].

[michalkvasnicak]

Try to change it to plugin on line 110. I think you found a bug :)

path => plugin

[Hadrien-DELAITRE]

It works 👍 with the update at L110.

It's nice!
It remains for me to investigate the css-module-require-hook about async plugin error ;).

[michalkvasnicak]

Ok now you can update it, released as 0.0.9 :) Thank you

[Benno007]

I'd just like to add a comment that I solved the issue of not passing options by doing this in my webpack babel loader:

var theme = require('postcss-theme');
...
var themePath = path.resolve(baseThemePath, config.theme).split(path.sep).join('/');
theme.bind(this, {themePath: themePath}),
{
                test: /\.js$|\.jsx$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    cacheDirectory: true,
                    plugins: [
                        [
                            "css-modules-transform", {
                            "generateScopedName": "[name]__[local]__[hash:base64:5]",
                            "prepend": [
                                theme.bind(this, {themePath: themePath}),
                                traits.bind(this, {traitsPath: baseTraitsPath})
                            ],
                            "append": [

                                // plugin to add :focus selector to every :hover for keyboard accessibility.
                                postcssFocus,

                                // PostCSS-cssnext is a PostCSS plugin that allows us to use the latest CSS syntax.
                                // It transforms CSS specs into more compatible CSS so you don’t need to wait for browser support.
                                // Including Chrome 44 as it has a high percentage as at 1/2/17 due to Internet app on Samsung phones
                                // format: https://github.com/ai/browserslist
                                cssnext.bind(this, {
                                    browsers: ['last 2 versions', 'IE > 10', 'Chrome 44']
                                }),
                                postcssReporter.bind(this, {clearMessages: true})
                            ]
                        }
                        ]
                    ]
                }
            }