Security News
pnpm 10.0.0 Blocks Lifecycle Scripts by Default
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
postcss-logical
Advanced tools
The postcss-logical npm package is a PostCSS plugin that allows developers to use logical, rather than physical, property mappings in their CSS. This is particularly useful for writing styles that adapt to different writing modes, such as left-to-right (LTR) and right-to-left (RTL) languages. It transforms logical properties and values into their equivalent directional syntax.
Logical Properties Conversion
Converts logical properties like 'margin-inline-start' to 'margin-left' or 'margin-right' depending on the direction of the text. This is useful for supporting both LTR and RTL layouts with the same CSS.
/* Input CSS */
:root {
margin-inline-start: 10px;
}
/* Output CSS */
:root {
margin-left: 10px; /* in LTR */
margin-right: 10px; /* in RTL */
}
Logical Values Conversion
Handles logical values such as 'border-inline' which are transformed into 'border-left' or 'border-right'. This feature simplifies the development of cross-directional styles.
/* Input CSS */
:root {
border-inline: 1px solid black;
}
/* Output CSS */
:root {
border-left: 1px solid black; /* in LTR */
border-right: 1px solid black; /* in RTL */
}
This package also facilitates writing directional CSS by providing a way to define styles for different directions using :dir() pseudo-class. It is similar to postcss-logical but focuses more on pseudo-classes rather than property conversions.
RTL CSS is a framework for transforming LTR CSS to RTL. It's more comprehensive than postcss-logical as it includes a wider range of transformations and configurations, making it suitable for complex RTL adaptations.
npm install postcss-logical --save-dev
PostCSS Logical Properties and Values lets you use logical, rather than physical, direction and dimension mappings in CSS, following the CSS Logical Properties and Values specification.
.element {
block-size: 100px;
max-inline-size: 400px;
inline-size: 200px;
padding-block: 10px 20px;
margin-inline: auto;
border-block-width: 2px;
border-block-style: solid;
}
/* becomes */
.element {
height: 100px;
max-width: 400px;
width: 200px;
padding-top: 10px;
padding-bottom: 20px;
margin-left: auto;
margin-right: auto;
border-top-width: 2px;
border-bottom-width: 2px;
border-top-style: solid;
border-bottom-style: solid;
}
Add PostCSS Logical Properties and Values to your project:
npm install postcss postcss-logical --save-dev
Use it as a PostCSS plugin:
const postcss = require('postcss');
const postcssLogical = require('postcss-logical');
postcss([
postcssLogical(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
The blockDirection
and inlineDirection
options allow you to specify the direction of the block and inline axes. The default values are top-to-bottom
and left-to-right
respectively, which would match any latin language.
You should tweak these values so that they are specific to your language and writing mode.
postcssLogical({
blockDirection: 'right-to-left',
inlineDirection: 'top-to-bottom'
})
.element {
block-size: 100px;
max-inline-size: 400px;
inline-size: 200px;
padding-block: 10px 20px;
margin-inline: auto;
border-block-width: 2px;
border-block-style: solid;
}
/* becomes */
.element {
width: 100px;
max-height: 400px;
height: 200px;
padding-right: 10px;
padding-left: 20px;
margin-top: auto;
margin-bottom: auto;
border-right-width: 2px;
border-left-width: 2px;
border-right-style: solid;
border-left-style: solid;
}
Each direction must be one of the following:
top-to-bottom
bottom-to-top
left-to-right
right-to-left
You can't mix two vertical directions or two horizontal directions so for example top-to-bottom
and right-to-left
are valid, but top-to-bottom
and bottom-to-top
are not.
Please do note that text-align
won't be transformed if inlineDirection
becomes vertical.
FAQs
Use logical properties and values in CSS
The npm package postcss-logical receives a total of 3,981,521 weekly downloads. As such, postcss-logical popularity was classified as popular.
We found that postcss-logical demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
Product
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.
Research
Security News
Socket researchers have discovered multiple malicious npm packages targeting Solana private keys, abusing Gmail to exfiltrate the data and drain Solana wallets.