feat: theme & content now a plugin (#180)

* feat: theme now a plugin

* fix: update readme

* fix: remove cjs readme

* fix: add in main as well

* fix: remove comment on readme

* fix: avoid requiring package in content

* fix: use nullish coalescing operator

* fix: remove whitespace

* fix: imports as ESM

* fix: change import name to 'tailwind-plugin'

* feat: setup tests, update readme

* feat: tests for plugin

* fix: remove console.logs

* fix: rm comments

* fix: test relative path

* fix: test relative path in test

* fix: cleanup test

* fix: further cleanup for readability

* fix: readability

* fix: readme update

.github/workflows/ci.yml

@@ -1,9 +1,9 @@
 name: Continuous Integration
 
-on: 
+on:
   push:
-   branches:
-    - master
+    branches:
+      - master
   pull_request:
 
 jobs:

README.md

@@ -14,25 +14,22 @@ npm install --save @nearform/quantum
 
 #### With Tailwind
 
-Inclue or extend our colour configuration and add our components to Tailwind's content configuration.
+Include or extend our colour configuration and add our components to Tailwind's content configuration. To ensure dark mode of the components isn't operating system dependent, add the `darkMode: "class"` entry to the config.
 
 ```js
 // tailwind.config.js
-import colors from '@nearform/quantum/dist/colors'
-
+import quantumPlugin from '@nearform/quantum/tailwind-plugin'
 module.exports = {
-    content: [
-        "./node_modules/@nearform/quantum/**/*.js"
-    ],
-    theme: {
-        colors,
-    }
-};
+  //...tailwind config
+  plugins: [quantumPlugin]
+  darkMode: "class"
+}
 ```
 
 #### Without Tailwind
 
 ```js
-import '@nearform/quantum/dist/global.css';
-import { Navbar } from '@nearform/quantum';
+//root component
+import '@nearform/quantum/dist/global.css'
+import { Button } from '@nearform/quantum'
 ```

__mocks__/plugin/tailwind.mock.config.ts

@@ -0,0 +1,6 @@
+//used for relative file test
+import qPlugin from '../../src/tailwind-plugin'
+export default {
+  content: { relative: true, files: ['./content.js'] },
+  plugins: [qPlugin]
+}

__tests__/plugin.test.ts

@@ -0,0 +1,82 @@
+import { describe, expect, it } from '@jest/globals'
+import qPlugin from '../src/tailwind-plugin'
+import postcss from 'postcss'
+import tailwindcss from 'tailwindcss'
+import { ContentConfig } from 'tailwindcss/types/config'
+import path from 'path'
+function run(testContent: ContentConfig | string) {
+  if (typeof testContent === 'string') {
+    return postcss(tailwindcss(testContent)).process('@tailwind utilities;', {
+      from: undefined
+    })
+  }
+  return postcss(
+    tailwindcss({ content: testContent, plugins: [qPlugin] })
+  ).process('@tailwind utilities;', {
+    from: undefined
+  })
+}
+
+describe('Plugin can add index.js to content', () => {
+  it('Is added to the tailwind config with files key', async () => {
+    const testContent: ContentConfig = {
+      files: ['./src/content.js', './stories/**/*'],
+      relative: false
+    }
+    const filesLength = testContent.files.length
+    const { messages } = await run(testContent)
+    expect(messages.length).toBe(filesLength + 1)
+    expect(
+      messages.some(message => message.file.includes('src/index.js'))
+    ).toBe(true)
+  })
+
+  it('Can add to the content if array', async () => {
+    const testContent: ContentConfig = ['./src/content.js', './stories/**/*']
+    const { messages } = await run(testContent)
+    expect(
+      messages.some(message => message.file.includes('src/index.js'))
+    ).toBe(true)
+  })
+
+  it('Uses the right path to the package if relative', async () => {
+    //pass in string path to dummy config
+    const { messages } = await run('./__mocks__/plugin/tailwind.mock.config.ts')
+
+    const { index_exists, relative_mock_exists } = messages.reduce(
+      (acc, message) => {
+        //check index.js path added correctly
+        if (message.file.includes('src/index.js')) {
+          return { ...acc, index_exists: acc.index_exists + 1 }
+          //check we're using relative paths.
+        } else if (message.file.includes('__mocks__/plugin/content.js')) {
+          return {
+            ...acc,
+            relative_mock_exists: acc.relative_mock_exists + 1
+          }
+        }
+        return acc
+      },
+      { index_exists: 0, relative_mock_exists: 0 }
+    )
+    expect(index_exists).toBe(1)
+    expect(relative_mock_exists).toBe(1)
+  })
+
+  it('Doesnt add the path if already there', async () => {
+    const pkgLoc = path.join(__dirname, '../src/index.js') //where index.js is wrt this test file
+    const testContent: ContentConfig = [
+      './src/content.js',
+      './stories/**/*',
+      pkgLoc
+    ]
+    const filesLength = testContent.length
+    const { messages } = await run(testContent)
+    expect(messages.length).toBe(filesLength)
+    expect(
+      messages.reduce((acc, message) => {
+        return message.file?.includes('src/index.js') ? acc + 1 : acc
+      }, 0)
+    ).toBe(1)
+  })
+})

babel.config.js

@@ -0,0 +1 @@
+module.exports = { presets: ['@babel/preset-env'] }

jest.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  preset: 'ts-jest',
+  transform: {
+    '^.+\\.(ts|tsx)?$': 'ts-jest',
+    '^.+\\.(js|jsx)$': 'babel-jest'
+  }
+}