test(e2e): add test suite for sass, less and stylus

e2e-tests/development-runtime/cypress/integration/styling/less.js

@@ -0,0 +1,65 @@
+before(() => {
+  cy.exec(`npm run reset`)
+})
+
+after(() => {
+  cy.exec(`npm run reset`)
+})
+
+describe(`styling: less`, () => {
+  it(`initial styling is correct`, () => {
+    cy.visit(`/styling/less`).waitForRouteChange()
+
+    cy.getTestElement(`less-styled-element`).should(
+      `have.css`,
+      `color`,
+      `rgb(255, 0, 0)`
+    )
+
+    cy.getTestElement(`less-module-styled-element`).should(
+      `have.css`,
+      `color`,
+      `rgb(0, 128, 0)`
+    )
+  })
+
+  describe(`hot reloading`, () => {
+    it(`plain less`, () => {
+      // we don't want to visit page for each test - we want to visit once and then test HMR
+      cy.window().then(win => {
+        cy.spy(win.console, `log`).as(`hmrConsoleLog`)
+      })
+
+      cy.exec(
+        `npm run update -- --file src/pages/styling/less-plain.less --replacements "red:blue" --exact`
+      )
+
+      cy.waitForHmr()
+
+      cy.getTestElement(`less-styled-element`).should(
+        `have.css`,
+        `color`,
+        `rgb(0, 0, 255)`
+      )
+    })
+
+    it(`less module`, () => {
+      // we don't want to visit page for each test - we want to visit once and then test HMR
+      cy.window().then(win => {
+        cy.spy(win.console, `log`).as(`hmrConsoleLog`)
+      })
+
+      cy.exec(
+        `npm run update -- --file src/pages/styling/less.module.less --replacements "green:blue" --exact`
+      )
+
+      cy.waitForHmr()
+
+      cy.getTestElement(`less-module-styled-element`).should(
+        `have.css`,
+        `color`,
+        `rgb(0, 0, 255)`
+      )
+    })
+  })
+})

e2e-tests/development-runtime/cypress/integration/styling/sass.js

@@ -0,0 +1,65 @@
+before(() => {
+  cy.exec(`npm run reset`)
+})
+
+after(() => {
+  cy.exec(`npm run reset`)
+})
+
+describe(`styling: sass`, () => {
+  it(`initial styling is correct`, () => {
+    cy.visit(`/styling/sass`).waitForRouteChange()
+
+    cy.getTestElement(`sass-styled-element`).should(
+      `have.css`,
+      `color`,
+      `rgb(255, 0, 0)`
+    )
+
+    cy.getTestElement(`sass-module-styled-element`).should(
+      `have.css`,
+      `color`,
+      `rgb(0, 128, 0)`
+    )
+  })
+
+  describe(`hot reloading`, () => {
+    it(`plain sass`, () => {
+      // we don't want to visit page for each test - we want to visit once and then test HMR
+      cy.window().then(win => {
+        cy.spy(win.console, `log`).as(`hmrConsoleLog`)
+      })
+
+      cy.exec(
+        `npm run update -- --file src/pages/styling/sass-plain.scss --replacements "red:blue" --exact`
+      )
+
+      cy.waitForHmr()
+
+      cy.getTestElement(`sass-styled-element`).should(
+        `have.css`,
+        `color`,
+        `rgb(0, 0, 255)`
+      )
+    })
+
+    it(`sass module`, () => {
+      // we don't want to visit page for each test - we want to visit once and then test HMR
+      cy.window().then(win => {
+        cy.spy(win.console, `log`).as(`hmrConsoleLog`)
+      })
+
+      cy.exec(
+        `npm run update -- --file src/pages/styling/sass.module.scss --replacements "green:blue" --exact`
+      )
+
+      cy.waitForHmr()
+
+      cy.getTestElement(`sass-module-styled-element`).should(
+        `have.css`,
+        `color`,
+        `rgb(0, 0, 255)`
+      )
+    })
+  })
+})

e2e-tests/development-runtime/cypress/integration/styling/stylus.js

