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

Doesn't compiles css #106

Closed
lavezzi1 opened this issue Oct 9, 2016 · 31 comments

Comments

Projects
None yet
3 participants
@lavezzi1
Copy link

commented Oct 9, 2016

Hello! This is my config https://gist.github.com/lavezzi1/f7d10bd44462b089a97690c2591a340e

I got output files without any compilation, I got variables and things like &__element in the output css. No errors. What I did wrong?

@ai

This comment has been minimized.

Copy link
Member

commented Oct 9, 2016

We still in webpack 2 support development. Did you use postcss-loader from master by "postcss-loader": "postcss/postcss-loader" in your package.json?

@ai

This comment has been minimized.

Copy link
Member

commented Oct 9, 2016

Here is a discuss: #99

We tried to fix webpack 2 support, change docs, but didn’t release it to npm yet (there are many changes, we need to check them first).

@lavezzi1

This comment has been minimized.

Copy link
Author

commented Oct 9, 2016

@ai in my package.json I have "postcss-loader": "^0.13.0", "webpack": "^2.1.0-beta.19"

So you wanna say that currently postcss doesn't support webpack 2?

@ai

This comment has been minimized.

Copy link
Member

commented Oct 9, 2016

0.13 has no webpack 2 support.

Could you help us and test postcss-loader from git master for webpack 2 support?

Here is discussion #97

@ai ai closed this Oct 9, 2016

@lavezzi1

This comment has been minimized.

Copy link
Author

commented Oct 9, 2016

@ai Its pleasure to help! So I changed version of "postcss-loader": "postcss/postcss-loader" but in my case it still doesnt works. Is my config correct?

@ai

This comment has been minimized.

Copy link
Member

commented Oct 9, 2016

Hm. Could you try to move plugins to postcss.config.js (docs contains example).

@lavezzi1

This comment has been minimized.

Copy link
Author

commented Oct 9, 2016

I created. Got a lot of errors, example:

ERROR in /code/webpack2/ss2/node_modules/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!/code/webpack2/ss2/node_modules/vue-style-loader/index.js!/code/webpack2/ss2/node_modules/css-loader/index.js!/code/webpack2/ss2/node_modules/postcss-loader/index.js!/code/webpack2/ss2/node_modules/vue-loader/lib/style-rewriter.js!/code/webpack2/ss2/source/blocks/smart-table/smart-table-icon-has-status/style.css doesn't export content

ERROR in ./~/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!./~/vue-style-loader!./~/css-loader!./~/postcss-loader!./~/vue-loader/lib/style-rewriter.js!./source/blocks/smart-table/smart-table-icon-title-caption/style.css
Module build failed: (SystemJS) ENOENT: no such file or directory, open '/code/webpack2/ss2/loader-utils'
    Error: ENOENT: no such file or directory, open '/code/webpack2/ss2/loader-utils'
        at Error (native)
    Error loading /code/webpack2/ss2/loader-utils as "loader-utils" from /code/webpack2/ss2/node_modules/extract-text-webpack-plugin/loader.js

ERROR in /code/webpack2/ss2/node_modules/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!/code/webpack2/ss2/node_modules/vue-style-loader/index.js!/code/webpack2/ss2/node_modules/css-loader/index.js!/code/webpack2/ss2/node_modules/postcss-loader/index.js!/code/webpack2/ss2/node_modules/vue-loader/lib/style-rewriter.js!/code/webpack2/ss2/source/blocks/table-icon-title-caption/style.css doesn't export content
@ai

This comment has been minimized.

Copy link
Member

commented Oct 9, 2016

Could you show your webpack and PostCSS config?

@lavezzi1

This comment has been minimized.

@ai

This comment has been minimized.

Copy link
Member

commented Oct 9, 2016

You sets PostCSS plugins to LoaderOptionsPlugin abd to PostCSS config 😊.

Could you remove it from LoaderOptionsPlugin?

@ai

This comment has been minimized.

Copy link
Member

commented Oct 9, 2016

And please set syntax in gist to syntax highlight.

@lavezzi1

This comment has been minimized.

Copy link
Author

commented Oct 9, 2016

@ai oh my bad, I removed but still errors. And changed syntax.

@ai

This comment has been minimized.

Copy link
Member

commented Oct 9, 2016

Maybe issue cane from vue loader? At least it is vue in stacktrace.

Could you test it without vue?

@lavezzi1

This comment has been minimized.

Copy link
Author

commented Oct 9, 2016

@ai Take a look at this error:

ERROR in ./source/blocks/wizard-blocks/plan/style.css
Module build failed: (SystemJS) ENOENT: no such file or directory, open '/code/webpack2/ss2/loader-utils'
    Error: ENOENT: no such file or directory, open '/code/webpack2/ss2/loader-utils'
        at Error (native)
    Error loading /code/webpack2/ss2/loader-utils as "loader-utils" from /code/webpack2/ss2/node_modules/extract-text-webpack-plugin/loader.js

Why it imports from projects root directory instead of node_modules.

@ai

This comment has been minimized.

Copy link
Member

commented Oct 9, 2016

Yeap, very strange. But I have no idea 😕.

@lavezzi1

This comment has been minimized.

Copy link
Author

commented Oct 9, 2016

@ai I downgraded to postcss-import 8.0.2 and got another errors:

babel/babel-loader#242

    ERROR in ./~/css-loader!./~/postcss-loader!./~/vue-loader/lib/style-rewriter.js!./source/blocks/tooltip-trigger/style.css
    Module build failed: Error: Cannot find module '0'
        at Function.Module._resolveFilename (module.js:440:15)
        at Function.Module._load (module.js:388:25)
        at Module.require (module.js:468:17)
        at require (internal/module.js:20:19)
        at load (/code/webpack2/ss2/node_modules/postcss-load-plugins/lib/loadPlugins.js:21:50)
        at /code/webpack2/ss2/node_modules/postcss-load-plugins/lib/loadPlugins.js:27:18
        at Array.forEach (native)
        at loadPlugins (/code/webpack2/ss2/node_modules/postcss-load-plugins/lib/loadPlugins.js:26:24)
        at /code/webpack2/ss2/node_modules/postcss-load-config/index.js:19:18
@lavezzi1

This comment has been minimized.

Copy link
Author

commented Oct 9, 2016

What is module '0'

@ai

This comment has been minimized.

Copy link
Member

commented Oct 9, 2016

@ai

This comment has been minimized.

Copy link
Member

commented Oct 9, 2016

@lavezzi1 try this postcss.config.js:

module.exports = {
    plugins: [
        'postcss-import': false,
        'postcss-nested': false,

        'postcss-simple-vars': false,
        'postcss-cssnext': {
            warnForDuplicates: false
        }),
        'postcss-calc': false,
        'postcss-functions': {
            functions: {
                darken: function (value, frac) {
                  var hsla = color(value).toHslaArray();
                  hsla[2] = Math.round(Math.max(Math.min(100, hsla[2] - hsla[2] * frac), 0));
                  return color().fromHsla(hsla).toHexString();
                }
            }
        }),
        'lost': false
    ]
}
@lavezzi1

This comment has been minimized.

Copy link
Author

commented Oct 9, 2016

Additional errors:

Child extract-text-webpack-plugin:

    ERROR in ./~/css-loader!./~/postcss-loader!./~/vue-loader/lib/style-rewriter.js!./source/blocks/logo-spinner/style.css
    Module build failed: TypeError: Cannot read property 'config' of undefined
        at /code/webpack2/ss2/node_modules/postcss-load-config/index.js:19:36
__________________________
....
SyntaxError: Unexpected token :
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:513:28)
    at requireFromString (/code/webpack2/ss2/node_modules/require-from-string/index.js:27:4)
    at /code/webpack2/ss2/node_modules/cosmiconfig/lib/loadJs.js:20:15
 63% building modules 867/966 modules 99 active ...urce/blocks/tooltip-trigger/style.css/code/webpack2/ss2/postcss.config.js:3
        'postcss-import': false,
                        ^
SyntaxError: Unexpected token :
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:513:28)
    at requireFromString (/code/webpack2/ss2/node_modules/require-from-string/index.js:27:4)
    at /code/webpack2/ss2/node_modules/cosmiconfig/lib/loadJs.js:20:15
 63% building modules 868/966 modules 98 active ...urce/blocks/tooltip-trigger/style.css/code/webpack2/ss2/postcss.config.js:3
        'postcss-import': false,
....
@ai

This comment has been minimized.

Copy link
Member

commented Oct 9, 2016

Oops, I forget to remove ):

Corrected config:

module.exports = {
    plugins: [
        'postcss-import': false,
        'postcss-nested': false,

        'postcss-simple-vars': false,
        'postcss-cssnext': {
            warnForDuplicates: false
        },
        'postcss-calc': false,
        'postcss-functions': {
            functions: {
                darken: function (value, frac) {
                  var hsla = color(value).toHslaArray();
                  hsla[2] = Math.round(Math.max(Math.min(100, hsla[2] - hsla[2] * frac), 0));
                  return color().fromHsla(hsla).toHexString();
                }
            }
        },
        'lost': false
    ]
}
@lavezzi1

