tailwindcss 1.2.0-canary.5 → 1.2.0

package/lib/corePlugins.js

@@ -149,10 +149,6 @@ var _zIndex = _interopRequireDefault(require("./plugins/zIndex"));
 
 var _gap = _interopRequireDefault(require("./plugins/gap"));
 
-var _columnGap = _interopRequireDefault(require("./plugins/columnGap"));
-
-var _rowGap = _interopRequireDefault(require("./plugins/rowGap"));
-
 var _gridAutoFlow = _interopRequireDefault(require("./plugins/gridAutoFlow"));
 
 var _gridTemplateColumns = _interopRequireDefault(require("./plugins/gridTemplateColumns"));
@@ -269,8 +265,6 @@ function _default({
     width: _width.default,
     zIndex: _zIndex.default,
     gap: _gap.default,
-    columnGap: _columnGap.default,
-    rowGap: _rowGap.default,
     gridAutoFlow: _gridAutoFlow.default,
     gridTemplateColumns: _gridTemplateColumns.default,
     gridColumn: _gridColumn.default,

package/lib/lib/substituteTailwindAtRules.js

@@ -25,6 +25,27 @@ function _default(_config, {
   utilities: pluginUtilities
 }) {
   return function (css) {
+    css.walkAtRules('import', atRule => {
+      if (atRule.params === '"tailwindcss/base"' || atRule.params === "'tailwindcss/base'") {
+        atRule.name = 'tailwind';
+        atRule.params = 'base';
+      }
+
+      if (atRule.params === '"tailwindcss/components"' || atRule.params === "'tailwindcss/components'") {
+        atRule.name = 'tailwind';
+        atRule.params = 'components';
+      }
+
+      if (atRule.params === '"tailwindcss/utilities"' || atRule.params === "'tailwindcss/utilities'") {
+        atRule.name = 'tailwind';
+        atRule.params = 'utilities';
+      }
+
+      if (atRule.params === '"tailwindcss/screens"' || atRule.params === "'tailwindcss/screens'") {
+        atRule.name = 'tailwind';
+        atRule.params = 'screens';
+      }
+    });
     css.walkAtRules('tailwind', atRule => {
       if (atRule.params === 'preflight') {
         // prettier-ignore

package/lib/plugins/css/preflight.css

@@ -57,13 +57,14 @@ ul {
  */
 
 /**
- * 1. Use the system font stack as a sane default.
+ * 1. Use the user's configured `sans` font-family (with Tailwind's default
+ *    sans-serif font stack as a fallback) as a sane default.
  * 2. Use Tailwind's default "normal" line-height so the user isn't forced
  *    to override it to ensure consistency even when using the default theme.
  */
 
 html {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
+  font-family: theme('fontFamily.sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 1 */
   line-height: 1.5; /* 2 */
 }
 

package/lib/plugins/gap.js

@@ -10,5 +10,5 @@ var _createUtilityPlugin = _interopRequireDefault(require("../util/createUtility
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _default() {
-  return (0, _createUtilityPlugin.default)('gap', [['gap', ['gridGap', 'gap']]]);
+  return (0, _createUtilityPlugin.default)('gap', [['gap', ['gridGap', 'gap']], ['col-gap', ['gridColumnGap', 'columnGap']], ['row-gap', ['gridRowGap', 'rowGap']]]);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "1.2.0-canary.5",
+  "version": "1.2.0",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -9,7 +9,8 @@
   "bugs": "https://github.com/tailwindcss/tailwindcss/issues",
   "homepage": "https://tailwindcss.com",
   "bin": {
-    "tailwind": "lib/cli.js"
+    "tailwind": "lib/cli.js",
+    "tailwindcss": "lib/cli.js"
   },
   "contributors": [
     "Adam Wathan <adam.wathan@gmail.com>",
@@ -19,7 +20,8 @@
   "scripts": {
     "prebabelify": "rimraf lib",
     "babelify": "babel src --out-dir lib --copy-files",
-    "prepare": "npm run babelify && babel-node src/build.js",
+    "rebuild-fixtures": "npm run babelify && babel-node scripts/rebuildFixtures.js",
+    "prepare": "npm run babelify && babel-node scripts/build.js",
     "style": "eslint .",
     "test": "jest && eslint ."
   },
@@ -28,13 +30,13 @@
     "@babel/core": "^7.0.0",
     "@babel/node": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
-    "babel-jest": "^24.3.1",
+    "babel-jest": "^25.1.0",
     "clean-css": "^4.1.9",
     "eslint": "^6.0.1",
     "eslint-config-postcss": "^2.0.2",
     "eslint-config-prettier": "^6.0.0",
     "eslint-plugin-prettier": "^3.0.1",
-    "jest": "^24.3.1",
+    "jest": "^25.1.0",
     "prettier": "^1.7.4",
     "rimraf": "^3.0.0"
   },
@@ -44,7 +46,7 @@
     "chalk": "^3.0.0",
     "detective": "^5.2.0",
     "fs-extra": "^8.0.0",
-    "lodash": "^4.17.11",
+    "lodash": "^4.17.15",
     "node-emoji": "^1.8.1",
     "normalize.css": "^8.0.1",
     "postcss": "^7.0.11",

package/scripts/build.js

@@ -0,0 +1,48 @@
+import fs from 'fs'
+import postcss from 'postcss'
+import tailwind from '..'
+import CleanCSS from 'clean-css'
+
+function buildDistFile(filename) {
+  return new Promise((resolve, reject) => {
+    console.log(`Processing ./${filename}.css...`)
+
+    fs.readFile(`./${filename}.css`, (err, css) => {
+      if (err) throw err
+
+      return postcss([tailwind(), require('autoprefixer')])
+        .process(css, {
+          from: `./${filename}.css`,
+          to: `./dist/${filename}.css`,
+          map: { inline: false },
+        })
+        .then(result => {
+          fs.writeFileSync(`./dist/${filename}.css`, result.css)
+          if (result.map) {
+            fs.writeFileSync(`./dist/${filename}.css.map`, result.map)
+          }
+          return result
+        })
+        .then(result => {
+          const minified = new CleanCSS().minify(result.css)
+          fs.writeFileSync(`./dist/${filename}.min.css`, minified.styles)
+        })
+        .then(resolve)
+        .catch(error => {
+          console.log(error)
+          reject()
+        })
+    })
+  })
+}
+
+console.info('Building Tailwind!')
+
+Promise.all([
+  buildDistFile('base'),
+  buildDistFile('components'),
+  buildDistFile('utilities'),
+  buildDistFile('tailwind'),
+]).then(() => {
+  console.log('Finished Building Tailwind!')
+})

package/stubs/.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "printWidth": 120,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

package/stubs/defaultConfig.stub.js

@@ -184,7 +184,8 @@ module.exports = {
       '8': '8px',
     },
     boxShadow: {
-      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.04)',
+      xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
+      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
       default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
       md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
       lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
@@ -223,7 +224,7 @@ module.exports = {
     },
     fontFamily: {
       sans: [
-        'Inter',
+        'system-ui',
         '-apple-system',
         'BlinkMacSystemFont',
         '"Segoe UI"',
@@ -288,6 +289,14 @@ module.exports = {
       normal: '1.5',
       relaxed: '1.625',
       loose: '2',
+      '3': '.75rem',
+      '4': '1rem',
+      '5': '1.25rem',
+      '6': '1.5rem',
+      '7': '1.75rem',
+      '8': '2rem',
+      '9': '2.25rem',
+      '10': '2.5rem',
     },
     listStyleType: {
       none: 'none',
@@ -303,23 +312,21 @@ module.exports = {
       full: '100%',
       screen: '100vh',
     },
-    maxWidth: (theme, { breakpoints }) => {
-      return {
-        none: 'none',
-        xs: '20rem',
-        sm: '24rem',
-        md: '28rem',
-        lg: '32rem',
-        xl: '36rem',
-        '2xl': '42rem',
-        '3xl': '48rem',
-        '4xl': '56rem',
-        '5xl': '64rem',
-        '6xl': '72rem',
-        full: '100%',
-        ...breakpoints(theme('screens')),
-      }
-    },
+    maxWidth: (theme, { breakpoints }) => ({
+      none: 'none',
+      xs: '20rem',
+      sm: '24rem',
+      md: '28rem',
+      lg: '32rem',
+      xl: '36rem',
+      '2xl': '42rem',
+      '3xl': '48rem',
+      '4xl': '56rem',
+      '5xl': '64rem',
+      '6xl': '72rem',
+      full: '100%',
+      ...breakpoints(theme('screens')),
+    }),
     minHeight: {
       '0': '0',
       full: '100%',
@@ -417,8 +424,6 @@ module.exports = {
       '50': '50',
     },
     gap: theme => theme('spacing'),
-    rowGap: {},
-    columnGap: {},
     gridTemplateColumns: {
       none: 'none',
       '1': 'repeat(1, minmax(0, 1fr))',
@@ -481,10 +486,44 @@ module.exports = {
       '12': '12',
       '13': '13',
     },
-    gridTemplateRows: {},
-    gridRow: {},
-    gridRowStart: {},
-    gridRowEnd: {},
+    gridTemplateRows: {
+      none: 'none',
+      '1': 'repeat(1, minmax(0, 1fr))',
+      '2': 'repeat(2, minmax(0, 1fr))',
+      '3': 'repeat(3, minmax(0, 1fr))',
+      '4': 'repeat(4, minmax(0, 1fr))',
+      '5': 'repeat(5, minmax(0, 1fr))',
+      '6': 'repeat(6, minmax(0, 1fr))',
+    },
+    gridRow: {
+      auto: 'auto',
+      'span-1': 'span 1 / span 1',
+      'span-2': 'span 2 / span 2',
+      'span-3': 'span 3 / span 3',
+      'span-4': 'span 4 / span 4',
+      'span-5': 'span 5 / span 5',
+      'span-6': 'span 6 / span 6',
+    },
+    gridRowStart: {
+      auto: 'auto',
+      '1': '1',
+      '2': '2',
+      '3': '3',
+      '4': '4',
+      '5': '5',
+      '6': '6',
+      '7': '7',
+    },
+    gridRowEnd: {
+      auto: 'auto',
+      '1': '1',
+      '2': '2',
+      '3': '3',
+      '4': '4',
+      '5': '5',
+      '6': '6',
+      '7': '7',
+    },
     transformOrigin: {
       center: 'center',
       top: 'top',
@@ -525,13 +564,22 @@ module.exports = {
       '1/2': '50%',
       full: '100%',
     }),
-    skew: {},
+    skew: {
+      '-12': '-12deg',
+      '-6': '-6deg',
+      '-3': '-3deg',
+      '0': '0',
+      '3': '3deg',
+      '6': '6deg',
+      '12': '12deg',
+    },
     transitionProperty: {
       none: 'none',
       all: 'all',
-      default: 'background-color, border-color, color, opacity, transform',
-      colors: 'background-color, border-color, color',
+      default: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
+      colors: 'background-color, border-color, color, fill, stroke',
       opacity: 'opacity',
+      shadow: 'box-shadow',
       transform: 'transform',
     },
     transitionTimingFunction: {
@@ -622,8 +670,6 @@ module.exports = {
     wordBreak: ['responsive'],
     zIndex: ['responsive'],
     gap: ['responsive'],
-    columnGap: ['responsive'],
-    rowGap: ['responsive'],
     gridAutoFlow: ['responsive'],
     gridTemplateColumns: ['responsive'],
     gridColumn: ['responsive'],
@@ -642,7 +688,6 @@ module.exports = {
     transitionProperty: ['responsive'],
     transitionTimingFunction: ['responsive'],
     transitionDuration: ['responsive'],
-    transitionDelay: ['responsive'],
   },
   corePlugins: {},
   plugins: [],

package/lib/build.js

@@ -1,48 +0,0 @@
-"use strict";
-
-var _fs = _interopRequireDefault(require("fs"));
-
-var _postcss = _interopRequireDefault(require("postcss"));
-
-var _ = _interopRequireDefault(require(".."));
-
-var _cleanCss = _interopRequireDefault(require("clean-css"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function buildDistFile(filename) {
-  return new Promise((resolve, reject) => {
-    console.log(`Processing ./${filename}.css...`);
-
-    _fs.default.readFile(`./${filename}.css`, (err, css) => {
-      if (err) throw err;
-      return (0, _postcss.default)([(0, _.default)(), require('autoprefixer')]).process(css, {
-        from: `./${filename}.css`,
-        to: `./dist/${filename}.css`,
-        map: {
-          inline: false
-        }
-      }).then(result => {
-        _fs.default.writeFileSync(`./dist/${filename}.css`, result.css);
-
-        if (result.map) {
-          _fs.default.writeFileSync(`./dist/${filename}.css.map`, result.map);
-        }
-
-        return result;
-      }).then(result => {
-        const minified = new _cleanCss.default().minify(result.css);
-
-        _fs.default.writeFileSync(`./dist/${filename}.min.css`, minified.styles);
-      }).then(resolve).catch(error => {
-        console.log(error);
-        reject();
-      });
-    });
-  });
-}
-
-console.info('Building Tailwind!');
-Promise.all([buildDistFile('base'), buildDistFile('components'), buildDistFile('utilities'), buildDistFile('tailwind')]).then(() => {
-  console.log('Finished Building Tailwind!');
-});

package/lib/plugins/columnGap.js

@@ -1,14 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = _default;
-
-var _createUtilityPlugin = _interopRequireDefault(require("../util/createUtilityPlugin"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _default() {
-  return (0, _createUtilityPlugin.default)('columnGap', [['col-gap', ['gridColumnGap', 'columnGap']]]);
-}

package/lib/plugins/rowGap.js

@@ -1,14 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = _default;
-
-var _createUtilityPlugin = _interopRequireDefault(require("../util/createUtilityPlugin"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _default() {
-  return (0, _createUtilityPlugin.default)('rowGap', [['row-gap', ['gridRowGap', 'rowGap']]]);
-}