csstools / precss

Use Sass-like markup in your CSS
https://jonathantneal.github.io/precss/
Creative Commons Zero v1.0 Universal
1.61k stars 77 forks source link

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

Open h0tc0d3 opened 6 years ago

h0tc0d3 commented 6 years ago
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 6 years ago

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 6 years ago

Disable plugins in precss not working. https://github.com/simonsmith/postcss-property-lookup/issues/25#issuecomment-363191791 https://github.com/postcss/postcss-nested/issues/70

h0tc0d3 commented 6 years ago

@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.

kubijo commented 6 years ago

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 5 years ago

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 5 years ago

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.