Use with PostCSS?

[callumflack]

Doesn't seem to be working for PostCSS files. Does it? Can it?

[manniL]

It does not work for PostCSS files, correctly.

Can you give an example of possible usage?

[callumflack]

Just like sass, I save postcss variables in a file. I'm OK to import where required (I've done it 18 months w/ Nuxt) but it'd be great to use this module instead.

[manniL]

@callumflack Looks like a doable thing!

[callumflack]

@manniL that would be very cool! Thankyou

[manniL]

@callumflack Do you use a plugin for PostCSS variables?

[callumflack]

@manniL yes, I use postcss-preset-env to handle compatibility

[manniL]

@callumflack But postcss-preset-env doesn't include postcss variables like https://github.com/postcss/postcss-simple-vars right?

Can you give me an example how your files would look like (similar to the fixtures for LESS/SASS/Stylus in the repo)?

[callumflack]

@manniL sure, here's an example.

postcss-preset-env uses postcss-custom-properties which sticks to the CSS spec. Other plugins are a little more flexible, eg. postcss-css-variables

I'm not sure how simple-vars works as I've not used it but you wouldn't, for example, be able to alter the selector's key via a "variable" if using postcss-custom-properties.

Is that what you mean? It gets quite nuanced.

Ps. I use a postcss.config.js as I can never seem to get it working via nuxt.config.js.

[callumflack]

@manniL btw, I actually npm import a package of css utilities across all my projects, check it here: https://github.com/callumflack/iremono

And this is a good example of a project it's used within: https://github.com/callumflack/callum-flack-design

[equinusocio]

I think you should not care about what plugins are used. postcss-preset-env just pick the stream from postcss and process it. I think you should care instead about adding all the .pcss declared files to the stream BEFORE any other plugins.

For example, i use postcss-easy-import before postcss-preset-envto handle imports before process all the files. This one get all the stream (imported files included) and pass it to their internal plugins (following a specific order). I think the behaviour should be something similar, where this module should follow and resolve all the "imports" and pass the stream to the next postcss plugins (if there are) without processing it.

[meduzen]

@callumflack Thank you so much! It’s been two hours I try to figure out how to @import a SCSS mixins package from node_modules, without success. Now it works. :)

[mrwwalmsley]

Are there any updates on this? I am using PostCSS with precss plugin, which includes PostCSS Advanced Variables to allow for Sass-like variables, conditionals and iterators.

I'm currently using @import statements in each component, but would like to be able to include my variables file and a few mixins in all components by default.

[manniL]

Had no time to work on it yet, nope 😦

[Dan9boi]

I still have all my custom media queries and custom properties in my postcss.config like in the answer here:
https://cmty.app/nuxt/nuxt.js/issues/c7516

Do you think that this could be done, so that the variables could be in a .css file instead?

[2xAA]

Has there been any progress on this?

[CMQNordic]

When using postcss variables and mixins in Assets folder (as .css files) I can import those in each <style> section with @import "<path to .css file>".

It would be awesome to be able to simply define postcss in nuxt.config.js in same way as scss. I guess this is the aim of this plug-in and postcss seems to be widely used.

Is there maybe any other way in nuxt to "auto-include" global variable and mixins for postcss so we do not have to import those in each .vue file?

[Dan9boi]

@CMQNordic in your nuxt.config under the CSS property, you can include global styling.
I then use the postCSS plugins to load the variables and media-queries (same file), that will be global for the app. I'm not using the style-resources-module though 🤷‍♂️

Here's my setup:

  css: [
    { src: '~assets/css/_normalize.css' },
    { src: '~assets/css/_fonts.css' },
    { src: '~assets/css/_grid.css' },
    { src: '~assets/css/_base.css' },
  ],
...
build: {
    extractCSS: { ignoreOrder: true },
    optimizeCSS: true,
    postcss: {
      plugins: {
        'postcss-mixins': {},
        'postcss-import': {},
        'postcss-nested': {},
        'postcss-partial-import': {},
        'postcss-custom-properties': {
          importFrom: './assets/css/_variables.css',
          preserve: false,
        },
        'postcss-reporter': {},
        'postcss-custom-media': {
          importFrom: './assets/css/_variables.css',
          preset: {
            browsers: 'last 2 versions, ie >= 11',
            stage: 0,
          },
        },
      },
    },

[tbredin]

Wondering if this will work with the variables / mixins from postcss-advanced-variables?

https://github.com/csstools/postcss-advanced-variables