I'm having an issue converting my postcss conditionals to css. I'm using vite to process the files and output a css file. Everything seems to be working up until the point that I try to convert the conditionals (see below).
Here is my vite file:
import { defineConfig } from 'vite';
import postcss from './postcss.config.js';
import dns from 'dns';
dns.setDefaultResultOrder('verbatim');
export default defineConfig({
root: 'src',
build: {
manifest: 'vite-manifest.json',
rollupOptions: {
input: {
main: './src/scripts/main.js',
},
},
outDir: '../dist',
emptyOutDir: true,
},
css: {
postcss,
devSourcemap: true,
},
server: {
hmr: {
protocol: 'ws',
},
},
});
Here is a simplified version of my postcss file:
import atImport from 'postcss-import';
import atMixins from 'postcss-mixins';
import atIf from 'postcss-conditionals';
import nested from 'postcss-nested';
export default {
plugins: [
atImport,
atMixins,
atIf,
nested,
],
};
The mixin I'm trying to parse:
#define-mixin center-x $position, $distance {
position: absolute;
left: 50%;
transform: translateX(-50%);
#if $position == top {
top: $distance;
bottom: auto;
} #else {
top: auto;
bottom: $distance;
}
}
This gives me this error: [vite:css] postcss-conditionals: src\styles\base\mixins.css:6:5: Failed to parse expression file: src/styles/main.css error during build: CssSyntaxError: postcss-conditionals: src\styles\base\mixins.css:10:5: Failed to parse expression
Furthermore replacing the if else inside the mixin with:
#if 3 < 5 {
background: green;
}
doesn't give me that error.
Maybe the mixin variables aren't resolved yet before the conditionals can use them but I don't know how to get those resolved first. Really hope someone knows how to fix this.
Gave this another try today, still can't fix it so I replaced the following plugins:
postcss-for
postcss-each
postcss-each-variables
postcss-mixins
postcss-conditionals
for postcss-advanced-variables where combining conditionals and mixins works out of the box, the downside is that I have to use SASS syntax instead of postcss syntax but that's ok I guess.
Related
My eslint .eslintrc.js, now properly in the src folder, is the following:
module.exports = {
env: {
browser: true,
commonjs: true,
es2021: true
},
extends: [
'plugin:vue/vue3-recommended',
'standard',
'prettier'
],
parserOptions: {
ecmaVersion: 2020,
parser: '#typescript-eslint/parser',
'ecmaFeatures': {
'jsx': true
}
},
plugins: [
'vue',
'#typescript-eslint'
],
rules: {
'import/no-unresolved': 'error'
},
settings: {
'import/parsers': {
'#typescript-eslint/parser': ['.ts', '.tsx']
},
'import/resolver': {
'typescript': {
'alwaysTryTypes': true,
}
}
}
}
I'm attempting to use eslint-import-resolver-typescript, but the documentation is a bit opaque.
I currently get errors on lines where a externally defined type is used (StepData in this example):
setup() {
const data = inject("StepData") as StepData;
return {
data,
};
},
The answer was the following. In types.d.ts (or other file if you want to have different collections of your custom types):
export interface MyType {
positioner: DOMRect;
content: DOMRect;
arrow: DOMRect;
window: DOMRect;
}
export interface SomeOtherType {
.. and so on
Then in the .vue files, import the types I need for the component:
import type { MyType, SomeOtherType } from "../types/types";
Before I was not using the export keyword and the types just worked without being imported. They have to be imported like this if you use export. It's kind of amazing how you are just expected to know this, the documentation for Typescript or Vue is sorely lacking in examples.
Hello I am using Gulp for compiling and Tailwind as framework.
I would like to use Purgecss, it is working but it ignores my whitelist, some help?
Here the code example:
function css() {
const tailwindcss = require('tailwindcss');
return gulp.src('./src/assets/css/main.css')
.pipe(postcss([
require('precss'),
tailwindcss('./tailwind.config.js'),
require('autoprefixer')
]))
.pipe(purgecss({
content: ['./public/*.html'],
whitelist: ['px-4'],
whitelistPatterns: [/^bg-/, /^text-/],
}))
.pipe(gulp.dest('./public/assets/css/'))
.pipe(browserSync.stream());
}
Setting names have been renamed, use new names (safelist) and approach
purgecss safelist
const purgecss = new Purgecss({
content: [], // content
css: [], // css
safelist: {
standard: [/red$/],
deep: [/blue$/],
greedy: [/yellow$/]
}
})
Glad if it helped you ;)
I am looking to extend the margin style and add the variant ['even'] to it.
I can add the variant like so:
module.exports = {
variants: {
margin: ['even'],
},
theme: {
...
}
}
It is my understanding that the above will override the margin styles default variants.
The documentation here shows the ability to extend a variant as to not remove all the defaults when adding the new variant (discussed more here).
I have tried this and not been successful:
module.exports = {
variants: {
extend: {
margin: ['even'],
},
},
theme: {
...
}
}
I must be doing something wrong or have a typo?
The reason I was unable to do this was because of my tailwindcss version being below 2.0. As #Jon suggested. Thanks! 2.0 release notes.
I have the following my-file.css:
.a [data-smth] { ... }
.b .c.d { ... }
.e { ... }
#f { ... }
and I want to do something like the following (pseudocode) in Node.js:
let css = readFile('my-file.css')
let prefixedCss = prefixClasses(css, 'prfx-')
writeFile(prefixedCss, 'my-prefixed-file.css')
to end up with my-prefixed-file.css:
.prfx-a [data-smth] { ... }
.prfx-b .prfx-c.prfx-d { ... }
.prfx-e { ... }
#f { ... }
I have found these npm modules:
https://github.com/vic/prefix-css (hasn't been updated in years and has issues)
https://pegjs.org/ (requires lots of low-level AST configuration)
But I was wondering whether there are better/safer solutions that have already been tested/become standard practice ?
NOTE: The above file contents was just an example. I'm looking for a way to achieve this for files whose content is completely unknown to me. So I'm looking for a "universal" solution.
Any help would be most welcome & thank you in advance! :-)
You might want to check https://github.com/marceloucker/postcss-prefixer#postcss-prefixer.
postcss-prefixer
PostCSS plugin to add a prefix to all css selectors classes and ids.
Usage
With PostCSS cli:
Install postcss-cli and postcss-prefixer on your project directory:
npm install postcss-cli postcss-prefixer --save-dev
and at your package.json
"scripts": {
"postcss": "postcss input.css -u postcss-prefixer -o output.css"
}
Others
postcss([ require('postcss-prefixer')({ /* options */ }) ])
Options
prefix
Type: `string`<br>
Default: none
String to be used as prefix
ignore
Type: `array`<br>
Default: `[]`
Array of selectors to be ignored by the plugin, accepts string and regex.
Example
Example of usage with results generated by the plugin.
Code
const postcss = require('postcss');
const prefixer = require('postcss-prefixer');
const input = fs.readFileSync('path/to/file.css', 'utf-8');
const output = postcss([
prefixer({
prefix: 'prefix-'
ignore: [ /selector-/, '.ignore', '#ignore' ]
})
]).process(input);
Input:
#selector-one .example {
/* content */
}
.selector-two .example2 {
/* content */
}
#ignore .ignore {
/* content */
}
#ignore .other {
/* content */
}
Output:
#selector-one .prefix-example {
/* content */
}
.selector-two .prefix-example2 {
/* content */
}
#ignore .ignore {
/* content */
}
#ignore .prefix-other {
/* content */
}
Credits
Plugin based on postcss-class-prefix create by thompsongl.
I'm trying to use Pure.css in my application. I've installed it using npm and have my brunch-config.js configured like so:
stylesheets: {
joinTo: {
'app.css': /^app/,
'vendor.css': /^(?!app)/
}
}
I expect vendor.css to be generated at this point, but it's not. However, if in my JavaScript, I say require('purecss');, then I get vendor.css generated...but I also get the JavaScript error Cannot find module 'purecss' from '<filename>'. I've also tried various permutations of #import 'purecss' in my CSS without success.
How does one consume vendor CSS from npm modules?
You should use npm config section, for example when I wanted to include node_modules/bootstrap/dist/css/bootstrap.css I had to put the following in my brunch-config.js:
npm: {
styles: {
bootstrap: ['dist/css/bootstrap.css']
}
}
That, combined with your section in files makes it write bootstrap's css into vendor.css.
Full brunch-config.js that works for me:
module.exports = {
files: {
javascripts: {
joinTo: {
'app.js': /^app/,
'vendor.js': /^(?!app)/
}
},
stylesheets: {
joinTo: {
'app.css': /^app/,
'vendor.css': /^(?!app)/
}
}
},
plugins: {
babel: { presets: ['es2015'] }
},
npm: {
styles: {
bootstrap: ['dist/css/bootstrap.css']
}
}
};