![38% of CISOs Fear They’re Not Moving Fast Enough on AI](https://cdn.sanity.io/images/cgdhsj6q/production/faa0bc28df98f791e11263f8239b34207f84b86f-1024x1024.webp?w=400&fit=max&auto=format)
Security News
38% of CISOs Fear They’re Not Moving Fast Enough on AI
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
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,654,788 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
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
Research
Security News
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.