@teamteanpm2024/pariatur-fugit-atque

v1.0.5

Published

7 months ago

Downloads

0High
0Medium
0Low

shivamkalsi2024

ES2015 traverse collection.es6 touch es2016 property web callbind intrinsic password validator recursive Int16Array mocha rangeerror sqs hasOwn ajv form-validation rfc4122 packages dataView bootstrap css create .env superagent TypeScript promise nodejs ES6 utils es-abstract trimStart watchFile parser slot stylesheet throttle callbound every isConcatSpreadable crypt jsonpath uninstall ArrayBuffer.prototype.slice pose spring json-schema-validator description defineProperty bundler ecmascript getOwnPropertyDescriptor fast-copy call weakmap ECMAScript 2015 variables in css argument tools console time eslintconfig browserlist findLast link fastclone setter name compile less url limited shim Object.entries look-up less mixins deep-copy findLastIndex merge setImmediate log parse es8 ES2023 util.inspect 3d karma formatting dynamodb ES2019 arktype react-testing-library consume loading debugger walk invariant protobuf positive rds gdpr install guid check deepclone prune nested css crypto function settings queueMicrotask autoprefixer character bcrypt progress pretty datastructure class-validator aws extend cloudfront negative URL [[Prototype]]$.extend output Float64Array omit stateless preserve-symlinks TypedArray events vest typeof Iterator lazy matchAll match batch harmony ES2016 once deep-clone Object jwt symbol tacit Symbol protocol-buffers immer rm -fr array configurable byte cors color ECMAScript 2022 find buffer redux filter phone environment path autoscaling bundling busy iteration rmdir ECMAScript 2020 Object.fromEntries core xhr accessibility includes macos gestures extra tap picomatch concurrency Object.is circular types RegExp#flags keys offset lockfile eslint-plugin css glacier swf is trimEnd ArrayBuffer#slice option expression robust moment delete typedarray korean deepcopy cloudformation cloudsearch obj exit scheme-validation watch let react-hook-form middleware folder babel-core worker assertion has-own regexp valid performant amazon less styles estree compare auth ES7 trimRight real-time parsing a11y flag lesscss Promise style jsx number importexport parent directory iterate Observable walking gradients css form plugin _.extend deep byteLength fastcopy Stream typed popmotion length pyyaml ascii __proto__file system spec fast-deep-copy columns package manager Object.keys visual sanitization util cloudwatch Object.values make chinese values css less Push extension search mru internal exec config utility schema jasmine bdd Streams irq define rm minimal ES2020 drag import loadbalancing HyBi api banner pnpm9 compiler tostringtag fp css nesting arrays query redux-toolkit preprocessor inference Array.prototype.findLastIndex east-asian-width writable BigInt64Array async functional metadata prefix equal es-shim API which flat Array.prototype.flatten immutable regular ECMAScript 2017 -0 xss object jQuery toSorted browserslist npm wait animation encryption rm -rf ec2 redact getintrinsic toobject classname trim entries up mimetypes logger react-hooks spinner validation shell sham eventEmitter three readablestream value codes sigterm URLSearchParams hooks less css postcss-plugin iam serialize kinesis elb lint zero joi tty parents Uint8Array operating-system curried internal slot map dir forEach characters Object.assign handlers ESnext trimLeft higher-order Object.defineProperty postcss hash streams2 logging request @@toStringTag windows inspect regular expressions workflow module wordbreak framer command user-streams ReactiveX ES2022 l10n ajax WebSockets dataview weakset jest call-bound optimist dotenv node runtime typesafe string rapid ses stringifier promises connect CSSStyleDeclaration random typed array typeerror getopt error coercible ReactiveExtensions ansi flatMap take toStringTag language express spinners eslint electron WebSocket symlink make dir javascript var data column proxy typedarrays fantasy-land fast flatten from testing waf agent sort quote json classes Function.prototype.name io-ts react animation full-width json-schema-validation escape hardlinks WeakSet Array.prototype.filter sorted endpoint properties pipe sameValueZero chrome Float32Array modules browser open own emit sharedarraybuffer group argv ponyfill listeners ratelimit channel emoji copy Array jsdiff reduce xterm wget workspace:*styled-components fast-clone colors last censor findup write duplex Array.prototype.contains view concatMap readable eslintplugin getPrototypeOf ie styleguide yaml equality

UnMQ

UnMQ removes media queries from CSS while preserving rules that match a hard-coded viewport. This can be useful for outputting desktop CSS for older browsers like Internet Explorer 8.

/* before */

body {
    font-size: 12px;
}

@media screen and (max-width: 767px) {
    body {
        font-size: 16px;
    }
}

@media screen and (min-width: 768px) {
    body {
        color: #444;
    }
}

/* after */

body {
    font-size: 12px;
}

body {
    color: #444;
}

Usage

Add UnMQ to your build tool:

npm install @teamteanpm2024/pariatur-fugit-atque --save-dev

Node

require('@teamteanpm2024/pariatur-fugit-atque')({ /* options */ }).process(YOUR_CSS);

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Load UnMQ as a PostCSS plugin:

postcss([
    require('@teamteanpm2024/pariatur-fugit-atque')({ /* options */ })
]);

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Enable UnMQ within your Gulpfile:

var postcss = require('gulp-postcss');

gulp.task('css', function () {
    return gulp.src('./css/src/*.css').pipe(
        postcss([
            require('@teamteanpm2024/pariatur-fugit-atque')({ /* options */ })
        ])
    ).pipe(
        gulp.dest('./css')
    );
});

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Enable UnMQ within your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
    postcss: {
        options: {
            processors: [
                require('@teamteanpm2024/pariatur-fugit-atque')({ /* options */ })
            ]
        },
        dist: {
            src: 'css/*.css'
        }
    }
});

Options

You can define your own viewport for media queries to be evaluated against. Think of the options as the current state of a device and browser.

require('@teamteanpm2024/pariatur-fugit-atque')({
    // these are already the default options
    type: 'screen',
    width: 1024,
    height: 768,
    resolution: '1dppx',
    color: 3
})

If it’s not defined, device-width will be given the value of width, and device-height will be given the value of height. Similarly, aspect-ratio will be given the value of device-width divided by device-height.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme