Remove dependency on CSSNext

src/defaultConfig.js

@@ -55,7 +55,7 @@ export default {
   },
   text: {
     fonts: {
-      'sans': 'system-ui',
+      'sans': '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue',
       'serif': 'Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif',
       'mono': 'Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace',
     },
@@ -91,9 +91,9 @@ export default {
     colors: [
       {
         'light': 'white',
-        'light-soft': 'rgba(255, 255, 255, 60%)',
-        'light-softer': 'rgba(255, 255, 255, 45%)',
-        'light-softest': 'rgba(255, 255, 255, 35%)',
+        'light-soft': 'rgba(255,255,255,.6)',
+        'light-softer': 'rgba(255,255,255,.45)',
+        'light-softest': 'rgba(255,255,255,.35)',
         'dark': 'grey-900',
         'dark-soft': 'grey-700',
         'dark-softer': 'grey-600',
@@ -214,12 +214,12 @@ export default {
         'dark': 'grey-600',
         'dark-soft': 'grey-500',
         'dark-softer': 'grey-400',
-        'light-overlay': 'hsla(0, 0%, 0%, 20%)',
-        'light-overlay-soft': 'hsla(0, 0%, 0%, 10%)',
-        'light-overlay-softer': 'hsla(0, 0%, 0%, 5%)',
-        'dark-overlay': 'hsla(0, 0%, 100%, 100%)',
-        'dark-overlay-soft': 'hsla(0, 0%, 100%, 60%)',
-        'dark-overlay-softer': 'hsla(0, 0%, 100%, 35%)',
+        'light-overlay': 'hsla(0,0%,0%,.2)',
+        'light-overlay-soft': 'hsla(0,0%,0%,.1)',
+        'light-overlay-softer': 'hsla(0,0%,0%,.05)',
+        'dark-overlay': 'hsla(0,0%,100%,1)',
+        'dark-overlay-soft': 'hsla(0,0%,100%,.6)',
+        'dark-overlay-softer': 'hsla(0,0%,100%,.35)',
       },
       'red-dark',
       'red',
@@ -277,16 +277,16 @@ export default {
       '48': '12rem',
       '64': '16rem',
       '1/2': '50%',
-      '1/3': 'calc(100% / 3)',
-      '2/3': 'calc(100% / 3 * 2)',
+      '1/3': '33.33333%',
+      '2/3': '66.66667%',
       '1/4': '25%',
       '3/4': '75%',
       '1/5': '20%',
       '2/5': '40%',
       '3/5': '60%',
       '4/5': '80%',
-      '1/6': 'calc(100% / 6)',
-      '5/6': 'calc(100% / 6 * 5)',
+      '1/6': '16.66667%',
+      '5/6': '83.33333%',
       'full': '100%',
       'screen': '100vw'
     },
@@ -368,11 +368,11 @@ export default {
     },
   },
   shadows: {
-    '1': '0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.15)',
-    '2': '0 3px 6px rgba(0,0,0,0.12), 0 3px 6px rgba(0,0,0,0.13)',
-    '3': '0 10px 20px rgba(0,0,0,0.13), 0 6px 6px rgba(0,0,0,0.13)',
-    '4': '0 14px 28px rgba(0,0,0,0.16), 0 10px 10px rgba(0,0,0,0.11)',
-    '5': '0 19px 38px rgba(0,0,0,0.18), 0 15px 12px rgba(0,0,0,0.11)',
+    '1': '0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.15)',
+    '2': '0 3px 6px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.13)',
+    '3': '0 10px 20px rgba(0,0,0,.13), 0 6px 6px rgba(0,0,0,.13)',
+    '4': '0 14px 28px rgba(0,0,0,.16), 0 10px 10px rgba(0,0,0,.11)',
+    '5': '0 19px 38px rgba(0,0,0,.18), 0 15px 12px rgba(0,0,0,.11)',
   },
   zIndex: {
     '0': 0,

src/index.js

@@ -1,13 +1,11 @@
 import fs from 'fs'
 import _ from 'lodash'
 import postcss from 'postcss'
-import cssnext from 'postcss-cssnext'
 import stylefmt from 'stylefmt'
 
 import defaultConfig from './defaultConfig'
 import mergeConfig from './util/mergeConfig'
 
-import addCustomMediaQueries from './lib/addCustomMediaQueries'
 import generateUtilities from './lib/generateUtilities'
 import substituteHoverableAtRules from './lib/substituteHoverableAtRules'
 import substituteResponsiveAtRules from './lib/substituteResponsiveAtRules'
@@ -22,13 +20,11 @@ const plugin = postcss.plugin('tailwind', (options = {}) => {
   const config = mergeConfig(defaultConfig, options)
 
   return postcss([
-    addCustomMediaQueries(config),
     generateUtilities(config),
     substituteHoverableAtRules(config),
     substituteResponsiveAtRules(config),
     substituteBreakpointAtRules(config),
     substituteClassApplyAtRules(config),
-    cssnext(),
     stylefmt,
   ])
 })

src/lib/addCustomMediaQueries.js

@@ -1,42 +0,0 @@
-import _ from 'lodash'
-import postcss from 'postcss'
-
-function buildMediaQuery(breakpoints) {
-  if (_.isString(breakpoints)) {
-    breakpoints = { min: breakpoints }
-  }
-
-  if (!_.isArray(breakpoints)) {
-    breakpoints = [breakpoints]
-  }
-
-  return _(breakpoints).map((breakpoint) => {
-    return _(breakpoint).map((value, feature) => {
-        feature = _.get(
-          {
-            min: 'min-width',
-            max: 'max-width',
-          },
-          feature,
-          feature
-        )
-        return `(${feature}: ${value})`
-      }).join(' and ')
-  }).join(', ')
-}
-
-export default function(options) {
-  let breakpoints = options.breakpoints
-
-  return function(css) {
-    Object.keys(breakpoints).forEach(breakpoint => {
-      const variableName = `--breakpoint-${breakpoint}`
-      const mediaQuery = buildMediaQuery(breakpoints[breakpoint])
-      const rule = postcss.atRule({
-        name: 'custom-media',
-        params: `${variableName} ${mediaQuery}`,
-      })
-      css.prepend(rule)
-    })
-  }
-}

src/lib/substituteBreakpointAtRules.js

@@ -1,6 +1,7 @@
 import _ from 'lodash'
 import postcss from 'postcss'
 import cloneNodes from '../util/cloneNodes'
+import buildMediaQuery from '../util/buildMediaQuery'
 
 export default function(options) {
   return function(css) {
@@ -14,7 +15,7 @@ export default function(options) {
       }
 
       atRule.name = 'media'
-      atRule.params = `(--breakpoint-${atRule.params})`
+      atRule.params = buildMediaQuery(breakpoint)
     })
   }
 }

src/lib/substituteResponsiveAtRules.js

@@ -1,6 +1,7 @@
 import _ from 'lodash'
 import postcss from 'postcss'
 import cloneNodes from '../util/cloneNodes'
+import buildMediaQuery from '../util/buildMediaQuery'
 
 export default function(options) {
   return function(css) {
@@ -16,7 +17,7 @@ export default function(options) {
     Object.keys(options.breakpoints).forEach(breakpoint => {
       const mediaQuery = postcss.atRule({
         name: 'media',
-        params: `(--breakpoint-${breakpoint})`,
+        params: buildMediaQuery(options.breakpoints[breakpoint]),
       })
 
       mediaQuery.append(

src/util/buildMediaQuery.js

@@ -0,0 +1,25 @@
+import _ from 'lodash'
+
+export default function buildMediaQuery(breakpoints) {
+  if (_.isString(breakpoints)) {
+    breakpoints = { min: breakpoints }
+  }
+
+  if (!_.isArray(breakpoints)) {
+    breakpoints = [breakpoints]
+  }
+
+  return _(breakpoints).map((breakpoint) => {
+    return _(breakpoint).map((value, feature) => {
+        feature = _.get(
+          {
+            min: 'min-width',
+            max: 'max-width',
+          },
+          feature,
+          feature
+        )
+        return `(${feature}: ${value})`
+      }).join(' and ')
+  }).join(', ')
+}