Skip to content

Commit 7e39851

Browse files
enjidevenjidev
committed
feat: support for Tailwind CSS v2 and v3
1 parent 6e05979 commit 7e39851

File tree

5 files changed

+113
-18
lines changed

5 files changed

+113
-18
lines changed

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ This plugin creates a dynamic accent color using CSS custom properties based on
66

77
Using this plugin will add an `accent` color classes to your Tailwind CSS project, for example: `bg-accent-500`, `dark:outline-accent-200`, etc.
88

9+
Works with Tailwind CSS v2 and v3.
10+
911
## Installation
1012

1113
Install the plugin from npm:

‎package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,14 +53,15 @@
5353
"postcss": "^8.1.9",
5454
"prettier": "^2.2.0",
5555
"standard-version": "^9.1.0",
56-
"tailwindcss": "^2.0.0"
56+
"tailwindcss": "^3.0.0",
57+
"tailwindcss-v2": "npm:tailwindcss@^2.0.0"
5758
},
5859
"dependencies": {
5960
"color-convert": "^2.0.1",
6061
"kebab-case": "^1.0.2",
6162
"lodash": "^4.17.20"
6263
},
6364
"peerDependencies": {
64-
"tailwindcss": ">=2.0.0"
65+
"tailwindcss": ">=2.0.0 || >=3.0.0"
6566
}
6667
}

‎tests/helpers.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
const postcss = require('postcss');
22
const tailwindcss = require('tailwindcss');
3+
const tailwindcssV2 = require('tailwindcss-v2');
34
const customPlugin = require('../src/index');
45

56
module.exports.generatePluginCss = (options) => {
@@ -14,3 +15,16 @@ module.exports.generatePluginCss = (options) => {
1415
})
1516
.then(({ css }) => css);
1617
};
18+
19+
module.exports.generatePluginCssV2 = (options) => {
20+
const config = {
21+
corePlugins: false,
22+
plugins: [customPlugin(options)],
23+
};
24+
25+
return postcss(tailwindcssV2(config))
26+
.process('@tailwind base', {
27+
from: undefined,
28+
})
29+
.then(({ css }) => css);
30+
};

‎tests/index.test.js

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
const { generatePluginCss } = require('./helpers');
1+
const { generatePluginCss, generatePluginCssV2 } = require('./helpers');
22

