css-modules / postcss-icss-values

Pass arbitrary constants between your module files
MIT License
203 stars 18 forks source link

Using module reference in composes #26

Closed tabazevedo closed 8 years ago

tabazevedo commented 8 years ago

The following doesn't seem to work:

@value typography: "../styles/typography.css";

.headline {
  composes: serif from typography;
  display: block;
}

However, importing the values explicitly does work:

@value typography: "../styles/typography.css";
@value serif from typography;

.headline {
  composes: serif;
  display: block;
}

The first makes webpack explode with referenced class name "serif" in composes not found. Am I missing something? I thought the first was valid syntax, and is demonstrated in this repo's readme.

My webpack config:

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var postcssPlugins = [
  "postcss-cssnext",
  "autoprefixer",
  "postcss-discard-duplicates"
].map(require);

var plugins = [
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
    }
  }),
  new ExtractTextPlugin('main.css'),
  new webpack.NoErrorsPlugin(),
  new webpack.optimize.DedupePlugin()
];

if(process.env.NODE_ENV === 'production') {
  plugins.push(new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false
    }
  }));
}

var config = {
  entry: './src/client.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'main.js'
  },
  module: {
    loaders: [
      { test: /\.json$/, loader: 'json' },
      { test: /\.js$/, loader: 'babel', exclude: /node_modules/ },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract([
          'css-loader?' + [
            'modules',
            // 'minimize',
            'importLoaders=1',
            'localIdentName=[name]__[local]_[hash:base64]'
          ].join('&'),
          'postcss-loader'
        ].join('!'))
      }
    ]
  },
  resolveLoader: {
    fallback:  path.join(__dirname, 'node_modules')
  },
  postcss: () => postcssPlugins,
  plugins: plugins,
  devtool: 'source-map'
};

module.exports = config;
tabazevedo commented 8 years ago

It may be worth noting that css-modules-require-hook was parsing the first one correctly, but not webpack. Quite stumped on this one.

tabazevedo commented 8 years ago

I was incorrectly loading the plugin, my b.

ahmed1490 commented 8 years ago

@tabazevedo Facing the same issue. I didnt get what was the fix?