PostCss Modules and next.js - postcss

Question

I am using PostCSS http://cssnext.io/ with my Next.js website combined with butterCMS. I am new to postcss but like what they are trying to do, however coming from a SASS background, I am finding it seems to be going down the rabbit hole of having to add a lot of additional modules and scripts in order to get it working which does not give it a major advantage over preprocessors.
In my package.json I have the following modules:
"postcss-cssnext": "^3.0.2",
"postcss-easy-import": "^3.0.0",
"postcss-loader": "^2.0.6",
"postcss-modules": "^0.8.0",
In my root I have a ./styles/ folder with the following files:
defaults.css
:root {
/* Breakpoints */
#custom-media --small (width >= 576px);
#custom-media --medium (width >= 768px);
#custom-media --large (width >= 1200px);
/* Colors */
--color-black: #000;
--color-white: #fff;
--color-vue-green: #42b983;
/* Typography */
--h1: 2rem;
--h2: 1.5rem;
--h3: 1.25rem;
--h4: 1rem;
--h5: 0.875rem;
--h6: 0.75rem;
/* Utilities */
--accessibly-hidden: {
position: absolute !important;
display: block;
visibility: visible;
overflow: hidden;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
clip: rect(0, 0, 0, 0);
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}
--foo: {
font-size:4em;
color:green;}
}
styles.css
#import 'defaults.css';
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
h1 { font-size: var(--h1) }
h2 { font-size: var(--h2) }
h3 { font-size: var(--h3) }
h4 { font-size: var(--h4) }
h5 { font-size: var(--h5) }
h6 { font-size: var(--h6) }
.accessibly-hidden {
#apply --accessibly-hidden;
}
.giantext{
#apply --foo;
}
div {
color: var(--color-vue-green);
}
.my-paragraph{
composes: my-paragraph from 'shared.css';
}
.danger{
composes: danger from 'shared.css';
}
In my react script I have:
<p className={classNames['my-paragraph']}>My homepage</p>
<p className={classNames.danger}> This background should be yellow</p>
<div>
<p className={classNames.giantext}> I am huge </p>
</div>
Only the composes directives are working with the remaining utilities and styling not being picked up by my index.js file in next.js. The remainder gives me the following warnings/errors:
(Emitted value instead of an instance of Error) postcss-custom-properties: /Users/user/projects/qubase/styles/styles.css:25:3: variable '--color-vue-green' is undefined and used without a fallback
Or
(Emitted value instead of an instance of Error) postcss-apply: /Users/user/projects/qubase/styles.css:16:3: No custom property set declared for `accessibly-hidden`.
etc
Is there anything about postcss I am missing?

Answer 1

Here is what I've done to get rid of those messages:
I added postcss.config.js file and I added following code in it:
const postcssCssNext = require('postcss-cssnext')
const postcssImport = require('postcss-import')
module.exports = {
plugins: [
postcssCssNext({
features: {
customProperties: {
warnings: false
}
}
}),
postcssImport
]
}