weexteam / vue-loader-for-apache-weex

vue-loader-for-apache-weex is a third party plugin, and is not developed nor maintained by Apache Weex.
MIT License
30 stars 27 forks source link

Stylus selector interpolation example not working #48

Open dseeker opened 5 years ago

dseeker commented 5 years ago

I got stylus working nicely but there is a sneaky problem with PostCSS. Since I don't know if it's a PostCSS issue or their implementation on weex loader, I'm posting here first.

Here's what I'm trying to achieve: http://stylus-lang.com/docs/interpolation.html Interpolation between parenthesis work. example:"

opacity = 1
mySelectors = '.baz'
.web({mySelectors})
    opacity opacity

outputs: .web(.baz) { opacity: 1; }

but removing the parenthesis, to concatenate strings, like in the manual example, raises the PostCSS error

mySelectors = '.baz'
{mySelectors}
    opacity 1

outputs:

CssSyntaxError {
  name: 'CssSyntaxError',
  reason: 'Unknown word',
  file: '/Users/dseeker/weex-vue-spa/src/debug.vue',
  source: '\n\n\n\n\n\n\n\n\n\n\n\n\n\n.wrapper\n.another\n\tjustify-content: center\n\talign-items: center\n.logo\n\twidth 424px\n\theight 300px\n.greeting\n\ttext-align center\n\tmargin-top 70px\n\tfont-size 50px\n\tcolor #41B883\n.message\n\tmargin 30px\n\tfont-size 32px\n\tcolor #727272\n\nopacity = 1\nmySelectors = \'.baz\'\n{mySelectors}\n\topacity opacity\n\n.null{}\n',
  line: 34,
  column: 2,
  message: '/Users/dseeker/weex-vue-spa/src/debug.vue:34:2: Unknown word',
  input: 
   { line: 34,
     column: 2,
     source: '\n\n\n\n\n\n\n\n\n\n\n\n\n\n.wrapper\n.another\n\tjustify-content: center\n\talign-items: center\n.logo\n\twidth 424px\n\theight 300px\n.greeting\n\ttext-align center\n\tmargin-top 70px\n\tfont-size 50px\n\tcolor #41B883\n.message\n\tmargin 30px\n\tfont-size 32px\n\tcolor #727272\n\nopacity = 1\nmySelectors = \'.baz\'\n{mySelectors}\n\topacity opacity\n\n.null{}\n',
     file: '/Users/dseeker/weex-vue-spa/src/debug.vue' } }
Hash: 37cc5606d8abbe66d2d6
Version: webpack 3.12.0
[8] ./node_modules/weex-vue-loader/lib/style-loader.js!./node_modules/stylus-loader?{"sourceMap":false}!./node_modules/weex-vue-loader/lib/style-rewriter.js?id=data-v-4db570ca!./node_modules/weex-vue-loader/lib/selector.js?type=styles&index=0!./src/debug.vue 973 bytes {0} [built] [failed] [1 error]
ERROR in ./node_modules/weex-vue-loader/lib/style-loader.js!./node_modules/stylus-loader?{"sourceMap":false}!./node_modules/weex-vue-loader/lib/style-rewriter.js?id=data-v-4db570ca!./node_modules/weex-vue-loader/lib/selector.js?type=styles&index=0!./src/debug.vue
Module build failed: CssSyntaxError: /Users/dseeker/weex-vue-spa/src/debug.vue:34:2: Unknown word
    at Input.error (/Users/dseeker/weex-vue-spa/node_modules/postcss/lib/input.js:119:22)
    at Parser.unknownWord (/Users/dseeker/weex-vue-spa/node_modules/postcss/lib/parser.js:506:26)
    at Parser.other (/Users/dseeker/weex-vue-spa/node_modules/postcss/lib/parser.js:171:18)
    at Parser.parse (/Users/dseeker/weex-vue-spa/node_modules/postcss/lib/parser.js:84:26)
    at parse (/Users/dseeker/weex-vue-spa/node_modules/postcss/lib/parse.js:24:16)
    at new LazyResult (/Users/dseeker/weex-vue-spa/node_modules/postcss/lib/lazy-result.js:70:24)
    at Processor.process (/Users/dseeker/weex-vue-spa/node_modules/postcss/lib/processor.js:117:12)
    at Object.module.exports (/Users/dseeker/weex-vue-spa/node_modules/weex-vue-loader/lib/style-rewriter.js:96:6)
 @ ./src/debug.vue 5:20-264
 @ ./.temp/entry.js