csstools/precss

Disable plugins in precss not working. Could not resolve the variable.

Opened this issue · 6 comments

h0tc0d3 commented 
precss:modules.css:19:23: Could not resolve the variable "$name" within "button $name, $color"
 17 | }
  18 | 
> 19 | @define-mixin button $name, $color {
     |                       ^
  20 |     .button-$name {
  21 |         @extend %button;

    at Input.error (node_modules\postcss\lib\input.es6:90:22)
    at AtRule.error (node_modules\postcss\lib\node.es6:86:38)
    at manageUnresolved (node_modules\precss\node_modules\postcss-advanced-variables\index.bundle.js:52:14)
    at node_modules\precss\node_modules\postcss-advanced-variables\index.bundle.js:73:4
    at String.replace (<anonymous>)
    at getReplacedString (node_modules\precss\node_modules\postcss-advanced-variables\index.bundle.js:59:30)
    at transformAtrule (node_modules\precss\node_modules\postcss-advanced-variables\index.bundle.js:144:16)
    at node_modules\precss\node_modules\postcss-advanced-variables\index.bundle.js:694:5
    at Array.forEach (<anonymous>)
    at transformNode (node_modules\precss\node_modules\postcss-advanced-variables\index.bundle.js:666:22)

Code:

@define-mixin button $name, $color {
    .button-$name {
        @extend %button;
        background-color: $color;
        color: #fff;
    }
    .button-$name:hover {
         background-color: @background-color;
         color: $color;
    }
}

And how disable PropertyLookup plugin?

h0tc0d3 commented

precss({"lookup": { disable: true }}) Not work.

precss: base.css:26:1: Unable to find property @font-family in body
precss: base.css:26:1: Unable to find property @font-color in body
precss: base.css:92:1: Unable to find property @code-color in .loading__wrapper
precss: typography.css:18:1: Unable to find property @header-color in h2
precss: typography.css:18:1: Unable to find property @header-color in h2
precss: typography.css:18:1: Unable to find property @code-color in h2
precss: typography.css:30:1: Unable to find property @sheader-color in h3
precss: typography.css:37:1: Unable to find property @sheader-color in h4
precss: typography.css:44:1: Unable to find property @sheader-color in h5
precss: typography.css:51:1: Unable to find property @sheader-color in h6
h0tc0d3 commented

@doasync I don't use import plugin in precss. I wrote my own import plugin. Read documentation https://github.com/jonathantneal/precss/wiki/Options
All plugins are enabled by default, to disable one, pass disable: true option to plugin namespace.
Earlier the option worked, but after the update stopped working.

  • 👍1
kubijo commented

Hey @h0tc0d3, did you get around this somehow?
I've ran into the need to disable @import resolving because I need it to be done by webpack, yet by looking into the source code, there does not seem to a place where disable would be handled

diverent2 commented

Hey there, this used to be a feature but was removed in version 3.0. onward.
the current behaviour is an array of options that will get passed down to all plugins.
See: #127
Sadly this doesn´t allow for the option disable any longer.

I´ve opened a PR to solve this issue: #132.
Currently waiting for feedback :)

paulshryock commented

I was getting the precss could not resolve the variable ___ within ___ error, and I was able to resolve the issue by changing my processing workflow. I'm using PostCSS inside a Gulp task, and my gulp.src included all my CSS files, including the files which had variables. I changed my gulp.src to only include my style.css file, which imports other files which define and make use of various variables, and that resolved the problem.