Merge pull request #847 from tailwindcss/remove-perfectionist-dependency

Remove dependency on perfectionist, implement simple formatting from scratch

package.json

@@ -46,7 +46,6 @@
     "lodash": "^4.17.11",
     "node-emoji": "^1.8.1",
     "normalize.css": "^8.0.1",
-    "perfectionist": "^2.4.0",
     "postcss": "^7.0.11",
     "postcss-functions": "^3.0.0",
     "postcss-js": "^2.0.0",

src/index.js

@@ -3,10 +3,10 @@ import fs from 'fs'
 
 import _ from 'lodash'
 import postcss from 'postcss'
-import perfectionist from 'perfectionist'
 
 import registerConfigAsDependency from './lib/registerConfigAsDependency'
 import processTailwindFeatures from './processTailwindFeatures'
+import formatCSS from './lib/formatCSS'
 import resolveConfig from './util/resolveConfig'
 import { defaultConfigFile } from './constants'
 
@@ -53,16 +53,7 @@ const plugin = postcss.plugin('tailwind', config => {
   return postcss([
     ...plugins,
     processTailwindFeatures(getConfigFunction(resolvedConfigPath || config)),
-    perfectionist({
-      cascade: true,
-      colorShorthand: true,
-      indentSize: 2,
-      maxSelectorLength: 1,
-      maxValueLength: false,
-      trimLeadingZero: true,
-      trimTrailingZeros: true,
-      zeroLengthNoUnit: false,
-    }),
+    formatCSS,
   ])
 })
 

src/lib/evaluateTailwindFunctions.js

@@ -5,7 +5,9 @@ export default function(config) {
   return functions({
     functions: {
       theme: (path, ...defaultValue) => {
-        return _.get(config.theme, _.trim(path, `'"`), defaultValue.join(', '))
+        return _.thru(_.get(config.theme, _.trim(path, `'"`), defaultValue), value => {
+          return _.isArray(value) ? value.join(', ') : value
+        })
       },
     },
   })

src/lib/formatCSS.js

@@ -0,0 +1,15 @@
+function indentRecursive(node, indent = 0) {
+  node.each &&
+    node.each((child, i) => {
+      if (!child.raws.before || child.raws.before.includes('\n')) {
+        child.raws.before = `\n${node.type !== 'rule' && i > 0 ? '\n' : ''}${'  '.repeat(indent)}`
+      }
+      child.raws.after = `\n${'  '.repeat(indent)}`
+      indentRecursive(child, indent + 1)
+    })
+}
+
+export default function formatNodes(root) {
+  indentRecursive(root)
+  root.first.raws.before = ''
+}

stubs/defaultConfig.stub.js

@@ -173,8 +173,8 @@ module.exports = {
       ],
     },
     fontSize: {
-      xs: '.75rem',
-      sm: '.875rem',
+      xs: '0.75rem',
+      sm: '0.875rem',
       base: '1rem',
       lg: '1.125rem',
       xl: '1.25rem',
@@ -207,9 +207,9 @@ module.exports = {
       tighter: '-.05em',
       tight: '-.025em',
       normal: '0',
-      wide: '.025em',
-      wider: '.05em',
-      widest: '.1em',
+      wide: '0.025em',
+      wider: '0.05em',
+      widest: '0.1em',
     },
     textColor: theme => theme('colors'),
     backgroundColor: theme => theme('colors'),
@@ -242,9 +242,9 @@ module.exports = {
     }),
     borderRadius: {
       none: '0',
-      sm: '.125rem',
-      default: '.25rem',
-      lg: '.5rem',
+      sm: '0.125rem',
+      default: '0.25rem',
+      lg: '0.5rem',
       full: '9999px',
     },
     cursor: {
@@ -324,8 +324,8 @@ module.exports = {
       lg: '0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05)',
       xl: '0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)',
       '2xl': '0 25px 50px -12px rgba(0, 0, 0, .25)',
-      inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
-      outline: '0 0 0 3px rgba(66,153,225,0.5)',
+      inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
+      outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
       none: 'none',
     },
     zIndex: {
@@ -339,9 +339,9 @@ module.exports = {
     },
     opacity: {
       '0': '0',
-      '25': '.25',
-      '50': '.5',
-      '75': '.75',
+      '25': '0.25',
+      '50': '0.5',
+      '75': '0.75',
       '100': '1',
     },
     fill: {