3-
describe('tailwindcss-accent plugin', () => {
3+
describe('with tailwindcss v3', () => {
44
it('correctly generate base styles selectors.', () => {
55
return generatePluginCss().then((css) => {
66
expect(css).toContain(`[data-accent='sky']`);
@@ -13,3 +13,17 @@ describe('tailwindcss-accent plugin', () => {
1313
});
1414
});
1515
});
16+
17+
describe('with tailwindcss v2', () => {
18+
it('correctly generate base styles selectors.', () => {
19+
return generatePluginCssV2().then((css) => {
20+
expect(css).toContain(`[data-accent='sky']`);
21+
});
22+
});
23+
24+
it('correctly generate selected base styles selectors.', () => {
25+
return generatePluginCssV2({ colors: ['rose'] }).then((css) => {
26+
expect(css).not.toContain(`[data-accent='sky']`);
27+
});
28+
});
29+
});

‎yarn.lock

Lines changed: 78 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -893,7 +893,7 @@ anymatch@^3.0.3, anymatch@~3.1.2:
893893
normalize-path "^3.0.0"
894894
picomatch "^2.0.4"
895895

896-
arg@^5.0.1:
896+
arg@^5.0.1, arg@^5.0.2:
897897
version "5.0.2"
898898
resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
899899
integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
@@ -1214,7 +1214,7 @@ char-regex@^1.0.2:
12141214
resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
12151215
integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==
12161216

1217-
chokidar@^3.5.2:
1217+
chokidar@^3.5.2, chokidar@^3.5.3:
12181218
version "3.5.3"
12191219
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
12201220
integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -1324,7 +1324,7 @@ color-name@1.1.3:
13241324
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
13251325
integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
13261326

1327-
color-name@^1.0.0, color-name@~1.1.4:
1327+
color-name@^1.0.0, color-name@^1.1.4, color-name@~1.1.4:
13281328
version "1.1.4"
13291329
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
13301330
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
@@ -1774,7 +1774,7 @@ detect-newline@^3.0.0, detect-newline@^3.1.0:
17741774
resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
17751775
integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
17761776

1777-
detective@^5.2.0:
1777+
detective@^5.2.0, detective@^5.2.1:
17781778
version "5.2.1"
17791779
resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.1.tgz#6af01eeda11015acb0e73f933242b70f24f91034"
17801780
integrity sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==
@@ -2242,7 +2242,7 @@ fast-diff@^1.1.2:
22422242
resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
22432243
integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
22442244

2245-
fast-glob@^3.2.7, fast-glob@^3.2.9:
2245+
fast-glob@^3.2.12, fast-glob@^3.2.7, fast-glob@^3.2.9:
22462246
version "3.2.12"
22472247
resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
22482248
integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
@@ -2535,7 +2535,7 @@ glob-parent@^5.1.2, glob-parent@~5.1.2:
25352535
dependencies:
25362536
is-glob "^4.0.1"
25372537

2538-
glob-parent@^6.0.1:
2538+
glob-parent@^6.0.1, glob-parent@^6.0.2:
25392539
version "6.0.2"
25402540
resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
25412541
integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
@@ -3729,7 +3729,7 @@ levn@~0.3.0:
37293729
prelude-ls "~1.1.2"
37303730
type-check "~0.3.2"
37313731

3732-
lilconfig@^2.0.5:
3732+
lilconfig@^2.0.5, lilconfig@^2.0.6:
37333733
version "2.0.6"
37343734
resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.6.tgz#32a384558bd58af3d4c6e077dd1ad1d397bc69d4"
37353735
integrity sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==
@@ -3946,7 +3946,7 @@ micromatch@^3.1.4:
39463946
snapdragon "^0.8.1"
39473947
to-regex "^3.0.2"
39483948

3949-
micromatch@^4.0.2, micromatch@^4.0.4:
3949+
micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5:
39503950
version "4.0.5"
39513951
resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
39523952
integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
@@ -4161,6 +4161,11 @@ object-hash@^2.2.0:
41614161
resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.2.0.tgz#5ad518581eefc443bd763472b8ff2e9c2c0d54a5"
41624162
integrity sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==
41634163

4164+
object-hash@^3.0.0:
4165+
version "3.0.0"
4166+
resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"
4167+
integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==
4168+
41644169
object-inspect@^1.12.2, object-inspect@^1.9.0:
41654170
version "1.12.2"
41664171
resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.2.tgz#c0641f26394532f28ab8d796ab954e43c009a8ea"
@@ -4460,6 +4465,15 @@ posix-character-classes@^0.1.0:
44604465
resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
44614466
integrity sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==
44624467

4468+
postcss-import@^14.1.0:
4469+
version "14.1.0"
4470+
resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-14.1.0.tgz#a7333ffe32f0b8795303ee9e40215dac922781f0"
4471+
integrity sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==
4472+
dependencies:
4473+
postcss-value-parser "^4.0.0"
4474+
read-cache "^1.0.0"
4475+
resolve "^1.1.7"
4476+
44634477
postcss-js@^3.0.3:
44644478
version "3.0.3"
44654479
resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-3.0.3.tgz#2f0bd370a2e8599d45439f6970403b5873abda33"
@@ -4468,7 +4482,14 @@ postcss-js@^3.0.3:
44684482
camelcase-css "^2.0.1"
44694483
postcss "^8.1.6"
44704484

4471-
postcss-load-config@^3.1.0:
4485+
postcss-js@^4.0.0:
4486+
version "4.0.0"
4487+
resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.0.tgz#31db79889531b80dc7bc9b0ad283e418dce0ac00"
4488+
integrity sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==
4489+
dependencies:
4490+
camelcase-css "^2.0.1"
4491+
4492+
postcss-load-config@^3.1.0, postcss-load-config@^3.1.4:
44724493
version "3.1.4"
44734494
resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.4.tgz#1ab2571faf84bb078877e1d07905eabe9ebda855"
44744495
integrity sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==
@@ -4483,7 +4504,14 @@ postcss-nested@5.0.6:
44834504
dependencies:
44844505
postcss-selector-parser "^6.0.6"
44854506

4486-
postcss-selector-parser@^6.0.6:
4507+
postcss-nested@6.0.0:
4508+
version "6.0.0"
4509+
resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.0.0.tgz#1572f1984736578f360cffc7eb7dca69e30d1735"
4510+
integrity sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==
4511+
dependencies:
4512+
postcss-selector-parser "^6.0.10"
4513+
4514+
postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.6:
44874515
version "6.0.11"
44884516
resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz#2e41dc39b7ad74046e1615185185cd0b17d0c8dc"
44894517
integrity sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==
@@ -4496,12 +4524,12 @@ postcss-value-parser@^3.3.0:
44964524
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
44974525
integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
44984526

4499-
postcss-value-parser@^4.1.0:
4527+
postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
45004528
version "4.2.0"
45014529
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
45024530
integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
45034531

4504-
postcss@^8.1.6, postcss@^8.1.9, postcss@^8.3.5:
4532+
postcss@^8.1.6, postcss@^8.1.9, postcss@^8.3.5, postcss@^8.4.18:
45054533
version "8.4.19"
45064534
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.19.tgz#61178e2add236b17351897c8bcc0b4c8ecab56fc"
45074535
integrity sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==
@@ -4623,6 +4651,13 @@ react-is@^17.0.1:
46234651
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
46244652
integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
46254653

4654+
read-cache@^1.0.0:
4655+
version "1.0.0"
4656+
resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
4657+
integrity sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==
4658+
dependencies:
4659+
pify "^2.3.0"
4660+
46264661
read-pkg-up@^3.0.0:
46274662
version "3.0.0"
46284663
resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-3.0.0.tgz#3ed496685dba0f8fe118d0691dc51f4a1ff96f07"
@@ -4783,7 +4818,7 @@ resolve-url@^0.2.1:
47834818
resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
47844819
integrity sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==
47854820

4786-
resolve@^1.10.0, resolve@^1.18.1, resolve@^1.20.0, resolve@^1.22.0:
4821+
resolve@^1.1.7, resolve@^1.10.0, resolve@^1.18.1, resolve@^1.20.0, resolve@^1.22.0, resolve@^1.22.1:
47874822
version "1.22.1"
47884823
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
47894824
integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
@@ -5335,7 +5370,7 @@ table@^6.0.9:
53355370
string-width "^4.2.3"
53365371
strip-ansi "^6.0.1"
53375372

5338-
tailwindcss@^2.0.0:
5373+
"tailwindcss-v2@npm:tailwindcss@^2.0.0":
53395374
version "2.2.19"
53405375
resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-2.2.19.tgz#540e464832cd462bb9649c1484b0a38315c2653c"
53415376
integrity sha512-6Ui7JSVtXadtTUo2NtkBBacobzWiQYVjYW0ZnKaP9S1ZCKQ0w7KVNz+YSDI/j7O7KCMHbOkz94ZMQhbT9pOqjw==
@@ -5373,6 +5408,35 @@ tailwindcss@^2.0.0:
53735408
resolve "^1.20.0"
53745409
tmp "^0.2.1"
53755410

5411+
tailwindcss@^3.0.0:
5412+
version "3.2.4"
5413+
resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.2.4.tgz#afe3477e7a19f3ceafb48e4b083e292ce0dc0250"
5414+
integrity sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==
5415+
dependencies:
5416+
arg "^5.0.2"
5417+
chokidar "^3.5.3"
5418+
color-name "^1.1.4"
5419+
detective "^5.2.1"
5420+
didyoumean "^1.2.2"
5421+
dlv "^1.1.3"
5422+
fast-glob "^3.2.12"
5423+
glob-parent "^6.0.2"
5424+
is-glob "^4.0.3"
5425+
lilconfig "^2.0.6"
5426+
micromatch "^4.0.5"
5427+
normalize-path "^3.0.0"
5428+
object-hash "^3.0.0"
5429+
picocolors "^1.0.0"
5430+
postcss "^8.4.18"
5431+
postcss-import "^14.1.0"
5432+
postcss-js "^4.0.0"
5433+
postcss-load-config "^3.1.4"
5434+
postcss-nested "6.0.0"
5435+
postcss-selector-parser "^6.0.10"
5436+
postcss-value-parser "^4.2.0"
5437+
quick-lru "^5.1.1"
5438+
resolve "^1.22.1"
5439+
53765440
terminal-link@^2.0.0:
53775441
version "2.1.1"
53785442
resolved "https://registry.yarnpkg.com/terminal-link/-/terminal-link-2.1.1.tgz#14a64a27ab3c0df933ea546fba55f2d078edc994"

0 commit comments

Comments
 (0)