7 replies
Hi I'm using the postcss-loader https://github.com/webpack-contrib/postcss-loader. My hope it compile out css custom props so my app will work on IE11. So far no luck. What is strange is despite having configured a plugin when I build webpack outputs that no plugins have been configured for postcss, but I feel I have
I have a configuration like :
{
test: /\.css$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'postcss-preset-env',
{
stage: 4,
custom-properties: false
},
],
],
},
},
},
],
},Any help would be appreciate.
3 replies
7 replies
Hey there.. I want to "turn" Tailwind's class naming scheme from this
<h3 class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">Into something more succinct that I came up with:
<h3 class="mt2 t(z7 h8 w7 t2 ca9) s:t(z8 h10)">(as you see I'll also need to implement a class nesting thing, to nest related classes inside parenthesis)
Is PostCSS the right tool for this job? Should I create a plugin? Can anyone suggest a good PostCSS guide for this type of thing?
5 replies
https://stackoverflow.com/questions/64279693/how-to-replace-walkdecls-with-a-regex-with-postcss8-api-declaration
3 replies
Hi I'm trying to get basic postcss to work and failing epicly. Steps are:
- npm install postcss-preset-env --save-dev --global
- npx babel /my/dir/test.css --plugins=/usr/lib/node_modules/postcss-preset-env
and I get the following:
Error: [BABEL] /my/dir/test.css: Plugin/Preset did not return an object.
at /usr/lib/node_modules/@babel/core/lib/config/full.js:210:11
....
Can anyone possibly help??
5 replies
Hi guys, I'm looking to convert a custom function into a plugin because I need to create a full ruleset instead of transforming a value. I realize creating rulesets from scratch isn't a normal use case, but I'm trying to create custom color palettes based on vars defined in webpack. Pseudo function:
function createPalette(varName, hue, saturation, light) {
return `--${varName}: hsl(${hue}, ${saturation}, ${light});`
};I plan on populating :root{} with the output. I was wondering if anyone can point me in the right direction? I'm not totally sure how to get started.
3 replies
tokenize() function at the top level like it exports parse()? I am asking because I am porting postcss-less which requires postcss/lib/tokenize in a few places.
3 replies
I'm in the process of updating a bunch of package.json dependencies and now after I build the following CSS:
.events-paragraph {
&__events {
@mixin component-margin-bottom;
display: flex;
flex-wrap: wrap;
margin: calc(-1 * var(--space-100));
}
}
.two-columns-section__column {
.events-teaser {
@media (--tablet-up) {
width: 50%;
}
}
}It ends up as:
.events-paragraph__events {
margin-bottom: 40px;
margin-bottom: var(--space-500);
@media (min-width: 1024px) {
margin-bottom: 80px;
margin-bottom: var(--space-1000);
}
display: flex;
flex-wrap: wrap;
margin: calc(-1 * 8px);
margin: calc(-1 * var(--space-100));
}
@media (min-width: 768px) {
.two-columns-section__column .events-teaser {
width: 50%
}
}Whereas before, it would be:
.events-paragraph__events {
margin-bottom: 40px;
margin-bottom: var(--space-500);
display: flex;
flex-wrap: wrap;
margin: calc(-1 * 8px);
margin: calc(-1 * var(--space-100));
}
@media (min-width: 1024px) {
.events-paragraph__events {
margin-bottom:80px;
margin-bottom: var(--space-1000);
}
}
@media (min-width: 768px) {
.two-columns-section__column .events-teaser {
width:50%
}
}My postcss config file (which I did not change):
module.exports = {
plugins: {
'postcss-easy-import': {},
'postcss-preset-env': {
stage: 0,
},
'postcss-url': {
url: 'inline',
},
'postcss-mixins': {},
'postcss-nested': {},
},
module: true,
url: false,
};But various postcss modules were upgraded:
- "postcss-easy-import": "^3.0.0",
+ "postcss-easy-import": "https://github.com/univers-agency/postcss-easy-import",
- "postcss-loader": "^3.0.0",
+ "postcss-loader": "^4.0.3",
- "postcss-mixins": "^6.2.1",
+ "postcss-mixins": "^7.0.1",
- "postcss-nested": "^4.1.2",
+ "postcss-nested": "^5.0.1",
- "postcss-preset-env": "^6.6.0",
+ "postcss-preset-env": "^6.7.0",
+ "postcss": "^8.1.1",Oh mmm maybe I should not have v8 of postcss?
17 replies
prepare() to pass the cache to the various Declaration function invocations, like this ludofischer/cssnano@60d8d6a ?
2 replies
Hi here.
Anyone knows if there is a plugin that would detect if there are properties that are often used together (exemple: display: flex; flex-direction: column; justify-content: center;) and would take all selectors that uses those, and create only one declaration with it (like a @extend with placeholders but automatic)?
2 replies
min-width: 0 rule. I used Rebass in one project, where is this rule by default and it worked great. Based on this experience, I decided to create postcss-flexbox-reset and postcss-grid-reset. I am going to use these plugins in my future projects and I think it could be useful for others too. What do you think about these plugins? @ai
9 replies
Hi, I am trying to use TypeScript with the PostCSS 8 API and coding guidelines require explicit type annotations in variable declarations. What type should I declare assign toresult in
let result = postcss(plugins).process(...);?
It looks like it should be LazyResult but the main postcss package does not export it.
2 replies
13 replies
Hey! Just curious if there are TypeScript types for the postcss config object/function returning object (postcss.config.js/.postcssrc.js)
I can piece it together (I think) from types I found in postcss and @types/postcss-load-config but was wondering if there was a single canonical type anywhere
1 reply
I am trying to use postcss-mixins, but I got the following errors when I try to run postcss:
Undefined variable $class
> 1 | @define-mixin validation $class $color {
| ^
2 | border: 2px solid $color
3 | }This is my css file:
@define-mixin validation $class $color {
border: 2px solid $color
}
.invalid{
@mixin validation invalid #be132d;
}And this is my postcss.config.js
module.exports = {
plugins: [
require('postcss-mixins'),
require('postcss-simple-vars'),
require('postcss-nested'),
require('tailwindcss')
]
}
2 replies
postcss.parse) into a serializeable format and also back again? For example input.fromOffset sets a function on an object and causes v8.serialize to fail. (For comparison, the Babel AST is just a plain JSON object without prototypes/functions.)
3 replies