I have one main.less file that imports all the other less files of my project.
I would like to choose which less files should be requested by the browser according to a variable:
#direction: rtl;
.imports(#direction) when (#direction = rtl) {
#import "components/grid.import.less";
#import "components/grid-rtl.import.less";
}
.imports(#direction) {
#import "components/grid.import.less";
}
.imports(#direction);
This works when #direction at the beginning of the file is set to rtl but when it is set to ltr no imported file are requested by the browser.
Let me know how can I achieve importing less files using if/else statement.
Thanks
Related
Destructing the file and all import to the tailwindcss.css file. It failed when i import from other file instead write it in tailwind.css.
Use layer to apply custom font family and text-3xl (working in this way)
// tailwind.css
#tailwind base;
#layer base {
h1 {
#apply font-heading text-3xl;
}
}
#import from outside css file, it cannot work as usual. The font-heading is work, but font-size(text-3xl) is not working.
#tailwind base;
#layer base {
#import "./fonts/index.css";
}
// fonts/index.css
h1 {
#apply font-heading text-3xl
}
What i guess:
it load #import css first before load #tailwind base, default base will overwrite my h1 font-size to tailwindcss default.
Do any workaorund could avoid this behavior in tailwindcss? it look messy if all style in tailwindcss file.
https://stackoverflow.com/a/74943254/11710789
Also posted there ^^^
I found something that seems to work for me.
Basically postcss-import has its own layer system that we can use instead of tailwinds layer system.
#import 'tailwindcss/base' layer(Base);
#import './base/typography.css' layer(Base);
#import 'tailwindcss/components' layer(Components);
#import 'tailwindcss/utilities' layer(Utilities);
#layer Base {
#root {
#apply some-styles;
}
}
In postcss-import#usage it describes using layer() with #import
...
#import 'baz.css' layer(baz-layer);
...
I used uppercase layer names to avoid conflicting with tailwinds layers.
Install postcss-import as described in tailwinds article.
using-with-preprocessors#build-time-imports
Then add layer() to your imports like #import 'tailwindcss/base' layer(Base).
Also rename your #layers calls to something different than tailwinds layers.
For examples you can look any of the test fixtures with layer in the filename.
postcss-import/test/fixtures
UPDATE
The root cause of this is using Create React App.
Because it doesn't allow you to configure postcss.config.js.
So another solution would be to migrate to something else instead.
darekkay/create-react-app-to-vite#migration
tailwindcss.com/issues/1472
tailwindcss/guides/create-react-app
we highly recommend using Vite, Next.js, Remix, or Parcel instead of Create React App
I have a conditional statement which imports a file based on which type of menu has been set.
In this example, "nav-main-type" has been set to "dual," so the second "__type" should run and import "menu-main-mobile.less" inside a "not desktop" media query.
It does seem to import fine, but the file doesn't compile to CSS. When I comment out the import from the first "__type", everything works fine, so the problem seems to be having two imports of the same file...
It shouldn't be a problem because only one "__type" can ever run, so I'm not sure what the issue is.
Anyone have an idea?
Thanks!
.Menu-Main();
#Menu-Main: on;
.Menu-Main (#Menu-Main: on) when (#Menu-Main = on) {
#import 'menu-main.less';
#type: #nav-main-type;
.__type () when (#type = mobile) {
#import 'parts/menu-main-mobile.less';
}
.__type () when (#type = dual) {
#media #q-dt {#import 'menu-main-desktop.less';}
#media #q-ntdt {#import 'parts/menu-main-mobile.less';}
}
.__type();
}
I have several html templates I require to "compile" and convert to base64 format. By compile I mean injecting JS and CSS inline, and then converting it to base64 format.
I tried gulp-base64 but that only works for images in CSS. Any ideas?
Edit: I just got an idea that maybe I could use gulp-foreach to process each file individually and then use a Buffer to convert each file's content's to base64 format. I know I could do something like:
> console.log(new Buffer("Hello World").toString('base64'));
SGVsbG8gV29ybGQ=
> console.log(new Buffer("SGVsbG8gV29ybGQ=", 'base64').toString('ascii'))
Hello World
But I'm not really sure how to do it since I don't understand quite well how file streams (I think it's called vinyl) work yet in gulp. Any help would be greatly appreciated.
I found your question while looking for a solution to the same problem. Your suggestion to use gulp-foreach led me to a solution, although I didn't use that package:
// import the appropriate plugins
//
const each = require('gulp-each');
const htmlToJs = require('gulp-html-to-js');
// I'm compiling a couple of small PDF files
//
gulp.task('compile:pdf', () =>
gulp.src('./files/**/*.pdf')
// use gulp-each to iterate over the files & convert the
// files to a base64-encoded data URL
//
.pipe(each((content, file, callback) => {
const output = `data:application/pdf;base64,${new Buffer(content).toString('base64')}`;
// the first arg in this callback is the error; the second
// is the content to pass along via the stream
//
callback(null, output)
}))
// use gulp-html-to-js to convert the data URL to a JS module
// which can be imported
//
.pipe(htmlToJs())
// and set the destination...
//
.pipe(gulp.dest('./client/modules/helpers/files'))
);
The end result is a JS file with contents that look like this:
'use strict';
module.exports = 'data:application/pdf;base64,... base64 encoded string...';
I thought within Less you could do imports at the rule level?
e.g. given two Less files with identical variable names but different values
#import (reference) 'file1.less'
.myrule1
{
#import (reference) 'file2.less'
// use varA from file2
}
.myrule2
{
// use varA from file1
}
Is this not allowed, it doesn't seem to be in the latest Less version
Failing that can you do this
#import (reference) 'file2.less'
.myrule1
{
// use varA from file2
}
#import (reference) 'file1.less'
.myrule2
{
// use varA from file1
}
#import (reference) 'file2.less'
.myrule3
{
// use varA from file2 again
}
What am I trying to accomplish here? Kendo UI has multiple themes with colours for grids, headers, etc. Within my less file I want to make something like this
.BlackBasedThemes
{
#import one of the black themes
.MyDiv
{
background-color: #tooltipBackgroundColor;
}
// whole bunch of other stuff
}
.NonBlackBasedThemes
{
#import one of the not black themes
.MyDiv
{
background-color: #tooltipBackgroundColor;
}
// whole bunch of other stuff
}
And then within my code the body gets the NonBlackBasedThemes or NonBlackBasedThemes class. I can just add a MyDiv, etc class to a div and get the theme appropriate colour.
I thought within Less you could do imports at the rule level?
e.g. given two Less files with identical variable names but different values
When using lessc 2.4.0 (Less Compiler) [JavaScript] i can do:
black.less:
#tooltipBackgroundColor: black;
white.less:
#tooltipBackgroundColor: white;
Then the following code:
.BlackBasedThemes
{
#import "black";
.MyDiv
{
background-color: #tooltipBackgroundColor;
}
// whole bunch of other stuff
}
.NonBlackBasedThemes
{
#import "white";
.MyDiv
{
background-color: #tooltipBackgroundColor;
}
// whole bunch of other stuff
}
compiles into:
.BlackBasedThemes .MyDiv {
background-color: black;
}
.NonBlackBasedThemes .MyDiv {
background-color: white;
}
Indeed you do not need the reference keyword (but it should also work when using it). It is not easy to see what your problem is.
Notice that you can also import one of the files into the global scope:
#import "black"; // sets `#tooltipBackgroundColor` for the global scope
.BlackBasedThemes
{
.MyDiv
{
background-color: #tooltipBackgroundColor; // uses `#tooltipBackgroundColor` from the global scope
}
// whole bunch of other stuff
}
.NonBlackBasedThemes
{
#import "white";// sets `#tooltipBackgroundColor` for only the local scope
.MyDiv
{
background-color: #tooltipBackgroundColor;// uses `#tooltipBackgroundColor` from the local scope
}
// whole bunch of other stuff
}
I'm trying to use Font-awesome in the same way I do with Bootstrap, in accordance with the semantic principles of web design (not putting billions of non-semantic classes in my HTML tags), using LESS.
It seems that it is impossible : the icon definitions are like that :
.#{fa-css-prefix}-home:before { content: #fa-var-home; }
This isn't a mixin definition but a classical CSS rule build with LESS variables.
So, i'm unable to do this kind of declaration :
.meaning-class-name {
.fa-home;
}
Lessc complain that .fa-home is undefined.
Is it a way to avoid to rot my HTML code ? Is there a way to attribute a class to an other class with less ?
Thanks !
I found that the better solution were to modify font-awesome/less/icons.less and rewrite the declarations according this pattern :
.#{fa-css-prefix}-home { &:before { content: #fa-var-home; } }
It is similar to the glyphicons.less used by Bootstrap.
PS : In Eclipse, this can be done quickly with the find/replace tool :
Find :
\.#\{fa-css-prefix\}-([-0-9a-zA-Z]+):before \{ content: #([-0-9a-zA-Z]+); \}
Replace :
.#{fa-css-prefix}-$1 { &:before { content: #$2; } }
and
Find :
\.#\{fa-css-prefix\}-([-0-9a-zA-Z]+):before,
Replace :
.#{fa-css-prefix}-$1,