How to use useCssVars method in Playwright Internal
Best JavaScript code snippet using playwright-internal
index.js
Source:index.js 
1const plugin = require('tailwindcss/plugin');2const gr = 1.61803398875; // The Golden Ratio3function getGolden(grPrefix, spacerBase, spacerUnit, useCssVars) {4 const base1 = spacerBase / gr / gr / gr / gr / gr;5 const base2 = spacerBase / gr / gr / gr / gr;6 const base3 = spacerBase / gr / gr / gr;7 const base4 = spacerBase / gr / gr;8 const base5 = spacerBase / gr;9 const base6 = spacerBase;10 const base7 = spacerBase * gr;11 const base8 = spacerBase * gr * gr;12 const base9 = spacerBase * gr * gr * gr;13 const base10 = spacerBase * gr * gr * gr * gr;14 const base11 = spacerBase * gr * gr * gr * gr * gr;15 const base = {16 gr1: `${base1}${spacerUnit}`, // 0.135269rem17 gr2: `${base2}${spacerUnit}`, // 0.218865rem18 gr3: `${base3}${spacerUnit}`, // 0.354124rem19 gr4: `${base4}${spacerUnit}`, // 0.572973rem20 gr5: `${base5}${spacerUnit}`, // 0.92707rem21 gr6: `${base6}${spacerUnit}`, // 1.5rem22 gr7: `${base7}${spacerUnit}`, // 2.427rem23 gr8: `${base8}${spacerUnit}`, // 3.92689rem24 gr9: `${base9}${spacerUnit}`, // 6.35371rem25 gr10: `${base10}${spacerUnit}`, // 10.2803rem26 gr11: `${base11}${spacerUnit}`, // 16.6335rem27 grHalf1: `${base1 / 2}${spacerUnit}`, // 0.0676345rem28 grHalf2: `${base2 / 2}${spacerUnit}`, // 0.1094325rem29 grHalf3: `${base3 / 2}${spacerUnit}`, // 0.177062rem30 grHalf4: `${base4 / 2}${spacerUnit}`, // 0.2864865rem31 grHalf5: `${base5 / 2}${spacerUnit}`, // 0.463535rem32 grHalf6: `${base6 / 2}${spacerUnit}`, // 0.75rem33 grHalf7: `${base7 / 2}${spacerUnit}`, // 1.2135rem34 grHalf8: `${base8 / 2}${spacerUnit}`, // 1.963445rem35 grHalf9: `${base9 / 2}${spacerUnit}`, // 3.176855rem36 grHalf10: `${base10 / 2}${spacerUnit}`, // 5.14015rem37 grHalf11: `${base11 / 2}${spacerUnit}`, // 8.31675rem38 grDouble1: `${base1 * 2}${spacerUnit}`, // 0.270538rem39 grDouble2: `${base2 * 2}${spacerUnit}`, // 0.43773rem40 grDouble3: `${base3 * 2}${spacerUnit}`, // 0.708248rem41 grDouble4: `${base4 * 2}${spacerUnit}`, // 1.145946rem42 grDouble5: `${base5 * 2}${spacerUnit}`, // 1.85414rem43 grDouble6: `${base6 * 2}${spacerUnit}`, // 3rem44 grDouble7: `${base7 * 2}${spacerUnit}`, // 4.854rem45 grDouble8: `${base8 * 2}${spacerUnit}`, // 7.85378rem46 grDouble9: `${base9 * 2}${spacerUnit}`, // 12.70742rem47 grDouble10: `${base10 * 2}${spacerUnit}`, // 20.5606rem48 grDouble11: `${base11 * 2}${spacerUnit}`, // 33.267rem49 };50 let golden = {51 base,52 values: {},53 };54 golden.values[`${grPrefix}1`] = useCssVars ? 'var(--golden-ratio-1)' : base.gr1;55 golden.values[`${grPrefix}2`] = useCssVars ? 'var(--golden-ratio-2)' : base.gr2;56 golden.values[`${grPrefix}3`] = useCssVars ? 'var(--golden-ratio-3)' : base.gr3;57 golden.values[`${grPrefix}4`] = useCssVars ? 'var(--golden-ratio-4)' : base.gr4;58 golden.values[`${grPrefix}5`] = useCssVars ? 'var(--golden-ratio-5)' : base.gr5;59 golden.values[`${grPrefix}6`] = useCssVars ? 'var(--golden-ratio-6)' : base.gr6;60 golden.values[`${grPrefix}7`] = useCssVars ? 'var(--golden-ratio-7)' : base.gr7;61 golden.values[`${grPrefix}8`] = useCssVars ? 'var(--golden-ratio-8)' : base.gr8;62 golden.values[`${grPrefix}9`] = useCssVars ? 'var(--golden-ratio-9)' : base.gr9;63 golden.values[`${grPrefix}10`] = useCssVars ? 'var(--golden-ratio-10)' : base.gr10;64 golden.values[`${grPrefix}11`] = useCssVars ? 'var(--golden-ratio-11)' : base.gr11;65 golden.values[`${grPrefix}half-1`] = useCssVars ? 'var(--golden-ratio-half-1)' : base.grHalf1;66 golden.values[`${grPrefix}half-2`] = useCssVars ? 'var(--golden-ratio-half-2)' : base.grHalf2;67 golden.values[`${grPrefix}half-3`] = useCssVars ? 'var(--golden-ratio-half-3)' : base.grHalf3;68 golden.values[`${grPrefix}half-4`] = useCssVars ? 'var(--golden-ratio-half-4)' : base.grHalf4;69 golden.values[`${grPrefix}half-5`] = useCssVars ? 'var(--golden-ratio-half-5)' : base.grHalf5;70 golden.values[`${grPrefix}half-6`] = useCssVars ? 'var(--golden-ratio-half-6)' : base.grHalf6;71 golden.values[`${grPrefix}half-7`] = useCssVars ? 'var(--golden-ratio-half-7)' : base.grHalf7;72 golden.values[`${grPrefix}half-8`] = useCssVars ? 'var(--golden-ratio-half-8)' : base.grHalf8;73 golden.values[`${grPrefix}half-9`] = useCssVars ? 'var(--golden-ratio-half-9)' : base.grHalf9;74 golden.values[`${grPrefix}half-10`] = useCssVars ? 'var(--golden-ratio-half-10)' : base.grHalf10;75 golden.values[`${grPrefix}half-11`] = useCssVars ? 'var(--golden-ratio-half-11)' : base.grHalf11;76 golden.values[`${grPrefix}double-1`] = useCssVars77 ? 'var(--golden-ratio-double-1)'78 : base.grDouble1;79 golden.values[`${grPrefix}double-2`] = useCssVars80 ? 'var(--golden-ratio-double-2)'81 : base.grDouble2;82 golden.values[`${grPrefix}double-3`] = useCssVars83 ? 'var(--golden-ratio-double-3)'84 : base.grDouble3;85 golden.values[`${grPrefix}double-4`] = useCssVars86 ? 'var(--golden-ratio-double-4)'87 : base.grDouble4;88 golden.values[`${grPrefix}double-5`] = useCssVars89 ? 'var(--golden-ratio-double-5)'90 : base.grDouble5;91 golden.values[`${grPrefix}double-6`] = useCssVars92 ? 'var(--golden-ratio-double-6)'93 : base.grDouble6;94 golden.values[`${grPrefix}double-7`] = useCssVars95 ? 'var(--golden-ratio-double-7)'96 : base.grDouble7;97 golden.values[`${grPrefix}double-8`] = useCssVars98 ? 'var(--golden-ratio-double-8)'99 : base.grDouble8;100 golden.values[`${grPrefix}double-9`] = useCssVars101 ? 'var(--golden-ratio-double-9)'102 : base.grDouble9;103 golden.values[`${grPrefix}double-10`] = useCssVars104 ? 'var(--golden-ratio-double-10)'105 : base.grDouble10;106 golden.values[`${grPrefix}double-11`] = useCssVars107 ? 'var(--golden-ratio-double-11)'108 : base.grDouble11;109 return golden;110}111const config = {112 scale: {113 'grp-1': `${1 / gr / gr / gr / gr / gr}`, // 0.0901792114 'grp-2': `${1 / gr / gr / gr / gr}`, // 0.14591115 'grp-3': `${1 / gr / gr / gr}`, // 0.236083116 'grp-4': `${1 / gr / gr}`, // 0.381982117 'grp-5': `${1 / gr}`, // 0.618047118 'grp-6': `${1}`, // 1119 'grp-7': `${1 * gr}`, // 1.61803398875120 'grp-8': `${1 * gr * gr}`, // 2.61798121 'grp-9': `${1 * gr * gr * gr}`, // 4.23589122 'grp-10': `${1 * gr * gr * gr * gr}`, // 6.85367123 'grp-11': `${1 * gr * gr * gr * gr * gr}`, // 11.0892124 },125 maxWidth: (theme) => ({126 ...theme('spacing'),127 }),128 maxHeight: (theme) => ({129 ...theme('spacing'),130 }),131 minWidth: (theme) => ({132 ...theme('spacing'),133 }),134 minHeight: (theme) => ({135 ...theme('spacing'),136 }),137 spacing: (theme) => {138 const prefix = theme('goldenRatio.prefix', false);139 const grPrefix = prefix ? (prefix === true ? 'gr-' : prefix) : '';140 const spacerUnit = theme('goldenRatio.spacerUnit', 'rem');141 const spacerBase = parseFloat(theme('goldenRatio.spacerBase', 1.5));142 const useCssVars = theme('goldenRatio.useCssVars', true);143 const golden = getGolden(grPrefix, spacerBase, spacerUnit, useCssVars);144 return {145 ...golden.values,146 'grp-1': `${100 / gr / gr / gr / gr / gr}%`, // 0.0901792147 'grp-2': `${100 / gr / gr / gr / gr}%`, // 0.14591148 'grp-3': `${100 / gr / gr / gr}%`, // 0.236083149 'grp-4': `${100 / gr / gr}%`, // 0.381982150 'grp-5': `${100 / gr}%`, // 0.618047151 'grp-6': `${100}%`, // 1152 'grp-7': `${100 * gr}%`, // 1.61803398875153 'grp-8': `${100 * gr * gr}%`, // 2.61798154 'grp-9': `${100 * gr * gr * gr}%`, // 4.23589155 'grp-10': `${100 * gr * gr * gr * gr}%`, // 6.85367156 'grp-11': `${100 * gr * gr * gr * gr * gr}%`, // 11.0892157 'grp-half-1': `${50 / gr / gr / gr / gr / gr}%`,158 'grp-half-2': `${50 / gr / gr / gr / gr}%`,159 'grp-half-3': `${50 / gr / gr / gr}%`,160 'grp-half-4': `${50 / gr / gr}%`,161 'grp-half-5': `${50 / gr}%`,162 'grp-half-6': `${50}%`,163 'grp-half-7': `${50 * gr}%`,164 'grp-half-8': `${50 * gr * gr}%`,165 'grp-half-9': `${50 * gr * gr * gr}%`,166 'grp-half-10': `${50 * gr * gr * gr * gr}%`,167 'grp-half-11': `${50 * gr * gr * gr * gr * gr}%`,168 'grp-double-1': `${200 / gr / gr / gr / gr / gr}%`,169 'grp-double-2': `${200 / gr / gr / gr / gr}%`,170 'grp-double-3': `${200 / gr / gr / gr}%`,171 'grp-double-4': `${200 / gr / gr}%`,172 'grp-double-5': `${200 / gr}%`,173 'grp-double-6': `${200}%`,174 'grp-double-7': `${200 * gr}%`,175 'grp-double-8': `${200 * gr * gr}%`,176 'grp-double-9': `${200 * gr * gr * gr}%`,177 'grp-double-10': `${200 * gr * gr * gr * gr}%`,178 'grp-double-11': `${200 * gr * gr * gr * gr * gr}%`,179 };180 },181 borderWidth: (theme) => {182 const prefix = theme('goldenRatio.prefix', false);183 const grPrefix = prefix ? (prefix === true ? 'gr-' : prefix) : '';184 const spacerUnit = theme('goldenRatio.spacerUnit', 'rem');185 const spacerBase = parseFloat(theme('goldenRatio.spacerBase', 1.5));186 const useCssVars = theme('goldenRatio.useCssVars', true);187 const golden = getGolden(grPrefix, spacerBase, spacerUnit, useCssVars);188 return {189 ...golden.values,190 };191 },192 lineHeight: (theme) => {193 const prefix = theme('goldenRatio.prefix', false);194 const grPrefix = prefix ? (prefix === true ? 'gr-' : prefix) : '';195 const spacerUnit = theme('goldenRatio.spacerUnit', 'rem');196 const spacerBase = parseFloat(theme('goldenRatio.spacerBase', 1.5));197 const useCssVars = theme('goldenRatio.useCssVars', true);198 const golden = getGolden(grPrefix, spacerBase, spacerUnit, useCssVars);199 return {200 ...golden.values,201 };202 },203 fontSize: (theme) => ({204 ...theme('spacing'),205 110: 1 / 1.1 + 'em',206 120: 1 / 1.2 + 'em',207 130: 1 / 1.3 + 'em',208 140: 1 / 1.4 + 'em',209 150: 1 / 1.5 + 'em',210 }),211 inset: (theme) => ({212 ...theme('spacing'),213 }),214};215module.exports = plugin(216 function ({ addComponents, theme }) {217 const prefix = theme('goldenRatio.prefix', false);218 const grPrefix = prefix ? (prefix === true ? 'gr-' : prefix) : '';219 const spacerUnit = theme('goldenRatio.spacerUnit', 'rem');220 const spacerBase = parseFloat(theme('goldenRatio.spacerBase', 1.5));221 const useCssVars = theme('goldenRatio.useCssVars', true);222 const golden = getGolden(grPrefix, spacerBase, spacerUnit, useCssVars);223 if (useCssVars) {224 addComponents({225 ':root': {226 '--gr': `${gr}`,227 '--golden-ratio': gr,228 '--golden-ratio-base': `${spacerBase}`,229 '--golden-ratio-unit': `1${spacerUnit}`,230 '--golden-ratio-1': golden.base.gr1,231 '--golden-ratio-2': golden.base.gr2,232 '--golden-ratio-3': golden.base.gr3,233 '--golden-ratio-4': golden.base.gr4,234 '--golden-ratio-5': golden.base.gr5,235 '--golden-ratio-6': golden.base.gr6,236 '--golden-ratio-7': golden.base.gr7,237 '--golden-ratio-8': golden.base.gr8,238 '--golden-ratio-9': golden.base.gr9,239 '--golden-ratio-10': golden.base.gr10,240 '--golden-ratio-11': golden.base.gr11,241 '--golden-ratio-half-1': golden.base.grHalf1,242 '--golden-ratio-half-2': golden.base.grHalf2,243 '--golden-ratio-half-3': golden.base.grHalf3,244 '--golden-ratio-half-4': golden.base.grHalf4,245 '--golden-ratio-half-5': golden.base.grHalf5,246 '--golden-ratio-half-6': golden.base.grHalf6,247 '--golden-ratio-half-7': golden.base.grHalf7,248 '--golden-ratio-half-8': golden.base.grHalf8,249 '--golden-ratio-half-9': golden.base.grHalf9,250 '--golden-ratio-half-10': golden.base.grHalf10,251 '--golden-ratio-half-11': golden.base.grHalf11,252 '--golden-ratio-double-1': golden.base.grDouble1,253 '--golden-ratio-double-2': golden.base.grDouble2,254 '--golden-ratio-double-3': golden.base.grDouble3,255 '--golden-ratio-double-4': golden.base.grDouble4,256 '--golden-ratio-double-5': golden.base.grDouble5,257 '--golden-ratio-double-6': golden.base.grDouble6,258 '--golden-ratio-double-7': golden.base.grDouble7,259 '--golden-ratio-double-8': golden.base.grDouble8,260 '--golden-ratio-double-9': golden.base.grDouble9,261 '--golden-ratio-double-10': golden.base.grDouble10,262 '--golden-ratio-double-11': golden.base.grDouble11,263 },264 });265 }266 },267 {268 theme: {269 extend: {270 ...config,271 },272 },273 },...
color_themes.js
Source:color_themes.js
1var useCssVars = false;2if (window.CSS && window.CSS.supports && window.CSS.supports('--test-var', 0)) {3 useCssVars = true;4 var link = document.createElement('link');5 link.rel = 'stylesheet';6 link.type = 'text/css';7 link.href = 'style.css';8 document.getElementsByTagName('head')[0].appendChild(link);9} else {10 less = {11 env: 'production',12 async: false,13 globalVars: {14 background: '#151515',15 foreground: '#BBB',16 links: '#8AF'17 }18 };19 var link = document.createElement('link');20 link.rel = 'stylesheet/less';21 link.type = 'text/css';22 link.href = 'style.less';23 document.getElementsByTagName('head')[0].appendChild(link);24 var script = document.createElement('script');25 script.src = '../less-2.7.1.min.js';26 script.type = 'text/javascript';27 document.getElementsByTagName('head')[0].appendChild(script);28}29document.addEventListener('DOMContentLoaded', function() {30 var themesTypesNames = [];31 themesTypesNames.push('ColorThemes');32 /*33 * Preset themes34 */35 var themes = [];36 themes.push({name: 'ColorThemes', values: [37 {name: 'dark', shownName: 'dark',38 values: {'@background': '#151515', '@foreground': '#BBBBBB',39 '@links': '#88AAFF'}},40 {name: 'light', shownName: 'light',41 values: {'@background': '#E8E8E8', '@foreground': '#000000',42 '@links': '#0000BB'}},43 {name: 'orange', shownName: 'orange',44 values: {'@background': '#FFBB15', '@foreground': '#0044FF',45 '@links': '#0000BB'}},46 {name: 'blue', shownName: 'blue',47 values: {'@background': '#4466FF', '@foreground': '#FFFFFF',48 '@links': '#0000BB'}},49 {name: 'red', shownName: 'red',50 values: {'@background': '#FF0000', '@foreground': '#FFDD66',51 '@links': '#0000BB'}},52 {name: 'pink', shownName: 'pink',53 values: {'@background': '#FFBBBB', '@foreground': '#000000',54 '@links': '#0000BB'}},55 {name: 'grey', shownName: 'grey',56 values: {'@background': '#AAAAAA', '@foreground': '#000000',57 '@links': '#0000BB'}},58 {name: 'sepia', shownName: 'sepia',59 values: {'@background': '#B8C898', '@foreground': '#000000',60 '@links': '#0000BB'}}],61 preview: {'this': 'background: @background; color: @foreground !important;',62 'label': 'color: @foreground !important;', 'a': 'color: @links;',63 'input:not(.color),.camaLessForm input[type="radio"] ~ label,button':64 'color: @foreground; background-color: @background; filter: brightness(0.8); border-color: @foreground;'}});65 var form = [document.getElementById('themes')];66 var quickPanel = document.getElementById('quickPanel');67 var almostOne = function() {68 alert('At least one theme must exist.');69 }70 var sameName = function(name) {71 alert('There are two or more themes with the same name: "' + name + '". Themes must have different names.');72 }73 var callbacks = [74 closeDialog75 ];76 var quickPanelSettingsAction = function() {77 $( "#dialog" ).dialog( "open" );78 };79 // Open DB and create form (the following calls are equivalent)80 //openCamaLessDb('BasicExample_camaLESSdb', less, themesTypesNames, themes, form, null, null, null, null, almostOne, sameName);81 initCamaLess({82 dbName: 'CSSVarsExample_camaLESSdb',83 less: less,84 types: themesTypesNames,85 presets: themes,86 forms: form,87 callbacks: callbacks,88 almostOneThemeCB: almostOne,89 sameNameThemesCB: sameName,90 quickPanel: quickPanel,91 quickPanelSettingsAction: quickPanelSettingsAction,92 useCssVars: useCssVars93 });...
config.js
Source:config.js
1const { path } = require('@vuepress/shared-utils')2require('@vuepress/theme-default')3module.exports = {4 title: 'Vue Use Utilities',5 description: 'A collection of Vue composition-api utilities',6 base: '/vue-use-utilities/',7 port: 4848,8 themeConfig: {9 sidebarDepth: 2,10 nav: [11 {12 text: 'Guide',13 link: '/guide/'14 },15 {16 text: 'Core',17 link: '/guide/core/useCssVars/'18 },19 {20 text: 'Vuex',21 link: '/guide/vuex/useVuex/'22 },23 {24 text: 'Axios',25 link: '/guide/axios/useAxios/'26 },27 {28 text: 'GitHub',29 link: 'https://github.com/vueblocks/vue-use-utilities'30 },31 ],32 sidebar: {33 '/guide/': [34 {35 title: 'Introduction',36 collapsable: false,37 children: ['']38 },39 {40 title: 'Core',41 collapsable: false,42 sidebarDepth: 1,43 children: [44 '/guide/core/useClipboard',45 '/guide/core/useColor',46 '/guide/core/useCssVars',47 '/guide/core/useDebouncedRef',48 '/guide/core/useElementSize',49 '/guide/core/useEventListener',50 '/guide/core/useFullscreen',51 '/guide/core/useInstance',52 '/guide/core/useMouse',53 '/guide/core/usePalette',54 '/guide/core/usePrecision',55 '/guide/core/useResizeEvent',56 '/guide/core/useResizeObserver',57 '/guide/core/useShortcut',58 '/guide/core/useStateshot',59 '/guide/core/useWindowSize',60 ]61 },62 {63 title: 'Vuex',64 collapsable: false,65 sidebarDepth: 1,66 children: [67 '/guide/vuex/useVuex',68 '/guide/vuex/useStore',69 '/guide/vuex/useState',70 '/guide/vuex/useGetters',71 '/guide/vuex/useActions',72 '/guide/vuex/useMutations',73 '/guide/vuex/namespacing'74 ]75 },76 {77 title: 'Axios',78 collapsable: false,79 sidebarDepth: 1,80 children: [81 '/guide/axios/useAxios',82 ]83 }84 ]85 }86 },87 markdown: {88 lineNumbers: true89 },90 alias: {91 '@': path.resolve(__dirname, '../.vuepress')92 },93 postcss: {94 plugins: [95 require('tailwindcss'),96 require('autoprefixer')97 ]98 }...
hooks.js
Source:hooks.js
...7 //8 // [Example]:9 //10 // - Initialise the hook:11 // const [ cssVars, setCssVars ] = useCssVars({ height: '10px' })12 //13 // - Update Variables (or append new ones):14 // useEffect(() => {15 // [...]16 // setCssVars({ height: '20px', width: '20px' })17 // })18 //19 // - Spread the style object:20 // <Component {...cssVars}/>21 //22 // That's equivalent to this:23 // => <Component style={{ '--height': '20px', '--width': '20px' }}/>24 const transformVars = (cssVars) => {25 // Transforms variables to the ugly `--variableName` format that CSS loves....
useCSSVars.test.js
Source:useCSSVars.test.js
1import React from 'react';2import sinon from 'sinon';3import {expect} from 'chai';4import {mount} from 'enzyme';5import useCSSVars from './useCSSVars';6const Comp = ({xref, foo, bar}) => {7 useCSSVars(xref, {foo, bar});8 return null;9};10describe('useCSSVars()', () => {11 let ref;12 beforeEach(() => {13 ref = {14 current: {15 style : {16 setProperty: sinon.spy(),17 removeProperty: sinon.spy(),18 },19 },20 };21 });22 it('Should set/remove CSS custom properties (variables)', () => {23 const wrapper = mount(<Comp xref={ref} foo={1} bar={1}/>);24 const {current:{style:{setProperty, removeProperty}}} = ref;25 expect(removeProperty.callCount).to.eql(0);26 expect(setProperty.callCount).to.eql(2);27 expect(setProperty.getCall(0).calledWith('--foo', 1)).to.be.true;28 expect(setProperty.getCall(1).calledWith('--bar', 1)).to.be.true;29 wrapper.setProps({ foo: undefined });30 expect(removeProperty.callCount).to.eql(1);31 expect(removeProperty.getCall(0).calledWith('--foo')).to.be.true;32 });...
CSSVars.jsx
Source:CSSVars.jsx
1import {useRef, createRef, Children, cloneElement} from 'react';2import {node} from 'prop-types';3import {useCSSVars} from 'hooks';4const CSSVars = ({children, ...props}) => {5 const refs = useRef([]);6 useCSSVars(refs, props);7 const withProps = Children.map(children, (child, i) => {8 // if child already has a ref, use it and don't create a new one9 refs.current[i] = child.ref10 ? child.ref11 : refs.current[i] ?? createRef();12 // for each child, add a "ref" prop or re-use existing one13 let p = {ref: refs.current[i]};14 // if the child is a "CSSVars" component, pass to it all the current15 // custom-proeprties props so they would be inherited16 if (child.type === CSSVars) {17 p = {...p, ...props, ...child.props};18 }19 return cloneElement(child, p)20 });21 return withProps;22};23CSSVars.propTypes = {24 children: node.isRequired,25};...
useCSSVars.jsx
Source:useCSSVars.jsx
1import {useEffect} from 'react';2export const applyCSSVars= (ref, props) =>3 Object.entries(props).forEach(([k, v]) => {4 const action = v == null ? 'remove' : 'set';5 ref?.current?.style[action + 'Property']('--' + k, v);6 })7/**8 * Applies CSS custom properties (variables) on a given element node9 * @param {Object} ref react ref10 * @param {Object} props key/value props to apply as CSS custom properties on the node ref11 */12const useCSSVars = (ref, props) => {13 useEffect(() => {14 if (Array.isArray(ref.current))15 ref.current.forEach(r => applyCSSVars(r, props));16 else17 applyCSSVars(ref, props);18 }, [props, ref]);19}...
useCSSVars.stories.js
Source:useCSSVars.stories.js
1import React, {useRef} from 'react';2import {storiesOf} from '@storybook/react';3import {story, readme} from 'storybook';4import * as knobs from '@storybook/addon-knobs';5import {useCSSVars} from '../';6import docs from './readme.md';7const stories = storiesOf('Hooks/Hooks', module).add('Readme', readme(docs));8stories.add('useCSSVars', story(docs, () => {9 const props = {10 withShadow: knobs.boolean('withShadow', false),11 size: knobs.number('size', undefined, {range: true, min: 12, max: 40, step: 1}),12 };13 const ref = useRef();14 useCSSVars(ref, props);15 return <div ref={ref}>Inspect this element while changing the story Knobs</div>;...
Using AI Code Generation
1const { useCssVars } = require('playwright/lib/server/cssCoverage');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 const css = 'body { color: var(--my-color); }';8 await useCssVars(page, css, { '--my-color': 'red' });9 await page.setContent(`<div>test</div>`);10 await page.screenshot({ path: 'example.png' });11 await browser.close();12})();13const { useCssVars } = require('playwright/lib/server/cssCoverage');14const { chromium } = require('playwright');15(async () => {16 const browser = await chromium.launch();17 const context = await browser.newContext();18 const page = await context.newPage();19 const css = 'body { color: var(--my-color); }';20 await useCssVars(page, css, { '--my-color': 'red' });21 await page.setContent(`<div>test</div>`);22 await page.screenshot({ path: 'example2.png' });23 await browser.close();24})();
Using AI Code Generation
1const { useCssVars } = require('playwright-core/lib/server/dom.js');2const { chromium } = require('playwright-core');3(async () => {4 const browser = await chromium.launch();5 const page = await browser.newPage();6 await page.waitForSelector('#iframeResult');7 const iframe = await page.frames()[1];8 const element = await iframe.$('body');9 useCssVars(element);10 const result = await iframe.evaluate(() => {11 return getComputedStyle(document.body).getPropertyValue('--main-color');12 });13 console.log(result);14 await browser.close();15})();16rgb(255, 0, 0)
Using AI Code Generation
1const { useCssVars } = require('playwright/lib/server/supplements/cssVars');2const { useCssVars } = require('playwright/lib/server/supplements/cssVars');3const { useCssVars } = require('playwright/lib/server/supplements/cssVars');4useCssVars(page, {5});6const { useCssVars } = require('playwright/lib/server/supplements/cssVars');7useCssVars(page, {8});9const { useCssVars } = require('playwright/lib/server/supplements/cssVars');10useCssVars(page, {11});12const { useCssVars } = require('playwright/lib/server/supplements/cssVars');13useCssVars(page, {14});15const { useCssVars } = require('playwright/lib/server/supplements/cssVars');16useCssVars(page, {17});18const { useCssVars } = require('playwright/lib/server/supplements/cssVars');19useCssVars(page, {20});21const { useCssVars } = require('playwright/lib/server/supplements/cssVars');22useCssVars(page, {23});
Using AI Code Generation
1const { useCssVars } = require('@playwright/test/lib/cssVars');2const { test } = require('@playwright/test');3test.use({4 async before({ page }) {5 await useCssVars(page);6 },7});8test('test', async ({ page }) => {9 const color = await page.evaluate(() => getComputedStyle(document.body).getPropertyValue('--color'));10 console.log('color', color);11});12:root {13 --color: rgb(255, 0, 0);14}15const { useCssVars } = require('@playwright/test/lib/cssVars');16const { test } = require('@playwright/test');17test.use({18 async before({ page }) {19 await useCssVars(page);20 },21});22test('test', async ({ page }) => {23 await page.setContent(`<style>${require('fs').readFileSync('./test.css', 'utf8')}</style>`);24 const color = await page.evaluate(() => getComputedStyle(document.body).getPropertyValue('--color'));25 console.log('color', color);26});
Using AI Code Generation
1const { useCssVars } = require('playwright/lib/internal/stylesheet');2const { useCssVars } = require('playwright/lib/internal/stylesheet');3const { useCssVars } = require('playwright/lib/internal/stylesheet');4const { useCssVars } = require('playwright/lib/internal/stylesheet');5const { useCssVars } = require('playwright/lib/internal/stylesheet');6const { useCssVars } = require('playwright/lib/internal/stylesheet');7const { useCssVars } = require('playwright/lib/internal/stylesheet');8const { useCssVars } = require('playwright/lib/internal/stylesheet');9const { useCssVars } = require('playwright/lib/internal/stylesheet');10const { useCssVars } = require('playwright/lib/internal/stylesheet');
Using AI Code Generation
1const { useCssVars } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await useCssVars(page, {7 });8 await page.setContent('<div style="color: var(--color); width: var(--size); height: var(--size);"></div>');9 await page.screenshot({ path: 'screenshot.png' });10 await browser.close();11})();12const { useCssVars } = require('playwright');13(async () => {14 const browser = await chromium.launch();15 const context = await browser.newContext();16 const page = await context.newPage();17 await useCssVars(page, {18 });19 await page.setContent('<div style="color: var(--color); width: var(--size); height: var(--size);"></div>');20 await page.screenshot({ path: 'screenshot.png' });21 await browser.close();22})();
Using AI Code Generation
1const {chromium, firefox, webkit} = require('playwright');2const { useCssVars } = require('playwright/lib/server/browserContext');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 await useCssVars(context, {7 });8 const page = await context.newPage();9 await page.screenshot({path: 'example.png'});10 await browser.close();11})();12const {chromium, firefox, webkit} = require('playwright');13const { useCssVars } = require('playwright/lib/server/browserContext');14(async () => {15 const browser = await chromium.launch();16 const context = await browser.newContext();17 await useCssVars(context, {18 });19 const page = await context.newPage();20 await page.screenshot({path: 'example.png'});21 await browser.close();22})();23const {chromium, firefox, webkit} = require('playwright');24const { useCssVars } = require('playwright/lib/server/browserContext');25(async () => {26 const browser = await chromium.launch();27 const context = await browser.newContext();28 await useCssVars(context, {29 });30 const page = await context.newPage();31 await page.screenshot({path: 'example.png'});32 await browser.close();33})();34const {chromium, firefox, webkit} = require('playwright');35const { useCssVars } = require('playwright/lib/server/browserContext');36(async () => {37 const browser = await chromium.launch();
Using AI Code Generation
1const { useCssVars } = require('playwright-internal');2useCssVars();3const { test, expect } = require('@playwright/test');4test('test', async ({ page }) => {5 await page.setContent(`6 :root {7 --color: #fff;8 }9 `);10 await page.evaluate(() => {11 document.querySelector('#content').style.setProperty('--color', 'red');12 });13 const color = await page.$eval('#content', e => e.style.getPropertyValue('--color'));14 expect(color).toBe('red');15});16useCssVars();17useCssVars();18getCSSVariableValue(selector, propertyName);19const { test, expect } = require('@playwright/test');20test('test', async ({ page }) => {21 await page.setContent(`22 :root {23 --color: #fff;24 }25 `);26 const color = await page.evaluate(() => getCSSVariableValue('#content', '--color'));27 expect(color).toBe('#fff');28});29setCSSVariableValue(selector, propertyName, value);30const { test, expect } = require('@playwright/test');31test('
Playwright tutorial
LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.
Chapters:
- What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
- How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
- Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
- What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
- Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
- Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
- Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
- Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
- Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
- Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
- Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
- Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.
Run Playwright Internal automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
