Skip to content

Commit 8d4d4d3

Browse files
Antonio-Lagunaromainmenke
Antonio-Laguna
and
romainmenke
authored
Logical Float and Clear (#781)
* Removing float and clear from logical plugin * Adding CHANGELOG * Introducing postcss-logical-float-and-clear * Preparing labeler and exteernals * Update plugins/postcss-logical-float-and-clear/docs/README.md Co-authored-by: Romain Menke <[email protected]> * Update plugins/postcss-logical/docs/README.md Co-authored-by: Romain Menke <[email protected]> * Update .github/labeler.yml Co-authored-by: Romain Menke <[email protected]> * Adding to Issue Templates Co-authored-by: Romain Menke <[email protected]>
1 parent 94451d6 commit 8d4d4d3

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+942
-130
lines changed

‎.github/ISSUE_TEMPLATE/css-issue.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ body:
8787
- PostCSS Is Pseudo Class
8888
- PostCSS Lab Function
8989
- PostCSS Logical
90+
- PostCSS Logical Float and Clear
9091
- PostCSS Media Queries Aspect-Ratio Number Values
9192
- PostCSS Media Query Ranges
9293
- PostCSS Nested Calc

‎.github/ISSUE_TEMPLATE/plugin-issue.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ body:
8989
- PostCSS Is Pseudo Class
9090
- PostCSS Lab Function
9191
- PostCSS Logical
92+
- PostCSS Logical Float and Clear
9293
- PostCSS Media Queries Aspect-Ratio Number Values
9394
- PostCSS Media Query Ranges
9495
- PostCSS Nested Calc

‎.github/labeler.yml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,10 @@
136136
- plugins/postcss-logical/**
137137
- experimental/postcss-logical/**
138138

139+
"plugins/postcss-logical-float-and-clear":
140+
- plugins/postcss-logical-float-and-clear/**
141+
- experimental/postcss-logical-float-and-clear/**
142+
139143
"plugins/media-queries-aspect-ratio-number-values":
140144
- plugins/postcss-media-queries-aspect-ratio-number-values/**
141145
- experimental/postcss-media-queries-aspect-ratio-number-values/**

‎package-lock.json‎

Lines changed: 22 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎plugins/postcss-logical-float-and-clear/.gitignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
node_modules
2+
package-lock.json
3+
yarn.lock
4+
*.result.css
5+
*.result.css.map
6+
*.result.html

‎plugins/postcss-logical-float-and-clear/.nvmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
v18.8.0

‎plugins/postcss-logical-float-and-clear/.tape.mjs‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import postcssTape from '../../packages/postcss-tape/dist/index.mjs';
2+
import plugin from '@csstools/postcss-logical-float-and-clear';
3+
4+
postcssTape(plugin)({
5+
basic: {
6+
message: "supports basic usage",
7+
},
8+
'basic:hebrew': {
9+
message: "supports { inlineDirection: 'right-to-left' }",
10+
options: {
11+
inlineDirection: 'right-to-left'
12+
}
13+
},
14+
'basic:vertical': {
15+
message: "supports { inlineDirection: 'top-to-bottom' }",
16+
options: {
17+
inlineDirection: 'top-to-bottom'
18+
}
19+
},
20+
'examples/example': {
21+
message: 'minimal example',
22+
},
23+
'examples/example:hebrew': {
24+
message: 'minimal example',
25+
options: {
26+
inlineDirection: 'right-to-left'
27+
}
28+
},
29+
});

‎plugins/postcss-logical-float-and-clear/CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Changes to PostCSS Logical Float And Clear
2+
3+
### 1.0.0 (Unreleased)
4+
5+
- Initial version

‎plugins/postcss-logical-float-and-clear/INSTALL.md‎

Lines changed: 260 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,260 @@
1+
# Installing PostCSS Logical Float And Clear
2+
3+
[PostCSS Logical Float And Clear] runs in all Node environments, with special instructions for:
4+
5+
- [Node](#node)
6+
- [PostCSS CLI](#postcss-cli)
7+
- [PostCSS Load Config](#postcss-load-config)
8+
- [Webpack](#webpack)
9+
- [Create React App](#create-react-app)
10+
- [Next.js](#nextjs)
11+
- [Gulp](#gulp)
12+
- [Grunt](#grunt)
13+
14+
15+
16+
## Node
17+
18+
Add [PostCSS Logical Float And Clear] to your project:
19+
20+
```bash
21+
npm install postcss @csstools/postcss-logical-float-and-clear --save-dev
22+
```
23+
24+
Use it as a [PostCSS] plugin:
25+
26+
```js
27+
// commonjs
28+
const postcss = require('postcss');
29+
const postcssLogicalFloatAndClear = require('@csstools/postcss-logical-float-and-clear');
30+
31+
postcss([
32+
postcssLogicalFloatAndClear(/* pluginOptions */)
33+
]).process(YOUR_CSS /*, processOptions */);
34+
```
35+
36+
```js
37+
// esm
38+
import postcss from 'postcss';
39+
import postcssLogicalFloatAndClear from '@csstools/postcss-logical-float-and-clear';
40+
41+
postcss([
42+
postcssLogicalFloatAndClear(/* pluginOptions */)
43+
]).process(YOUR_CSS /*, processOptions */);
44+
```
45+
46+
## PostCSS CLI
47+
48+
Add [PostCSS CLI] to your project:
49+
50+
```bash
51+
npm install postcss-cli @csstools/postcss-logical-float-and-clear --save-dev
52+
```
53+
54+
Use [PostCSS Logical Float And Clear] in your `postcss.config.js` configuration file:
55+
56+
```js
57+
const postcssLogicalFloatAndClear = require('@csstools/postcss-logical-float-and-clear');
58+
59+
module.exports = {
60+
plugins: [
61+
postcssLogicalFloatAndClear(/* pluginOptions */)
62+
]
63+
}
64+
```
65+
66+
## PostCSS Load Config
67+
68+
If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config).
69+
70+
```bash
71+
npm install @csstools/postcss-logical-float-and-clear --save-dev
72+
```
73+
74+
`package.json`:
75+
76+
```json
77+
{
78+
"postcss": {
79+
"plugins": {
80+
"@csstools/postcss-logical-float-and-clear": {}
81+
}
82+
}
83+
}
84+
```
85+
86+
`.postcssrc.json`:
87+
88+
```json
89+
{
90+
"plugins": {
91+
"@csstools/postcss-logical-float-and-clear": {}
92+
}
93+
}
94+
```
95+
96+
_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._
97+
98+
## Webpack
99+
100+
_Webpack version 5_
101+
102+
Add [PostCSS Loader] to your project:
103+
104+
```bash
105+
npm install postcss-loader @csstools/postcss-logical-float-and-clear --save-dev
106+
```
107+
108+
Use [PostCSS Logical Float And Clear] in your Webpack configuration:
109+
110+
```js
111+
module.exports = {
112+
module: {
113+
rules: [
114+
{
115+
test: /\.css$/i,
116+
use: [
117+
"style-loader",
118+
{
119+
loader: "css-loader",
120+
options: { importLoaders: 1 },
121+
},
122+
{
123+
loader: "postcss-loader",
124+
options: {
125+
postcssOptions: {
126+
plugins: [
127+
// Other plugins,
128+
[
129+
"@csstools/postcss-logical-float-and-clear",
130+
{
131+
// Options
132+
},
133+
],
134+
],
135+
},
136+
},
137+
},
138+
],
139+
},
140+
],
141+
},
142+
};
143+
```
144+
145+
## Create React App
146+
147+
Add [React App Rewired] and [React App Rewire PostCSS] to your project:
148+
149+
```bash
150+
npm install react-app-rewired react-app-rewire-postcss @csstools/postcss-logical-float-and-clear --save-dev
151+
```
152+
153+
Use [React App Rewire PostCSS] and [PostCSS Logical Float And Clear] in your
154+
`config-overrides.js` file:
155+
156+
```js
157+
const reactAppRewirePostcss = require('react-app-rewire-postcss');
158+
const postcssLogicalFloatAndClear = require('@csstools/postcss-logical-float-and-clear');
159+
160+
module.exports = config => reactAppRewirePostcss(config, {
161+
plugins: () => [
162+
postcssLogicalFloatAndClear(/* pluginOptions */)
163+
]
164+
});
165+
```
166+
167+
## Next.js
168+
169+
Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config)
170+
171+
```bash
172+
npm install @csstools/postcss-logical-float-and-clear --save-dev
173+
```
174+
175+
Use [PostCSS Logical Float And Clear] in your `postcss.config.json` file:
176+
177+
```json
178+
{
179+
"plugins": [
180+
"@csstools/postcss-logical-float-and-clear"
181+
]
182+
}
183+
```
184+
185+
```json5
186+
{
187+
"plugins": [
188+
[
189+
"@csstools/postcss-logical-float-and-clear",
190+
{
191+
// Optionally add plugin options
192+
}
193+
]
194+
]
195+
}
196+
```
197+
198+
## Gulp
199+
200+
Add [Gulp PostCSS] to your project:
201+
202+
```bash
203+
npm install gulp-postcss @csstools/postcss-logical-float-and-clear --save-dev
204+
```
205+
206+
Use [PostCSS Logical Float And Clear] in your Gulpfile:
207+
208+
```js
209+
const postcss = require('gulp-postcss');
210+
const postcssLogicalFloatAndClear = require('@csstools/postcss-logical-float-and-clear');
211+
212+
gulp.task('css', function () {
213+
var plugins = [
214+
postcssLogicalFloatAndClear(/* pluginOptions */)
215+
];
216+
217+
return gulp.src('./src/*.css')
218+
.pipe(postcss(plugins))
219+
.pipe(gulp.dest('.'));
220+
});
221+
```
222+
223+
## Grunt
224+
225+
Add [Grunt PostCSS] to your project:
226+
227+
```bash
228+
npm install grunt-postcss @csstools/postcss-logical-float-and-clear --save-dev
229+
```
230+
231+
Use [PostCSS Logical Float And Clear] in your Gruntfile:
232+
233+
```js
234+
const postcssLogicalFloatAndClear = require('@csstools/postcss-logical-float-and-clear');
235+
236+
grunt.loadNpmTasks('grunt-postcss');
237+
238+
grunt.initConfig({
239+
postcss: {
240+
options: {
241+
processors: [
242+
postcssLogicalFloatAndClear(/* pluginOptions */)
243+
]
244+
},
245+
dist: {
246+
src: '*.css'
247+
}
248+
}
249+
});
250+
```
251+
252+
[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
253+
[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
254+
[PostCSS]: https://github.com/postcss/postcss
255+
[PostCSS CLI]: https://github.com/postcss/postcss-cli
256+
[PostCSS Loader]: https://github.com/postcss/postcss-loader
257+
[PostCSS Logical Float And Clear]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-float-and-clear
258+
[React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss
259+
[React App Rewired]: https://github.com/timarney/react-app-rewired
260+
[Next.js]: https://nextjs.org

0 commit comments

Comments
 (0)