PostCSS easy import with Next.js

[Itagiba]

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>

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

Only the composes directives are working with the remaining utilities and styling not being picked up by my index.js file. However if I add the contents of defaults.css directly into styles.css the styling works which meakes me think that the import directive is not working. Is there anything I am missing here?