bit3725 / postcss-shopify-settings-variables Goto Github PK
View Code? Open in Web Editor NEWPostCSS plugin for variable of theme setting in shopify css file.
License: MIT License
PostCSS plugin for variable of theme setting in shopify css file.
License: MIT License
Getting error when trying to use with gulp. This is my task:
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var watch = require('gulp-watch');
var sass = require('gulp-sass');
var cssnano = require('cssnano');
var rename = require("gulp-rename");
var autoprefixer = require('autoprefixer');
var shopifySettings = require('postcss-shopify-settings-variables');
gulp.task('css', function () {
var processors = [
autoprefixer,
cssnano,
shopifySettings
];
return gulp.src('stylesheets/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(postcss(processors))
.pipe(rename({ suffix: '.min.css', extname: '.liquid' }))
.pipe(gulp.dest('./assets'));
});
gulp.task('watch', function() {
gulp.watch('stylesheets/**/*.scss', ['css']);
});
Error:
Message:
stylesheets\main.scss
Error: error reading values after
on line 2 of stdin
>> color: $(color-text);
-------^
[11:56:33] Finished 'css' after 26 ms
I'm trying to reduce the number of query strings placed on asset_urls generated by Shopify.
url(logo.png)
ends up generating a link like:
https://cdn.shopify.com/s/files/1/0027/7692/4218/t/2/assets/logo.png?1909108983063873987
I was hoping to use it like this:
url(logo.png | split: '?' | first)
so that I end up with:
https://cdn.shopify.com/s/files/1/0027/7692/4218/t/2/assets/logo.png
Alternatively some sort of way to use liquid directly without being converted to {{ settings.variable_name }}
Writing this:
font-family: $(type_header_font_family.family), $(type_header_font_family.fallback_families);
I would expect:
font-family: {{ settings.type_header_font_family.family }}, {{ settings.type_header_font_family.fallback_families }};
But get this:
font-family: {{ settings.type_header_font_family.family }}, $(type_header_font_family.fallback_families);
Only the first $(variable) is parsed.
Hello, I am using this module but after adding the scss variables and mixins aren't available.
Could you please take a look at that?
Thank you
Hi Xingkui,
Thanks a lot for the plugin!
Please update the plugin for the latest version of PostCSS.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.