@@ -0,0 +1,65 @@
+before(() => {
+  cy.exec(`npm run reset`)
+})
+
+after(() => {
+  cy.exec(`npm run reset`)
+})
+
+describe(`styling: stylus`, () => {
+  it(`initial styling is correct`, () => {
+    cy.visit(`/styling/stylus`).waitForRouteChange()
+
+    cy.getTestElement(`stylus-styled-element`).should(
+      `have.css`,
+      `color`,
+      `rgb(255, 0, 0)`
+    )
+
+    cy.getTestElement(`stylus-module-styled-element`).should(
+      `have.css`,
+      `color`,
+      `rgb(0, 128, 0)`
+    )
+  })
+
+  describe(`hot reloading`, () => {
+    it(`plain stylus`, () => {
+      // we don't want to visit page for each test - we want to visit once and then test HMR
+      cy.window().then(win => {
+        cy.spy(win.console, `log`).as(`hmrConsoleLog`)
+      })
+
+      cy.exec(
+        `npm run update -- --file src/pages/styling/stylus-plain.styl --replacements "red:blue" --exact`
+      )
+
+      cy.waitForHmr()
+
+      cy.getTestElement(`stylus-styled-element`).should(
+        `have.css`,
+        `color`,
+        `rgb(0, 0, 255)`
+      )
+    })
+
+    it(`stylus module`, () => {
+      // we don't want to visit page for each test - we want to visit once and then test HMR
+      cy.window().then(win => {
+        cy.spy(win.console, `log`).as(`hmrConsoleLog`)
+      })
+
+      cy.exec(
+        `npm run update -- --file src/pages/styling/stylus.module.styl --replacements "green:blue" --exact`
+      )
+
+      cy.waitForHmr()
+
+      cy.getTestElement(`stylus-module-styled-element`).should(
+        `have.css`,
+        `color`,
+        `rgb(0, 0, 255)`
+      )
+    })
+  })
+})

e2e-tests/development-runtime/gatsby-config.js

@@ -50,6 +50,9 @@ module.exports = {
       },
     },
     `gatsby-plugin-image`,
+    `gatsby-plugin-sass`,
+    `gatsby-plugin-less`,
+    `gatsby-plugin-stylus`,
     // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.dev/offline
     // 'gatsby-plugin-offline',

e2e-tests/development-runtime/package.json

@@ -7,10 +7,13 @@
     "gatsby": "^3.0.0-next.6",
     "gatsby-image": "^3.0.0-next.0",
     "gatsby-plugin-image": "^1.0.0-next.5",
+    "gatsby-plugin-less": "^5.1.0-next.2",
     "gatsby-plugin-manifest": "^3.0.0-next.0",
     "gatsby-plugin-offline": "^4.0.0-next.1",
     "gatsby-plugin-react-helmet": "^4.0.0-next.0",
+    "gatsby-plugin-sass": "^4.1.0-next.2",
     "gatsby-plugin-sharp": "^3.0.0-next.5",
+    "gatsby-plugin-stylus": "^3.1.0-next.2",
     "gatsby-seo": "^0.1.0",
     "gatsby-source-filesystem": "^3.0.0-next.2",
     "gatsby-transformer-json": "^3.0.0-next.0",
@@ -20,7 +23,8 @@
     "prop-types": "^15.6.2",
     "react": "16.9.0",
     "react-dom": "16.9.0",
