Rollup-plugin-vue: Get error when using stylus in vue template.

[ismail9k]

Expected behavior

When adding lang="stylus" to style tag, it compiles Styles code to native CSS.

Actual behavior

It gives me

CssSyntaxError {
    name: 'CssSyntaxError',
    reason: 'Missed semicolon',
    file: '/mnt/c/Users/Abdelrahman/Projects/verte/src/Verte.vue'
}

Steps to reproduce the behavior

My working files

package.json

{
  "name": "NAME",
  "version": "0.0.0",
  "main": "index.js",
  "scripts": {
    "lint": "eslint ./src --fix",
    "build": "MODE=production node build/build",
    "dev": "MODE=dev node build/watcher",
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  },
  "devDependencies": {
    "browser-sync": "^2.23.6",
    "chalk": "^2.3.2",
    "eslint": "^4.19.1",
    "eslint-config-standard": "^11.0.0",
    "eslint-plugin-import": "^2.10.0",
    "eslint-plugin-node": "^6.0.1",
    "eslint-plugin-promise": "^3.7.0",
    "eslint-plugin-standard": "^3.0.1",
    "fs": "0.0.1-security",
    "pug": "^2.0.3",
    "rollup": "^0.57.1",
    "rollup-plugin-replace": "^2.0.0",
    "rollup-plugin-vue": "^4.1.4",
    "stylus": "^0.54.5",
    "vue-template-compiler": "^2.5.16"
  },
  "author": "",
  "license": "ISC"
}

component.vue

<template lang="pug">
  .picker
    ...
</template>


<script>
export default {
...
}
</script>


<style lang="stylus">
.picker
  position: relative
  display: flex
  justify-content: center
  box-sizing: border-box

  &-guide
    width: 24px
    height: 24px
    padding: 0
    border: 0
    background: transparent

    &:focus
      outline: 0

    svg
      width: 100%
      height: 100%
      fill: inherit
  &-wheel
    position: relative
    margin: 10px auto 20px
    user-select: none

  &-square
    position: relative
    margin: 10px auto 20px
    user-select: none
    display: flex
    justify-content: center
  &-squareStrip
    margin: 0 5px

  &-menu
    position: absolute
    top: 50px
    display: flex
    flex-direction: column
    justify-content: center
    align-items: stretch
    padding: 40px
    width: 300px
    border-radius: $borderRadius
    background-color: $clWhite
    box-shadow: 0 0 25px alpha($clBlack, 5%)
    will-change: transform

    &.is-hidden
      display: none

    &:focus
      outline: none


  &-recent
    display: flex
    flex-wrap: wrap
    justify-content: flex-end
    align-items: center
    width: 100%

  &-color
    margin: 4px
    width: 28px
    height: 28px
    border-radius: 50%
    background-color: $clBlack

  &-value
    padding: 0.6em
    width: 100%
    border: 2px solid $clBlack
    border-radius: $borderRadius 0 0 $borderRadius
    text-align: center
    font-size: $fontTiny
    -webkit-appearance: none
    -moz-appearance: textfield
    &:focus
      outline: none
      border-color: $clSecondary

  &-cursor
    position: absolute
    top: 0
    left: 0
    margin: -6px
    width: 10px
    height: 10px
    border: 2px solid $clWhite
    border-radius: 50%
    will-change: transform
    pointer-events: none
    background-color: transparent
  &-input
    display: flex
    margin-bottom: $margin
  &-submit
    position: relative
    display: inline-flex
    justify-content: center
    align-items: center
    padding: 0.4em 0.75em
    outline-width: 2px
    outline-offset: 1px
    border-width: 2px
    border-style: solid
    border-radius: 0 $borderRadius $borderRadius 0
    background-clip: border-box
    vertical-align: top
    text-align: center
    text-decoration: none
    cursor: pointer
    background-color: $clBlack
    border-color: $clBlack
    >.icon
      width: 22.5px
      height: 18.5px
      fill: $clWhite
    &:hover
      >.icon
        fill: $clSecondary
  .slider-fill
    display: none

</style>

[jonataswalker]

How about rollup.config.js?

[ismail9k]

I'm using Node.js build script, the working code looks like this.

const fs = require('fs');
const path = require('path');
const chalk = require('chalk');
const replace = require('rollup-plugin-replace');
const vuePlugin = require('rollup-plugin-vue').default;
const { rollup } = require('rollup');
const { version } = require('../package.json');
const { paths, banner } = require('./config');

async function buildScripts (format) {
  // get the rollup bundle.
  const bundle = await rollup({
    input: paths[format],
    plugins: [
        replace({ __VERSION__: version }),
        vuePlugin()
      ]
    }
  });

  // pass the desired output config
  const { code } = await bundle.generate({
    format: format,
    name: 'Project',
    banner: banner
  });

  let filePath = path.join(paths.dist, 'project.js');

  fs.writeFileSync(filePath, code);
  console.log(chalk.green('👍  project.js'));
}

buildScripts('es');

module.exports = { buildScripts };

[ismail9k]

When I changed style lang to sass, add node-sass package, then changed the style code a little to match sass conventions, everything work just fine. So I think there's a problem with stylus specific or there something I'm missing here.

[clark-t]

@Abdelrahman3D you can change to lang="styl"

[znck]

https://github.com/vuejs/component-compiler-utils/blob/97e772c2b7ce394f39721b8cc93f4d97672537ba/lib/styleProcessors/index.ts#L131

Stylus is handled as styl. If you're willing you can send a PR to export styl as stylus which would in turn fix this bug.

[ismail9k]

Thank you for your help.

I think stylus is more intuitive than styl since Vue uses it as lang="styles" not lang="styl" documentations.
Moreover, I'm using VS Code, when added 'styl' instead of 'stylus' vue syntax highlighter no longer recognize my code as stylus code, so it'll be very hard to work with.

[Akryum]

We should definitively support lang="stylus" in Vue components.