This comment has been minimized.

Copy link
Author

commented Oct 9, 2016

@ai nothing changes. The same errors.

@ai

This comment has been minimized.

Copy link
Member

commented Oct 9, 2016

@lavezzi1 try this one (I forget to change [] to {}):

module.exports = {
    plugins: {
        'postcss-import': false,
        'postcss-nested': false,

        'postcss-simple-vars': false,
        'postcss-cssnext': {
            warnForDuplicates: false
        },
        'postcss-calc': false,
        'postcss-functions': {
            functions: {
                darken: function (value, frac) {
                  var hsla = color(value).toHslaArray();
                  hsla[2] = Math.round(Math.max(Math.min(100, hsla[2] - hsla[2] * frac), 0));
                  return color().fromHsla(hsla).toHexString();
                }
            }
        },
        'lost': false
    }
}
@lavezzi1

This comment has been minimized.

Copy link
Author

commented Oct 9, 2016

@ai Black magician! Works! Big thanks.

@ai

This comment has been minimized.

Copy link
Member

commented Oct 9, 2016

:) I fixed example in docs.

Could you help in second test. Could you set PostCSS plugins in webpack config instead of PostCSS config?

Replace 'postcss-loader' to:

{
  loader: 'postcss-loader',
  options: {
    plugins: () => {        
      return [      
          require('postcss-import')({       
              addDependencyTo: webpack      
          }),       
          require('postcss-nested')(),      
          require('postcss-simple-vars'),       
          require('postcss-cssnext')({      
              warnForDuplicates: false      
          }),       
          require('postcss-calc'),      
          require('postcss-functions')({        
              functions: {      
                  darken: function (value, frac) {      
                    var hsla = color(value).toHslaArray();      
                    hsla[2] = Math.round(Math.max(Math.min(100, hsla[2] - hsla[2] * frac), 0));     
                    return color().fromHsla(hsla).toHexString();        
                  }     
              }     
          }),       
          require('lost')       
      ]
    }
  }
}

And remove postcss.config.js

@michael-ciniawsky

This comment has been minimized.

Copy link
Collaborator

commented Oct 9, 2016

@lavezzi1 so postcss.config.jsworked for you? if you haven't already update to webpack v2.1.0-beta.25 it has lots of updates

@ai i'm on it testing webpack, i'm aware of the issues :). sokra replied and for webpack 2 options must be an object or string but can contain a funtion inside

{
  loader: 'postcss-loader',
  options: { // -> {Object}
    plugins: () => { // -> {Function}        
      return [      
          require('postcss-import')({ addDependencyTo: webpack })  
          // addDependencyTo is deprecated 
      ]
    }
  }
}

my question is, how the options will/should look like when e.g parser needs to be set etc?

{
  loader: 'postcss-loader',
  options: { // -> {Object}
    postcss: () => { // -> {Function}  e.g options[config] ? postcss : config      
      return {
        parser: 'sugarss',
        plugins: [
          require('postcss-import')()  
        ]
      }
    }
  }
}
@ai

This comment has been minimized.

Copy link
Member

commented Oct 9, 2016

@michael-ciniawsky we fixed this issue 😊👍 it was my mistake, I used wrong config example docs (array instead of object).

I think we don't need dynamic parser, so we could set function only to plugins.

@michael-ciniawsky

This comment has been minimized.

Copy link
Collaborator

commented Oct 9, 2016

I think we don't need dynamic parser, so we could set function only to plugins.

kk, but how will the config look like if you want to set parser, syntay, stringifier in loader.options

{
  loader: 'postcss-loader',
  options: { 
    parser: 'sugarss',
    plugins: (ctx)  => { 
      return [
        require('postcss-import')({ addDependencyTo: ctx.addDependencyTo })  
        // ctx.addDependencyTo for e.g but obsolete  ctx === var loader = this
      ]
    }
  }
}

?

@ai

This comment has been minimized.

Copy link
Member

commented Oct 9, 2016

@michael-ciniawsky you could ignore addDependencyTo case, we found better solution

@michael-ciniawsky

This comment has been minimized.

Copy link
Collaborator

commented Oct 9, 2016

@ai yep i have seen it in the source very nice solution :), this was just a stupid example of passing the loader context, besides that is the example above correct?

@ai

This comment has been minimized.

Copy link
Member

commented Oct 9, 2016

Yeap, it is how I see it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.