CSS: hsl() with Negative Hue Values Compile to Miscalculated Hexadecimal Values

[HughxDev]

Description

During CSS compilation, HSL color values with negative hue values are clipped to 0 instead of wrapped.

Not using PostCSS, as far as I can tell. Just built on top of the blog starter kit.

Steps to reproduce

Specify a blue text color using a negative hue value.

style.css:

.foo {
  color: hsl(-150, 100%, 40%);
}

index.js:

import './style.css'

This renders correctly with gatsby develop, as the color value is unchanged.

Expected result

On gatsby build, the CSS should have an unchanged color value hsl(-150, 100%, 40%), or an equivalent blue hex value #06c. (I actually don’t understand why it compiles to hex; is it for backwards compatibility with old browsers? Is this configurable?)

Actual result

Compiled CSS has a red hex value #c00, equivalent to hsl(0, 100%, 40%) .

.foo {
  color: #c00;
}

Environment

  System:
    OS: macOS Sierra 10.12.6
    CPU: x64 Intel(R) Core(TM) i7-5557U CPU @ 3.10GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.7.0 - /usr/local/bin/node
    Yarn: 1.7.0 - /usr/local/bin/yarn
    npm: 6.2.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 69.0.3497.81
    Firefox: 61.0.2
  npmPackages:
    gatsby: ^1.9.250 => 1.9.273
    gatsby-link: ^1.6.39 => 1.6.45
    gatsby-plugin-feed: ^1.3.20 => 1.3.25
    gatsby-plugin-google-analytics: ^1.0.29 => 1.0.31
    gatsby-plugin-offline: ^1.0.15 => 1.0.18
    gatsby-plugin-react-helmet: ^1.0.8 => 1.0.8
    gatsby-plugin-sharp: ^1.6.42 => 1.6.48
    gatsby-plugin-typography: ^1.7.18 => 1.7.19
    gatsby-remark-copy-linked-files: ^1.5.31 => 1.5.37
    gatsby-remark-images: ^1.5.61 => 1.5.67
    gatsby-remark-prismjs: ^1.2.24 => 1.2.24
    gatsby-remark-responsive-iframe: ^1.4.18 => 1.4.20
    gatsby-remark-smartypants: ^1.4.12 => 1.4.12
    gatsby-source-filesystem: ^1.5.31 => 1.5.39
    gatsby-transformer-remark: ^1.7.40 => 1.7.44
    gatsby-transformer-sharp: ^1.6.22 => 1.6.27
  npmGlobalPackages:
    gatsby-cli: 1.1.58

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: 'HVML – Hypervideo Markup Language',
    author: 'Hugh Guiney',
    description: 'Documentation for HVML',
    siteUrl: 'https://hypervideo.tech/',
  },
  pathPrefix: '/',
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/pages`,
        name: 'pages',
      },
    },
    // {
    //   resolve: `gatsby-source-filesystem`,
    //   options: {
    //     path: `${__dirname}/src/layouts`,
    //     name: 'layouts',
    //   },
    // },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          'gatsby-remark-prismjs',
          'gatsby-remark-copy-linked-files',
          'gatsby-remark-smartypants',
        ],
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        //trackingId: `ADD YOUR TRACKING ID HERE`,
      },
    },
    `gatsby-plugin-feed`,
    `gatsby-plugin-offline`,
    `gatsby-plugin-react-helmet`,
    {
      resolve: 'gatsby-plugin-typography',
      options: {
        pathToConfigModule: 'src/utils/typography',
      },
    },
  ],
}

For a full example you can clone the relevant commit from my project, run gatsby build, and look at one of the many pages with code on it. The angle brackets will be rendered red instead of blue.

[kakadiadarpan]

Hi @hguiney, I was able to reproduce this issue in Gatsby v1. However, this has been fixed in the v2 release which is still in beta.

[kakadiadarpan]

@hguiney Could you try upgrading to v2? This issue is fixed there.

[DSchau]

Going to close this as fixed!

Please check out Gatsby v2 (yarn upgrade-interactive is really helpful here!) and let us know if we can assist further.

Best of luck, and thanks for opening an issue!