-    "react-helmet": "^5.2.1"
+    "react-helmet": "^5.2.1",
+    "sass": "^1.32.8"
   },
   "keywords": [
     "gatsby",

e2e-tests/development-runtime/src/pages/styling/less-plain.less

@@ -0,0 +1,5 @@
+@color: red;
+
+.plain-less-test {
+  color: @color;
+}

e2e-tests/development-runtime/src/pages/styling/less.js

@@ -0,0 +1,19 @@
+import * as React from "react"
+import "./less-plain.less"
+import { componentClassName } from "./less.module.less"
+
+export default function PlainCss() {
+  return (
+    <div style={{ color: `black` }}>
+      <div data-testid="less-styled-element" className="plain-less-test">
+        test
+      </div>
+      <div
+        data-testid="less-module-styled-element"
+        className={componentClassName}
+      >
+        test
+      </div>
+    </div>
+  )
+}

e2e-tests/development-runtime/src/pages/styling/less.module.less

@@ -0,0 +1,5 @@
+@color: green;
+
+.componentClassName {
+  color: @color;
+}

e2e-tests/development-runtime/src/pages/styling/sass-plain.scss

@@ -0,0 +1,5 @@
+$color: red;
+
+.plain-sass-test {
+  color: $color;
+}

e2e-tests/development-runtime/src/pages/styling/sass.js

@@ -0,0 +1,19 @@
+import * as React from "react"
+import "./sass-plain.scss"
+import { componentClassName } from "./sass.module.scss"
+
+export default function PlainCss() {
+  return (
+    <div style={{ color: `black` }}>
+      <div data-testid="sass-styled-element" className="plain-sass-test">
+        test
+      </div>
+      <div
+        data-testid="sass-module-styled-element"
+        className={componentClassName}
+      >
+        test
+      </div>
+    </div>
+  )
+}

e2e-tests/development-runtime/src/pages/styling/sass.module.scss

@@ -0,0 +1,5 @@
+$color: green;
+
+.componentClassName {
+  color: $color;
+}

e2e-tests/development-runtime/src/pages/styling/stylus-plain.styl

@@ -0,0 +1,5 @@
+color = red
+
+.plain-stylus-test {
+  color color
+}

e2e-tests/development-runtime/src/pages/styling/stylus.js

@@ -0,0 +1,19 @@
+import * as React from "react"
+import "./stylus-plain.styl"
+import { componentClassName } from "./stylus.module.styl"
+
+export default function PlainCss() {
+  return (
+    <div style={{ color: `black` }}>
+      <div data-testid="stylus-styled-element" className="plain-stylus-test">
+        test
+      </div>
+      <div
+        data-testid="stylus-module-styled-element"
+        className={componentClassName}
+      >
+        test
+      </div>
+    </div>
+  )
+}

e2e-tests/development-runtime/src/pages/styling/stylus.module.styl

@@ -0,0 +1,5 @@
+color = green
+
+.componentClassName {
+  color color
+}

e2e-tests/production-runtime/cypress/integration/styling/less.js

@@ -0,0 +1,17 @@
+describe(`styling: less`, () => {
+  it(`initial styling is correct`, () => {
+    cy.visit(`/styling/less`).waitForRouteChange()
+
+    cy.getTestElement(`less-styled-element`).should(
+      `have.css`,
+      `color`,
+      `rgb(255, 0, 0)`
+    )
+
+    cy.getTestElement(`less-module-styled-element`).should(
+      `have.css`,
+      `color`,
+      `rgb(0, 128, 0)`
+    )
+  })
+})

e2e-tests/production-runtime/cypress/integration/styling/sass.js

@@ -0,0 +1,17 @@
+describe(`styling: sass`, () => {
+  it(`initial styling is correct`, () => {
+    cy.visit(`/styling/sass`).waitForRouteChange()
+
+    cy.getTestElement(`sass-styled-element`).should(
+      `have.css`,
+      `color`,
+      `rgb(255, 0, 0)`
+    )
+
+    cy.getTestElement(`sass-module-styled-element`).should(
+      `have.css`,
+      `color`,
+      `rgb(0, 128, 0)`
+    )
+  })
+})

e2e-tests/production-runtime/cypress/integration/styling/stylus.js

@@ -0,0 +1,17 @@
+describe(`stylineg: stylus`, () => {
+  it(`initial styling is correct`, () => {
+    cy.visit(`/styling/stylus`).waitForRouteChange()
+
+    cy.getTestElement(`stylus-styled-element`).should(
+      `have.css`,
+      `color`,
+      `rgb(255, 0, 0)`
+    )
+
+    cy.getTestElement(`stylus-module-styled-element`).should(
+      `have.css`,
+      `color`,
+      `rgb(0, 128, 0)`
+    )
+  })
+})

e2e-tests/production-runtime/gatsby-config.js

@@ -21,6 +21,9 @@ module.exports = {
     },
     `gatsby-plugin-local-worker`,
     `gatsby-plugin-image`,
-    `gatsby-plugin-sharp`
+    `gatsby-plugin-sharp`,
+    `gatsby-plugin-sass`,
+    `gatsby-plugin-less`,
+    `gatsby-plugin-stylus`,
   ].concat(process.env.TEST_PLUGIN_OFFLINE ? [`gatsby-plugin-offline`] : []),
 }