Can't make it work

[Danetag]

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!

[wbyoung]

Yes, this looks correct. If you are having problems, maybe you could post a small example project to GitHub.

You're missing an example require/import of a CSS file here, though, so having the config in place won't do much.

Try adding a .js file with:

import styles from './my-styles.css';

console.log(styles);