hello! I'm wondering if there's a way to have postcss read image urls as js modules which export paths, and resolve to those paths.
i run my images through file-loader, which makes the images like this:
// my-image.svg
module.exports = __webpack_public_path__ + "img/my-image.818a79a9.svg";which clearly isn't an actual image.
the css loaders i have right now can't resolve this, so I'm hoping postcss can help me transform url(my-image.svg) into url(img/my-image.818a79a9.svg
1 reply
No matching version found for postcss-color-hex-alpha@^8.0.1.
5 replies
Hey forum, I've just found you guy's through google.
I want to pose some questions but my description of my position may be off putting to some.
I've just spent six years in jail and a few years before my incarceration I was using Lamp, PHP and JavaScript including Jquery.
I was attacked, defended myself and the other guy came off worse (he's still alive). Anyhow my point being, i'm not a criminal. However, I've come out after six years and done one year out here just getting re-orientated, now I see multiple frameworks, node, ember, angular, rails etc; What's going on? How do I take my experience of javascript, jQuery, php , sql and move on? What framework is the easiest for me to migrate to? What is Angular, ember, etc are they script libraries like JQuery? Where do I start, what framework should I use and what's the easiest way for me to get up to scratch on web application development taking my existing skills?
1 reply
Hello guys! Could you help me with WARN in all files where using <style lang="postcss">
WARN in ./components/Cabinet/CabinetSidebar/CabinetSidebarMenu.vue?vue&type=style&index=0&lang=postcss& friendly-errors 18:24:59
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): friendly-errors 18:24:59
Warning
(99:2) Nested CSS was detected, but CSS nesting has not been configured correctly.
Please enable a CSS nesting plugin *before* Tailwind in your configuration.
See how here: https://tailwindcss.com/docs/using-with-preprocessors#nestingfile nuxt.config.js
import 'reflect-metadata'
import { join } from 'path'
const isProd = process.env.NODE_ENV === 'production'
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: 'zoo',
htmlAttrs: {},
meta: [
{ charset: 'utf-8' },
{
name: 'viewport',
content:
'width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no',
},
{ hid: 'description', name: 'description', content: 'Zoo' },
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: ['~assets/css/styles.css'],
loading: false,
// pageTransition: {
// name: 't-fade',
// mode: 'out-in',
// },
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
{ src: '@/plugins/reflect-metadata', mode: 'client' },
{ src: '@/plugins/app-axios' },
{ src: '@/plugins/app-init' },
{ src: '@/plugins/app-helpers' },
{ src: '@/plugins/app-url' },
{
src: '@/plugins/vue-range-slider',
},
{
src: '@/plugins/vue-select',
},
{
src: '@/plugins/vue-date-filter',
},
{
src: '@/plugins/vue-awesome-swiper',
mode: 'client',
},
{
src: '@/plugins/vue-paginate',
mode: 'client',
},
{
src: '@/plugins/vue-scrollbar',
},
{
src: '@/plugins/vue-click-outside',
mode: 'client',
},
{
src: '@/plugins/vue-sticky',
mode: 'client',
},
{
src: '@/plugins/vue-mask',
mode: 'client',
},
],
// Auto import components: https://go.nuxtjs.dev/config-components
components: {
dirs: ['~/components', '~/components/Base'],
},
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/typescript
'@nuxt/typescript-build',
'nuxt-typed-vuex',
// https://go.nuxtjs.dev/tailwindcss
'@nuxtjs/router-extras',
'@nuxtjs/tailwindcss',
'@nuxtjs/composition-api/module',
// '@nuxtjs/google-analytics'
],
tailwindcss: {
configPath: 'tailwind.config.js',
cssPath: '~/assets/css/tailwind.css',
// jit: true,
exposeConfig: true,
config: {},
},
modules: [
// 'nuxt-ssr-cache',
// 'nuxt-lazy-load',
'vue-scrollto/nuxt',
'@nuxtjs/axios',
'nuxt-i18n',
'@nuxtjs/svg',
'cookie-universal-nuxt',
'@nuxtjs/toast',
'@nuxtjs/google-analytics'
],
googleAnalytics: {
id: 'UA-22127715-1'
},
cache: {
store: {
type: 'memory',
// maximum number of pages to store in memory
// if limit is reached, least recently used page
// is removed.
max: 100,
// number of seconds to store this page in cache
ttl: 60,
},
},
i18n: {
detectBrowserLanguage: {
useCookie: true,
cookieKey: 'i18n_redirected',
onlyOnRoot: true,
},
locales: [
{
iso: 'ru-RU',
code: 'ru',
file: 'ru.ts',
},
{
iso: 'ua-UA',
code: 'ua',
file: 'ua.ts',
},
],
lazy: true,
langDir: 'lang/',
defaultLocale: 'ru',
seo: true,
},
router: {
trailingSlash: true,
},
// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {},
server: { host: '0.0.0.0' },
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
postcss: {
plugins: {
'postcss-import': true,
'postcss-nested': {},
},
module.exports = {
plugins: [
require("postcss-import"),
require("postcss-flexbugs-fixes"),
require("postcss-preset-env")({
autoprefixer: {
flexbox: "no-2009"
},
stage: 3
}),
require("tailwindcss")("./tailwind.config.js"),
require("autoprefixer")
]
};
/* eslint-disable */
function declConvert(decl, postcss) {
if (decl.value.trim().startsWith('@theme')) {
decl.replaceWith(postcss.parse(`${decl.prop}: /*${decl.value}*/;`));
}
}
module.exports = (opts = {}) => {
return {
postcssPlugin: 'auriserve-theme',
prepare() {
console.log('prepare');
return {
AtRule(atRule, postcss) {
console.log('atrule');
if (
atRule.name === 'if' ||
atRule.name === 'elseif' ||
atRule.name === 'else'
) {
const next = atRule.next();
const atEnd =
next.type != 'atrule' || (next.name !== 'elseif' && next.name !== 'else');
atRule.walkDecls((decl) => declConvert(decl, postcss));
const toInsert = atRule.nodes;
if (atEnd) toInsert.push(postcss.parse('/*@endif*/'));
for (const node of toInsert.reverse()) atRule.after(node);
atRule.replaceWith(postcss.parse(`/*@${atRule.name}${atRule.params}*/`));
}
},
Declaration(decl, postcss) {
declConvert(decl, postcss);
},
};
},
};
};
module.exports.postcss = true;AtRulepart :/
1 reply
3 replies
7 replies
Trying to figure out how to get webpack to work with both less-loader and postcss-loader...
module: {
rules: [
{
test: /\.(css|less)$/i,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
url: false
}
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
config: join(__dirname, 'postcss.front.js')
}
}
},
'less-loader'
]
},
]
}Using this set up less complains about any @apply at-rules.
3 replies
Hey all, I just had a question regarding sourcemaps. My sourcemaps are all working properly inline until I use the postcss-import extension and pull in a file from a package such as
@import "dropzone/dist/dropzone";Since dropzone has a sourceMappingURL at the end of it's CSS, this causes postcss to generate an external map file in my output directory. Without this line all of the sourcemaps generate inline. Is there anything I can do to force the generation of inline sourcemaps?
6 replies
Question: I am trying to get sourcemaps working properly within my app, the problem is the path that the browser needs to use to access them is incorrect, I need to prepend some path information. Is that at all possible with the postcss-cli?
4 replies
Hi y'all :wave: - I am working on the plugin for layers with @oluoluoxenfree and I had a question regarding when the plugin needs to do multiple walks of the rules. Specifically, in the first walk, I insert some nodes but when I do a second walk I do not see the node has been inserted. I am using postcss-tape tests and the AST explorer to see that the insertion is actually working but it doesn't seem to be modifying the root and the changes are not carried over for the subsequent walks. Any advice on how to tackle this?
For more context on what I'm trying to do or to see the draft PR: https://github.com/csstools/postcss-plugins/pull/244#issuecomment-1072470718
2 replies
Hey everyone, I'm trying to write my very first plugin, so I'm still experimenting and trying to figure out how postcss works. How can I type each function inside the return? (like Root, Declaration, ...)
At the end of the generated file from template there's
/**
* @type {import('postcss').PluginCreator}
*/What would be the type for Declaration, for instace?
2 replies
Hello everyone! Asking here because I found nothing on stack/github for days. Summary: Postcss is working when I use postcss-cli, but not when I run it as a flask-assets plugin.
So, if I run postcss static/src/main.css -o static/dist/main.css my CSS is correctly processed
But if I run my flask app, that uses postcss as a filter (css = Bundle("src/main.css", output="dist/main.css", filters="postcss")) my CSS is not correctly processed. I used this tutorial as reference: https://testdriven.io/blog/flask-htmx-tailwind/
Thank you in advance!
Hey Guys,
I've just join to this chat, so I'm not sure if here is the right place to get help...
I am facing the following problem when trying to import a css file from node_modules:
C:/myapp/node_modules/swiper/swiper-bundle.min.css
Error: No PostCSS Config found in: C:myapp\node_modules\swiper
my postcss.config.js is:
module.exports = {
options: {
ident: 'postcss',
import: true,
},
plugins: {
'postcss-flexbugs-fixes': {},
'postcss-normalize': {},
'postcss-preset-env':
{
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
},
},
}It's located like:
|-config
|---webpack.config.js
|
|-postcss.config.js
I've tried to inform the postcss.config.js path on webpack like:
{
loader: require.resolve('postcss-loader'),
options: {
path:"../postcss.config.js"
}
}But when I do that, I receive a console message saying:You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.
Does anyone have a clue? Thank you guys
2 replies
I don't know well about postcss
1 reply
Hey, I've made a private plugin according to this: https://github.com/postcss/postcss/blob/main/docs/writing-a-plugin.md
But when I try and load it in the postcss.config.js I get the following error:
Error: Loading PostCSS Plugin failed: Cannot find module 'postcss-wide-gamut-color'
Is there something else I need to do to use it?
7 replies
Unknown error from PostCSS plugin. Your current PostCSS version is 8.4.12, but cssnano uses 7.0.35. Perhaps this is the source of the error below.
node:internal/modules/cjs/loader:933
const err = new Error(message);
^
Error: Cannot find module 'caniuse-lite/dist/unpacker/feature'