jekyll-tailwindcss 0.1.0 → 0.3.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +111 -13
- data/lib/jekyll/converters/tailwindcss.rb +28 -3
- data/lib/jekyll-tailwindcss/version.rb +1 -1
- data/lib/tailwindcss/commands.rb +2 -2
- metadata +9 -9
- /data/exe/{tailwindcss → jekyll-tailwindcss} +0 -0
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: e5faa947e25ddbf760e646d08df3ee2d2c67cea57715f2018532087a7b914ad9
|
|
4
|
+
data.tar.gz: c758c3946ec9757979ecba495eb887316a2a1782dbb02017dfaa646b9f53cb82
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 64279d4437ef361b7b52026d343753b9cde8ce3c98addc99aaaa783a8e2b7ecf4d319a1ad8254d7f43593bcaae18403af24f04311cfa77a6012a74194ac3b53e
|
|
7
|
+
data.tar.gz: a2b9da11c8bbe2279586eb7108cc4385b26392732f99ec3b0b75ff24ffc0aa8d9119bb20e2491794f8f08a38543135145d5f9c4109d580acd40fa9490da17c93
|
data/README.md
CHANGED
|
@@ -1,53 +1,151 @@
|
|
|
1
1
|
# Jekyll::Tailwindcss
|
|
2
2
|
|
|
3
|
+
Bring the fun of building with TailwindCSS into your Jekyll project (without any JavaScript)
|
|
4
|
+
|
|
5
|
+
**TL;DR** This gem borrows *heavily* from github.com/rails/tailwindcss-rails to provide platform-specific tailwind executables and provide a smooth developer experience in Jekyll projects
|
|
6
|
+
|
|
7
|
+
Much like the Rails gem, this gem wraps [the standalone executable version](https://tailwindcss.com/blog/standalone-cli) of the Tailwind CSS v3 framework. It installs these as platform-specific executables, so there are separate underlying gems per platform, but the correct gem will automatically be picked for your platform.
|
|
8
|
+
|
|
9
|
+
> “Because building a great jekyll site shouldn’t require a `node_modules` folder
|
|
10
|
+
|
|
3
11
|
## Installation
|
|
4
12
|
|
|
5
13
|
Install the gem in your jekyll project's Gemfile by executing the following:
|
|
6
14
|
|
|
7
|
-
```
|
|
8
|
-
|
|
15
|
+
```
|
|
16
|
+
bundle add jekyll-tailwindcss
|
|
9
17
|
```
|
|
10
18
|
|
|
11
|
-
Add
|
|
19
|
+
Add the plugin to your list of jekyll plugins in `_config.yml`
|
|
12
20
|
|
|
13
21
|
```yml
|
|
14
22
|
plugins:
|
|
15
23
|
- jekyll-tailwindcss
|
|
16
24
|
```
|
|
17
25
|
|
|
26
|
+
## Tailwind Configuration
|
|
27
|
+
|
|
28
|
+
This plugin requires you to have a tailwind configuration file (`tailwind.config.js`) at the root level of your project, which can be generated by running:
|
|
29
|
+
|
|
30
|
+
```
|
|
31
|
+
bundle exec jekyll-tailwindcss init
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
Tailwind will include the CSS for the classes found in `content` directories. For most jekyll sites, this would work well.
|
|
35
|
+
|
|
36
|
+
```js
|
|
37
|
+
content: [
|
|
38
|
+
"./_drafts/**/*.md",
|
|
39
|
+
"./_includes/**/*.html",
|
|
40
|
+
"./_layouts/**/*.html",
|
|
41
|
+
"./_pages/*.{html,md}",
|
|
42
|
+
"./_posts/*.md",
|
|
43
|
+
"./*.{html,md}",
|
|
44
|
+
],
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
Learn more at https://tailwindcss.com/docs/configuration
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
18
51
|
## Usage
|
|
19
52
|
|
|
20
|
-
|
|
53
|
+
```sh
|
|
54
|
+
bundle exec jekyll serve # or build
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
Any `*.css` file processed by jekyll [^1] that contains the `@tailwind` [directive](https://tailwindcss.com/docs/functions-and-directives#config) will now be converted through the Tailwind CLI.
|
|
58
|
+
|
|
59
|
+
[^1]: Jekyll will process any file that begins with yaml [frontmatter](https://jekyllrb.com/docs/front-matter/)
|
|
21
60
|
|
|
22
|
-
|
|
61
|
+
### Examples
|
|
23
62
|
|
|
24
|
-
This is the tailwind configuration for your project. Learn [more here](https://tailwindcss.com/docs/configuration).
|
|
25
63
|
|
|
26
|
-
|
|
64
|
+
A CSS file with frontmatter and `@tailwind` directives:
|
|
27
65
|
|
|
28
|
-
|
|
66
|
+
```css
|
|
67
|
+
/* assets/css/styles.css */
|
|
68
|
+
---
|
|
69
|
+
# This yaml frontmatter is required for jekyll to process the file
|
|
70
|
+
---
|
|
29
71
|
|
|
30
|
-
|
|
72
|
+
@tailwind base;
|
|
73
|
+
@tailwind components;
|
|
74
|
+
@tailwind utilities;
|
|
31
75
|
|
|
32
|
-
|
|
76
|
+
.btn {
|
|
77
|
+
@apply font-bold py-2 px-4 rounded !important;
|
|
78
|
+
}
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
will be converted to
|
|
33
82
|
|
|
34
|
-
|
|
83
|
+
```css
|
|
84
|
+
/* _site/assets/css/styles.css */
|
|
35
85
|
|
|
86
|
+
/*
|
|
87
|
+
* Tailwind generated CSS
|
|
88
|
+
* ...
|
|
89
|
+
*/
|
|
90
|
+
```
|
|
36
91
|
|
|
37
92
|
## Development
|
|
38
93
|
|
|
39
94
|
After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
|
|
40
95
|
|
|
41
|
-
To install this gem
|
|
96
|
+
To install this gem on your local machine, run `bundle exec rake install`.
|
|
97
|
+
|
|
98
|
+
### Updating to the latest upstream tailwindcss version
|
|
99
|
+
|
|
100
|
+
Update `lib/tailwindcss/upstream.rb` with the upstream version.
|
|
101
|
+
|
|
102
|
+
Run `bundle exec rake clobber` and then `bundle exec rake download` to ensure the tailwindcss binaries can be downloaded and you have the correct versions on the local disk.
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
## Testing this gem
|
|
106
|
+
|
|
107
|
+
### Running the test suite
|
|
108
|
+
|
|
109
|
+
The unit tests are run with `bundle exec rspec`
|
|
110
|
+
|
|
111
|
+
There is an additional integration test which runs in CI, `spec/integration/user_journey_test.sh` which you may also want to run.
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
### Testing in a Jekyll project
|
|
115
|
+
|
|
116
|
+
If you want to test modifications to this gem, you must run `rake download` once to download the upstream `tailwindcss` executables.
|
|
117
|
+
|
|
118
|
+
Then you can point your Jekyll project's `Gemfile` at the local version of the gem as you normally would:
|
|
119
|
+
|
|
120
|
+
``` ruby
|
|
121
|
+
gem "jekyll-tailwindcss", path: "/path/to/jekyll-tailwindcss"
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
### Cutting a release
|
|
125
|
+
|
|
126
|
+
- bump the version
|
|
127
|
+
- [ ] update `lib/jekyll-tailwindcss/version.rb`
|
|
128
|
+
- [ ] update `CHANGELOG.md`
|
|
129
|
+
- [ ] commit and create a git tag
|
|
130
|
+
- build the native gems:
|
|
131
|
+
- [ ] `bundle exec rake clobber` to clean up possibly old tailwindcss executables
|
|
132
|
+
- [ ] `bundle exec rake package`
|
|
133
|
+
- push
|
|
134
|
+
- [ ] `for g in pkg/*.gem ; do gem push $g ; done`
|
|
135
|
+
- [ ] `git push`
|
|
136
|
+
- announce
|
|
137
|
+
- [ ] create a release at https://github.com/vormwald/jekyll-tailwindcss/releases
|
|
42
138
|
|
|
43
139
|
## Contributing
|
|
44
140
|
|
|
45
141
|
Bug reports and pull requests are welcome on GitHub at https://github.com/vormwald/jekyll-tailwindcss. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [code of conduct](https://github.com/vormwald/jekyll-tailwindcss/blob/main/CODE_OF_CONDUCT.md).
|
|
46
142
|
|
|
143
|
+
|
|
144
|
+
|
|
47
145
|
## License
|
|
48
146
|
|
|
49
147
|
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
|
50
148
|
|
|
51
149
|
## Code of Conduct
|
|
52
150
|
|
|
53
|
-
Everyone interacting in the Jekyll::Tailwindcss project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/vormwald/jekyll-tailwindcss/blob/main/CODE_OF_CONDUCT.md).
|
|
151
|
+
Everyone interacting in the Jekyll::Tailwindcss project's codebases, issue trackers, chat rooms, and mailing lists is expected to follow the [code of conduct](https://github.com/vormwald/jekyll-tailwindcss/blob/main/CODE_OF_CONDUCT.md).
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
require "open3"
|
|
2
|
+
|
|
1
3
|
module Jekyll
|
|
2
4
|
module Converters
|
|
3
5
|
class Tailwindcss < Converter
|
|
@@ -5,20 +7,43 @@ module Jekyll
|
|
|
5
7
|
priority :low
|
|
6
8
|
|
|
7
9
|
def matches(ext)
|
|
8
|
-
/^\.
|
|
10
|
+
/^\.css$/i.match?(ext)
|
|
9
11
|
end
|
|
10
12
|
|
|
11
13
|
def output_ext(ext)
|
|
12
|
-
|
|
14
|
+
# At this point, we will have a CSS file
|
|
15
|
+
ext
|
|
13
16
|
end
|
|
14
17
|
|
|
15
18
|
def convert(content)
|
|
19
|
+
return content unless /@tailwind/i.match?(content)
|
|
20
|
+
|
|
16
21
|
dev_mode = Jekyll.env == "development"
|
|
17
22
|
Jekyll.logger.info "Jekyll Tailwind:", "Generating #{dev_mode ? "" : "minified "}CSS"
|
|
18
23
|
|
|
19
24
|
compile_command = ::Tailwindcss::Commands.compile_command(debug: dev_mode).join(" ")
|
|
20
25
|
|
|
21
|
-
|
|
26
|
+
output, error = nil
|
|
27
|
+
Open3.popen3(tailwindcss_env_options, compile_command) do |stdin, stdout, stderr, _wait_thread|
|
|
28
|
+
stdin.write content # write the content of *.tailwindcss to the tailwindcss CLI as input
|
|
29
|
+
stdin.close
|
|
30
|
+
error = stderr.read
|
|
31
|
+
output = stdout.read
|
|
32
|
+
end
|
|
33
|
+
Jekyll.logger.warn "Jekyll Tailwind:", error unless error.nil?
|
|
34
|
+
|
|
35
|
+
output
|
|
36
|
+
rescue => e
|
|
37
|
+
Jekyll.logger.error "Jekyll Tailwind:", e.message
|
|
38
|
+
content
|
|
39
|
+
end
|
|
40
|
+
|
|
41
|
+
private
|
|
42
|
+
|
|
43
|
+
def tailwindcss_env_options
|
|
44
|
+
# Without this ENV you'll get a warning about `Browserslist: caniuse-lite is outdated`
|
|
45
|
+
# Since we're using the CLI, we can't update the data, so we ignore it.
|
|
46
|
+
{"BROWSERSLIST_IGNORE_OLD_DATA" => "1"}
|
|
22
47
|
end
|
|
23
48
|
end
|
|
24
49
|
end
|
data/lib/tailwindcss/commands.rb
CHANGED
|
@@ -76,8 +76,8 @@ module Tailwindcss
|
|
|
76
76
|
def compile_command(debug: false, **kwargs)
|
|
77
77
|
command = [
|
|
78
78
|
executable(**kwargs),
|
|
79
|
-
"
|
|
80
|
-
"
|
|
79
|
+
"--input", "-",
|
|
80
|
+
"--config", "./tailwind.config.js"
|
|
81
81
|
]
|
|
82
82
|
|
|
83
83
|
command << "--minify" unless debug
|
metadata
CHANGED
|
@@ -1,27 +1,27 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: jekyll-tailwindcss
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.3.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Mike Vormwald
|
|
8
|
-
autorequire:
|
|
8
|
+
autorequire:
|
|
9
9
|
bindir: exe
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2024-
|
|
11
|
+
date: 2024-06-09 00:00:00.000000000 Z
|
|
12
12
|
dependencies: []
|
|
13
|
-
description:
|
|
13
|
+
description:
|
|
14
14
|
email:
|
|
15
15
|
- mvormwald@gmail.com
|
|
16
16
|
executables:
|
|
17
|
-
- tailwindcss
|
|
17
|
+
- jekyll-tailwindcss
|
|
18
18
|
extensions: []
|
|
19
19
|
extra_rdoc_files: []
|
|
20
20
|
files:
|
|
21
21
|
- LICENSE
|
|
22
22
|
- README.md
|
|
23
23
|
- Rakefile
|
|
24
|
-
- exe/tailwindcss
|
|
24
|
+
- exe/jekyll-tailwindcss
|
|
25
25
|
- lib/jekyll-tailwindcss.rb
|
|
26
26
|
- lib/jekyll-tailwindcss/version.rb
|
|
27
27
|
- lib/jekyll/converters/tailwindcss.rb
|
|
@@ -32,7 +32,7 @@ licenses:
|
|
|
32
32
|
- MIT
|
|
33
33
|
metadata:
|
|
34
34
|
homepage_uri: https://github.com/vormwald/jekyll-tailwindcss
|
|
35
|
-
post_install_message:
|
|
35
|
+
post_install_message:
|
|
36
36
|
rdoc_options: []
|
|
37
37
|
require_paths:
|
|
38
38
|
- lib
|
|
@@ -47,8 +47,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
47
47
|
- !ruby/object:Gem::Version
|
|
48
48
|
version: '0'
|
|
49
49
|
requirements: []
|
|
50
|
-
rubygems_version: 3.
|
|
51
|
-
signing_key:
|
|
50
|
+
rubygems_version: 3.5.11
|
|
51
|
+
signing_key:
|
|
52
52
|
specification_version: 4
|
|
53
53
|
summary: Integrate Tailwind CSS into your Jekyll site.
|
|
54
54
|
test_files: []
|
|
File without changes
|