vue-loader-for-apache-weex
vue-loader-for-apache-weex copied to clipboard
Stylus selector interpolation example not working
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