Support CSS-in-JS syntax in plugins

__tests__/applyAtRule.test.js

@@ -2,7 +2,7 @@ import postcss from 'postcss'
 import plugin from '../src/lib/substituteClassApplyAtRules'
 
 function run(input, opts = () => {}) {
-  return postcss([plugin(opts)]).process(input)
+  return postcss([plugin(opts)]).process(input, { from: undefined })
 }
 
 test("it copies a class's declarations into itself", () => {

__tests__/configFunction.test.js

@@ -2,7 +2,7 @@ import postcss from 'postcss'
 import plugin from '../src/lib/evaluateTailwindFunctions'
 
 function run(input, opts = {}) {
-  return postcss([plugin(() => opts)]).process(input)
+  return postcss([plugin(() => opts)]).process(input, { from: undefined })
 }
 
 test('it looks up values in the config using dot notation', () => {

__tests__/customConfig.test.js

@@ -6,12 +6,13 @@ test('it uses the values from the custom config file', () => {
   return postcss([tailwind(path.resolve(`${__dirname}/fixtures/customConfig.js`))])
     .process(
       `
-      @responsive {
-        .foo {
-          color: blue;
+        @responsive {
+          .foo {
+            color: blue;
+          }
         }
-      }
-    `
+      `,
+      { from: undefined }
     )
     .then(result => {
       const expected = `

__tests__/parseObjectStyles.test.js

@@ -0,0 +1,276 @@
+import parseObjectStyles from '../src/util/parseObjectStyles'
+import postcss from 'postcss'
+
+function css(nodes) {
+  return postcss.root({ nodes }).toString()
+}
+
+test('it parses simple single class definitions', () => {
+  const result = parseObjectStyles({
+    '.foobar': {
+      backgroundColor: 'red',
+      color: 'white',
+      padding: '1rem',
+    },
+  })
+
+  expect(css(result)).toMatchCss(`
+    .foobar {
+      background-color: red;
+      color: white;
+      padding: 1rem
+    }
+  `)
+})
+
+test('it parses multiple class definitions', () => {
+  const result = parseObjectStyles({
+    '.foo': {
+      backgroundColor: 'red',
+      color: 'white',
+      padding: '1rem',
+    },
+    '.bar': {
+      width: '200px',
+      height: '100px',
+    },
+  })
+
+  expect(css(result)).toMatchCss(`
+    .foo {
+      background-color: red;
+      color: white;
+      padding: 1rem
+    }
+    .bar {
+      width: 200px;
+      height: 100px
+    }
+  `)
+})
+
+test('it parses nested pseudo-selectors', () => {
+  const result = parseObjectStyles({
+    '.foo': {
+      backgroundColor: 'red',
+      color: 'white',
+      padding: '1rem',
+      ':hover': {
+        backgroundColor: 'orange',
+      },
+      ':focus': {
+        backgroundColor: 'blue',
+      },
+    },
+  })
+
+  expect(css(result)).toMatchCss(`
+    .foo {
+      background-color: red;
+      color: white;
+      padding: 1rem;
+    }
+    .foo:hover {
+      background-color: orange;
+    }
+    .foo:focus {
+      background-color: blue;
+    }
+  `)
+})
+
+test('it parses top-level media queries', () => {
+  const result = parseObjectStyles({
+    '@media (min-width: 200px)': {
+      '.foo': {
+        backgroundColor: 'orange',
+      },
+    },
+  })
+
+  expect(css(result)).toMatchCss(`
+    @media (min-width: 200px) {
+      .foo {
+        background-color: orange
+      }
+    }
+  `)
+})
+
+test('it parses nested media queries', () => {
+  const result = parseObjectStyles({
+    '.foo': {
+      backgroundColor: 'red',
+      color: 'white',
+      padding: '1rem',
+      '@media (min-width: 200px)': {
+        backgroundColor: 'orange',
+      },
+    },
+  })
+
+  expect(css(result)).toMatchCss(`
+    .foo {
+      background-color: red;
+      color: white;
+      padding: 1rem;
+    }
+    @media (min-width: 200px) {
+      .foo {
+        background-color: orange;
+      }
+    }
+  `)
+})
+
+test('it parses pseudo-selectors in nested media queries', () => {
+  const result = parseObjectStyles({
+    '.foo': {
+      backgroundColor: 'red',
+      color: 'white',
+      padding: '1rem',
+      ':hover': {
+        '@media (min-width: 200px)': {
+          backgroundColor: 'orange',
+        },
+      },
+    },
+  })
+
+  expect(css(result)).toMatchCss(`
+    .foo {
+      background-color: red;
+      color: white;
+      padding: 1rem;
+    }
+    @media (min-width: 200px) {
+      .foo:hover {
+        background-color: orange;
+      }
+    }
+  `)
+})
+
+test('it parses descendant selectors', () => {
+  const result = parseObjectStyles({
+    '.foo': {
+      backgroundColor: 'red',
+      color: 'white',
+      padding: '1rem',
+      '.bar': {
+        backgroundColor: 'orange',
+      },
+    },
+  })
+
+  expect(css(result)).toMatchCss(`
+    .foo {
+      background-color: red;
+      color: white;
+      padding: 1rem;
+    }
+    .foo .bar {
+      background-color: orange;
+    }
+  `)
+})
+
+test('it parses nested multi-class selectors', () => {
+  const result = parseObjectStyles({
+    '.foo': {
+      backgroundColor: 'red',
+      color: 'white',
+      padding: '1rem',
+      '&.bar': {
+        backgroundColor: 'orange',
+      },
+    },
+  })
+
+  expect(css(result)).toMatchCss(`
+    .foo {
+      background-color: red;
+      color: white;
+      padding: 1rem;
+    }
+    .foo.bar {
+      background-color: orange;
+    }
+  `)
+})
+
+test('it parses nested multi-class selectors in media queries', () => {
+  const result = parseObjectStyles({
+    '.foo': {
+      backgroundColor: 'red',
+      color: 'white',
+      padding: '1rem',
+      '@media (min-width: 200px)': {
+        '&.bar': {
+          backgroundColor: 'orange',
+        },
+      },
+    },
+  })
+
+  expect(css(result)).toMatchCss(`
+    .foo {
+      background-color: red;
+      color: white;
+      padding: 1rem;
+    }
+    @media (min-width: 200px) {
+      .foo.bar {
+        background-color: orange;
+      }
+    }
+  `)
+})
+
+test('it strips empty selectors when nesting', () => {
+  const result = parseObjectStyles({
+    '.foo': {
+      '.bar': {
+        backgroundColor: 'orange',
+      },
+    },
+  })
+
+  expect(css(result)).toMatchCss(`
+    .foo .bar {
+      background-color: orange
+    }
+  `)
+})
+
+test('it can parse an array of styles', () => {
+  const result = parseObjectStyles([
+    {
+      '.foo': {
+        backgroundColor: 'orange',
+      },
+    },
+    {
+      '.bar': {
+        backgroundColor: 'red',
+      },
+    },
+    {
+      '.foo': {
+        backgroundColor: 'blue',
+      },
+    },
+  ])
+
+  expect(css(result)).toMatchCss(`
+    .foo {
+      background-color: orange
+    }
+    .bar {
+      background-color: red
+    }
+    .foo {
+      background-color: blue
+    }
+  `)
+})

__tests__/prefixTree.test.js

@@ -29,14 +29,24 @@ test('it handles a function as the prefix', () => {
   `
 
   const prefixFunc = selector => {
-    if (selector === '.foo') {
-      return 'tw-'
-    }
-
-    return ''
+    return selector === '.foo' ? 'tw-' : ''
   }
 
   const result = prefixTree(input, prefixFunc).toResult()
   expect(result.css).toEqual(expected)
   expect(result.warnings().length).toBe(0)
 })
+
+test('it prefixes all classes in a selector', () => {
+  const input = postcss.parse(`
+    .btn-blue .w-1\\/4 > h1.text-xl + a .bar { color: red; }
+  `)
+
+  const expected = `
+    .tw-btn-blue .tw-w-1\\/4 > h1.tw-text-xl + a .tw-bar { color: red; }
+  `
+
+  const result = prefixTree(input, 'tw-').toResult()
+  expect(result.css).toEqual(expected)
+  expect(result.warnings().length).toBe(0)
+})