SirJohn96 commented 1 week ago

105

kmonahan commented 1 week ago

Hey @SirJohn96 , one issue I've run into in another project is that both postcss-import and postcss-advanced-variables want to handle imports. We likely want postcss-import to handle everything except imports of mixins, which postcss-advanced-variables needs in order to then use those mixins.

I ended up doing:

plugins: {
    '@csstools/postcss-global-data': {
      files: ['./source/00-config/vars/breakpoints.css'],
    },
    'postcss-import': {
      filter: url => {
        return url.indexOf('mixins') === -1;
      },
    },
    'postcss-advanced-variables': {
      importPaths: [path.resolve(__dirname, './source/00-config')],
      importFilter: id => {
        return id.indexOf('mixins') > -1;
      },
    },
    [require.resolve('./lib/iff.js')]: {},
    ...

but definitely open to ideas as I'm not sure that's the best solution; just the one that worked.

It looks like your PR here adds postcss-import lower in the order, which I'm not sure we want to do. Their docs recommend making it one of the first plugins so that the other PostCSS plugins can then process all of the imported CSS. I think we are going to need to handle the conflict between postcss-import and postcss-advanced-variables in some fashion, even if it's not what I went with above.

SirJohn96 commented 1 week ago

Hey @kmonahan, My knowledge is definitely very limited here so I don't mind using your solution as it does make sense to me based off the limited research I did.

SirJohn96 commented 1 week ago

I found some potential issues. I'm investigating.

forumone / nextjs-project

105: Vendor Cascade Layer #119

105