Gatsby: Use CSS custom properties with Gatsby?

Created on 3 Nov 2017 · 5Comments · Source: gatsbyjs/gatsby

I use Tachyons for styling and import it globally into layouts/index.js like this:

import '../utils/tachyons-custom/tachyons.css'

It works well except that any custom properties defined in tachyons.css are omitted from the Tachyons <style> tag added to the <head>. As a result, when I try to reference one of Tachyons' custom properties in another stylesheet, I run into this type of error:

src/utils/utilities.css
  22:2 variable  '--pink' is undefined and used without a fallback [postcss-custom-properties]
  25:1 Missing @custom-media definition for '--breakpoint-large'. The entire rule has been removed from the output [post-css-custom-media]

Is there a reason the custom property declarations are omitted from the generated <style> tags? Is there a way to fix this so I can reference Tachyons custom properties (for colors, breakpoints, etc.) in my custom CSS?

Source

ooloth

👍3

Most helpful comment

There is another way to do this. I created a variables.css file which looks like this:

:root {
  --primary50: #E3F2FD;
  --primary100: #BBDEFB;
  --primary200: #90CAF9;
}

Then I import variables.css into my other .css files with:

@import "../../css/variables.css";

This works because Gatsby is configured to use cssnext, which has import support. It has two annoyances though:

You have to import variables.css everywhere
For some reason it prints this to the console for every file:

src/pages/lists.module.css
undefined [undefined]

ahfarmer on 15 Dec 2017

👍6 ❤2

All 5 comments

I had this same issue, so to get around it I ended up wrapping everything inside a react-custom-properties component. https://github.com/danbahrami/react-custom-properties

// css_properties.js
export const CSS_CUSTOM_PROPERTIES = {
  '--black': '#000',
  '--near-black': '#111',
  '--dark-gray': '#333',
  '--mid-gray': '#4a4a4a',
  ...

// index.js
import React from 'react'
import CustomProperties from 'react-custom-properties';
import { CSS_CUSTOM_PROPERTIES } from '../components/cssProperties';

...

<CustomProperties
    global
    properties={
    CSS_CUSTOM_PROPERTIES
  }>
  <YourReactApp />
</CustomProperties>

You have to define your css properties as an object, so the syntax is a little different, but you can use the custom properties in your component css.

nathanyoung on 7 Nov 2017

👍1

te underlying issue here is the default css loader config :/ #2700 should fix it for v2

jquense on 7 Nov 2017