Less mixin not working

[exeto]

• ember-cli: 2.7.0
• ember-component-css: 0.2.0-beta.6
• ember-cli-less: 1.5.3

.mixin {
  color: blue;
}

.hello {
  color: red;

  .mixin;
}

File: components/my-component/style.less (8)
The Broccoli Plugin: [PodStyles] failed with:
CssSyntaxError: <css input>:8:3: Unknown word
    at Input.error (/Users/exeto/Projects/ember-test/node_modules/postcss/lib/input.js:120:22)
    at LessParser.unknownWord (/Users/exeto/Projects/ember-test/node_modules/postcss/lib/parser.js:457:26)
    at LessParser.other (/Users/exeto/Projects/ember-test/node_modules/postcss/lib/parser.js:174:14)
    at LessParser.loop (/Users/exeto/Projects/ember-test/node_modules/postcss/lib/parser.js:81:26)
    at lessParse (/Users/exeto/Projects/ember-test/node_modules/postcss-less/dist/less-parse.js:23:12)
    at new LazyResult (/Users/exeto/Projects/ember-test/node_modules/postcss/lib/lazy-result.js:80:24)
    at Processor.process (/Users/exeto/Projects/ember-test/node_modules/postcss/lib/processor.js:200:12)
    at Object.module.exports.syntax (/Users/exeto/Projects/ember-test/node_modules/ember-component-css/lib/preprocess-class-names.js:37:8)
    at PodStyles.processString (/Users/exeto/Projects/ember-test/node_modules/ember-component-css/lib/pod-style.js:34:37)
    at /Users/exeto/Projects/ember-test/node_modules/broccoli-persistent-filter/lib/strategies/default.js:10:19

The broccoli plugin was instantiated at:
    at PodStyles.Plugin (/Users/exeto/Projects/ember-test/node_modules/broccoli-plugin/index.js:7:31)
    at PodStyles.Filter [as constructor] (/Users/exeto/Projects/ember-test/node_modules/broccoli-persistent-filter/index.js:60:10)
    at new PodStyles (/Users/exeto/Projects/ember-test/node_modules/ember-component-css/lib/pod-style.js:12:10)
    at CoreObject.module.exports.treeForStyles (/Users/exeto/Projects/ember-test/node_modules/ember-component-css/index.js:61:19)
    at CoreObject.superWrapper [as treeForStyles] (/Users/exeto/Projects/ember-test/node_modules/ember-cli/node_modules/core-object/lib/assign-properties.js:32:18)
    at CoreObject._treeFor (/Users/exeto/Projects/ember-test/node_modules/ember-cli/lib/models/addon.js:373:33)
    at CoreObject.treeFor (/Users/exeto/Projects/ember-test/node_modules/ember-cli/lib/models/addon.js:341:21)
    at /Users/exeto/Projects/ember-test/node_modules/ember-cli/lib/broccoli/ember-app.js:498:20
    at Array.map (native)
    at EmberApp.addonTreesFor (/Users/exeto/Projects/ember-test/node_modules/ember-cli/lib/broccoli/ember-app.js:496:30)

[webark]

hmm.. I'll add in that unit test and see about getting it fixed.

[exeto]

Thank you

[webark]

@exeto it looks like it namespaces the mixin rule to something like..

.__the-component_3jdu2 .mixin {
  color: blue;
}

so when you try to just reference .mixin it can't find it.

[aguadoenzo]

Any update on this ?

[webark]

@aguadoenzo not yet. I think we could get "detached rulesets" working fairly easily. Some combination of fixes in postcss-selector-namespace and/or postcss-less should be able to handle that.

To get standard mixins working, we could introduce some kind of "root" variable into the option that you could scope or prefix other rules with and those would live in the "root" namespace.

To get it working without either of those... We'd have to do something that would parse the rules, and cary the prefix down.. not impossible.. but considerably more difficult then the first two due to needing to be confident that the .mixin; or .mixin(optionalParam); truly needs to be namespaced.

Option A would be something that postcss-selector-namespace would handle, as the rule parsing logic for less is handled in that package. @topaxi might be able to help there.

Option B would need to be adding a new type of thing which this project has been trying to avoid adding any special DSL's or syntaxes. (sass already has this in their langauge spec @as-root I didn't see anything like that with less)

Option C would be awesome to have! And ideal.. but would take some time that I personally don't have right now.. I'd have to look into the postcss-less ast to see if these are identifiable (which I think they would be) and then either argument postcss-selector-namespace to handle that, or write a new postcss plugin.

Anyway.. those are at least my thoughts on this..!!

[anand5387]

Any update on this?

[webark]

not yet. :/ @ rules should work, but i personally haven't tested a less one yet.