search

openstyles / stylelint-bundle

Create & provide a bundled version of Stylelint
MIT License
5 stars 5 forks source link

Unknown word error #2

Open Gitoffthelawn opened 3 years ago

Gitoffthelawn commented 3 years ago

Thank you for the new version of Stylus! This issue was present in the previous version, and is still present in v1.5.15:

The following code generates an "Unknown word" error at position 11:20. Likely an issue with Stylelint. Could be an issue with my code, but it works as expected, so I'm thinking this issue is with Styelint or Stylus..

/* ==UserStyle==
@name           Test001
@namespace      Test001
@version        1.0.0
@description        Test001
@author         Test
@preprocessor       less
@var            range hue-rotate "Hue-rotate" [0, 0, 359, 1]
==/UserStyle== */

@hue-rotate-deg: @{hue-rotate}deg;

img { filter: hue-rotate(@hue-rotate-deg) }
tophf commented 3 years ago

@eight04, looks like the only solution is to use postcss-less per stylelint documentation - could you take a quick look if this something we can do here while building the bundle or is it something that we can add to Stylus (in which case the issue should be transferred back)? I've already verified that adding the var definition for hue-rotate doesn't help, the problem is the syntax itself.

eight04 commented 3 years ago

Stylelint itself can only parse vanilla CSS. To make it work with less/stylus-lang, we need plugins like postcss-less/postcss-styl.

It seems that it shouldn't be hard to include plugins with browserify: https://github.com/postcss/postcss#browser https://github.com/stylelint/stylelint/blob/master/docs/user-guide/usage/postcss-plugin.md#example-a