Skip to content

Commit 484f9af

Browse files
stevecochranestevecochrane
authored
Merge pull request #66 from stevecochrane/support-custom-spacing
Add support for custom spacing @theme variables
2 parents 4cc387e + 2d4c36d commit 484f9af

35 files changed

+411
-30
lines changed

‎README.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,9 @@ Use the `@plugin` directive in your main CSS file to load it after importing Tai
3333
@plugin "tailwindcss-logical";
3434
```
3535

36-
Now you can start using the new classes in your templates!
36+
Now you can start using the new classes in your templates! Also if you have `--spacing-*` variables defined with the
37+
`@theme` directive, this plugin will generate spacing utilities for those variables too.
38+
([More on theme variables](https://tailwindcss.com/docs/theme))
3739

3840
## What are CSS Logical Properties and Values?
3941

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎plugins/blockSize.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
const numberRegex = require("./util/numberRegex");
2+
13
module.exports = function ({ matchUtilities, theme }) {
24
const values = theme("height");
35
const calculatedValues = {};
@@ -17,10 +19,13 @@ module.exports = function ({ matchUtilities, theme }) {
1719
];
1820

1921
for (const property in values) {
20-
if (keywords.includes(property)) {
21-
calculatedValues[property] = values[property];
22-
} else if (property === "px") {
22+
if (property === "px") {
2323
calculatedValues[property] = "1px";
24+
} else if (
25+
keywords.includes(property) ||
26+
(!numberRegex.test(property) && values[property])
27+
) {
28+
calculatedValues[property] = values[property];
2429
} else if (property.includes("/")) {
2530
calculatedValues[property] = `calc(${property} * 100%)`;
2631
} else {

‎plugins/inlineSize.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
const numberRegex = require("./util/numberRegex");
2+
13
module.exports = function ({ matchUtilities, theme }) {
24
const values = theme("width");
35
const calculatedValues = {};
@@ -35,10 +37,13 @@ module.exports = function ({ matchUtilities, theme }) {
3537
];
3638

3739
for (const property in values) {
38-
if (keywords.includes(property)) {
39-
calculatedValues[property] = values[property];
40-
} else if (property === "px") {
40+
if (property === "px") {
4141
calculatedValues[property] = "1px";
42+
} else if (
43+
keywords.includes(property) ||
44+
(!numberRegex.test(property) && values[property])
45+
) {
46+
calculatedValues[property] = values[property];
4247
} else if (property.includes("/")) {
4348
calculatedValues[property] = `calc(${property} * 100%)`;
4449
} else {

‎plugins/inset.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
1+
const numberRegex = require("./util/numberRegex");
2+
13
module.exports = function ({ matchUtilities, theme }) {
4+
const values = theme("inset");
25
const calculatedValues = {};
6+
const keywords = ["auto"];
37

4-
for (const property in theme("inset")) {
8+
for (const property in values) {
59
if (property === "px") {
610
calculatedValues[property] = "1px";
711
} else if (property === "full") {
812
calculatedValues[property] = "100%";
9-
} else if (property === "auto") {
10-
calculatedValues[property] = "auto";
13+
} else if (
14+
keywords.includes(property) ||
15+
(!numberRegex.test(property) && values[property])
16+
) {
17+
calculatedValues[property] = values[property];
1118
} else if (property.includes("/")) {
1219
calculatedValues[property] = `calc(${property} * 100%)`;
1320
} else {

‎plugins/margin.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,18 @@
1+
const numberRegex = require("./util/numberRegex");
2+
13
module.exports = function ({ matchUtilities, theme }) {
4+
const values = theme("margin");
25
const calculatedValues = {};
6+
const keywords = ["auto"];
37

4-
for (const property in theme("margin")) {
8+
for (const property in values) {
59
if (property === "px") {
610
calculatedValues[property] = "1px";
7-
} else if (property === "auto") {
8-
calculatedValues[property] = "auto";
11+
} else if (
12+
keywords.includes(property) ||
13+
(!numberRegex.test(property) && values[property])
14+
) {
15+
calculatedValues[property] = values[property];
916
} else {
1017
calculatedValues[property] = `calc(var(--spacing) * ${property})`;
1118
}

‎plugins/maxBlockSize.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
const numberRegex = require("./util/numberRegex");
2+
13
module.exports = function ({ matchUtilities, theme }) {
24
const values = theme("maxHeight");
35
const calculatedValues = {};
@@ -17,10 +19,13 @@ module.exports = function ({ matchUtilities, theme }) {
1719
];
1820

1921
for (const property in values) {
20-
if (keywords.includes(property)) {
21-
calculatedValues[property] = values[property];
22-
} else if (property === "px") {
22+
if (property === "px") {
2323
calculatedValues[property] = "1px";
24+
} else if (
25+
keywords.includes(property) ||
26+
(!numberRegex.test(property) && values[property])
27+
) {
28+
calculatedValues[property] = values[property];
2429
} else {
2530
calculatedValues[property] = `calc(var(--spacing) * ${property})`;
2631
}

‎plugins/maxInlineSize.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
const numberRegex = require("./util/numberRegex");
2+
13
module.exports = function ({ matchUtilities, theme }) {
24
const values = theme("maxWidth");
35
const calculatedValues = {};
@@ -35,10 +37,13 @@ module.exports = function ({ matchUtilities, theme }) {
3537
];
3638

3739
for (const property in values) {
38-
if (keywords.includes(property)) {
39-
calculatedValues[property] = values[property];
40-
} else if (property === "px") {
40+
if (property === "px") {
4141
calculatedValues[property] = "1px";
42+
} else if (
43+
keywords.includes(property) ||
44+
(!numberRegex.test(property) && values[property])
45+
) {
46+
calculatedValues[property] = values[property];
4247
} else {
4348
calculatedValues[property] = `calc(var(--spacing) * ${property})`;
4449
}

‎plugins/minBlockSize.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
const numberRegex = require("./util/numberRegex");
2+
13
module.exports = function ({ matchUtilities, theme }) {
24
const values = theme("minHeight");
35
const calculatedValues = {};
@@ -17,10 +19,13 @@ module.exports = function ({ matchUtilities, theme }) {
1719
];
1820

1921
for (const property in values) {
20-
if (keywords.includes(property)) {
21-
calculatedValues[property] = values[property];
22-
} else if (property === "px") {
22+
if (property === "px") {
2323
calculatedValues[property] = "1px";
24+
} else if (
25+
keywords.includes(property) ||
26+
(!numberRegex.test(property) && values[property])
27+
) {
28+
calculatedValues[property] = values[property];
2429
} else {
2530
calculatedValues[property] = `calc(var(--spacing) * ${property})`;
2631
}

‎plugins/minInlineSize.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
const numberRegex = require("./util/numberRegex");
2+
13
module.exports = function ({ matchUtilities, theme }) {
24
const values = theme("minWidth");
35
const calculatedValues = {};
@@ -35,10 +37,13 @@ module.exports = function ({ matchUtilities, theme }) {
3537
];
3638

3739
for (const property in values) {
38-
if (keywords.includes(property)) {
39-
calculatedValues[property] = values[property];
40-
} else if (property === "px") {
40+
if (property === "px") {
4141
calculatedValues[property] = "1px";
42+
} else if (
43+
keywords.includes(property) ||
44+
(!numberRegex.test(property) && values[property])
45+
) {
46+
calculatedValues[property] = values[property];
4247
} else {
4348
calculatedValues[property] = `calc(var(--spacing) * ${property})`;
4449
}

0 commit comments

Comments
 (0)