Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scopify with CSS modules and Webpack #2

Open
griable opened this issue Nov 3, 2015 · 2 comments
Open

Scopify with CSS modules and Webpack #2

griable opened this issue Nov 3, 2015 · 2 comments

Comments

@griable
Copy link

griable commented Nov 3, 2015

Hi,

First I apologise since it not directly a Scopify issue but more a CSS Module + Scopify usage question.

I would like to be able to use Scopify with CSS Modules and its composition system but I'm currently out of luck.

The problem is that composition only works with local filenames such as .root and using it with Scopify make it #app .root which leads to the following error :

Module build failed:
Error: composes is only allowed when selector is single :local class name not in ":local(#app) :local(.root)"

My configuration is :

var webpackConfig = {
  context: jsSrc,
  plugins: [],
  resolve: {
    extensions: [''].concat(extensions),
    modulesDirectories: ['node_modules', 'components']
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader?stage=1',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader')
      }
    ]
  },
  postcss: [
    require('autoprefixer'),
    require('postcss-nested'),
    require('postcss-scopify')('#app')
  ],
  plugins: [
    new ExtractTextPlugin('style.css', { allChunks: true })
  ]
}

Finally, my question is, is there anyway to get the code prefixed by Scopify after it has been parsed by the CSS loader.

Thank you for helping!

@griable griable changed the title Scopify with CSS modules with Webpack Scopify with CSS modules and Webpack Nov 3, 2015
@pazams
Copy link
Owner

pazams commented Nov 7, 2015

@griable, tnx for reporting this issue.
I understand the issue.
The easiest way I would get around this would be to to use the cli version of scopify https://github.com/pazams/scopify-cli . this way scoping would be an extra command after webpack finishes compiling. If that works, then a small shell script combining webpack and scopify-cli commands would be convenient.

I'm leaving this issue open.
Maybe there's a better way to do it (I myself do not use webpack).

@griable
Copy link
Author

griable commented Nov 7, 2015

Hi pazams,

Thank you very much for this answer. Ok, I'll proceed using with a bashfile for now.

I'll try later to find a way to prioritize the precss tasks but I'm afraid it seems to be against its philosophy.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants