i'll try to be quick in my question !
My problem is that i use the svg icons system as the tweentyseventeen default theme ! but when i use echo get_svg() function. phpcs give me a warning that all output need to be escaped with escaping function ?
any help how to acheive that with my svgs ?
You can either escape using functions like wp_kses_post() or simillar that won't destroy the markup of the SVG code. But if you don't actually want to escape anything (despite is not recommended), you can use the whitelisting flags.
Example of use on your case:
echo get_svg(); // WPCS: XSS Ok.
you can escape an svg via wp_kses like so:
$string = 'your svg code ala <svg xmlns="http://www.w3.org/2000/svg" width="..."><path d="..."/></svg>'
echo wp_kses($string, [
'svg' => [
'xmlns' => [],
'width' => [],
'height'=> [],
'viewbox' => [] //lowercase not camelcase!
],
'path' => [
'd' => []
]
]);
basically you need to add your allowed HTML elements like svg, path, {...} as an array and inside each you need to pass the allowed attributes (also as arrays). in case of svg this could be xmlns, width, height, {...} and in case of path this could be d, style, {...}. maybe you also need to add circle or whatever other svg elements, that come to mind..
Related
when passing my color as props like this <List text="something" color="#84AB86" /> and using in the code className={'bg-[${color}] '} it does not render properly.
when looking at chrome dev tools color are added correctly like this bg-[#84AB86]
while putting the color manually without taking it from props, it does work correctly
after more testing it seems not possible either to do it like this
const color = "#84CC79"
className={`bg-[${color}]`}
any idea why
To use dynamic classes with JIT tailwind you either need to use safelist config key or create stub file where you list all your dynamic classes that you will use.
Config example:
module.exports = {
content: [
'./pages/**/*.{html,js}',
'./components/**/*.{html,js}',
],
safelist: [
'bg-red-500',
'text-3xl',
'lg:text-4xl',
]
// ...
}
Or make safelist.txt in your src folder, then add classes there just like so:
bg-[#84AB86]
bg-[#fffeee]
// etc..
And don't forget to include this safelist.txt file to your config content so tailwind could watch it.
Explanation from tailwind docs
If you are not using JIT, then you can use safelist option for PurgeCSS:
// tailwind.config.js
module.exports = {
purge: {
// Configure as you need
content: ['./src/**/*.html'],
// These options are passed through directly to PurgeCSS
options: {
// List your classes here, or you can even use RegExp
safelist: ['bg-red-500', 'px-4', /^text-/],
blocklist: [/^debug-/],
keyframes: true,
fontFace: true,
},
},
// ...
}
From the Tailwindcss documentation
Dynamic values Note that you still need to write purgeable HTML when
using arbitrary values, and your classes need to exist as complete
strings for Tailwind to detect them correctly.
Don't use string concatenation to create class names --> <div className={mt-[${size === 'lg' ? '22px' : '17px' }]}></div>
Do dynamically select a complete class name --> <div className={ size === 'lg' ? 'mt-[22px]' : 'mt-[17px]' }></div>
Tailwind doesn’t include any sort of client-side runtime, so class
names need to be statically extractable at build-time, and can’t
depend on any sort of arbitrary dynamic values that change on the
client. Use inline styles for these situations, or combine Tailwind
with a CSS-in-JS library like Emotion if it makes sense for your
project.
As mentioned above tailwind engine In order to render a custom class dynamicaly:
Does not like:
className={`bg-[${custom-color}]-100`}
It expects:
const customBgColorLight = 'bg-custom-color-100';
className={`${customBgColorLight} .....`}
For this to work properly you have to include the name of the class in the safelist:[] in your tailwind.config.js.
For tailwind v.3
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
safelist: [
'bg-custom-color-500', // your-custom-css-class
'text-custom-color-500',
'border-custom-color-500',
..... // other classes
'hover:bg-custom-color-500', // *** also include it with the selector if needed ***
.... // other classes
],
theme: {
extend: {
colors: {
'custom-color': { // you have to use quotes if key is not in camelCase format
100: '#d6d6d6',
500: '#5E8EA2',
..... //other variants
},
...... // other colors
So you can use it:
// if you want store the values to an object
const yourClassObj = {
customBgColor: 'bg-custom-color-500',
customBrdColor: 'border-custom-color-500',
customTxtColor: 'text-custom-color-500',
};
const { customBgColor, customBrdColor, customTxtColor } = yourClassObj;
<YourComponent
className={`mb-2 font-semibold py-2 px-4 rounded-lg
${ conditionGoesHere ? `${customBgColor} text-white cursor-default`
: `${customTxtColor} border ${customBrdColor}
bg-transparent hover:border-transparent
hover:${customBgColor} hover:text-white`
}`}
/>
An easy solution is to use the built in style property.
For example in React:
Dont Use:
className={`bg-[${color}]`}
Use Instead:
style={{
backgroundColor: color,
}}
Am teaching myself React and am starting on testing. Using the recommended stuff from the docs... create-react-app, jest, testing-library/react. I have a component that renders a dynamic style, something like this
const ScalingDiv = (props) => (
<StyledDiv size={props.size || 42}>
<OtherEl>
{props.text}
</OtherEl>
</StyledDiv>
);
I would like to verify that my logic in there is working correctly (that 42 is used as a fallback size). I cannot find any examples or docs of this. I had hoped that something like this would work-
test('check fallback size', async () => {
const {container} = render(<ScalingDiv/>);
expect(container.firstChild).toHaveAttribute('size', 42);
});
But I haven't found any combination of matchers and queries that returns ANY attributes. Then I tried to just check the style directly using jest-dom, but toHaveStyle('this_isnt_valid_css: 199') passes- I couldn't stick anything in there to get it to fail. So... what is the right way to do this?
It's not attribute but prop. So we can refer to prop() and props() methods like
expect(container.firstChild.prop('size')).toEqual(42);
or
expect(container.firstChild.props()).toEqual({
size: 42
});
I am currently designing a table that was made with rc-table. I made the last row for actions which renders the buttons edit and delete. I want to edit it's style with Sass but I was unable to
I also specified classes for both the edit and delete button since they'll have different background-colors.
Is it possible to access it directly via a class? or is there another way which I don't know about.
for example if you have something like this in your code
this.columns = [
{
title: 'Operations', dataIndex: '', key: 'd', render: (text, record) =>
<a className="delete-btn" onClick={e => this.onDelete(record.key, e)} href="#">Delete</a>,
},
];
you can add class t the a element and the overwrite those styles with your CSS/SASS.
like this
.rc-table td {
background-color: 'red';
// custom styles here
}
notice the className attribute in a.
When creating wiki pages in Phabricator's Phriction, I would like to use images as links. So rather than using a normal, textual link like
[[ url | this is a link]]
I would like to use an image for the link
[[ url | {F4711} ]]
Unfortunately, Phabricator renders just the text {F4711} and not the image from the file F4711.
Is this possible with Remarkup?
Any workarounds?
I don't think it is possible in Remarkup. The official documentation doesn't mention a way to do it and I've never seen it done, unfortunately.
Maybe you can use {img https://cdn-images-1.medium.com/fit/c/72/72/1*ZroWAkaLZdsNIBOHSoez3g.jpeg}
Syntax is as follows:
{image <IMAGE_URL>}
Parameters are also supported, like:
{image uri=<IMAGE_URI>, width=500px, height=200px, alt=picture of a moose, href=google.com}
URLs without a protocol are not supported.
see more: https://secure.phabricator.com/D16597
You can add a patch in https://github.com/phacility/phabricator/blob/master/src/applications/files/markup/PhabricatorEmbedFileRemarkupRule.php#L169
like this:
$href = $file->getBestURI();
$sigil = 'lightboxable';
if (isset($options['href'])) {
$href = $options['href'];
$sigil = '';
}
$img = phutil_tag('img', $attrs);
$embed = javelin_tag(
'a',
array(
'href' => $href,
'class' => $image_class,
'sigil' => $sigil,
'meta' => array(
'phid' => $file->getPHID(),
'uri' => $file->getBestURI(),
'dUri' => $file->getDownloadURI(),
'viewable' => true,
'monogram' => $file->getMonogram(),
),
),
$img);
But in this case you cannot set the protocols:
{image uri=<IMAGE_URI>, width=500px, height=200px, alt=picture of a moose, href="//google.com"}
The reason is, phabricator renders first a a Tag with the url from the href attribiute and then the embed F Tag.
This question is similar to this one but different enough to make a new thread.
While working on angular 2 animations, I could not figure out how to access the colors variables that are located in [project]\src\theme\variable.scss.
Let's say [project]\src\theme\variable.scss has this on top:
$colors: (
primary: #387ef5,
secondary: #32db64,
...
);
Now in a Ionic 2/Angular 2 Component, in the #Component annotation, I have something like that:
animations: [
trigger('changeBackgroundColor', [
state('active', style({
backgroundColor: [Some statement to define the active color]
})),
state('inactive', style({
backgroundColor: '#32db64'
})),
transition('* => inactive', animate('800ms ease')),
transition('* => active', animate('800ms ease')),
transition('inactive=> active', animate('800ms ease')),
transition('active=> inactive', animate('800ms ease')),
]),
]
Now I have tried the following to set the backgroundColor in the field [Some statement to define color active]:
'#387ef5' => THIS WORKS;
'($colors,primary)' => DOES NOT WORK
'color($colors,primary)' =>DOES NOT WORK
'primary' => DOES NOT WORK
Everytime it does not work, it throws error: Failed to execute 'animate' on 'Element': Partial keyframes are not supported.;
I am surprised I could not access the variables in "variable.scss", because the statement to define the backgroundColor is embedded within a style({}) statement. And I imagined that whithin style({}) regular CSS could be used, contrary to the other topic I refer to, where the aim is to access the CSS values in TypeScript.
Has anyone an answer, or can enlighten me regarding this?
You cannot access SCSS variables in Javascript directly. Whenever you run your build process the SCSS scripts are compiled into CSS and the variables are not maintained but replaced with their actual value throughout the script.
If you want to access the values of the variables you could add invisible elements to the DOM which have a class, that makes their color a certain SCSS variable, for instance $primary, and then access those values in Javascript. But it's an ugly workaround.