postcss / sugarss

Indent-based CSS syntax for PostCSS
MIT License
710 stars 39 forks source link

Fail to support some plugins #71

Closed dtvn closed 4 years ago

dtvn commented 4 years ago

It was designed to be used with PreCSS and postcss-nested-props

I've tested and it only works with PreCSS. But, postcss-nested-props and postcss-easy-import aren't. Here is how my config:

.postcssrc.js - config file for Gulp:

const fn = require('./style/asset/fn/index.js') // BUG glob doesn't work
const uniVar = require('./style/asset/uniVar.js')

module.exports = {
    parser: 'sugarss',
    plugins: {
        'postcss-advanced-variables': {
            variables: uniVar,
            disable: '@import'
        },
        'postcss-nested': null,
        'postcss-nested-props': null, // BUG 
        'postcss-easy-import': {
            extensions: '.sss' // BUG 
        },
        'postcss-functions': {
            functions: fn
        },
        'cssnano': {
            preset: [
                'default',
                { discardComments: { removeAll: true } }
            ]
        }
    }
}

Case A.sss - no nested-props:

body
    font:
        size: 12px // It said missing semicolons

Output: Screenshot from 2019-10-14 15-00-29

Case **B.sss - no import:

body
    @import 'xyz' // various output
  1. If I disable @import of postcss-advanced-variables. PostCSS will copy the whole @import 'yy' to the final file.
  2. If I enable @import of postcss-advanced-variables. It will print this message:

    Could not resolve the @import for "layout/thread"

Output: Screenshot from 2019-10-14 15-10-52 I don't think I could find anything in call stack

ai commented 4 years ago

Can you show full PostCSS output? The error message with stack trace.

dtvn commented 4 years ago

Sure, let me add detail.

I have update detail and add screenshot. Hope it help.

About the stack trace, I'm trying to learn debugging. It may take a while.

dtvn commented 4 years ago

I think the problem is the plugins' order.

If I put it in this order

'postcss-easy-import': easyIm,
'postcss-mixins': { mixinsFiles: path.join(rootPath, 'mixins', '*.mjs') },
'postcss-functions': { glob: path.join(rootPath, 'funcs', '*.mjs') },
'postcss-nested-props': null, // Must be above postcss-nested
'postcss-nested': null

It will work fine. (I forgot where I read this note, the plugins of postcss are read in an up to down order. So this is my bad)