pax_global_header00006660000000000000000000000064131104155250014507gustar00rootroot0000000000000052 comment=c791050af4e2dfccde7131d0d600dc62ff1cbd2f icss-utils-1.1.0/000077500000000000000000000000001311041552500136055ustar00rootroot00000000000000icss-utils-1.1.0/.babelrc000066400000000000000000000000441311041552500151760ustar00rootroot00000000000000{ "presets": [ "es2015" ] } icss-utils-1.1.0/.gitignore000066400000000000000000000000211311041552500155660ustar00rootroot00000000000000node_modules lib icss-utils-1.1.0/.npmignore000066400000000000000000000000361311041552500156030ustar00rootroot00000000000000src test .babelrc .travis.yml icss-utils-1.1.0/.travis.yml000066400000000000000000000002411311041552500157130ustar00rootroot00000000000000language: node_js node_js: - "4" - "6" - "node" script: npm run travis before_install: - '[ "${TRAVIS_NODE_VERSION}" != "0.10" ] || npm install -g npm' icss-utils-1.1.0/README.md000066400000000000000000000021161311041552500150640ustar00rootroot00000000000000[![Build Status](https://img.shields.io/travis/css-modules/icss-replace-symbols/master.svg?style=flat-square)]() # ICSS — Replace Symbols Governs the way tokens are searched & replaced during the linking stage of ICSS loading. This is broken into its own module in case the behaviour needs to be replicated in other PostCSS plugins (i.e. [CSS Modules Constants](https://github.com/css-modules/postcss-modules-constants)) ## API ```js import replaceSymbols from "icss-replace-symbols" replaceSymbols(css, translations) ``` Where: - `css` is the PostCSS tree you're working with - `translations` is an JS object of `symbol: "replacement"` pairs, where all occurrences of `symbol` are replaced with `replacement`. ## Behaviour A symbol is a string of alphanumeric, `-` or `_` characters. A replacement can be any string. They are replaced in the following places: - In the value of a declaration, i.e. `color: my_symbol;` or `box-shadow: 0 0 blur spread shadow-color` - In a media expression i.e. `@media small {}` or `@media screen and not-large {}` ## License ISC --- Glen Maddern, 2015. icss-utils-1.1.0/package.json000066400000000000000000000021031311041552500160670ustar00rootroot00000000000000{ "name": "icss-replace-symbols", "version": "1.1.0", "description": "Replacing symbols during the linking phase of ICSS", "main": "lib/index.js", "scripts": { "lint": "standard src test", "build": "babel --out-dir lib src", "autotest": "chokidar src test -c 'npm test'", "test": "mocha --compilers js:babel-register", "posttest": "npm run lint && npm run build", "travis": "npm run test", "prepublish": "npm run build" }, "repository": { "type": "git", "url": "git+https://github.com/css-modules/icss-replace-symbols.git" }, "keywords": [ "css", "modules", "icss", "postcss" ], "author": "Glen Maddern", "license": "ISC", "bugs": { "url": "https://github.com/css-modules/icss-replace-symbols/issues" }, "homepage": "https://github.com/css-modules/icss-replace-symbols#readme", "devDependencies": { "babel-cli": "^6.18.0", "babel-preset-es2015": "^6.18.0", "babel-register": "^6.18.0", "chokidar": "^1.3.0", "mocha": "^3.1.2", "postcss": "^6.0.1", "standard": "^8.4.0" } } icss-utils-1.1.0/src/000077500000000000000000000000001311041552500143745ustar00rootroot00000000000000icss-utils-1.1.0/src/index.js000066400000000000000000000011661311041552500160450ustar00rootroot00000000000000const matchConstName = /[$#]?[\w-\.]+/g export function replaceAll(replacements, text) { let matches while ((matches = matchConstName.exec(text))) { let replacement = replacements[matches[0]] if (replacement) { text = text.slice(0, matches.index) + replacement + text.slice(matchConstName.lastIndex) matchConstName.lastIndex -= matches[0].length - replacement.length } } return text } export default (css, translations) => { css.walkDecls(decl => decl.value = replaceAll(translations, decl.value)) css.walkAtRules('media', atRule => atRule.params = replaceAll(translations, atRule.params)) } icss-utils-1.1.0/test/000077500000000000000000000000001311041552500145645ustar00rootroot00000000000000icss-utils-1.1.0/test/index.js000066400000000000000000000052011311041552500162270ustar00rootroot00000000000000/* global describe, it */ import postcss from 'postcss' import assert from 'assert' import replaceSymbols from '../src' const test = (input, translations, expected) => { let processor = postcss([css => replaceSymbols(css, translations)]) assert.equal(processor.process(input).css, expected) } describe('replace-symbols', () => { it('should return empty CSS unchanged', () => { test('', {}, '') }) it('should not change unless there are translations', () => { test('.foo { color: red }', {}, '.foo { color: red }') }) it('should not change class names', () => { test('.foo { color: red }', {foo: 'bar'}, '.foo { color: red }') }) it('should not change property names', () => { test('.foo { color: red }', {color: 'background'}, '.foo { color: red }') }) it('should change declaration values', () => { test('.foo { color: red }', {red: 'blue'}, '.foo { color: blue }') }) it('should change symbols within declaration values', () => { test('.foo { box-shadow: 0 0 0 4px red }', {red: 'blue'}, '.foo { box-shadow: 0 0 0 4px blue }') }) it('should change multiple symbols within declaration values', () => { test('.foo { box-shadow: top left blur spread color }', {top: '1px', left: '2px', blur: '3px', spread: '4px', color: 'red'}, '.foo { box-shadow: 1px 2px 3px 4px red }') }) it('should change complex symbols, if you feel like trolling yourself', () => { test('.foo { box-shadow: 1px 0.5em 3px $sass-a #f00 }', {'1px': '1rem', '0.5em': '10px', '3px': '$sass-b', '$sass-a': '4px', '#f00': 'green' }, '.foo { box-shadow: 1rem 10px $sass-b 4px green }') }) it('should be able to rewrite variables', () => { test('.foo { color: var(--red) }', {'--red': '--blue' }, '.foo { color: var(--blue) }') }) it('should not replace half a variable', () => { test('.foo { color: colors.red; background: red.blue; }', {red: 'green', blue: 'white' }, '.foo { color: colors.red; background: red.blue; }') }) it('should not replace a replacement', () => { test('.foo { background: blue; color: red }', {red: 'blue', blue: 'green'}, '.foo { background: green; color: blue }') }) it('should not get trolled by me', () => { test('.foo { color: white }', {white: 'lightblue', blue: 'green'}, '.foo { color: lightblue }') test('.foo { color: white }', {white: 'light blue', blue: 'green'}, '.foo { color: light blue }') }) it('should change media queries', () => { test('@media small { .foo { color: red } }', {small: '(max-width: 599px)'}, '@media (max-width: 599px) { .foo { color: red } }') }) })