@tailwindcss/jit - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

CHANGELOG.md

@@ -12,2 +12,19 @@ # Changelog
 
+## [0.1.4] - 2021-03-19
+
+### Added
+
+- Support arbitrary values for `transition-duration` ([#99](https://github.com/tailwindlabs/tailwindcss-jit/pull/99))
+- Support completely arbitrary values for `margin` ([#105](https://github.com/tailwindlabs/tailwindcss-jit/pull/105))
+- Support CSS custom properties in arbitrary values ([d628fbc](https://github.com/tailwindlabs/tailwindcss-jit/commit/d628fbc3d393267ce3d1a1d11eed6c3025e6b8f0))
+- Support completely arbitrary values for `inset` ([3ea5421](https://github.com/tailwindlabs/tailwindcss-jit/commit/3ea542170c8631afbfaf5ea341e9860178cf9843)
+- Support completely arbitrary `width`/`height`/`min-width`/`max-width`/`min-height`/`max-height` ([76ba529](https://github.com/tailwindlabs/tailwindcss-jit/commit/76ba529d3b120481d153066d348b5dc316cc581f), [6e55976](https://github.com/tailwindlabs/tailwindcss-jit/commit/6e55976ed9c86cc749509c239c751af066d57152))
+
+### Fixed
+
+- Fix issues when project paths have spaces ([#106](https://github.com/tailwindlabs/tailwindcss-jit/pull/106))
+- Fix negative classes when using a prefix ([#114](https://github.com/tailwindlabs/tailwindcss-jit/pull/114))
+- Fix issues with Windows-style paths ([#118](https://github.com/tailwindlabs/tailwindcss-jit/pull/118))
+- Ensure commas are escaped when applying variants ([#119](https://github.com/tailwindlabs/tailwindcss-jit/pull/119)
+
 ## [0.1.3] - 2021-03-17
@@ -38,3 +55,4 @@
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v0.1.3...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v0.1.4...HEAD
+[0.1.4]: https://github.com/tailwindlabs/tailwindcss/compare/v0.1.3...v0.1.4
 [0.1.3]: https://github.com/tailwindlabs/tailwindcss/compare/v0.1.2...v0.1.3
@@ -41,0 +59,0 @@ [0.1.2]: https://github.com/tailwindlabs/tailwindcss/compare/v0.1.1...v0.1.2

package.json

 {
   "name": "@tailwindcss/jit",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "license": "MIT",
   "main": "src/index.js",
+  "repository": "https://github.com/tailwindlabs/tailwindcss-jit",
   "scripts": {
-    "test": "TAILWIND_MODE=build jest"
+    "test": "cross-env TAILWIND_MODE=build jest"
   },
@@ -20,2 +21,3 @@ "prettier": {
     "lodash.topath": "^4.5.2",
+    "normalize-path": "^3.0.0",
     "object-hash": "^2.1.1",
@@ -32,2 +34,3 @@ "postcss-selector-parser": "^6.0.4",
     "autoprefixer": "^10.2.4",
+    "cross-env": "^7.0.3",
     "jest": "^26.6.3",
@@ -34,0 +37,0 @@ "postcss": "^8.2.6",

README.md

 
-![Tailwind CSS Just-In-Time](.github/logo.svg?raw=true)
+<p align="center">
+    <img src="https://raw.githubusercontent.com/tailwindlabs/tailwindcss-jit/main/.github/logo.svg" alt="Tailwind CSS Just-In-Time">
+</p>
 
 <p align="center">
-    <a href="https://github.com/tailwindlabs/tailwindcss-jit/releases"><img src="https://badgen.net/npm/v/@tailwindcss/jit" alt="Latest Release"></a>
-    <a href="https://github.com/tailwindlabs/tailwindcss-jit/blob/master/LICENSE"><img src="https://badgen.net/npm/license/@tailwindcss/jit" alt="License"></a>
+    <a href="https://github.com/tailwindlabs/tailwindcss-jit/releases"><img src="https://img.shields.io/npm/v/@tailwindcss/jit" alt="Latest Release"></a>
+    <a href="https://github.com/tailwindlabs/tailwindcss-jit/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/@tailwindcss/jit.svg" alt="License"></a>
 </p>
@@ -68,2 +70,4 @@
 > If you want to control whether Tailwind watches files or not more explicitly, set `TAILWIND_MODE=watch` or `TAILWIND_MODE=build` to override the default `NODE_ENV`-based behavior.
+> 
+> For example if you want to do one-off builds with `NODE_ENV=development`, explicitly set `TAILWIND_MODE=build` so that Tailwind knows you are just doing a one-off build and doesn't hang.
 
@@ -70,0 +74,0 @@ ## Documentation

src/corePlugins/height.js

@@ -1,7 +0,7 @@
-const { asLength, nameClass } = require('../pluginUtils')
+const { asValue, nameClass } = require('../pluginUtils')
 
-module.exports = function ({ matchUtilities, jit: { theme } }) {
+module.exports = function ({ matchUtilities }) {
   matchUtilities({
     h: (modifier, { theme }) => {
-      let value = asLength(modifier, theme['height'])
+      let value = asValue(modifier, theme['height'])
 
@@ -8,0 +8,0 @@ if (value === undefined) {

src/corePlugins/inset.js

@@ -1,7 +0,7 @@
-const { asLength, nameClass } = require('../pluginUtils')
+const { asValue, nameClass } = require('../pluginUtils')
 
-module.exports = function ({ matchUtilities, jit: { theme } }) {
+module.exports = function ({ matchUtilities }) {
   matchUtilities({
     inset: (modifier, { theme }) => {
-      let value = asLength(modifier, theme['inset'])
+      let value = asValue(modifier, theme['inset'])
 
@@ -19,3 +19,3 @@ if (value === undefined) {
     'inset-x': (modifier, { theme }) => {
-      let value = asLength(modifier, theme['inset'])
+      let value = asValue(modifier, theme['inset'])
 
@@ -29,3 +29,3 @@ if (value === undefined) {
     'inset-y': (modifier, { theme }) => {
-      let value = asLength(modifier, theme['inset'])
+      let value = asValue(modifier, theme['inset'])
 
@@ -41,3 +41,3 @@ if (value === undefined) {
     top: (modifier, { theme }) => {
-      let value = asLength(modifier, theme['inset'])
+      let value = asValue(modifier, theme['inset'])
 
@@ -51,3 +51,3 @@ if (value === undefined) {
     right: (modifier, { theme }) => {
-      let value = asLength(modifier, theme['inset'])
+      let value = asValue(modifier, theme['inset'])
 
@@ -61,3 +61,3 @@ if (value === undefined) {
     bottom: (modifier, { theme }) => {
-      let value = asLength(modifier, theme['inset'])
+      let value = asValue(modifier, theme['inset'])
 
@@ -71,3 +71,3 @@ if (value === undefined) {
     left: (modifier, { theme }) => {
-      let value = asLength(modifier, theme['inset'])
+      let value = asValue(modifier, theme['inset'])
 
@@ -74,0 +74,0 @@ if (value === undefined) {

src/corePlugins/margin.js

@@ -1,7 +0,7 @@
-const { asLength, nameClass } = require('../pluginUtils')
+const { asValue, nameClass } = require('../pluginUtils')
 
-module.exports = function ({ matchUtilities, jit: { theme } }) {
+module.exports = function ({ matchUtilities }) {
   matchUtilities({
-    m: (modifier, { theme, candidate }) => {
-      let value = asLength(modifier, theme['margin'])
+    m: (modifier, { theme }) => {
+      let value = asValue(modifier, theme['margin'])
 
@@ -16,4 +16,4 @@ if (value === undefined) {
   matchUtilities({
-    mx: (modifier, { theme, candidate }) => {
-      let value = asLength(modifier, theme['margin'])
+    mx: (modifier, { theme }) => {
+      let value = asValue(modifier, theme['margin'])
 
@@ -26,4 +26,4 @@ if (value === undefined) {
     },
-    my: (modifier, { theme, candidate }) => {
-      let value = asLength(modifier, theme['margin'])
+    my: (modifier, { theme }) => {
+      let value = asValue(modifier, theme['margin'])
 
@@ -38,4 +38,4 @@ if (value === undefined) {
   matchUtilities({
-    mt: (modifier, { theme, candidate }) => {
-      let value = asLength(modifier, theme['margin'])
+    mt: (modifier, { theme }) => {
+      let value = asValue(modifier, theme['margin'])
 
@@ -48,4 +48,4 @@ if (value === undefined) {
     },
-    mr: (modifier, { theme, candidate }) => {
-      let value = asLength(modifier, theme['margin'])
+    mr: (modifier, { theme }) => {
+      let value = asValue(modifier, theme['margin'])
 
@@ -58,4 +58,4 @@ if (value === undefined) {
     },
-    mb: (modifier, { theme, candidate }) => {
-      let value = asLength(modifier, theme['margin'])
+    mb: (modifier, { theme }) => {
+      let value = asValue(modifier, theme['margin'])
 
@@ -68,4 +68,4 @@ if (value === undefined) {
     },
-    ml: (modifier, { theme, candidate }) => {
-      let value = asLength(modifier, theme['margin'])
+    ml: (modifier, { theme }) => {
+      let value = asValue(modifier, theme['margin'])
 
@@ -72,0 +72,0 @@ if (value === undefined) {

src/corePlugins/maxHeight.js

@@ -1,8 +0,7 @@
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
-const { asLength, nameClass } = require('../pluginUtils')
+const { asValue, nameClass } = require('../pluginUtils')
 
-module.exports = function ({ matchUtilities, jit: { theme } }) {
+module.exports = function ({ matchUtilities }) {
   matchUtilities({
     'max-h': (modifier, { theme }) => {
-      let value = asLength(modifier, theme['maxHeight'])
+      let value = asValue(modifier, theme['maxHeight'])
 
@@ -9,0 +8,0 @@ if (value === undefined) {

src/corePlugins/maxWidth.js

@@ -1,8 +0,7 @@
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
-const { asLength, nameClass } = require('../pluginUtils')
+const { asValue, nameClass } = require('../pluginUtils')
 
-module.exports = function ({ matchUtilities, jit: { theme } }) {
+module.exports = function ({ matchUtilities }) {
   matchUtilities({
     'max-w': (modifier, { theme }) => {
-      let value = asLength(modifier, theme['maxWidth'])
+      let value = asValue(modifier, theme['maxWidth'])
 
@@ -9,0 +8,0 @@ if (value === undefined) {

src/corePlugins/minHeight.js

@@ -1,8 +0,7 @@
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
-const { asLength, nameClass } = require('../pluginUtils')
+const { asValue, nameClass } = require('../pluginUtils')
 
-module.exports = function ({ matchUtilities, jit: { theme } }) {
+module.exports = function ({ matchUtilities }) {
   matchUtilities({
     'min-h': (modifier, { theme }) => {
-      let value = asLength(modifier, theme['minHeight'])
+      let value = asValue(modifier, theme['minHeight'])
 
@@ -9,0 +8,0 @@ if (value === undefined) {

src/corePlugins/minWidth.js

@@ -1,8 +0,7 @@
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
-const { asLength, nameClass } = require('../pluginUtils')
+const { asValue, nameClass } = require('../pluginUtils')
 
-module.exports = function ({ matchUtilities, jit: { theme } }) {
+module.exports = function ({ matchUtilities }) {
   matchUtilities({
     'min-w': (modifier, { theme }) => {
-      let value = asLength(modifier, theme['minWidth'])
+      let value = asValue(modifier, theme['minWidth'])
 
@@ -9,0 +8,0 @@ if (value === undefined) {

src/corePlugins/padding.js

@@ -1,2 +0,2 @@
-const { asLength, nameClass } = require('../pluginUtils')
+const { asValue, nameClass } = require('../pluginUtils')
 
@@ -6,3 +6,3 @@ module.exports = function ({ matchUtilities, jit: { theme } }) {
     p: (modifier, { theme }) => {
-      let value = asLength(modifier, theme['padding'])
+      let value = asValue(modifier, theme['padding'])
 
@@ -18,3 +18,3 @@ if (value === undefined) {
     px: (modifier, { theme }) => {
-      let value = asLength(modifier, theme['padding'])
+      let value = asValue(modifier, theme['padding'])
 
@@ -28,3 +28,3 @@ if (value === undefined) {
     py: (modifier, { theme }) => {
-      let value = asLength(modifier, theme['padding'])
+      let value = asValue(modifier, theme['padding'])
 
@@ -40,3 +40,3 @@ if (value === undefined) {
     pt: (modifier, { theme }) => {
-      let value = asLength(modifier, theme['padding'])
+      let value = asValue(modifier, theme['padding'])
 
@@ -50,3 +50,3 @@ if (value === undefined) {
     pr: (modifier, { theme }) => {
-      let value = asLength(modifier, theme['padding'])
+      let value = asValue(modifier, theme['padding'])
 
@@ -60,3 +60,3 @@ if (value === undefined) {
     pb: (modifier, { theme }) => {
-      let value = asLength(modifier, theme['padding'])
+      let value = asValue(modifier, theme['padding'])
 
@@ -70,3 +70,3 @@ if (value === undefined) {
     pl: (modifier, { theme }) => {
-      let value = asLength(modifier, theme['padding'])
+      let value = asValue(modifier, theme['padding'])
 
@@ -73,0 +73,0 @@ if (value === undefined) {

src/corePlugins/transitionDuration.js

@@ -1,2 +0,2 @@
-const { nameClass } = require('../pluginUtils')
+const { nameClass, asValue } = require('../pluginUtils')
 
@@ -6,3 +6,3 @@ module.exports = function ({ matchUtilities, jit: { theme } }) {
     duration: (modifier, { theme }) => {
-      let value = theme.transitionDuration[modifier]
+      let value = asValue(modifier, theme.transitionDuration)
 
@@ -9,0 +9,0 @@ if (value === undefined) {

src/corePlugins/width.js

@@ -1,7 +0,7 @@
-const { asLength, nameClass } = require('../pluginUtils')
+const { asValue, nameClass } = require('../pluginUtils')
 
-module.exports = function ({ matchUtilities, jit: { theme } }) {
+module.exports = function ({ matchUtilities }) {
   matchUtilities({
     w: (modifier, { theme }) => {
-      let value = asLength(modifier, theme['width'])
+      let value = asValue(modifier, theme['width'])
 
@@ -8,0 +8,0 @@ if (value === undefined) {

src/lib/generateRules.js

@@ -20,4 +20,11 @@ const postcss = require('postcss')
 function* candidatePermutations(prefix, modifier = '') {
-  let dashIdx = prefix.lastIndexOf('-')
-  if (dashIdx === -1) {
+  let dashIdx
+
+  if (modifier.endsWith(']')) {
+    dashIdx = prefix.lastIndexOf('[') - 1
+  } else {
+    dashIdx = prefix.lastIndexOf('-')
+  }
+
+  if (dashIdx < 0) {
     return
@@ -144,5 +151,7 @@ }
 
-  if (candidatePrefix[0] === '-') {
+  const twConfigPrefix = context.tailwindConfig.prefix || ''
+  const twConfigPrefixLen = twConfigPrefix.length
+  if (candidatePrefix[twConfigPrefixLen] === '-') {
     negative = true
-    candidatePrefix = candidatePrefix.slice(1)
+    candidatePrefix = twConfigPrefix + candidatePrefix.slice(twConfigPrefixLen + 1)
   }
@@ -149,0 +158,0 @@

src/lib/setupContext.js

@@ -12,2 +12,3 @@ const fs = require('fs')
 const LRU = require('quick-lru')
+const normalizePath = require('normalize-path')
 
@@ -188,3 +189,3 @@ const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
     let pathname = url.parse(file).pathname
-    let newModified = fs.statSync(pathname).mtimeMs
+    let newModified = fs.statSync(decodeURIComponent(pathname)).mtimeMs
 
@@ -706,5 +707,6 @@ if (!fileModifiedMap.has(file) || newModified > fileModifiedMap.get(file)) {
       configDependencies: new Set(),
-      candidateFiles: Array.isArray(tailwindConfig.purge)
+      candidateFiles: (Array.isArray(tailwindConfig.purge)
         ? tailwindConfig.purge
-        : tailwindConfig.purge.content,
+        : tailwindConfig.purge.content
+      ).map((path) => normalizePath(path)),
       variantMap: new Map(),
@@ -711,0 +713,0 @@ stylesheetCache: null,

src/lib/utils.js

@@ -92,3 +92,4 @@ const postcss = require('postcss')
   escapeClassName,
+  escapeCommas,
   nameClass,
 }

src/pluginUtils.js

 const selectorParser = require('postcss-selector-parser')
 const postcss = require('postcss')
 const { toRgba } = require('tailwindcss/lib/util/withAlphaVariable')
-const { nameClass } = require('./lib/utils')
+const { nameClass, escapeCommas } = require('./lib/utils')
 
@@ -16,2 +16,5 @@ function updateAllClasses(selectors, updateClass) {
       sel.value = updatedClass
+      if (sel.raws && sel.raws.value) {
+        sel.raws.value = escapeCommas(sel.raws.value)
+      }
     })
@@ -41,2 +44,5 @@ })
       lastClass.value = updatedClass
+      if (lastClass.raws && lastClass.raws.value) {
+        lastClass.raws.value = escapeCommas(lastClass.raws.value)
+      }
     })
@@ -110,3 +116,4 @@ })
 
-  return transform(value)
+  // add spaces around operators inside calc() that do not follow an operator or (
+  return transform(value).replace(/(?<=^calc\(.+?)(?<![-+*/(])([-+*/])/g, ' $1 ')
 }
@@ -124,4 +131,3 @@
     transform: (value) => {
-      // add spaces around operators inside calc() that do not follow an operator or (
-      return value.replace(/(?<=^calc\(.+?)(?<![-+*/(])([-+*/])/g, ' $1 ')
+      return value
     },
@@ -128,0 +134,0 @@ })

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

240371

increased by2.51%

Number of package files

174

increased by1.16%

Lines of code

6864

increased by1.36%

Number of lines in readme file

156

increased by2.63%

Worsened metrics

Dependency count

10

increased by11.11%

Dev dependency count

8

increased by14.29%

Dependency changes

• + Addednormalize-path@^3.0.0